* {
        margin:0;
        padding:0;
        box-sizing: border-box;
}

html, body { 
        margin: 0;
        height: 100%;
        
}

/* SVG Text-Path Objects */
text {
  user-select: none;          /* Standard */
  -webkit-user-select: none; /* Chrome, Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  pointer-events: none;      /* Optional: disables clicking/hovering */

  /*fill:red;*/
}




/*  PASSWORD SCREEN */
#passwordModal{

        position:fixed;
        display:flex;
        background-color: red;
        opacity:0.8;
        width:100%;
        height:100vh;
        z-index:10;

        justify-content: center;
        align-items: center;
        font-size:1.5rem;
}

#passwordForm{
        
       
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;  
        flex: 1 1 shrink;      

        
        width:20%;
        min-width: 300px;
        height:auto;
        padding:15px;

        background-color: rgb(92, 197, 211);
        
        z-index:12;
        
}

#userName{

        display: flex;
        flex-direction: column;
               
        
}

#userName input{

        font-size:1.5rem;
        
}

#submitPassword{

        font-size:1.5rem;       
        background-color: rgb(241, 236, 162);
}


/* Header & Navbar */

.siteHeader{
        
        position:absolute;
        user-select: none; 
        margin:10px;
        width:5%;

}


/* SVG PATH AND STROKE FORMATS */
path{

        stroke-width: 2;
        /*stroke:black;*/

}
path:hover{

        fill:rgb(255, 255, 255);        
        transition: fill 0.2s ease;
        cursor:pointer;

}


/* SVG - INTERFACE MAPS */

        #interfaceMap {
                
                padding:20px;
                width: 100%;
                height: 100vh;
                min-width:600px;

        }

        #interfaceMap svg {

                width: 100%;
                height: 100%;
        
        }

        svg {

                z-index:1;

        }



/* OVERALL MODALS */ 



@media (max-width: 480px) { 

        .modal {

                position:fixed;
                top:0;
                left:0;
                width:100%;
                height:100vh
        }
}
    
.modal {

        display:none;
        position:absolute;
        
        background-color: rgb(240, 243, 243);

        top:200px;
        left:200px;
        width:50%;
        z-index:5;
    

}


.modalHeader {
                
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-left:1px;
        padding-right:10px;
        
        color:black;
        font-size:1.5rem;
        background-color: rgb(122, 122, 122);
        opacity: 0.5;
        font-weight: bold;
      
        cursor: move; /* Show drag cursor */

}
.modalName {
        
        opacity:1;
        z-index:7;

}
.modalClose {
        color:black;
        font-weight: bold;
        border:3px solid red;
        
}
.modalClose:hover{

        background-color: red;
        color:yellow

}


.showModal {

        display:block;

}

.hideModal{

        display:none !important;
}






/* BLOCK INFO MODAL */


@media (max-width: 480px) { 

        .blockInfoModal {

               position: fixed !important;
                        top: 0 !important;
                        left: 0 !important;
                        width: 100% !important;
                        height: 100vh !important;
                        max-width: 100vw !important;
                        min-width: 0 !important;
        }
}


.blockInfoModal{

        max-width: 20%;
        min-width: 500px;

}

#blockInfoWrapper{

        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size:1.3rem;
        padding:10px;


}

#buttonsWrapper{

        margin: 10px;
        display: flex;
        flex-direction: row;
        justify-content:center;
        flex-wrap: wrap;
        
        gap:10px;
        

}

#buttonsWrapper button{

        flex: 1 1 auto; /* grow and shrink equally */

        display:flex;
        
        align-items: center;
        justify-content: center;
        
        background-color: rgb(107, 196, 133);
        color:white;
        font-weight:bold;
        font-size:1.5rem;
        

}





/* 3D-2D PHOTO MODAL PARTS */


@media (max-width: 480px) { 

        .photomodal {

               position: fixed !important;
                        top: 0 !important;
                        left: 0 !important;
                        width: 100% !important;
                        height: 100vh !important;
                        max-width: 100vw !important;
                        min-width: 0 !important;
        }
}

.photomodal{

     position:absolute;
     width:50%;
     height:50%;
     z-index:10;

                
}

.photoInfo{

        display:flex;
        flex-direction: row;
        gap:20px;
        position:absolute;        
        top:5%;
        right:5%;
        padding:2px;

        background-color: orange;
        color:white;
        opacity:1;

        z-index:5;

}

/* 360 PHOTO VIEWER */

        #viewer { 
                
                width: 100%; 
                height: 50vh;
                z-index:6 ;
                resize: both;
                overflow: auto;
                min-width: 300px;
                min-height: 300px;
                
        }

/* 2D PHOTO VIEWER */

        #Viewer2D{

                width: 100%; 
                height: 50vh;
                z-index:6 ;
                resize: both;
                overflow: auto;
                min-width: 600px;
                min-height: 300px;

        }


.photoButtonsWrapper{

        display:flex;
        flex-direction: row;

}

.photoButtons{

        width:100%;
        background-color: rgb(110, 202, 238);
        color:white;
        font-size:1.5rem;

}