/* z-index->
//  2 -> .mapCanvas, .mapImg
//  3 -> #settings, #map
//  4 -> .cleanBorder
//  5 -> header, canvas, #result, #escape, #copyCoords, #coords, #mapType
//  6 -> .borderSvg, #panoramaDivContainer
//  7 -> #streetLabelDivContainer
//  8 -> .panoLink, .labelDiv, .pointLabel
*/

:root{
    --panoScale: 1;
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

header{
    position: relative;
    height: 6vh;
    width: 100vw;
    box-shadow: 0 0 5px 5px black;
    font-size: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    z-index: 5;
    background-color: rgba(240, 248, 255, 1);
}

body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

canvas{
    pointer-events: none;
    position: absolute;
    z-index: 5;
    background-color: transparent;
}

main{
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

section{
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 1%;
    margin: 2%;
    padding: 2%;
}

.borderSvg{
    pointer-events: none;
    position: absolute;
    z-index: 6;
}

.borderPolyline{
    stroke-width: 10;
    stroke-dasharray: 3 2;
}

#goBack{
    cursor: pointer;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 20px;
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    box-shadow: 0 0 5px black; 
}

#goBack:hover{
    border: 1px solid black;
}

#menu{
    display: flex;
    justify-content: center;
    align-items: center;
    right: 20px;
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    box-shadow: 0 0 5px black;
    cursor: pointer;
}

#menu:hover{
    border: 1px solid black;
}

#settingsContainer{
    border-top: 1px solid black;
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: calc(100% - 6vh);
    width: clamp(200px, 100%, 250px);
    transform: translateX(100%);
    transition: transform 0.75s ease;
    background-color: rgba(240, 248, 255, .6);
    padding: 10px;
    gap: 5px;
    font-size: 1.3em;
}

#settingsContainer > div{
    cursor: pointer;
}

#checkboxes{
    max-height: 50%;
}

#tools{
    max-height: 15%;
}

#form{
    max-height: 15%;
}

.inputCheckbox{
    height: 1.1em;
    width: 1.1em;
    border-radius: 20%;
    color: black;
    cursor: pointer;
}

section#form{
    width: 80%;
}

#pwdForm{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 10px;
    gap: 5px;
}

#pwdForm > input{
    padding: 0 10px 0 10px;
    width: 100%;
    border-radius: 10px;
    height: 2em;
    border: none;
}

#modifySubmit{
    cursor: pointer;
    transition: background-color .75s;
}

#modifySubmit:hover{
    background-color: rgb(0, 172, 0);
}

#modifyLinkDiv{
    width: 100%;
}

#modifyLink{    
    width: 100%;
    border-radius: 10px;
    height: 1.5em;
    background-color: white;
    background-color: transparent;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color .75s;
}

#modifyLink:hover{
    background-color: rgb(0, 172, 0);
}

#modifyLink > a{
    color: black;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

#mapTypes{
    display: grid;
    width: 70%;
    max-height: 20%;
    aspect-ratio: 1 / 1;
    grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
}


#mapTypes > img{
    border-radius: 10px;
    height: 3em;
    width: 3em;
}

.pointLabels{
    color: blue;
    scale: 4;
    position: absolute;
    z-index: 8;
}

.mapCanvas{
    position: relative;
    justify-self: stretch;
    scale: 1;
    z-index: 2;
    width: 512px;
    height: 512px;
    border: 0;
    font-size: 0;
}

.mapImgs{
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 2;
    border: 0;
    display: block;
}

.labelDiv{
    position: absolute;
    pointer-events: none;
    font-size: 10px;
    color: black;
    z-index: 8;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
    padding: 0 1px 0 1px;
}

#map{
    width: calc(10 * 512px);
    height: calc(10 * 512px);
    position: absolute;
    scale: .25;
    z-index: 3;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
}

.cleanBorder{
    pointer-events: none;
    z-index: 4;
    background-color: rgb(255, 255, 255);
    position: absolute;
}

#cB1{
    top: 0;
    width: 100%;
    height: 330px;
    transform: translateY(-2px);
    border: 1px solid rgba(255, 166, 0, 0);
}

#cB2{
    right: 0;
    height: 100%;
    width: 201px;
    transform: translateX(2px);
}

#cB3{
    bottom: 0;
    width: 100%;
    height: 331px;
    transform: translateY(2px);
}

#cB4{
    left: 0;
    height: 100%;
    width: 460px;
    transform: translateX(-2px);
}

#coords{
    position: fixed !important;
    bottom: 15px;
}

#escape{
    top: 15px;
    display: none;
}

#copyCoords{
    top: 75px;
    display: none;
    cursor: pointer;
}

#result{
    top: 45px;
    display: none;
}

#result, #escape, #copyCoords, #coords{
    position: absolute;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 2px;
}

#streetLabelDivContainer, #panoramaDivContainer{
    position: absolute;
    z-index: 7;
    width: 100%;
    height: 100%;
}

.streetLabel{
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    line-height: normal;
}

.streetPolyline{
    display: none;
}

.panoLink{
    pointer-events: all;
    z-index: 8;
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    transform-origin: center;
    transform: translate(-5px, -5px) scale(var(--panoScale));
    border-radius: 50%;
    background-color: rgba(180, 247, 247, 0.4);
    border: 1px solid rgba(146, 255, 255, 0.8);
}

.panoLink:hover{
    cursor: pointer;
    background-color: rgba(180, 247, 247, 0.8);
}

.polygonText{
    fill: black;
    stroke: none;
}