/*// Extra small devices (portrait phones, less than 576px)
*/@media (max-width: 575.98px) {
    .track-obj-box-list {
        position: absolute;
        max-height: 40vh;
        bottom: 65px;
        left: 5px;
        right: 5px;
        background: #ff0000;
    }
}

/*// Small devices (landscape phones, less than 768px)
*/
@media (max-width: 767.98px) {

}

/*// Medium devices (tablets, less than 992px)
*/
@media (max-width: 991.98px) {

    /*.map {*/
    /*    height: 66vh;*/
    
    /*}*/


    .track-obj-box-list {
        position: relative;
        height: 28vh;
        bottom: unset;
        left: unset;
        right: unset;
        top: unset;
        background: #fff;
        width: 100%;
    }

    /*.ol-popup {*/
    /*    padding: 5px;*/
    /*    border-radius: 10px;*/
    /*    border: 1px solid #cccccc;*/
    /*    width: 300px;*/
    /*    min-height: 100px;*/
    /*}*/

    .ol-popup {
        padding: 15px 5px 5px 5px;
        width: 300px;
        min-height: 100px;
    }

    .fuel-chart-canvas {
        position: absolute;
        bottom: 5px;
        right: 5px;
        left: 5px;
        width: unset;
        height: 12vh;
    }

        .fuel-chart-canvas div:nth-of-type(2) {
            height: 9vh;
        }

        .fuel-chart-canvas div:nth-of-type(3) {
            position: absolute;
            bottom: 5px;
            left: 0px;
        }


    .historyList {
        display:none;
    }


    .history-params-box {
        position: relative;
        min-height: 26vh;
        width: 100%;
        top: unset;
        left: unset;
        background: #fff;
    }
}

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {

}

/*// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
*/