html, body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family:'Noto Sans', sans-serif;
    overflow:hidden;
}


*{
    /*Keep it inside 100%*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

button{
    cursor: pointer;
    background: #F0F0F0;
    border:1px solid gray;
}

button.active{
    background: #467b3a;
    color: white;
}

.grid-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:8px;
}


#map{
    height:100%;
    width:100%;
    z-index: 0;
}


#widgets{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display:flex;
    flex-direction: column;
    gap:8px;
}

#filter{
    display: grid;
    grid-template-columns: repeat(3, 64px);
    height: 36px;
}

#mode{
    display: grid;
    grid-template-columns: repeat(2, 96px);
    height: 36px;
}

#filter button,
#mode button{
    border-left:none;
}
#filter button:first-of-type,
#mode button:first-of-type{
    border-left:1px solid gray;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
#filter button:last-of-type,
#mode button:last-of-type{
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}


#zoom{
    display: grid;
    grid-template-rows: repeat(3, 36px);
    margin-left: auto;
}

#zoom button{
    border-top:none;
    width: 38px;
}
#zoom button:first-of-type{
    border-top:1px solid gray;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#zoom button:last-of-type{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

#labels{
    margin-left: auto;
}

#labels button{
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*--- POPUPS ---------------------*/
.popup{
    display:none;

    position: absolute;
    z-index: 1;
    bottom:18px;
    left:0;
    width:100%;
}

.popup .flex{
    display: flex;
    justify-content: center;
    width:100%;
    font-family: 'Noto Sans', sans-serif;
}

.popup .card{
    background: white;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #f1f1f1;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);

    width:100%;
    max-width: 400px;
}

.popup p{
    margin:2px 0;
    font-size: 0.9rem;
}

.popup .inactive{
    opacity:0.2;
}

/*... TRAIL POPUP ................*/
#trail-info .card{
    display: grid;
    grid-template-columns: 1fr 24px;
    gap:8px;
}

#trail-info h2{ 
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    margin:0;
}
#trail-info h3{ 
/*    color:darkgray;*/
    font-size: 1rem;
    font-style: italic;
    font-weight: normal;
    margin: 0 0 4px 0;
}

#trail-info .use{
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    width: 100%;
}

/*... ROUTE POPUP ................*/
#route-info .card{
    display: block;
}

#route-info .info{
    display:grid;
    grid-template-columns: 24px 1fr repeat(3, 24px);
    gap:8px;
    margin-bottom:8px;
}

#route-info .legend{
    display:grid;
    grid-template-columns: repeat(2, 1fr) 32px;
    gap:8px;
}

#route-info .legend .hgl{
    text-align: center;
    border-radius: 99px;
    padding:4px 0;
}
#route-info .legend .single{background-color: cyan;}
#route-info .legend .double{background-color: lime;}

#route-info button.clear{
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trail-label{
    background-color: #80808080;
    border:none;
    box-shadow: none;
    color: white;
    font-family: "Noto Sans", sans-serif;
    font-size: 18px;
    font-weight: bold;
    border-radius: 12px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.trail-label.Aqua{background-color:#00ced180;}
.trail-label.Black{background-color:#00000080;}
.trail-label.Brown{background-color:#a0522d80;}
.trail-label.Blue{background-color:#0000cd80;}
.trail-label.Yellow{background-color:#ffff0080;}
.trail-label.Green{background-color:#00640080;}
.trail-label.Light-Blue{background-color:#1e90ff80;}
.trail-label.Orange{background-color:#ff8c0080;}
.trail-label.Pink{background-color:#ffc0cb80;}
.trail-label.Purple{background-color:#80008080;}
.trail-label.Red{background-color:#ff000080;}
.trail-label.Violet{background-color:#da70d680;}
.trail-label.White{
    background-color:#ffffff80;

}

/*================================*/
/*    HOVER                       */
/*================================*/
@media (hover: hover) and (pointer: fine) {
    button:hover{background: #d6d6d6; }
    button.active:hover{background: #306525; }
    #route-info button.clear:hover{background: #d6d6d6; }
}