:root {
    /* Primary Purple Palette */
    --primary-purple: #7B1FA2;
    --secondary-purple: #9C27B0;
    --tertiary-purple: #4A148C;

    /* Text Colors */
    --primary-text: #F3E5F5;
    --secondary-text: #E1BEE7;
    --contrast-text: #FFFFFF;

    /* Backgrounds & Boxes */
    --background-gradient: linear-gradient(152deg, #4A148C 0%, #6A1B9A 50%, #4A148C 100%);
    --box-color: #6A1B9A;
    --box-shadow: 0vh 0vh 1.4815vh #7B1FA2;
    --box-border: 0.0926vh solid #E1BEE7;
    --settings-desc: rgba(255, 255, 255, 0.7);

    /* Buttons & Interactions */
    --button-bg: linear-gradient(90deg, #9C27B0 0%, #CE93D8 100%);
    --button-border: 0.0926vh solid #E1BEE7;
    --button-shadow: 0vh 0vh 0.3426vh #CE93D8;
    --button-hover: linear-gradient(90deg, #CE93D8 0%, #9C27B0 100%);
    --checkmark-bg: #9C27B0;
    --checkmark-checked-bg: #CE93D8;

    /* HUD Elements */
    --hud-bg: linear-gradient(90deg, rgba(156, 39, 176, 0.8) 0%, rgba(156, 39, 176, 0.4) 100%);
    --hud-border: 0.0926vh solid rgba(225, 190, 231, 0.5);
    --hud-box-color: #7B1FA2;
    --hud-box-shadow: drop-shadow(0 0 1vh #7B1FA2);

    /* Announcements */
    --announce-bg: linear-gradient(90deg, rgba(74, 20, 140, 0.49) 0%, rgba(74, 20, 140, 0.0) 100%);
    --announce-border: 0.1243vh solid #6A1B9A;
    --announce-bgeffect: #9C27B0;
    --announce-bgeffect-shadow: 0vh 0vh 0.3704vh #E1BEE7;
    --announce-line-active: #E1BEE7;
    --announce-imgbg: linear-gradient(90deg, #9C27B0 0%, #CE93D8 100%);
    --announce-imgbg-shadow: 0vh 0vh 0.3704vh 0vh #CE93D8;
    
    /* Notifications */
    --warning-notify-bg: linear-gradient(275deg, rgba(74, 20, 140, 0.0) -6.19%, rgba(156, 39, 176, 0.12) 109.79%);
    --warning-border: linear-gradient(to right, rgba(156, 39, 176, 0.5), rgba(156, 39, 176, 0)) 1;
    --warning-effect: #9C27B0;
    --warning-box-bg: radial-gradient(50% 50% at 50% 50%, #9C27B0 0%, #CE93D8 100%);
    --warning-box-shadow: 0vh 0vh 0.3704vh 0vh rgba(156, 39, 176, 0.45);
    --warning-line-active: #9C27B0;
    --info-bg: linear-gradient(275deg, rgba(74, 20, 140, 0.0) -6.19%, rgba(156, 39, 176, 0.12) 109.79%);
    --info-effect: #9C27B0;
    --info-border: linear-gradient(to right, rgba(156, 39, 176, 0.5), rgba(156, 39, 176, 0)) 1;

    /* Speedometer */
    --speedo-line: rgba(225, 190, 231, 0.25);
    --speedo-active: #CE93D8;
    --speedo-effect: #9C27B0;
    --speedo-shadow: drop-shadow(0 0 1vh #7B1FA2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
  
body {
    overflow: hidden;
}

.fadescreen {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.hudsettings {
    display: flex;
    position: absolute;
    border-radius: 1.1111vh;
    background: var(--background-gradient);
    border: var(--box-border);
    box-shadow: var(--box-shadow);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 39.8148vh;
    height: 54.1667vh;
}

.hudsettings_img {
    display: flex;
    position: absolute;
    width: 33.7963vh;
    height: 48.1481vh;
    left: 2.963vh;
    top: 2.963vh;
}

.settings_header {
    display: flex;
    position: absolute;
    width: 26.4815vh;
    height: 4.3519vh;
    top: 4.4444vh;
    left: 4.4444vh;
}

.settings_header img {
    display: flex;
    position: absolute;
    width: 4.3519vh;
    height: 4.3519vh;
    left: 0;
    top: 0;
}

.settings_text {
    display: flex;
    position: absolute;
    color: var(--secondary-purple);
    text-shadow: 0vh 0vh 1.4907vh rgba(206, 147, 216, 0.99);
    font-family: "SF Pro Display";
    font-size: 2.1845vh;
    font-style: normal;
    font-weight: 400;
    left: 5.7407vh;
    top: 0.0926vh;
}

.settings_text2 {
    display: flex;
    position: absolute;
    color: var(--contrast-text);
    text-shadow: 0vh 0vh 1.4907vh rgba(255, 255, 255, 0.99);
    font-family: "SF Pro Display";
    font-size: 2.1845vh;
    font-style: normal;
    font-weight: 400;
    top: 0.0926vh;
    left: 13.222vh;
}

.settings_description {
    display: flex;
    position: absolute;
    color: var(--settings-desc);
    font-family: "SF Pro Display";
    font-size: 1.3123vh;
    font-style: italic;
    font-weight: 600;
    top: 2.4398vh;
    left: 5.7407vh;
}

.settings_box1,
.settings_box2,
.settings_box3,
.settings_box4 {
    display: flex;
    position: absolute;
    width: 30.2778vh;
    height: 5.5556vh;
    border-radius: 0.1852vh;
    border: var(--box-border);
    background: var(--box-color);
    left: 4.8148vh;
    align-items: center;
}
.settings_box1 { top: 10.463vh; }
.settings_box2 { top: 17.037vh; }
.settings_box3 { top: 23.6111vh; }
.settings_box4 { top: 30.1852vh; }


.settings_box1_text,
.settings_box2_text,
.settings_box3_text,
.settings_box4_text {
    display: flex;
    position: absolute;
    color: var(--primary-text);
    font-family: "SF Pro Display";
    font-size: 1.5288vh;
    font-style: italic;
    font-weight: 500;
    left: 1.1111vh;
    top: 1.0185vh;
}

.settings_box1_desc,
.settings_box2_desc,
.settings_box3_desc,
.settings_box4_desc {
    display: flex;
    position: absolute;
    color: rgba(255, 255, 255, 0.52);
    font-family: "SF Pro Display";
    font-size: 1.3947vh;
    font-style: italic;
    font-weight: 500;
    left: 1.0185vh;
    top: 2.8704vh;
}

.settings_box1_button,
.settings_box1_button2 {
    display: flex;
    position: absolute;
    width: 2.7778vh;
    height: 2.7778vh;
    border-radius: 0.3704vh;
    border: var(--box-border);
    background: var(--button-bg);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    top: 1.3889vh;
}
.settings_box1_button { left: 17.3148vh; }
.settings_box1_button2 { left: 26.4815vh; }

.settings_box1_button:hover,
.settings_box1_button2:hover {
    transform: scale(1.05);
}

.box1_img, .box1_img2 {
    width: 1.9259vh;
    height: 1.9249vh;
}

.anzeige-varianten {
    display: flex;
    position: absolute;
    width: 5.463vh;
    height: 2.7778vh;
    border-radius: 0.3704vh;
    border: var(--box-border);
    background: var(--button-bg);
    left: 20.5556vh;
    top: 1.3889vh;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.varianten-text {
    display: flex;
    position: absolute;
    color: var(--primary-text);
    text-shadow: 0vh 0vh 0.3981vh rgba(255, 255, 255, 0.4);
    font-family: "SF Pro Display";
    font-size: 1.2842vh;
    font-style: italic;
    font-weight: 500;
    text-align: center;
}

.custom-checkbox {
    display: flex;
    position: absolute;
    top: 1.3889vh;
    left: 26.4815vh;
    align-items: center;
    cursor: pointer;
    font-family: "SF Pro Display";
    font-size: 1.5288vh;
    font-style: italic;
    color: var(--primary-text);
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-checkbox .checkmark {
    position: relative;
    width: 2.7778vh;
    height: 2.7778vh;
    border-radius: 0.2778vh;
    border: var(--box-border);
    background: var(--checkmark-bg);
}


.custom-checkbox:hover .checkmark {
    border-color: var(--secondary-purple);
}


.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--checkmark-checked-bg);
    border-color: var(--secondary-purple);
}


.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    background-image: url(../img/hakchen.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.custom-checkbox input:checked ~ .checkmark::after {
    display: block;
    left: 0.256vh;
    top: 0.1556vh;
    width: 2.156vh;
    height: 2.111vh;
}

.save_btn {
    display: flex;
    position: absolute;
    border-radius: 0.1852vh;
    border: var(--button-border);
    background: var(--button-bg);
    outline: none;
    width: 15.2778vh;
    height: 4.537vh;
    top: 45.5556vh;
    left: 4.0741vh;
    color: var(--contrast-text);
    font-family: "SF Pro Text";
    font-size: 1.1493vh;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.save_btn:hover {
    transform: scale(1.08);
    background: var(--button-hover);
}

.abr_btn {
    display: flex;
    position: absolute;
    border-radius: 0.1852vh;
    border: var(--button-border);
    background: var(--button-bg);
    outline: none;
    width: 15.2778vh;
    height: 4.537vh;
    top: 45.5556vh;
    left: 20.3704vh;
    color: var(--contrast-text);
    font-family: "SF Pro Text";
    font-size: 1.1493vh;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.abr_btn:hover {
    transform: scale(1.08);
    background: var(--button-hover);
}

.tophud {
    display: flex;
    position: absolute;
    width: 14.6296vh;
    height: 18.1481vh;
    top: 2.963vh;
    left: 161.4815vh;
}

.headtext {
    position: absolute;
    color: var(--primary-text);
    text-shadow: 0.1852vh 0.1852vh 0vh #000;
    font-family: SFPRODISPLAYBOLD;
    font-size: 2.536vh;
    font-style: italic;
    font-weight: 500;
    text-align: right;
    right: 0;
    width: 60vh;
}

.primary-text {
    color: var(--secondary-purple);
}

.secondary-text {
    color: var(--primary-text);
}

.id-box,
.funkbox,
.voice {
    display: flex;
    position: absolute;
    padding: 0.4vh;
    height: 2.5vh;
    border-radius: 0.463vh;
    border: var(--hud-border);
    align-items: center;
    transform: skew(-11deg);
    justify-content: flex-end;
    top: 3.8889vh;
}

.id-box {
    background: var(--hud-bg);
    justify-content: flex-end;
    right: 7vh;
    filter: var(--hud-box-shadow);
}

.idtext1 {
    color: var(--primary-text);
    font-family: SF Pro Display;
    font-size: 1.3vh;
    font-weight: 500;
    margin: 0.5vh;
    transform: skew(deg);
}

.idbg {
    width: 2.1222vh;
    height: 1.7296vh;
    background: var(--hud-box-color);
    border-radius: 0.3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.5vh;
    transform: skew(-1deg);
}

.idtext {
    color: var(--primary-text);
    font-family: SF Pro Display;
    font-size: 1.3vh;
    font-weight: 500;
    margin: 0;
}

.funkbox {
    width: 2.7778vh;
    height: 2.4692vh;
    left: 8.1481vh;
    top: 3.9815vh;
    justify-content: center;
    background: var(--hud-bg);
}

.funkbox img {
    width: 1.5741vh;
    height: 1.5741vh;
    opacity: 1.0;
}

.voice {
    width: 2.7778vh;
    height: 2.4692vh;
    left: 11.5741vh;
    top: 3.9815vh;
    justify-content: center;
    background: var(--hud-bg);
}

.voice img {
    width: 1.5741vh;
    height: 1.5741vh;
    opacity: 1.0;
    transition: box-shadow 0.1s ease;
}

.voice img.talking {
    filter: drop-shadow(0 0 10px var(--secondary-purple));
}

.geld,
.blackmoney {
    display: flex;
    position: absolute;
    width: 9.3519vh;
    height: 2.4692vh;
    justify-content: flex-end;
}
.geld {
    top: 8.5185vh;
    left: 7.2222vh;
}
.blackmoney {
    top: 12.037vh;
    left: 5vh;
}


.geldtext,
.blackmoneytext {
    display: flex;
    position: relative;
    color: var(--primary-text);
    font-family: "SF Pro Display";
    font-size: 1.5475vh;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    top: 0.2778vh;
}
.geldtext { margin-right: 3.5vh; }
.blackmoneytext { margin-right: 3.8vh; }


.geldbox,
.blackmoneybox {
    display: flex;
    position: absolute;
    width: 2.7778vh;
    height: 2.4692vh;
    border-radius: 0.463vh;
    border: var(--hud-border);
    transform: skew(-11deg);
    justify-content: center;
    align-items: center;
}
.geldbox { left: 4.3519vh; }
.blackmoneybox { left: 6.2741vh; }

.geldbox img {
    width: 1.5741vh;
    height: 1.5741vh;
    filter: drop-shadow(0 0 1vh var(--secondary-purple));
}

.blackmoneybox img {
    width: 1.5741vh;
    height: 1.5741vh;
    filter: drop-shadow(0 0 1vh var(--primary-purple));
}

.ammo {
    display: flex;
    align-items: center;
    position: absolute;
    padding: 0.4vh;
    height: 2.5vh;
    background: var(--hud-bg);
    border-radius: 0.463vh;
    border: var(--hud-border);
    transform: skew(-11deg) translateX(100%);
    justify-content: flex-start;
    width: fit-content;
    top: 15.463vh;
    right: 0.789vh;
    animation: slideLeft 0.25s forwards;
}

@keyframes slideLeft {
    0% {
        transform: skew(-11deg) translateX(100%);
        opacity: 0;
    }
    100% {
        transform: skew(-11deg) translateX(0);
        opacity: 1;
    }
}

.ammonumber {
    color: var(--primary-text);
    font-family: SF Pro Display;
    font-size: 1.3vh;
    font-weight: 500;
    margin: 0.5vh;
}

.ammo-box {
    width: 2.1222vh;
    height: 1.7296vh;
    background: var(--hud-box-color);
    border-radius: 0.3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.5vh;
    transform: skew(-1deg);
    filter: var(--hud-box-shadow);
}

.ammo-box img {
    width: 1.021vh;
    height: 1.021vh;
}

.killnotify {
    display: flex;
    position: absolute;
    width: 18.9815vh;
    height: 2.963vh;
    border-radius: 0.5556vh;
    background: rgba(0, 0, 0, 0.50);
    top: 25.8333vh;
    left: 156.8519vh;
}

.grüneffekt {
    display: flex;
    position: absolute;
    width: 0.2778vh;
    height: 1.2963vh;
    border-radius: 0.1389vh;
    background: var(--secondary-purple);
    box-shadow: 0vh 0vh 0.3704vh 0vh var(--secondary-purple);
    left: 0.2778vh;
    top: 0.8333vh;
}

.roteffekt {
    display: flex;
    position: absolute;
    width: 0.2778vh;
    height: 1.2963vh;
    border-radius: 0.1389vh;
    background: var(--primary-purple);
    box-shadow: 0vh 0vh 0.3704vh 0vh var(--primary-purple);
    left: 18.4259vh;
    top: 0.8333vh;
}

.enemy1,
.enemy2 {
    display: flex;
    position: absolute;
    color: var(--primary-text);
    text-shadow: 0vh 0vh 0.9259vh rgba(255, 255, 255, 0.50);
    font-family: "SF Pro Display";
    font-size: 1.2133vh;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.enemy1 { left: 1.3889vh; top: 0.7731vh; }
.enemy2 { left: 12.963vh; top: 0.7407vh; }

.killimg {
    display: flex;
    position: absolute;
    width: 2.0833vh;
    height: 1.6667vh;
    left: 8.0926vh;
    top: 0.8333vh;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.speedo {
    display: inline-flex;
    position: absolute;
    width: 19.0741vh;
    height: 11.1111vh;
    left: 152.3148vh;
    top: 85.2778vh;
    align-items: flex-start;
    animation: slideInFromRight 0.5s forwards;
}

.speedo.slide-out {
    animation: slideOutToRight 0.5s forwards;
}

.speedogeschwindigkeit {
    color: var(--primary-text);
    text-shadow: 0.0926vh 0.3704vh 0.0vh #000;
    font-family: Montserrat;
    font-size: 5.0645vh;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 0vh;
}

.speedoeinheit {
    color: var(--primary-text);
    text-shadow: 0.0926vh 0.2778vh 0vh rgba(0, 0, 0, 0.68);
    font-family: Montserrat;
    font-size: 1.0vh;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-left: 0.5vh;
    margin-top: 3.9vh;
}


.enginebox {
    display: flex;
    position: absolute;
    width: 5.5556vh;
    height: 2.963vh;
    border-radius: 0.469vh;
    border: var(--hud-border);
    left: 13.5185vh;
    top: 2.4074vh;
}

.enginebox img {
    width: 1.8522vh;
    height: 1.8522vh;
    margin-left: 0.3704vh;
    margin-top: 0.5778vh;
}

.enginetext {
    display: flex;
    position: absolute;
    left: 3.2185vh;
    top: 0.7307vh;
    color: var(--primary-text);
    text-align: center;
    font-family: Montserrat;
    font-size: 1.2799vh;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.0512vh;
}

.voiceunactive {
    display: flex;
    position: absolute;
    width: 2.5926vh;
    height: 0.2704vh;
    background: rgba(255, 255, 255, 0.2);
    top: 3vh;
    border-radius: 0.0926vh;
}

.voiceeffekt {
    display: flex;
    position: absolute;
    max-width: 2.5926vh;
    height: 0.2704vh;
    background: var(--secondary-purple);
    top: 3vh;
    transition: width 0.5s ease;
    left: 0;
}

.locked,
.motor,
.licht {
    display: flex;
    position: absolute;
    width: 2.9938vh;
    height: 2.9938vh;
    border-radius: 0.469vh;
    border: var(--hud-border);
    align-items: center;
    justify-content: center;
}
.locked { left: 0; }
.motor { left: 3.7963vh; }
.licht { left: 7.6852vh; }


.locked img,
.motor img,
.licht img {
    width: 1.7593vh;
    height: 1.567vh;
}

.lockedeffekt {
    display: flex;
    position: absolute;
    width: 2.4074vh;
    height: 0.1852vh;
    border-radius: 0.0463vh;
    background: var(--primary-purple);
    box-shadow: 0vh 0vh 0.3704vh 0vh var(--primary-purple);
    top: 3.5vh;
}

.motoreffekt {
    display: flex;
    position: absolute;
    width: 2.4074vh;
    height: 0.1852vh;
    border-radius: 0.0463vh;
    background: var(--secondary-purple);
    box-shadow: 0vh 0vh 0.2315vh 0vh var(--secondary-purple);
    top: 3.5vh;
}

.downspeedo-class {
    display: flex;
    position: absolute;
    width: 17.6852vh;
    height: 3.6111vh;
    top: 7.5vh;
    left: 0.2778vh;
}

.lichteffekt {
    display: flex;
    position: absolute;
    width: 2.4074vh;
    height: 0.1852vh;
    border-radius: 0.0463vh;
    background: var(--primary-purple);
    box-shadow: 0vh 0vh 0.1759vh 0vh var(--primary-purple);
    top: 3.5vh;
}

.tank {
    display: flex;
    position: absolute;
    width: 6.1111vh;
    height: 2.8704vh;
    border-radius: 0.469vh;
    border: var(--hud-border);
    align-items: center;
    justify-content: center;
    left: 11.8519vh;
    bottom: 0.6481vh;
}

.tank img {
    display: flex;
    position: absolute;
    width: 1.6667vh;
    height: 1.6667vh;
    left: 0.6481vh;
    top: 0.6481vh;
}

.tanktext {
    display: flex;
    position: absolute;
    color: var(--secondary-text);
    font-family: "SF Pro Text";
    font-size: 1.2673vh;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    left: 2.7778vh;
}

.speedoline {
    display: flex;
    position: absolute;
    width: 19.0741vh;
    height: 0.2778vh;
    border-radius: 0.1389vh;
    background: var(--speedo-line);
    top: 6.2037vh;
}

.speedoactive {
    display: flex;
    position: absolute;
    max-width: 19.0741vh;
    height: 0.2778vh;
    border-radius: 0.1389vh;
    background: var(--speedo-active);
}

.announcements-container {
    display: flex;
    position: relative;
    width: 48.9815vh;
    height: 9.8148vh;
    top: 4.0741vh;
    left: 65vh;
}

.announce {
    display: flex;
    position: absolute;
    width: 48.9815vh;
    height: 9.8148vh;
    border-radius: 0.7455vh;
    background: var(--announce-bg);
}

.announcebg {
    display: flex;
    position: absolute;
    width: 46.4815vh;
    height: 8.4259vh;
    border-radius: 0.1852vh;
    border: var(--announce-border);
    background: var(--announce-bg);
    top: 0.6481vh;
    left: 1.0185vh;
}

.bgeffekt {
    display: flex;
    position: absolute;
    width: 0.3704vh;
    height: 3.5185vh;
    background: var(--announce-bgeffect);
    box-shadow: var(--announce-bgeffect-shadow);
    left: -0.203vh;
    top: 2.5407vh;
}

.announceline {
    display: flex;
    position: absolute;
    width: 42.1296vh;
    height: 0.1852vh;
    background: rgba(255, 255, 255, 0.03);
    left: 1.7593vh;
    top: 4.552vh;
}

.announceline_active {
    display: flex;
    position: absolute;
    width: 19.9074vh;
    height: 0.1852vh;
    background: var(--announce-line-active);
}

.announcetext_desc {
    display: flex;
    position: absolute;
    color: var(--primary-text);
    font-family: "SF Pro Text";
    font-size: 1.4143vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 18vh;
    left: 5.463vh;
    top: -1.089vh;
}

.announcetext {
    display: flex;
    position: absolute;
    color: rgba(255, 255, 255, 0.46);
    font-family: "SF Pro Text";
    font-size: 0.95vh;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 38.2407vh;
    left: 5.4481vh;
    top: 1.026vh;
}

.announceimgbg {
    display: flex;
    position: absolute;
    width: 2vh;
    height: 2vh;
    border-radius: 0.3165vh;
    background: var(--announce-imgbg);
    box-shadow: var(--announce-imgbg-shadow);
    left: 1.6667vh;
    top: -0.704vh;
    justify-content: center;
    align-items: center;
}

.announceimgbg img {
    width: 1.8043vh;
    height: 1.8043vh;
}

.time {
    display: flex;
    position: absolute;
    width: 11.3889vh;
    height: 4.4585vh;
    top: 3.7037vh;
    left: 1.4815vh;
}

.timetext {
    display: flex;
    position: absolute;
    color: var(--primary-text);
    font-family: "SF Pro Display";
    font-size: 1.6667vh;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
    left: 2.7778vh;
    text-shadow: 0.1vh 0.1vh 0.0vh #000;
}

.timetext2 {
    display: flex;
    position: absolute;
    color: var(--primary-text);
    font-family: "SF Pro Display";
    font-size: 1.6667vh;
    font-style: italic;
    font-weight: 50;
    line-height: normal;
    left: 2.7778vh;
    top: 2.3148vh;
    text-shadow: 0.1vh 0.1vh 0.0vh #000;
}

.clock {
    display: flex;
    position: absolute;
    width: 1.9789vh;
    height: 1.9789vh;
    transform: skew(-9deg);
    filter: drop-shadow(0.2vh 0.2vh 0.3vh rgba(0, 0, 0, 0.5));
}

.calendar {
    display: flex;
    position: absolute;
    width: 1.9789vh;
    height: 1.9789vh;
    top: 2.2222vh;
    transform: skew(-9deg);
    filter: drop-shadow(0.2vh 0.2vh 0.3vh rgba(0, 0, 0, 0.5));
}

.notify {
    display: flex;
    position: absolute;
    width: 25.5556vh;
    height: 40.2037vh;
    top: 23.8889vh;
    left: 1.963vh;
    flex-direction: column;
    gap: 2.7778vh;
}

.warning-notify,
.info-notify {
    display: flex;
    position: relative;
    width: 25.3704vh;
    height: 7.4074vh;
    border-radius: 0.5556vh;
    background: var(--announce-bg);
    animation: NotifyEaseIn 0.8s ease;
}

.warning-notifybg,
.info-notifybg {
    display: flex;
    position: absolute;
    width: 24.0741vh;
    height: 6.4815vh;
    border-radius: 0.1852vh;
    border: 0.0926vh solid transparent;
    border-image: var(--warning-border);
    background: var(--warning-notify-bg);
    top: 0.463vh;
    left: 0.5556vh;
}

.warningeffekt,
.infoeffekt {
    display: flex;
    position: absolute;
    width: 0.1852vh;
    height: 2.8704vh;
    background: var(--warning-effect);
    top: 1.615vh;
    left: -0.13vh;
}

.warning-text,
.info-text {
    display: flex;
    position: absolute;
    color: rgba(255, 255, 255, 0.46);
    font-family: "SF Pro Text";
    font-size: 1.1002vh;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    top: 2.963vh;
    left: 4.8148vh;
}

.warning-title,
.info-title {
    display: flex;
    position: absolute;
    color: var(--primary-text);
    text-shadow: 0vh 0vh 0.3704vh rgba(255, 255, 255, 0.25);
    font-family: "SF Pro Text";
    font-size: 1.2462vh;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    top: 1.1111vh;
    left: 4.7222vh;
}

.warningbox,
.infobox {
    display: flex;
    position: absolute;
    width: 2.3148vh;
    height: 2.3148vh;
    border-radius: 0.2778vh;
    background: var(--warning-box-bg);
    box-shadow: var(--warning-box-shadow);
    top: 1.2037vh;
    left: 1.4815vh;
    align-items: center;
    justify-content: center;
}

.warningbox img,
.infobox img {
    display: flex;
    position: absolute;
    width: 1.7593vh;
    height: 1.7593vh;
}

.warningline,
.infoline {
    display: flex;
    position: absolute;
    width: 21.2037vh;
    height: 0.1852vh;
    background: rgba(255, 255, 255, 0.03);
    top: 5.1852vh;
    left: 1.4815vh;
}

.warningline_active,
.infoline_active {
    display: flex;
    position: absolute;
    max-width: 21.2037vh;
    height: 0.1852vh;
    background: var(--warning-line-active);
    box-shadow: 0vh 0vh 0.2778vh 0vh var(--warning-line-active);
}