.driver-template .menu .main-menu ul li a{
    height: 100px;
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    border: 1px solid #000;
    color: #3a3a3a;
    transition: color 300ms;
    transition: background 300ms;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.44), 0 1px 6px rgba(0, 0, 0, 0.44);
}

.map-hidden .main-nav-routes-icon,
.main-nav-map-icon{
display:none;
}
.map-hidden .main-nav-map-icon{
display:block;
}


.map-panel{
    height: calc(100% - 80px);
    width: 100%;
    position: fixed;
    top: 80px;
    left: 0;
    transform:translateX(90%);
    transition: all .3s ease-out;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.14), 0 1px 6px rgba(0, 0, 0, 0.14);
}

.map-panel.active{
    transform:translateX(0);
}
#driver-map{
    height:100%;
    width:100%;
}

@media (max-width: 1199px){
    .driver-template  .menu .main-menu {
        width: 150px;
    }
    #app-container.main-hidden .main-menu, #app-container.menu-hidden .main-menu {
       transform: translateX(-200px);
    }

    #app-container.sub-hidden main, #app-container.menu-sub-hidden main, #app-container.menu-hidden main {
        margin-left: 40px;
        margin-right:120px;
    }
}