html{
    scroll-behavior: smooth!important;
}

.main-content{
    min-height: 94vh;
    padding: 1px;
    background-color: rgb(228, 228, 228)!important;
}

.content{
    gap: 5px;
}

legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

.hg-100{
    height: 80vh!important;
}

.hg-50{
    height: 39.55vh!important;
}

#map { 
    height: 94vh;
    /* width: auto; */
    /* width: 90vw; */
    margin: auto!important; 
    /* overflow: hidden; */
    background-color: white;
}

.panel-1{
    border: 1px solid rgb(194, 194, 194);
    border-radius: 20px;
    background: #fff;
} 

.panel-2{
    border: 1px solid rgb(194, 194, 194);
    border-radius: 20px;
    padding: 1em;
    background: #fff;
} 

.panel-3{
    border: 1px solid rgb(194, 194, 194);
    border-radius: 20px;
    background: #fff;
    min-height: 83vh!important;
} 

.panel-3 input{
    width: 50%;
}

#config-show{
    font-size: 2rem;
    text-align: center;
    padding: 10px!important;
    border-radius: 50%;
    height: 60px;
    width: 60px;
}

.dropdown-menu{
    z-index: 6!important;
}

#all-buttons{
    position: absolute;
    width: 95vw;
    padding: 2em;
    padding-top: 5px;
    padding-left: 3.5em;
    padding-right: 3.5em;
    z-index: 4;
}

.action-btns{
    border: 1px solid gray;
    border-radius: 30px;
    background: #fff;
    padding: 10px;
    padding-left: 2em;
    padding-right: 2em;
}

.btn-single{
    border-radius: 30px;
    background: #fff;
    padding: 1em;
    border: 1px solid gray;
}

.status-sim{
    border-radius: 30px;
    background: #fff;
    padding: 1em;
    border: 1px solid gray;
    z-index: 4;
}

.btn-single:hover{
    cursor: pointer!important;
}

.flotable{
    border: 1px solid gray;
    border-radius: 20px;
    background: #cecece;
    padding: 0.5em;
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content; 
    max-height: 80vh;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow: scroll;
    z-index: 4!important;
    /* box-shadow: 10px 10px 49px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 49px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 49px 0px rgba(0,0,0,0.75); */
}

.flotable::-webkit-scrollbar {
    display: none;
}

#constrains{
    position: absolute;
    left: 2em;
    top: 15vh;
}

#config{
    position: absolute;
    left: 2em;
    top: 15vh;
}

#period{
    position: absolute;
    right:2em;
    top: 15vh;
}

#calibration{
    position: absolute;
    bottom: 2vh;
    right: 2em;
}

.footer{
    position: absolute;
    background-color: #fff;
    width: 20vw!important;
    border-radius:20px 20px 0px 0px;
    border: 1px solid gainsboro;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 95vh;
    z-index: 4;
    box-shadow: -1px -4px 5px 2px rgba(0,0,0,0.38);
    -webkit-box-shadow: -1px -4px 5px 2px rgba(0,0,0,0.38);
    -moz-box-shadow: -1px -4px 5px 2px rgba(0,0,0,0.38);
}

@media screen and (max-width:720px) {
    .footer{
        width:80vw!important;
    }
}


.logo{
    height: 50px;
    width: auto;
}

.mr-2{
    margin-right: 1em!important;
}

.loader{
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 6;
    top:0;
    .img{
        height: 10vh;
        width: auto;
    }
}