/* SIDEBAR RIGHT */
.sidebar-basemap,
.sidebar-layer,
.sidebar-legend {
    position: fixed;
    right: -250px;
    width: 250px;
    height: 100%;
    background-color: #343a40;
    /* padding-top: 60px; */
    transition: right 0.3s;
    z-index: 100;
    border: 1px solid grey;
    padding: 10px;
    overflow-y: auto;
    overflow-x: auto;
}

.sidebar-basemap.active,
.sidebar-layer.active,
.sidebar-layer2.active,
.sidebar-legend.active {
    right: 0;
}

/* Transisi control-leaflet */
.leaflet-control-layers,
.leaflet-control-attribution,
.leaflet-control-zoom {
    transition: right 0.3s;
}

/* Transisi Container control basemap, layer, legend */
.container-control-basemap,
.container-control-layer,
.container-control-legend,
.container-control-street-view {
    transition: right 0.3s;
}

/* Button control basemap, layer, legend */
.button-control-basemap,
.button-control-layer,
.button-control-legend {
    background-color: transparent !important;
    border: none !important;
    width: 20px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Button control street view */
.button-control-street-view {
    background-color: transparent !important;
    border: none !important;
    width: 10px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Legend GEE */
.button-control-legend-gee {
    background-color: transparent !important;
    border: none !important;
    /* width: 80px; */
    /* height: 250px; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* cursor: pointer; */
}

/* style image legend GEE */
.custom-image-gee {
    width: 100%;
    height: 100%;
}

/* Style image for control button */
.custom-image {
    width: 30px;
    height: 30px;
}

/* SIDEBAR LEFT */
.sidebar-analisis {
    position: fixed;
    left: -450px;
    width: 450px;
    height: 100%;
    background-color: #343a40;
    transition: left 0.3s;
    z-index: 100;
    border: 1px solid grey;
    padding: 10px;
    overflow-y: auto;
    overflow-x: auto;
}

.sidebar-analisis-point.active,
.sidebar-analisis.active {
    left: 0;
}

/* Transition */
/* Container control analisis */
.container-control-analisis,
.leaflet-control-scale,
/* search */
.leaflet-control-geocoder,
/* navigasi bar */
.leaflet-control-navbar,
.leaflet-draw {
    transition: left 0.3s;
}

/* Button control analisis */
.button-control-analisis {
    background-color: transparent !important;
    border: none !important;
    width: 20px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Display HP */
/* Width sidebar left and right */
@media (max-width: 480px) {

    .sidebar-analisis {
        left: -250px;
        width: 250px;
    }

    .sidebar-basemap,
    .sidebar-layer,
    .sidebar-legend {
        right: -200px;
        width: 200px;
    }
}