/*https://colorscheme.ru/#3x62t6ngMw0w0*/

:root{
    --primary: #464F56;
    --primary1: #373D40;
    --primary2: #172938;
    --primary3: #93A0AB;
    --primary4: #99A3AB;
    
    --secondary: #52495A;
    --secondary1: #3F3A44;
    --secondary2: #2A183B;
    --secondary3: #A195AD;
    --secondary4: #A49BAD;

    --secondary_: #6F7A62;
    --secondary_1: #565B4E;
    --secondary_2: #3B4F20;
    --secondary_3: #B0BDA0;
    --secondary_4: #B4BDA8;

    --tertiary: #867A6B;
    --tertiary1: #645E55;
    --tertiary2: #574123;
    --tertiary3: #C2B6A5;
    --tertiary4: #C2B9AD;

    --dark10: rgba(0, 0, 0, .1);
    --dark20: rgba(0, 0, 0, .2);
    --dark30: rgba(0, 0, 0, .3);
    --dark40: rgba(0, 0, 0, .4);
    --dark50: rgba(0, 0, 0, .5);

    --white10: rgba(255, 255, 255, .1);
    --white20: rgba(255, 255, 255, .2);
    --white30: rgba(255, 255, 255, .3);
    --white40: rgba(255, 255, 255, .4);
    --white50: rgba(255, 255, 255, .5);

    --heightHeader: 120px;
    --heightFooter: 40px;
    --heightNavbar: 54px;
    --heightMap: calc(100vh - var(--heightHeader) - var(--heightFooter) - var(--heightNavbar))
}

*{
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: var(--secondary); }
::-webkit-scrollbar-thumb { background-color: var(--dark50); }

/*base.html*/

.header{
    background-color: var(--primary4);
}

.header{
    height: var(--heightHeader);
}

#nav{
    background-color: var(--primary);
}

#nav .nav-link{
    padding: 15px 10px;
}

#nav .nav-item:hover{
    background-color: var(--dark10);
}

#nav .nav-item.active{
    background-color: var(--dark20);
}

main{
    background-color: var(--secondary_4);
}

.footer{
    background-color: var(--primary4);
    height: var(--heightFooter);
}

/*map.html*/
#map{
    padding: 0;
}

#map-nav,
#map,
#map-info{
    height: var(--heightMap);
}

#map-nav::-webkit-scrollbar-track {
    background-color: var(--dark30); 
}

#map-nav .nav-item:not(:last-child){
    border-bottom: 1px solid var(--dark20);
}

#map-nav .nav-item:hover{
    background-color: var(--dark10);
    cursor: pointer;
}

#map-overlay{
    background: var(--secondary_4);
    border: 1px solid var(--dark20);
    padding: 10px;
}

.treeview li{
    border-bottom: 1px solid var(--dark20);
    color :#369;
    font-weight: 500;
    padding: 5px 10px;
}

.treeview > li:first-child{
    border-top: 1px solid var(--dark20);
}

.treeview li:hover{
    background-color: var(--dark10);
    cursor: pointer;
}

.treeview,
.treeview ul{
    list-style: none;
}