* {
    margin: 0px;
    font-family: albertSans;
}

@font-face {
    font-family: albertSans;
    src: url(./Albert_Sans/AlbertSans-VariableFont_wght.ttf);
}


.panel {
    border: 2px solid black;
    border-radius: 6px 6px 6px 6px;
    position: relative;
    margin: 0.5% 0.5% 0.5% 0.5%;
}



.wrapper { 
display: grid;
max-width: 100vw;
max-height: 94vh;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}

@media (max-width: 500px) {
    .wrapper {
        grid-template-columns: repeat(2,1fr);
    }
}

.global-controls {
    width: 100vw;
    height:6vh;
    align-items: center;
    display: flex;
    justify-content: center;
    background-color: #005176;
    flex: 1;
}




img {
    width: 100%;
    height: 93%;
    object-fit: contain;
}

#logo {
    width: 10%;
    height: 100%;
}
.panel-controls {
    height: 7%;
    align-items: center;
    display: flex;
    justify-content: space-between;
    background-color: #009dcc;
    max-height: 30px;

}
.changeButton{
    margin-left: 5px;
}

.arrow {
    cursor: pointer;
    /* position: absolute;
    top: 50%; */
    font-size:3em;
    transform:  translate(0,-5%);

    padding-left: 2%;
    padding-right: 2% ;
    border-radius: 6px 6px 6px 6px;
    /* text-shadow: dimgray 5px 0px, dimgray -5px 0px; */
}

.next {
    /* right: 0; */
    /* margin-right: 2%; */
}

.prev {
    /* margin-left: 2%; */
}

#b1, #b2, #b3, #b4 {
    /* right: 0;
    position: absolute; */
    background-color: #ea564f;
    margin-right: 3px;
    cursor: pointer;

}
#b1:hover, #b2:hover, #b3:hover, #b4:hover{
    background-color: rgb(178, 12, 0);
}

.prev:hover, .next:hover {
    color: dimgray;
  }

/* #treeNavBack, #treeNavClose {
    display: none;
} */

#selectionMenu {
    display: none;
    /* max-width: 100vw;
    max-height: 95vh; */
    /* grid-template-columns: repeat(4, 1fr); */

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(200px, 1fr);
    grid-template-rows: repeat(2, minmax(150px, 1fr));
    gap: 1rem;
}

/* Individual tile */
.tile {
    background: rgba( 0 , 157 , 204,.5);
    /* opacity: 0.5; */
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.tile-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.tile-key {
    margin-top: .5rem;
    font-size: .85rem;
    color: #777;
}

#mapFrame {
    display: none;
    max-width: 100vw;
    max-height: 95vh;
}