@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700;800;900&display=swap');


body, html{
user-select: none;
}
:root {
/* --health: rgb(255, 72, 72);
--mic : rgb(255,255,255);
--stamina : rgb(200,255,255);
--armor : rgb(28, 96, 255);
--hunger : rgb(255, 151, 25);
--thirst : rgb(28, 176, 255);
--green : rgb(73, 214, 99);
--cyan : rgb(0,214,203);
--purple : rgb(120, 1, 255); */

}

* {
transition: 0.25s ease;
}

.mainContainer{
display: flex;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.98);
will-change: opacity, transform;
overflow: hidden;
}

.mainContainer.show{
opacity: 1;
transform: none;
}


.mainContainer .rowColumn{
display: flex;
position: absolute;
width: fit-content;
height: fit-content;
transition: 0.25s ease;
will-change: left, right, top, bottom, transform;

}

.mainContainer .rowColumn.center{
align-items: center;
justify-content: center;
left: 2vh;
bottom: 1vh;
}


.mainContainer .rowColumn .round{
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 5vh;
}

.mainContainer .rowColumn.round .round{
display: flex;
}



.mainContainer .rowColumn .round .item{
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding: 0.5vh;
transition: 0.35s ease;
opacity: 1;
overflow: hidden;
width: 4vh;
height: 4vh;
}

.mainContainer .rowColumn .round .item.hide{
width: 0;
height: 0;
padding: 0;
opacity: 0;
transition: 0.35s ease;
will-change: width, height, transform, opacity;
}



.mainContainer .rowColumn .round .item .progress-circle {
width: 4vh;
height: 4vh;
position: relative;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.mainContainer .rowColumn .round .item .progress-circle svg {
display: flex;
transform: rotate(-90deg);
width: 100%;
height: 100%;
}

.mainContainer .rowColumn .round .item .progress-circle circle {
display: flex;
fill: none;
stroke-width: 6;
}

.mainContainer .rowColumn .round .item .progress-circle .bg {
display: flex;
stroke: var(--mainProgressEmptyProgressBar); 
}

.mainContainer .rowColumn .round .item .progress-circle .progress {
display: flex;
stroke-linecap: round; 
transition: stroke-dashoffset 2s ease; 
transition: 0.5s ease;
border-radius: 2vh;
}

.mainContainer .rowColumn .round .item .background {
display: flex;
position: absolute;
width: 3.7vh;
height: 3.7vh;
z-index: -2;
border-radius: 50%;
opacity: 0.5;
filter: brightness(0.3);
}

.mainContainer .rowColumn .round .item[id=mic] .background {
background-color: var(--mic);
}

.mainContainer .rowColumn .round .item[id=health] .background {
background-color: var(--health);
}

.mainContainer .rowColumn .round .item[id=armor] .background {
background-color: var(--armor);
}

.mainContainer .rowColumn .round .item[id=thirst] .background {
background-color: var(--thirst);
}

.mainContainer .rowColumn .round .item[id=hunger] .background {
background-color: var(--hunger);
}

.mainContainer .rowColumn .round .item[id=stamina] .background {
background-color: var(--stamina);
}

.mainContainer .rowColumn .round .item .iconn {
display: flex;
position: absolute;  
font-size: 1.5vh;
align-items: center;
justify-content: center;
}

.mainContainer .rowColumn .round .item[id=health] .iconn {
color: var(--health);
text-shadow: 0 0 2vh var(--health);
}

.mainContainer .rowColumn .round .item[id=health] .progress-circle .progress {
box-shadow: 0 0 10px 0 var(--health); 
stroke: var(--health);
}

.mainContainer .rowColumn .round .item[id=mic] .iconn {
color: var(--mic);
text-shadow: 0 0 2vh var(--mic);
will-change: text-shadow, transform;
}

.mainContainer .rowColumn .round .item[id=mic].animation .iconn {
color: var(--mic);
opacity: 0.5;
}

.mainContainer .rowColumn .round .item[id=mic] .progress-circle .progress {
box-shadow: 0 0 10px 0 var(--mic); 
stroke: var(--mic);
}

.mainContainer .rowColumn .round .item[id=armor] .iconn {
color: var(--armor);
text-shadow: 0 0 2vh var(--armor);
}

.mainContainer .rowColumn .round .item[id=armor] .progress-circle .progress {
box-shadow: 0 0 10px 0 var(--armor); 
stroke: var(--armor);
}

.mainContainer .rowColumn .round .item[id=thirst] .iconn {
color: var(--thirst);
text-shadow: 0 0 2vh var(--thirst);
}

.mainContainer .rowColumn .round .item[id=thirst] .progress-circle .progress {
box-shadow: 0 0 10px 0 var(--thirst); 
stroke: var(--thirst);
}

.mainContainer .rowColumn .round .item[id=hunger] .iconn {
color: var(--hunger);
text-shadow: 0 0 2vh var(--hunger);
}

.mainContainer .rowColumn .round .item[id=hunger] .progress-circle .progress {
box-shadow: 0 0 10px 0 var(--hunger); 
stroke: var(--hunger);
}

.mainContainer .rowColumn .round .item[id=stamina] .iconn {
color: var(--stamina);
text-shadow: 0 0 2vh var(--stamina);
}

.mainContainer .rowColumn .round .item[id=stamina] .progress-circle .progress {
box-shadow: 0 0 10px 0 var(--stamina); 
stroke: var(--stamina);
}

.mainContainer .rowColumn .round .item[id=mentalHealth] .iconn {
color: var(--green);
text-shadow: 0 0 2vh var(--green);
}

.mainContainer .rowColumn .round .item[id=mentalHealth] .progress-circle .progress {
box-shadow: 0 0 10px 0 var(--green); 
stroke: var(--green);
}


.directionContainer{
display: flex;
position: absolute;
width: 23.5vh;
height: 5vh;
/* background-color: rgb(125,125,125,0.4); */
left: 2.55vh;
bottom: 25vh;
border-radius: 0.5vh;
padding-left: 1vh;
padding-right: 1vh;
align-items: center;
justify-content: flex-start;
opacity: 0;
transform: scale(0.9);
transition: 0.25s ease;
gap: 2vh;
}

.directionContainer.show{
display: flex;
opacity: 1;
transform: none;
}

.directionContainer .cDirection{
display: flex;
position: absolute;
left: 3.5vh;
top: 0vh;
width: 1.5vh;
height: 1.5vh;
align-items: center;
justify-content: center;
background-color: var(--directionCircleColor);
box-shadow: 0 0 2vh var(--directionsBoxShadow);
border-radius: 50%;
font-size: 0.9vh;
color: var(--directionTextColor);
font-family: 'Montserrat', sans-serif;
font-weight: 800;
will-change: transform, opacity;
}

.directionContainer .cDirection.change{
transform: scale(0.8);
opacity: 0;
}

.directionContainer .iconn{
display: flex;
width: 3vh;
height: 3vh;
align-items: center;
justify-content: center;
background-color: var(--directionCircleColor);
border-radius: 50%;
font-size: 1.35vh;
color: var(--directionTextColor);
box-shadow: 0 0 2vh var(--directionsBoxShadow);
}


.directionContainer .titleContainer{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}

.directionContainer .titleContainer .streetName1{
display: flex;
color: var(--directionsColor);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1.2vh;
transition: 0.25s ease;
will-change: opacity, transform;
}

.directionContainer .titleContainer .streetName1.change{
opacity: 0;
transform: translateX(1vh);
}



.directionContainer .titleContainer .streetName2{
display: flex;
color: var(--directionColor2);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1vh;
will-change: opacity, transform;
}

.directionContainer .titleContainer .streetName2.change{
opacity: 0;
transform: translateX(1vh);
}




.mapBorder{
display: flex;
position: absolute;
width: 16.1vw;
height: 18vh;
border: 2px solid rgb(255,255,255,0);
left: 1.5vw;
bottom: 6vh;
border-radius: 0.5vh;
transition: none;
}

.mapBorder.dragging{
border: 2px solid rgb(255,255,255,1);
}


.speedometerContainer {
display: flex;
position: absolute;
right: 4vh;
bottom: 4vh;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.9);
will-change: transform, opacity;
}

.speedometerContainer.show{
opacity: 1;
transform: none;
}

.speedometerContainer .speedometer{
display: none;
width: auto;
height: auto;
align-items: center;
justify-content: center;
}

.speedometerContainer .speedometer.show{
display: flex;
}

.speedometerContainer .speedometer #rpmMetter,
.speedometerContainer .speedometer #gasMetter
{
display: flex;
transition: 0.2s ease;
}





.speedometerContainer .speedometer #rpmMetter{
filter: drop-shadow(0 0 0.5vh var(--rpmBoxShadow));
}

.speedometerContainer .speedometer #gasMetter{
filter: drop-shadow(0 0 0.5vh var(--gasVehicle));
}

.speedometerContainer .speedometer .rpmContainer{
display: flex;
/* background-color: rgba(255, 0, 0, 0.5); */
}

.speedometerContainer .speedometer .gasContainer{
display: flex;
position: absolute;
transform: rotateZ(-187deg);
left: -3vh;
bottom:-2vh;
/* background-color: rgba(255, 0, 0, 0.5); */
}

.speedometerContainer .speedometer .gasContainer.hide{
display: none;
}


.speedometerContainer .speedometer .gasIcon{
display: flex;
position: absolute;
width: 1vh;
height: 1vh;
left: -1vh;
bottom: -1vh;
color: var(--gasIcon);
align-items: center;
justify-content: center;
}

.speedometerContainer .speedometer .gasIcon .material-symbols-outlined{
font-size:1.5vh;
}



.speedometerContainer .speedometer .speedContainer{
display: flex;
position: absolute;
flex-direction: column;
align-items: center;
justify-content: center;
}


.speedometerContainer .speedometer[id=type1] .speedContainer{
display: flex;
position: absolute;
flex-direction: column;
align-items: center;
justify-content: center;
top: 1.5vh;
}

.speedometerContainer .speedometer .speedContainer .speedUnit{
position: relative;
display: flex;
gap: 1vh;
}

.speedometerContainer .speedometer .speedContainer .speedUnit .unit{
font-size: 1.2vh;
color: var(--speedUnit);
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}

.speedometerContainer .speedometer .speedContainer .gearContainer{
display: flex;
width: 1.8vh;
height: 1.8vh;
border-radius: 50%;
background-color: var(--gearContainer);
box-shadow: 0 0 2vh var(--gearContainerBoxShadow);
align-items: center;
justify-content: center;
margin-top: 2vh;
will-change: scale, transform;
}

.speedometerContainer .speedometer .speedContainer .gearContainer .gearContent{
display: flex;
font-family: 'Montserrat', sans-serif;
color: var(--gearText);
font-size: 1.3vh;
font-weight: 800;
transform: scale(1);
opacity: 1;
transition: 0.25s ease;
}

.speedometerContainer .speedometer .speedContainer .gearContainer .gearContent.animation{
opacity: 0;
transform: scale(1.5);
}




.speedometerContainer .speedometer .speedContainer .gearContainer.animation{
background-color: var(--speedometerRedLine);
/* text-shadow: 0px 0px 0.3vh rgba(0, 214, 203, 0.1), 0px 0px 2.5vh rgba(0, 214, 203, 0.5); */
animation: shake 0.3s linear infinite;
scale: 1.1;
}



.speedometerContainer .speedometer .speedContainer .speed{
display: flex;
font-size: 3.5vh;
color: var(--speed);
font-family: 'Montserrat', sans-serif;
font-weight: 800;
align-items: center;
justify-content: center;
/* background-color: red; */
}

.speedometerContainer .speedometer .speedContainer .speed.animation{
color: var(--speedometerRedLine);
/* text-shadow: 0px 0px 0.3vh rgba(0, 214, 203, 0.1), 0px 0px 2.5vh rgba(0, 214, 203, 0.5); */
animation: shake 0.3s linear infinite;
scale: 1.1;
}

@keyframes shake {
0% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-2.5px); }
20%, 40%, 60%, 80% { transform: translateX(2.5px); }
100% { transform: translateX(0); }
}

.speedometerContainer .speedometer .speedContainer .speed .halfOpacity{
opacity: 0.5;
}

.speedometerContainer .speedometer .seatBelt{
display: flex;
position: absolute;
margin-left: 5vh;
width: auto;
height: 1.5vh;
}
.speedometerContainer .speedometer .seatBelt.hide{
opacity: 0;
transform: scale(0.5);
}

.speedometerContainer .speedometer .powerText{
display: flex;
position: absolute;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: var(--electricVehiclePowerText);
font-size: 0.8vh;
}

.speedometerContainer .speedometer .powerText.hide{
opacity: 0;
transform: scale(0.8);
}

.speedometerContainer .speedometer[id=type1] .powerText{
right: 0.4vh;
bottom: -0.8vh;
}


.speedometerContainer .speedometer[id=type2] .rpmContainer{
all: unset;
display: flex;
width: 100%;
height: 100%;
background-color: var(--speedometerType2RpmContainerBackground);
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 1.5vh;
}

.speedometerContainer .speedometer[id=type2] .speedContainer{
all: unset;
display: flex;
position: absolute;
flex-direction: column;
align-items: center;
justify-content: center;
top: 4vh;
gap: 0.1vh;
}


.speedometerContainer .speedometer[id=type2] .gasContainer{
all: unset;
display: flex;
position: relative;
margin-top: 1vh;
align-items: center;
justify-content: center;
}

.speedometerContainer .speedometer[id=type2] .gasIcon{
all: unset;
display: flex;
position: absolute;
width: 1vh;
height: 1vh;
color: var(--gasIcon);
align-items: center;
justify-content: center;
top: 2.2vh;
}

.speedometerContainer .speedometer[id=type2] .gasIcon .material-symbols-outlined{
font-size:1.6vh;
text-shadow: none;
filter: none;
box-shadow: none;
}

.speedometerContainer .speedometer[id=type2] .powerText{
right: 4vh;
bottom: 4vh;
transform: rotateZ(45deg);
}

.speedometerContainer .speedometer[id=type3]{
position: relative;
width: 20vh;
align-items: center;
justify-content: center;
}


.speedometerContainer .speedometer[id=type3] .speedContainer{
display: flex;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
width: 10vh;
gap: 0.25vh;
}

.speedometerContainer .speedometer[id=type3] .speedAndFuelContainer{
display: flex;
gap: 1vh;
align-items: flex-end;
justify-content: center;
}


.speedometerContainer .speedometer[id=type3] .gasContainer{
all: unset;
display: flex;
gap: 1vh;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5vh;
}

.speedometerContainer .speedometer[id=type3] .gasContainer .porgressBar{
display: flex;
position: relative;
align-items: flex-end;
justify-content: center;
width: 4px;
height: 5vh;
background-color: var(--gasContainerEmptyColor);
border-radius: 5vh;
}

.speedometerContainer .speedometer[id=type3] .gasContainer .porgressBar .progress{
display: flex;
width: 100%;
height: 50%;
border-radius: 5vh;
}




.speedometerContainer .speedometer[id=type3] .gasIcon{
all: unset;
display: flex;
color: var(--gasIcon);
align-items: center;
justify-content: center;
}

.speedometerContainer .speedometer[id=type3] .gasIcon .material-symbols-outlined{
font-size:1.5vh;
}



.rpmContainer svg text {
position: absolute;
fill: rgb(255,255,255,1);
font-size: 0.75vh;
text-anchor: middle;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
dominant-baseline: middle; /* Vertical align center */
/* will-change: scale, opacity, color, fill, font-size; */
transition: 0.2s ease;
text-shadow: 0 0 2vh rgb(255,255,255,0.5);
opacity: 0.8;
}

/* .rpmContainer svg .text[id=line-1],
.rpmContainer svg .text[id=line-3],
.rpmContainer svg .text[id=line-5],
.rpmContainer svg .text[id=line-7]
{
font-size: 0.55vh;
fill: rgb(255,255,255,0.5);
} */

.rpmContainer svg .text.scale {
font-size: 1.2vh;
/* fill: rgba(255, 92, 92, 0.8); */
/* text-shadow: 0 0 2vh rgb(255, 92, 92,0.7); */
opacity: 1;
}



.rpmContainer svg .text[id=line-8] {
fill: rgba(255, 92, 92, 0.8);
text-shadow: 0 0 2vh rgb(255, 92, 92,0.7);
}

.rpmContainer svg .text[id=line-7] {
fill: rgba(255, 92, 92, 0.8);
text-shadow: 0 0 2vh rgb(255, 92, 92,0.7);
}

.rpmContainer svg .text[id=line-6] {
fill: rgba(255, 92, 92, 0.8);
text-shadow: 0 0 2vh rgb(255, 92, 92,0.7);
}



.mainContainer .rowColumn .rotatedSquare{
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 5vh;
transform-style: preserve-3d;

}

.mainContainer .rowColumn.rotatedSquare .rotatedSquare{
display: flex;
}



.mainContainer .rowColumn .rotatedSquare .item{
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding: 0.5vh;
transition: 0.35s ease;
opacity: 1;
overflow: hidden;
width: 4vh;
height: 4vh;
backface-visibility: hidden;
will-change: opacity, transform;
}


.mainContainer .rowColumn .rotatedSquare .item .mainSquare{
display: flex;
width: 3vh;
height: 3vh;
transform: rotateZ(45deg);
border-radius: 0.5vh;
align-items: center;
justify-content: center;
overflow: hidden;
}

.mainContainer .rowColumn .rotatedSquare .item .secondSqure{
display: flex;
position: relative;
width: 2.5vh;
height: 2.5vh;
border-radius: 0.5vh;
opacity: 0.5;
}

.mainContainer .rowColumn .rotatedSquare .item .iconn{
display: flex;
position: absolute;
font-size: 1.2vh;
color: var(--backgroundProgressMainIcon);
/* transform: rotateZ(-45deg); */
text-shadow: 0 0 0.1vh rgb(0,0,0);
backface-visibility: hidden !important;
transform: rotateZ(-45deg);
/* rotateZ: 45deg; */
rotate: 0 0 45deg;
}

.mainContainer .rowColumn .rotatedSquare .progressSquare {
position: absolute;
width: 2.5vh;
height: 2.5vh;
overflow: hidden;
border-radius: 0.3vh;
display: flex;
align-items: center; 
justify-content: flex-start;
}

.mainContainer .rowColumn .rotatedSquare .progressSquare .fillBar {
display: flex;
position: absolute;
width: 5vh;
height: 5vh;
transform: rotateZ(-45deg) translateY(3.2vh); 
transition: transform 0.3s ease;
/* will-change: transform; */
backface-visibility: hidden;
}

.mainContainer .rowColumn .rotatedSquare .item[id=mic] .secondSqure{
background: var(--mic);
}

.mainContainer .rowColumn .rotatedSquare .item[id=mic] .mainSquare {
border: 3px solid var(--mic);
}

.mainContainer .rowColumn .rotatedSquare .item[id=mic] .progressSquare .fillBar {
background: var(--mic);
}



.mainContainer .rowColumn .rotatedSquare .item[id=health] .secondSqure{
background: var(--health);
}

.mainContainer .rowColumn .rotatedSquare .item[id=health] .mainSquare {
border: 3px solid var(--health);
}

.mainContainer .rowColumn .rotatedSquare .item[id=health] .progressSquare .fillBar {
background: var(--health);
}

.mainContainer .rowColumn .rotatedSquare .item[id=armor] .secondSqure{
background: var(--armor);
}

.mainContainer .rowColumn .rotatedSquare .item[id=armor] .mainSquare {
border: 3px solid var(--armor);
}

.mainContainer .rowColumn .rotatedSquare .item[id=armor] .progressSquare .fillBar {
background: var(--armor);
}

.mainContainer .rowColumn .rotatedSquare .item[id=thirst] .secondSqure{
background: var(--thirst);
}

.mainContainer .rowColumn .rotatedSquare .item[id=thirst] .mainSquare {
border: 3px solid var(--thirst);
}


.mainContainer .rowColumn .rotatedSquare .item[id=thirst] .progressSquare .fillBar {
background: var(--thirst);
}

.mainContainer .rowColumn .rotatedSquare .item[id=hunger] .secondSqure{
background: var(--hunger);
}

.mainContainer .rowColumn .rotatedSquare .item[id=hunger] .mainSquare {
border: 3px solid var(--hunger);
}

.mainContainer .rowColumn .rotatedSquare .item[id=hunger] .progressSquare .fillBar {
background: var(--hunger);
}

.mainContainer .rowColumn .rotatedSquare .item[id=stamina] .secondSqure{
background: var(--stamina);
}

.mainContainer .rowColumn .rotatedSquare .item[id=stamina] .mainSquare {
border: 3px solid var(--stamina);
}

.mainContainer .rowColumn .rotatedSquare .item[id=stamina] .progressSquare .fillBar {
background: var(--stamina);
}


.mainContainer .rowColumn .rotatedSquare .item.hide{
width: 0;
height: 0;
padding: 0;
opacity: 0;
transition: 0.35s ease;
backface-visibility: hidden;
}

.mainContainer .rowColumn .progressSquare{
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 5vh;
transform-style: preserve-3d;

}

.mainContainer .rowColumn.progressSquare .progressSquare{
display: flex;
}



.mainContainer .rowColumn .progressSquare .item{
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding: 0.5vh;
transition: 0.35s ease;
opacity: 1;
overflow: hidden;
width: 4vh;
height: 4vh;
backface-visibility: hidden;
will-change: opacity, transform;
}

.mainContainer .rowColumn .progressSquare .item.hide{
width: 0;
height: 0;
padding: 0;
opacity: 0;
transition: 0.35s ease;
backface-visibility: hidden;
}

.mainContainer .rowColumn .progressSquare .item .iconn{
display: flex;
position: absolute;  
font-size: 1.5vh;
align-items: center;
justify-content: center;
}

.mainContainer .rowColumn .progressSquare .item[id=health] .iconn {
color: var(--health);
text-shadow: 0 0 2vh var(--health);
}

.mainContainer .rowColumn .progressSquare .item[id=mic] .iconn {
color: var(--mic);
text-shadow: 0 0 2vh var(--mic);
will-change: text-shadow, transform;
}

.mainContainer .rowColumn .progressSquare .item[id=mic].animation .iconn {
color: var(--mic);
opacity: 0.5;
}


.mainContainer .rowColumn .progressSquare .item[id=armor] .iconn {
color: var(--armor);
text-shadow: 0 0 2vh var(--armor);
}


.mainContainer .rowColumn .progressSquare .item[id=thirst] .iconn {
color: var(--thirst);
text-shadow: 0 0 2vh var(--thirst);
}


.mainContainer .rowColumn .progressSquare .item[id=hunger] .iconn {
color: var(--hunger);
text-shadow: 0 0 2vh var(--hunger);
}


.mainContainer .rowColumn .progressSquare .item[id=stamina] .iconn {
color: var(--stamina);
text-shadow: 0 0 2vh var(--stamina);
}


.mainContainer .rowColumn .progressSquare .item[id=mentalHealth] .iconn {
color: var(--green);
text-shadow: 0 0 2vh var(--green);
}

.mainContainer .rowColumn .progressSquare .item .background {
display: flex;
position: absolute;
width: 3.8vh;
height: 3.8vh;
z-index: -1;
opacity: 0.5;
filter: brightness(0.3);
border-radius: 0.5vh;
}


.mainContainer .rowColumn .progressSquare .item[id=mic] .background {
background-color: var(--mic);
}

.mainContainer .rowColumn .progressSquare .item[id=health] .background {
background-color: var(--health);
}

.mainContainer .rowColumn .progressSquare .item[id=armor] .background {
background-color: var(--armor);
}

.mainContainer .rowColumn .progressSquare .item[id=thirst] .background {
background-color: var(--thirst);
}

.mainContainer .rowColumn .progressSquare .item[id=hunger] .background {
background-color: var(--hunger);
}

.mainContainer .rowColumn .progressSquare .item[id=stamina] .background {
background-color: var(--stamina);
}


.mainContainer .rowColumn .squareBackgroundProgress{
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 5vh;
transform-style: preserve-3d;

}

.mainContainer .rowColumn.squareBackgroundProgress .squareBackgroundProgress{
display: flex;
}



.mainContainer .rowColumn .squareBackgroundProgress .item{
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding: 0.5vh;
transition: 0.35s ease;
opacity: 1;
overflow: hidden;
width: 4vh;
height: 4vh;
backface-visibility: hidden;
will-change: opacity, transform;
}

.mainContainer .rowColumn .squareBackgroundProgress .item.hide{
width: 0;
height: 0;
padding: 0;
opacity: 0;
transition: 0.35s ease;
backface-visibility: hidden;
}

.mainContainer .rowColumn .squareBackgroundProgress .item .iconn{
display: flex;
position: absolute;  
font-size: 1.5vh;
color: var(--backgroundProgressMainIcon);
align-items: center;
justify-content: center;
}

.mainContainer .rowColumn .squareBackgroundProgress .item .progressContainer{
display: flex;
position: absolute;
width: 3.5vh;
height:3.5vh;
border: 2px solid white;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 0.5vh;
}

.mainContainer .rowColumn .squareBackgroundProgress .item .progressContainer .background{
display: flex;
position: absolute;
width: 3vh;
height:3vh;
opacity: 0.5;
filter: brightness(0.5);
}

.mainContainer .rowColumn .squareBackgroundProgress .item .progressContainer .progress{
display: flex;
position: absolute;
width: 3vh;
max-height:3vh;
height: 3vh;
bottom: 0.25vh;
border-radius: 2px;
}

.mainContainer .rowColumn .squareBackgroundProgress .item .progressContainer .iconn {
display: flex;
position: absolute;  
font-size: 1.5vh;
align-items: center;
justify-content: center;
color: var(--backgroundProgressMainIcon);
text-shadow: 0 0 0.1vh rgb(0,0,0);
}






.mainContainer .rowColumn .poligonProgress{
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 5vh;

}

.mainContainer .rowColumn.poligonProgress .poligonProgress{
display: flex;
}

.mainContainer .rowColumn .poligonProgress .item{
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding: 0.5vh;
transition: 0.35s ease;
opacity: 1;
overflow: hidden;
width: 4vh;
height: 4vh;
backface-visibility: hidden;
will-change: opacity, transform;
}

.mainContainer .rowColumn .poligonProgress .item.hide{
width: 0;
height: 0;
padding: 0;
opacity: 0;
transition: 0.35s ease;
backface-visibility: hidden;
}

.mainContainer .rowColumn .poligonProgress .item .svgPoligon{
position: relative;
}


.mainContainer .rowColumn .poligonProgress .item #background{
opacity: 0.5;
filter: brightness(0.3);
}

.mainContainer .rowColumn .poligonProgress .item .iconn {
display: flex;
position: absolute;  
font-size: 1.5vh;
align-items: center;
justify-content: center;
color: var(--health);
text-shadow: 0 0 2vh var(--health);
}









.mainContainer .rowColumn .poligonProgressBackground{
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 5vh;

}

.mainContainer .rowColumn.poligonProgressBackground .poligonProgressBackground{
display: flex;
}

.mainContainer .rowColumn .poligonProgressBackground .item{
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding: 0.5vh;
transition: 0.35s ease;
opacity: 1;
overflow: hidden;
width: 4vh;
height: 4vh;
backface-visibility: hidden;
will-change: opacity, transform;
}

.mainContainer .rowColumn .poligonProgressBackground .item.hide{
width: 0;
height: 0;
padding: 0;
opacity: 0;
transition: 0.35s ease;
backface-visibility: hidden;
}

.mainContainer .rowColumn .poligonProgressBackground .item #background{
opacity: 0.5;
filter: brightness(0.7);
}

.mainContainer .rowColumn .poligonProgressBackground .item .svgPoligonBackgroundContainer{
display: flex;
position: absolute;
align-items: center;
justify-content: center;
opacity: 1;
overflow: hidden;
width: 3vh;
height: 3vh;
backface-visibility: hidden;
}

.mainContainer .rowColumn .poligonProgressBackground .item .svgPoligonBackgroundContainerBorder{
display: flex;
position: absolute;
align-items: center;
justify-content: center;
opacity: 1;
overflow: hidden;
width: 4vh;
height: 4vh;
backface-visibility: hidden;
}



.mainContainer .rowColumn .poligonProgressBackground .item #background-fill{
clip-path: inset(100% 0 0 0);
}

.mainContainer .rowColumn .poligonProgressBackground .item .iconn{
display: flex;
position: absolute;  
font-size: 1.5vh;
align-items: center;
justify-content: center;
color: var(--backgroundProgressMainIcon);
text-shadow: 0 0 0.1vh rgb(0,0,0);
}


.mainContainer .rowColumn .triangleProgress{
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 5vh;

}

.mainContainer .rowColumn.triangleProgress .triangleProgress{
display: flex;
}

.mainContainer .rowColumn .triangleProgress .item{
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding: 0.5vh;
transition: 0.35s ease;
opacity: 1;
overflow: hidden;
width: 4vh;
height: 4vh;
backface-visibility: hidden;
will-change: opacity, transform;
}

.mainContainer .rowColumn .triangleProgress .item.hide{
width: 0;
height: 0;
padding: 0;
opacity: 0;
transition: 0.35s ease;
backface-visibility: hidden;
}

.mainContainer .rowColumn .triangleProgress .item .svgPoligon{
position: relative;
}


.mainContainer .rowColumn .triangleProgress .item #background{
opacity: 0.5;
filter: brightness(0.3);
}

.mainContainer .rowColumn .triangleProgress .item .iconn {
display: flex;
position: absolute;  
font-size: 1vh;
align-items: center;
justify-content: center;
margin-top: 0.9vh;
}





.mainContainer .rowColumn .iconAndProgress{
display: none;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 5vh;

}

.mainContainer .rowColumn.iconAndProgress .iconAndProgress{
display: flex;
}

.mainContainer .rowColumn .iconAndProgress .item{
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding: 0.5vh;
transition: 0.35s ease;
opacity: 1;
overflow: hidden;
width: 4vh;
height: 4vh;
backface-visibility: hidden;
will-change: opacity, transform;
gap: 0.5vh;
}

.mainContainer .rowColumn .iconAndProgress .item.hide{
width: 0;
height: 0;
padding: 0;
opacity: 0;
transition: 0.35s ease;
backface-visibility: hidden;
}

        
.mainContainer .rowColumn .iconAndProgress .item .iconn {
display: flex;
position: relative;  
font-size: 1.65vh;
align-items: center;
justify-content: center;
text-shadow: 0 0 0.1vh rgb(0,0,0);
}

.mainContainer .rowColumn .iconAndProgress .item .progressBar {
display: flex;
width: 3px;
height: 2.5vh;
background-color: var(--mainProgressEmptyProgressBar);
align-items: flex-end;
border-radius: 2vh;
}

.mainContainer .rowColumn .iconAndProgress .item .progressBar .progress {
display: flex;
width: 100%;
height: 50%;
border-radius: 2vh;
}








.mainContainer .rowColumn .iconLongProgressBar{
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-height: 10vh;
  max-width: 35vh;
  
  }
  
  .mainContainer .rowColumn.iconLongProgressBar .iconLongProgressBar{
  display: flex;
  }
  
  .mainContainer .rowColumn .iconLongProgressBar .item{
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0.5vh;
  transition: 0.35s ease;
  opacity: 1;
  overflow: visible;
  width: auto;
  /* height: 4vh; */
  backface-visibility: hidden;
  will-change: opacity, transform;
  gap: 0.5vh;
  /* background-color: red; */
  flex-direction: row;
  }

  .mainContainer .rowColumn .iconLongProgressBar.reverse .item{
    flex-direction: row-reverse;
  }

  
  .mainContainer .rowColumn .iconLongProgressBar .item.hide{
  width: 0;
  height: 0;
  padding: 0;
  opacity: 0;
  transition: 0.35s ease;
  backface-visibility: hidden;
  }

  .mainContainer .rowColumn .iconLongProgressBar .item .iconn{
    display: flex;
    position: relative;  
    font-size: 1.5vh;
    align-items: center;
    justify-content: center;
    color: var(--backgroundProgressMainIcon);
    text-shadow: 0 0 0.1vh rgb(0,0,0);
    }

  .mainContainer .rowColumn .iconLongProgressBar .item .longProgressBar{
  display: flex;
  position: relative;
  width: 7vh;
  height: 5px;
  border-radius: 2vh;
  background-color: var(--mainProgressEmptyProgressBar);
  overflow: visible;
  justify-content: flex-start;
  }

  .mainContainer .rowColumn .iconLongProgressBar.reverse .item .longProgressBar{
    justify-content: flex-end;
  }


  .mainContainer .rowColumn .iconLongProgressBar .item .longProgressBar .progress{
  display: flex;
  position: relative;
  width: 50%;
  height: 100%;
  border-radius: 2vh;
  }