:root{
    /* Main Colors */
    --main-clr: #00A3FF;
    --shadow-clr1: rgba(0, 163, 255, 0.40);
    --shadow-clr2: rgba(0, 163, 255, 0.45);
    --shadow-clr3: rgba(0, 163, 255, 0.35);

    /* BG Colors */
    --bg-clr1: rgba(0, 163, 255, 0.10);
    --bg-clr2: rgba(0, 163, 255, 0.15);
    --bg-clr3: rgba(0, 7, 11, 0.95);
    --bg-clr4: rgba(0, 163, 255, 0.15);
    --bg-clr5: rgba(0, 163, 255, 0.08);
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    user-select: none;  
}

body, html {
    height: 100%;
    width: 100%;
}

span {
    font-family: PFDinDisplayPro-Regular;
    text-shadow: 0vw 0vw 0.2083333333vw rgba(0, 0, 0, 0.25);
}

input {
    outline: none;
    border: none;
}

button {
    outline: none !important;
    border: none;
    cursor: pointer;
}

.form {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    min-height: 100vh;
    z-index: 1;
    overflow: hidden;
    /* background: gray; */
}

.server-info-box {
    position: absolute;
    display: flex;
    align-items: center;
    top: 1.5104166667vw;
    right: 1.25vw;
}

.column {
    display: flex;
    flex-direction: column;
}

.margin {
    align-items: flex-end;
    margin-right: 0.8333333333vw;
}

.project-name {
    font-size: 1.0416666667vw;
    letter-spacing: 0.06em;
    color: #FFFFFF;
}

.row {
    display: flex;
    align-items: center;
}

.info-txt {
    margin-top: 0.2083333333vw;
    font-size: 0.7291666667vw;
    color: rgba(255, 255, 255, 0.48);
}

.info-txt span:nth-child(2) {
    margin-left: 0.1041666667vw;
}

.info-txt span:nth-child(2), .info-txt span:nth-child(4) {
    color: #fff;
}

.info-txt img:nth-child(3) {
    width: 0.8333333333vw;
    height: 0.8333333333vw;
    margin: 0vw 0.2083333333vw 0vw 0.8333333333vw;
}

.server-info-shadow {
    position: absolute;
    width: 127.922%;
    height: 3.0208333333vw;
    background: rgba(0, 0, 0, 0.48);
    filter: blur(2.0833333333vw);
    left: -1.3541666667vw;
    z-index: -1;
}

.time-box {
    position: absolute;
    display: flex;
    align-items: center;
    top: 2.5vw;
    left: 1.6666666667vw;
    font-size: 0.8333333333vw;
}

.time-box img {
    width: 0.8854166667vw;
    height: 0.8854166667vw;
}

.time-box span:nth-child(2) {
    color: #fff;
    margin: 0vw 0.2083333333vw;
}

.time-box span:nth-child(3) {
    color: rgba(255, 255, 255, 0.48);
}

.time-box-shadow {
    position: absolute;
    width: 137.87%;
    height: 1.71875vw;
    left: -1.25vw;
    background: rgba(0, 0, 0, 0.64);
    filter: blur(2.0833333333vw);
    z-index: -1;
}

.ammo-box {
    position: absolute;
    display: flex;
    align-items: center;
    top: 6.09375vw;
    right: 1.25vw;
    font-size: 1.0416666667vw;
    color: #FFFFFF;
}

.ammo-box img {
    width: 1.0416666667vw;
    height: 1.0416666667vw;
    opacity: 0.48;
    margin-right: 0.4166666667vw;
}

.ammo-box span:nth-child(3) {
    margin-left: 0.0520833333vw;
    opacity: 0.48;
}

.ammo-box-shadow {
    position: absolute;
    width: 7.03125vw;
    height: 1.5625vw;
    left: -1.25vw;
    background: rgba(0, 0, 0, 0.64);
    filter: blur(2.0833333333vw);
    z-index: -1;
}

.wallet-box {
    position: absolute;
    display: flex;
    align-items: center;
    left: 17.1354166667vw;
    bottom: 1.6145833333vw;
}

.left {
    align-items: flex-start;
    margin-left: 0.4166666667vw;
    font-size: 0.8333333333vw;
}

.left span:first-child {
    color: #FFFFFF;
    opacity: 0.48;
}

.left span:last-child {
    color: #fff;
}

.fraction-shadow {
    position: absolute;
    width: 113%;
    height: 2.5vw;
    left: -1.25vw;
    background: rgba(0, 0, 0, 0.72);
    filter: blur(2.5vw);
    z-index: -1;
}

.money {
    margin-top: 0.625vw;
}

.money img {
    width: 1.25vw;
    height: 1.25vw;
}

.money span {
    margin-left: 0.625vw;
    color: #FFFFFF;
}

.money-shadow {
    position: absolute;
    width: 122.23%;
    height: 3.9583333333vw;
    background: rgba(0, 0, 0, 0.64);
    filter: blur(3.3333333333vw);
    bottom: -0.4166666667vw;
    left: -1.25vw;
    z-index: -1;
}

.mic-box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    bottom: 0.8333333333vw;
    background: rgba(21, 22, 31, 0.48);
    border-radius: 2.6041666667vw;
}

.mic-box img {
    width: 1.25vw;
    height: 1.25vw;
}

.scoreboard-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 19.21875vw;
    height: 12.34375vw;
    padding: 1.6666666667vw;
    background: rgba(21, 22, 31, 0.8);
    box-shadow: 0vw 0.2083333333vw 0.2083333333vw rgba(0, 0, 0, 0.25);
    border-radius: 0.4166666667vw;
}

.stats {
    align-items: center;
}

.stats img {
    width: 1.6666666667vw;
    height: 1.6666666667vw;
    opacity: 0.48;
}

.stats span:nth-child(2) {
    margin-top: 0.2083333333vw;
    color: rgba(255, 255, 255, 0.48);
}

.stats span:nth-child(3) {
    margin-top: 0.625vw;
    color: #FFFFFF;
}	

.row .stats:nth-child(2) {
    margin: 0vw 2.34375vw 0vw 2.9166666667vw;
}

.scoreboard-box .row {
    margin-top: 1.6666666667vw;
}

.settings-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Montserrat-Bold;
    padding: 2.0833333333vw 2.6041666667vw 1.25vw 2.6041666667vw;
    background: rgba(21, 22, 31, 0.8);
    border-radius: 0.625vw;
}

.settings-container span:nth-child(2) {
    font-family: PFDinDisplayPro-Medium;;
    font-size: 1.25vw;
    text-align: center;
    color: #fff;
}

.settings-box {
    display: flex;
    flex-direction: column;
    width: 26.0416666667vw;
    margin-top: 1.6666666667vw;
}

.settings-box .parameter:first-child {
    margin-top: 0vw;
}

.parameter {
    position: relative;
    display: flex;
    align-items: center;
    width: 26.0416666667vw;
    height: 2.6041666667vw;
    margin-top: 0.5729166667vw;
    padding: 0.78125vw 1.25vw;
    border-radius: 0.4166666667vw;
    background: rgba(255,255,255, 0.08);
}

.settings-box .parameter:first-child {
    margin-top: 0vw;
}

.parameter span {
    font-size: 0.8333333333vw;
    color: #fff;
}

.switch{
    position: absolute;
    right: 1.25vw;
}

input[type="checkbox"]{
    position: relative;
    width: 2.1875vw;
    height: 1.1458333333vw;
    -webkit-appearance: none;
    outline: none;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 2.6041666667vw;
    transition: 0.5s;
    box-shadow: inset 0 0 0.2083333333vw rgba(0,0,0,0.25); 
}

input:checked[type="checkbox"]{
    background: rgba(47, 201, 114, 0.65);
}

input[type="checkbox"]:before{
    content: '';
    position: absolute;
    width: 0.9375vw;
    height: 0.9375vw;
    border-radius: 100%;
    top: 0.1041666667vw;
    left: 0.15625vw;
    background: rgba(255, 255, 255, 1);
    transition: .5s;
}

input:checked[type="checkbox"]::before{
    left: 1.09375vw;
}

.setting-img {
    width: 2.8125vw;
    height: 2.8125vw;
    margin-top: 1.6666666667vw;
}

.close-img {
    position: absolute;
    width: 1.0416666667vw;
    height: 1.0416666667vw;
    top: 1.25vw;
    right: 1.25vw;
    opacity: 0.25;
    transition: all 0.25s ease;
}

.close-img:hover {
    opacity: 0.9;
}

.speedometer-box {
    position: absolute;
    bottom: 1.1979166667vw;
    right: 0vw;
}

.speedometer-box svg {
    width: 13.0208333333vw;
    height: 13.0208333333vw;
}

svg {
    width: 13.0208333333vw;
    height: 13.0208333333vw;
}

#speedometer-bar-main-background {
    fill: none;
    stroke: rgba(21, 22, 31, 0.32);
    stroke-width: 52px;
    transform-origin: center;
    transform: rotate(180deg);
    stroke-dasharray: 471.2388;
    stroke-dashoffset: 235.6194;
}

#speedometer-bar-background {
    fill: none;
    stroke: rgba(21, 22, 31, 0.8);
    stroke-width: 5px;
    transform-origin: center;
    transform: rotate(180deg);
    stroke-dasharray: 618.8937;
    stroke-dashoffset: 309.4468;
}

#speedometer-bar-center-background {
    fill: none;
    stroke: rgba(21, 22, 31, 0.48);
    stroke-width: 1px;
    transform-origin: center;
    transform: rotate(180deg);
    stroke-dasharray: 311.0176;
    stroke-dashoffset: 155.5088;
}

#arrow {
    fill: none;
    stroke: #07aadc;
    stroke-width: 45px;
    transform-origin: center;
    stroke-dasharray: 6, 471.2388;
    stroke-dashoffset: -155;
    transform: rotate(58deg);
}

.speed-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 4.6875vw;
    left: 5vw;
    font-family: PFDinDisplayPro-Medium;
    font-size: 2.0833333333vw;
    color: #FFFFFF;
    text-shadow: 0vw 0vw 0.2083333333vw rgba(0, 0, 0, 0.25);
}

.speed-numbers {
    display: flex;
}

.speed-numbers .number {
    color: rgba(255, 255, 255, 1);
}

.speed-numbers .number.dimmed {
    color: rgba(255, 255, 255, 0.4);
}

.km-h {
    font-size: 0.625vw;
    margin-bottom: -0.2083333333vw;
}

#fuel-bar-background {
    fill: none;
    stroke: rgba(21, 22, 31, 0.56);
    stroke-width: 7px;
    transform-origin: center;
    transform: rotate(116deg);
    stroke-dasharray: 618.8937;
    stroke-dashoffset: 526.0597;
    stroke-linecap: round;
}

#fuel-bar-progress {
    fill: none;
    stroke: #DC8620;
    stroke-width: 7px;
    transform-origin: center;
    transform: rotate(116deg);
    stroke-dasharray: 618.8937;
    stroke-dashoffset: 618.8937;
    stroke-linecap: round;
}

#engine-bar-background {
    fill: none;
    stroke: rgba(21, 22, 31, 0.56);
    stroke-width: 7px;
    transform-origin: center;
    transform: rotate(10deg);
    stroke-dasharray: 618.8937;
    stroke-dashoffset: 526.0597;
    stroke-linecap: round;
}

#engine-bar-progress {
    fill: none;
    stroke: #07aadc;
    stroke-width: 7px;
    transform-origin: center;
    transform: rotate(63.8deg);
    stroke-dasharray: 618.8937;
    stroke-dashoffset: 618.8937;
    stroke-linecap: round;
}

.icons-row {
    position: absolute;
    display: flex;
    align-items: center;
    top: 8.0729166667vw;
    left: 4.4270833333vw;
}

.icons-row img {
    width: 0.8333333333vw;
    height: 0.8333333333vw;
}

.icons-row img:nth-child(2) {
    margin: 0.5208333333vw 0.8333333333vw 0vw 0.8333333333vw;
}

.icons-bottom {
    position: absolute;
    display: flex;
    align-items: center;
    left: 4.84375vw;
    bottom: 1.40625vw;
}

.img-icon {
    width: 0.8333333333vw;
    height: 0.8333333333vw;
    opacity: 0.48;
}

.icons-bottom img:nth-child(2) {
    margin-left: 1.7708333333vw;
}

.icons-bottom img {
    opacity: 1;
}

.speedometer-shadow {
    position: absolute;
    width: 13.0208333333vw;
    height: 13.0208333333vw;
    background: rgba(0, 0, 0, 0.8);
    filter: blur(5.4166666667vw);
    z-index: -1;
}

.icon-active {
    opacity: 1;
    filter: drop-shadow(0vw 0vw 0.4166666667vw rgba(255, 255, 255, 0.3));
}

.notify-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 38.5416666667vw;
    width: 14.1145833333vw;
    left: 1.5104166667vw;
    bottom: 13.875vw;
    transition: all 0.35s ease;
}

.notify-info, .notify-warning, .notify-error, .notify-success {
    position: relative;
    display: flex;
    align-items: center;
    width: 14.1145833333vw;
    min-height: 3.6458333333vw;
    border-radius: 0.625vw;
    background: rgba(21, 22, 31, 0.75);
    margin-top: 0.4166666667vw;
    padding: 0.9375vw 1.0416666667vw;
    opacity: 0;
    transform: translateX(-5.2083333333vw);
    transition: all 0.45s ease;
    animation: showNotification 0.45s ease forwards;
}

.notify-info img, .notify-warning img, .notify-error img, .notify-success img {
    width: 1.25vw;
    height: 1.25vw;
    opacity: 1;
    filter: drop-shadow(0vw 0vw 0.2083333333vw rgba(255, 255, 255, 0.1));
}

.text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 9.6875vw;
    margin-left: 0.5208333333vw;
}

.text-box span:first-child{
    font-family: Montserrat-Medium;
    font-size: 0.7291666667vw;
}

.notify-info .text-box span:nth-child(1) {
    color: #F1C40F;
    text-shadow: 0vw 0.2083333333vw 0.2083333333vw rgba(241, 196, 15, 0.25);
}

.text-box span:nth-child(2) {
    font-family: Montserrat-Regular;
    font-size: 0.625vw;
    margin-top: 0.1041666667vw;
    color: rgba(255, 255, 255, 0.6);
}

.timer-box {
    position: absolute;
    width: 11.6145833333vw;
    height: 0.2083333333vw;
    bottom: 0vw;
    left: 1.25vw;
}

.bg-timer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.2604166667vw;
}

.timer {
    position: absolute;
    width: 0%;
    height: 100%;
    bottom: 0vw;
    background: #F1C40F;
    border-radius: 0.2604166667vw;
}

.notify:first-child {
    margin: 0vw;
}

.notify-warning .text-box span:nth-child(1) {
    color: #FC6621;
    text-shadow: 0vw 0.2083333333vw 0.2083333333vw rgba(252, 102, 33, 0.25);
}

.notify-warning .timer {
    background: #FC6621;
}

.notify-error .text-box span:nth-child(1) {
    color: #F9320C;
    text-shadow: 0vw 0.2083333333vw 0.2083333333vw rgba(249, 50, 12, 0.25);
}

.notify-error .timer {
    background: #F9320C;
}

.notify-success .text-box span:nth-child(1) {
    color: #00A03E;
    text-shadow: 0vw 0.2083333333vw 0.2083333333vw rgba(0, 160, 62, 0.25);
}

.notify-success .timer {
    background: #00A03E;
}

.announce {
    position: absolute;
    display: flex;
    align-items: center;
    max-width: 26.0416666667vw;
    min-height: 4.7916666667vw;
    padding: 1.3541666667vw 2.5vw;
    top: 2.3958333333vw;
    border-radius: 0.625vw;
    background: rgba(21, 22, 31, 0.75);
}

.announce img {
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    filter: drop-shadow(0vw 0vw 0.2083333333vw rgba(255, 255, 255, 0.25));
}

.announce span:nth-child(1) {
    font-family: Montserrat-Bold;
    font-size: 0.8333333333vw;
    color: rgba(255, 255, 255, 0.9);
}

.announce span:nth-child(2) {
    font-family: Montserrat-Bold;
    font-size: 0.8333333333vw;
    margin-left: 0.2604166667vw;
    color: #07aadc;
}

.announce-progress-line {
    position: absolute;
    width: calc(100% - 5vw);
    height: 0.2083333333vw;
    bottom: 0vw;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.2604166667vw;
}

.announce-progress {
    position: absolute;
    height: 100%;
    width: 0%;
    left: 0vw;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.2604166667vw;
}

.announce-text-box {
    margin-left: 0.8333333333vw;
}

@keyframes showNotification {
    to {
        opacity: 1;
        transform:translateX(0vw)
    }
}

@keyframes hideNotification {
    from{
        opacity: 1;
        transform:translateX(0vw)
    }
    to {
        opacity: 0;
        transform:translateX(-5.2083333333vw)
    }
}

.showNotify{
    animation: showNotification .45s ease forwards;
}

.hideNotify{
    animation: hideNotification .45s;
}

.helpnotify-flex{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 6%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.6481vh;
animation: .5s helpnotifyfadeIn ease-in-out;
}

@keyframes helpnotifyfadeIn {
from{
    margin-bottom: -3vh;
    opacity: 0;
}
to{
    margin-bottom: 0vh;
    opacity: 1;
}
}

/* @keyframes helpnotifyfadeOut {
from{
    margin-bottom: 0vh;
    opacity: 1;
}
to{
    margin-bottom: -3vh;
    opacity: 0;
}
} */


.box-helpnotify-letter{
display: flex;
width: 3.1481vh;
height: 3.1481vh;
flex-direction: column;
justify-content: center;
align-items: center;
background: radial-gradient(55.14% 69.51% at 50% 50%, rgba(0, 163, 255, 0.15) 0%, rgba(0, 163, 255, 0.00) 100%), rgba(0, 7, 11, 0.95);
}

.letter{
color: #00A3FF;
text-shadow: 0vh 0vh 1.2037vh rgba(0, 7, 11, 0.95);
font-family: Montserrat-Bold;
font-size: 1.3889vh;
}

.helpnotify-txt{
color: #FFF;
font-family: Montserrat-Bold;
font-size: 1.3889vh;
text-align: center;
max-width: 20.5556vh;
}

.progressbar-flex{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2%;
display: inline-flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 0.5556vh;
animation: .5s progressbarfadeIn ease-in-out;
}

@keyframes progressbarfadeIn {
from{
    margin-bottom: -3vh;
    opacity: 0;
}
to{
    margin-bottom: 0vh;
    opacity: 1;
}
}

.progressbar-header-flex{
display: flex;
width: 29.9074vh;
justify-content: space-between;
align-items: center;
}

.progressbar-action{
color: rgba(255, 255, 255, 0.75);
font-family: Montserrat-Bold;
font-size: 1.2963vh;
}

.progressbar-percent-flex{
display: flex;
}

.percent{
color: #FFF;
font-family: Montserrat-Bold;
font-size: 1.2963vh;
letter-spacing: 0.1296vh;
}

.percent-sign{
color: #00A3FF;
font-family: Montserrat-Bold;
font-size: 1.2963vh;
letter-spacing: 0.1296vh;
}

.box-progressbar{
display: flex;
width: 29.9074vh;
height: 1.7593vh;
justify-content: center;
align-items: center;
background: radial-gradient(55.14% 69.51% at 50% 50%, rgba(0, 163, 255, 0.15) 0%, rgba(0, 163, 255, 0.00) 100%), rgba(0, 7, 11, 0.95);
}

.progressbar{
display: flex;
width: 28.8889vh;
height: 0.463vh;
align-items: center;
flex-shrink: 0;
background: rgba(0, 163, 255, 0.40);
}

.progressbar-progress{
height: 0.463vh;
background: #00A3FF;
width: 0%;
box-shadow: 0vh 0vh 1.8519vh 0vh rgba(0, 163, 255, 0.45);
/* animation: 3s progressbaranim ease-in-out; */
}

@keyframes progressbaranim {
from{
    width: 0%;
}
to{
    width: 100%;
}
}

.eat-drink-flex{
    position: absolute;
    bottom: 20.3%;
    left: 2%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1.7593vh;
}

.drink-flex{
    display: flex;
}

.box-drink-icn{
    display: flex;
    width: 3.0556vh;
    height: 3.0556vh;
    justify-content: center;
    align-items: center;
    gap: 0.9259vh;
    flex-shrink: 0;
    background: radial-gradient(55.14% 69.51% at 50% 50%, rgba(47, 170, 223, 0.08) 0%, rgba(47, 170, 223, 0.00) 100%), rgba(3, 11, 14, 0.95);
}

.drink-icn{
    width: 1.1034vh;
    height: 1.2037vh;
    flex-shrink: 0;
    filter: drop-shadow(0vh 0vh 1.3889vh var(--shadow-clr2));
}

.box-drink{
    display: flex;
    width: 7.8vh;
    height: 3.0556vh;
    align-items: center;
    gap: 0.463vh;
    background: rgba(4, 14, 18, 0.63);
}

.drink-ranges-flex{
    display: flex;
    height: 1.9444vh;
    align-items: center;
    gap: 0.2778vh;
    margin-left: 0.463vh;
}

.drink-range1{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 163, 255, 0.20);
    opacity: .45;
}

.drink-innerrange1{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #2FAADF;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(47, 170, 223, 0.75);
}

.drink-range2{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 163, 255, 0.20);
    opacity: .45;
}

.drink-innerrange2{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #2FAADF;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(47, 170, 223, 0.75);
}

.drink-range3{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 163, 255, 0.20);
    opacity: .45;
}

.drink-innerrange3{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #2FAADF;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(47, 170, 223, 0.75);
}

.drink-range4{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 163, 255, 0.20);
    opacity: .45;
}

.drink-innerrange4{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #2FAADF;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(47, 170, 223, 0.75);
}

.drink-range5{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 163, 255, 0.20);
    opacity: .45;
}

.drink-innerrange5{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #2FAADF;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(47, 170, 223, 0.75);
}

.drink-active{
    opacity: 1;
}

.eat-flex{
    display: flex;
}

.box-eat-icn{
    display: flex;
    width: 3.0556vh;
    height: 3.0556vh;
    justify-content: center;
    align-items: center;
    gap: 0.9259vh;
    flex-shrink: 0;
    background: radial-gradient(55.14% 69.51% at 50% 50%, rgba(203, 151, 68, 0.08) 0%, rgba(203, 151, 68, 0.00) 100%), rgba(12, 9, 4, 0.95);
}

.eat-icn{
    width: 1.1034vh;
    height: 1.2037vh;
    flex-shrink: 0;
    filter: drop-shadow(0vh 0vh 1.3889vh rgba(203, 151, 68, 0.45));
}

.box-eat{
    display: flex;
    width: 7.8vh;
    height: 3.0556vh;
    align-items: center;
    gap: 0.463vh;
    background: rgba(21, 15, 6, 0.63);
}

.eat-ranges-flex{
    display: flex;
    height: 1.9444vh;
    align-items: center;
    gap: 0.2778vh;
    margin-left: 0.463vh;
}

.eat-range1{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(214, 151, 58, 0.20);
    opacity: .45;
}

.eat-innerrange1{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #D6973A;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(214, 151, 58, 0.75);
}

.eat-range2{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(214, 151, 58, 0.20);
    opacity: .45;
}

.eat-innerrange2{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #D6973A;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(214, 151, 58, 0.75);
}

.eat-range3{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(214, 151, 58, 0.20);
    opacity: .45;
}

.eat-innerrange3{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #D6973A;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(214, 151, 58, 0.75);
}

.eat-range4{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(214, 151, 58, 0.20);
    opacity: .45;
}

.eat-innerrange4{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #D6973A;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(214, 151, 58, 0.75);
}

.eat-range5{
    display: flex;
    width: 1.1vh;
    height: 1.9444vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(214, 151, 58, 0.20);
    opacity: .45;
}

.eat-innerrange5{
    width: 0.3704vh;
    height: 1.2037vh;
    flex-shrink: 0;
    background: #D6973A;
    box-shadow: 0vh 0vh 0.9259vh 0vh rgba(214, 151, 58, 0.75);
}

.eat-active{
    opacity: 1;
}


.funk-list-bg-flex{
    position: absolute;
    display: flex;
    top: 24%;
    right: 1.56%;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3704vh;
}

.funk-header-flex{
    display: flex;
    gap: 0.2778vh;
}

.funk-txt{
    color: #FFF;
    font-family: Montserrat-Bold;
    font-size: 0.9111vh;
}

.funk{
    color: #FFF;
    font-family: Montserrat-Bold;
    font-size: 0.9111vh;
}

.line-funk{
    display: flex;
    height: 0.0926vh;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9259vh;
    align-self: stretch;
    background: var(--main-clr);
    box-shadow: 0vh -0.1852vh 0.9259vh 0vh var(--main-clr);
}

.funk-list-flex{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5556vh;
}  

.funk-box{
    display: flex;
    align-items: center;
    gap: 0.7407vh;
    opacity: .45;
}

.funk-active{
    opacity: 1;
}

.funk-name{
    color: #FFF;
    font-family: Montserrat-Bold;
    font-size: 0.8111vh;
}

.funk-name-flex{
    display: flex;
}

.funk-id-left{
    margin-left: .3vh;
    color: #FFF;
    font-family: Montserrat-Bold;
    font-size: 0.8111vh;
}

.funk-id{
    color: #FFF;
    font-family: Montserrat-Bold;
    font-size: 0.8111vh;
}

.funk-id-right{
    color: #FFF;
    font-family: Montserrat-Bold;
    font-size: 0.8111vh;
}

.funk-icn{
    width: 1.5593vh;
    height: 1.5593vh;
}

.mic-funk-flex{
    position: absolute;
    top: 50%;
    right: 1.56%;
    transform: translateY(-50%);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.3704vh;
}

.box-chat{
    position: absolute;
    display: flex;
    left: 1.5%;
    top: 14.55%;
    width: 25.1852vh;
    height: 3.1481vh;
    align-items: center;
    gap: 1.4815vh;
    flex-shrink: 0;
    background: radial-gradient(55.14% 69.51% at 50% 50%, rgba(0, 163, 255, 0.08) 0%, rgba(0, 163, 255, 0.00) 100%), rgba(0, 7, 11, 0.75);
}

.chat-txt{
    margin-left: 1.3889vh;
    width: 20vh;
    border: none;
    background: none;
    color: #FFF;
    font-family: Montserrat-Bold;
    font-size: 1.0185vh;
}

.chat-icn{
    width: 1.0185vh;
    height: 0.9259vh;
    position: absolute;
    right: 0.8333vh;
    filter: drop-shadow(0vh 0vh 1.3889vh var(--shadow-clr2));
}

.infos-left-flex{
    position: absolute;
    top: 21%;
    left: 1.5%;
    display: inline-flex;
    align-items: center;
    gap: 1.0185vh;
}

.box-gift{
    display: flex;
    width: 21.1111vh;
    height: 6.4815vh;
    align-items: center;
    gap: 1.4815vh;
    background: radial-gradient(55.14% 69.51% at 50% 50%, var(--bg-clr5) 0%, rgba(0, 163, 255, 0.00) 100%), var(--bg-clr3); 
}

.gift-cnt{
    margin-left: 1.3889vh;
    display: flex;
    align-items: center;
    gap: 1.6667vh;
}

.gift-icn{
    width: 1.3889vh;
    height: 1.3865vh;
    filter: drop-shadow(0vh 0vh 1.1111vh var(--shadow-clr2));
}

.gift-txt-flex{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.1852vh;
}

.gift-header-flex{
    display: flex;
    align-items: center;
    gap: 0.2778vh;
}

.gift-title{
    color: var(--main-clr);
    text-shadow: 0vh 0vh 1.8519vh var(--shadow-clr1);
    font-family: Montserrat-Bold;
    font-size: 0.9411vh;
    text-transform: uppercase;
}

.gift-desc{
    color: #FFF;
    font-family: Montserrat-Bold;
    font-size: 0.9111vh;
    text-transform: uppercase;
}

.time-gift-flex{
    display: flex;
    width: 13.5185vh;
    flex-direction: column;
    align-items: flex-start;
}

.time-gift-txt.time-gift-txt{
    align-self: stretch;
    color: rgba(255, 255, 255, 0.50);
    font-family: Montserrat-Bold;
    font-size: 0.9259vh;
    line-height: 105.444%;
}

.time-amount-gift-flex{
    display: flex;
    gap: 0.2778vh;
}

.time-amount{
    color: var(--main-clr);
    font-family: Montserrat-Bold;
    font-size: 0.9111vh;
}

.time-sign{
    color: var(--main-clr);
    font-family: Montserrat-Bold;
    font-size: 0.9111vh;
}