body{
    background-color:#ededed;
    height: 100dvh;
   /* overflow: hidden;*/
}
/*to have elementts in center*/
.container{
    display:flex;
    justify-content:center;
    /* change to flex-start or delete if dont want in center*/
    align-items:center;
    flex-direction:column;
    height:100dvh; 
    gap:1vh;

    position:relative;
}

h1{
    margin:0;
}

.svg{
    /*or depend on vh or...?
    might need to set min-height+widths*/
    width:50vw;
    height:85vh;
    
	max-width: 100%;
    max-height: 100%;


    display: flex;
    justify-content: center;
    align-items: flex-start;
    /*background-color:red;*/
}

.clickable-part:hover {
    fill: #ff4d4d !important;    /*important is used here to overwrite default svg settings*/
    opacity: 0.5 !important;      
    transition: all 0.15s ease;  
    cursor: pointer;
}




/*click me text*/
.click_text{
    z-index:55;
    rotate:45deg;
    position:absolute;
    /*subject to changed depending on look of svgs*/
    top:0%;
    right:0%;

}
/*this is for the positioning*/
.uh{
    position:relative;
    display:inline-block;
}

/*medical disclaimer*/
.medical_disclaimer{
    position:fixed;
    bottom:0%;
    left:1%;  
}


/*info part*/

.circle{
    height:4vh;
    width:4vh;
    background-color:#ededed;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    border:4px solid #545454;
    text-align:center;

}

.circle p{
    margin:0;
}

.info{
    position:fixed;
    top:1%;
    right:1%;  
    overflow:hidden;
}

/*just some things for buttons*/
button{
    outline:0;
    border:none;
    padding: 0;
}

button:hover{
    cursor:pointer;
}


.modal-overlay {
    display: none;        
    position: fixed;       
    top: 0;
    left: 0;
    width: 100vw;           
    height: 100vh;         
    background: rgba(0, 0, 0, 0.5);
    justify-content: center; 
    align-items: center;    
    z-index: 9999;        
}

.modal-content {
    background: #b4b4b4;
    padding: 30px;
    width: 90%;             
    max-width: 450px;      
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;    
    text-align: center;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}
.close-btn:hover {
    color: #000;
}

#injuryButtonsContainer {
    display: flex;
    flex-direction: column; 
    gap: 10px;             
    margin-top: 20px;
}

.injury-routing-btn {
    background: #d9d9d9;
    color: #000000;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-family: 'Times New Roman', Times, serif;
    cursor: pointer;
    transition: background 0.2s;
}
.injury-routing-btn:hover {
    background: #999898;
}

.modal-box {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    position: relative;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}