/* hud.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;


}

body {
    /* background-color: rgba(0, 0, 0, 0.725); */
    overflow: hidden;
    font-family: "Inter", sans-serif;
	
}

::-webkit-scrollbar {
    display: none;
}

.healthicon i{
    margin-top: 54.15%;
    margin-left: 614.576%;
    color: #b4b4b4;
    font-size: 16.85px;
    z-index: 999;
}

.micicon i {
position: absolute;
top:42.4%;
    margin-left: 3.83%;
    color: #b4b4b4;
    font-size: 16.85px;
    z-index: 999;

}

.armorricon i {
    position: absolute;
top: 42.4%;
    margin-left: 19.52%;
    color: #b4b4b4;
    font-size: 16.85px;
    z-index: 999;

}

.eaticon i {
    position: absolute;
    top: 40.1%;
        margin-left: 26.92%;
        color: #b4b4b4;
        font-size: 16.85px;
        z-index: 999;
}

.watericon i {
    position: absolute;
    top: 40%;
        margin-left: 34.65%;
        color: #b4b4b4;
        font-size: 16.85px;
        z-index: 999;
}



.walkicon i{
    position: absolute;
    top: 40.8%;
        margin-left: 42.16%;
        color: #b4b4b4;
        font-size: 16.85px;
        z-index: 999;
}


.hud-main {
    position: absolute;
    width: 700px; /* Increased width to accommodate more boxes */
    height: 50px;
    bottom: 10px;
    left: 2px;
      transform: scale(0.8); /* تكبير العنصر */

    display: flex;
    gap: 2.5px;
    align-items: center;
}

.box-hud {
    position: relative;

    background-color: #272727;
    height: 42px;
    width: 43px;
    color: whitesmoke;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    /* text-align: center; */
    clip-path: polygon(25% 10%, 75% 10%, 100% 52%, 90% 76%, 80% 100%, 21% 100%, 10% 78%, 0 56%);
}

.box-hud i {
    font-size: 16.85px;
    background-color: #161616;
    clip-path: polygon(25% 10%, 75% 10%, 100% 52%, 90% 76%, 80% 100%, 21% 100%, 10% 78%, 0 56%);
    z-index: 999;
    color: #b4b4b4;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 37.5px;
    width: 38.5px;
   margin-top: 2.8px;

}





.hud {
    font-size: 20px;
    background-color: #161616;
    clip-path: polygon(25% 10%, 75% 10%, 100% 52%, 90% 76%, 80% 100%, 21% 100%, 10% 78%, 0 56%);
    z-index: -9999999999999999999999;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 52px;
  }

.svg-test {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    /* clip-path: polygon(25% 10%, 75% 10%, 100% 52%, 90% 76%, 80% 100%, 21% 100%, 10% 78%, 0 56%); */
    height: 100%;
    bottom: -47px;
    width: 100%;
    transition: 0.9s;

}



.pressent {
    /* position: absolute; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(38, 148, 148);
    height: 100%;
    width: 100%;
    /* top: 97%; */
    transition: 0.9s;
    
}

 .svg-test:hover {
    height: 150%;
} 

/* HUD Colors */
#mic-pressent {
    background-color: #bbbdbe;
}
#eat-pressent {
    background-color: #D59E44;
}
#water-pressent {
    background-color: #448699;
}
#strees-pressent {
    background-color: #e95d12;
}
#walk-pressent {
    background-color: #e95d12;
}
#armor-pressent {
    background-color: #3254D3;
}

#armor-pressent1 {
    background-color: #8b2f2c;
}
#health-pressent {
    background-color: #8b2f2c;
}
#oxygen-pressent {
  background-color: #7bb0be;
}





.street-label{
    /* clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%, 4% 50%); */
    border-top-right-radius: 7.1px;
border-top-left-radius: 7.1px;
    padding: 6px;
    text-align: start;
    width: 88%;
    /* height: 20px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1b1b1be0;
    position: absolute;
    
}

.streeat-name{
   position: absolute;
   left: 21%;
    white-space: nowrap;
overflow: hidden;
display: flex;
max-width: 57%;
font-weight: 400;
padding: 1px;
}

.street-continer{
    position: absolute;
    bottom: 25.7%;
    left: 1.04%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-weight: 200;
    width: 352.90px;
    color: rgb(187, 187, 187);
    
}



#locaticon{
    color: rgb(182, 182, 182); 
    font-size: 20px; 
    position: absolute;
    left: 83.7%;
    z-index: 999999999999; 
    margin-top: -2.4%;
}

  .waypoint{
    font-weight: 400;

margin-left: 5px;
    }