:root {
  --sidebar-width: 160px; 
    --color-white: #ffffff;
    --color-gray: #B4B4B4;
    --color-primary-green: hsl(165, 49%, 52%);
    --details-icon-color: #000000;
}

.header .app-name {
    font-size: clamp(20px, 5vw, 30px);
}

.basemap-container.active {
    border: 2px solid #007bff;
    background: #eaf3ff;
    border-radius: 8px;
}

/* Medium devices Tablet and all smaller devices (≥768px) */
/* @media (max-width: 768px) { */
@media screen and (max-width: 900px) {
    .details-icon{
        position: absolute;
        top: 10px;
        right: 10px;
        color: var(--details-icon-color);
        font-size: 20px;
        z-index: 1000;
        /* background-color: var(--color-white); */
        border-radius: 50%;
        cursor: pointer;

        width: 20px;                 
        height: 20px;
        display: flex;              
        align-items: center;
        justify-content: center;
    }

    .open-navigation-container {
        position: fixed;
        bottom: 8%;
        left: 45%;
        z-index: 1000;
    }

    .open-navigation{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        color: var(--details-icon-color);
        font-size: 20px;
        background-color: var(--color-white);
        border-radius: 50%;  
        padding: 7px 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

    .hide-mobile-nav-toggler_div{
        padding-top: 9px;
        /* padding-bottom: 5px; */
    }

    .hide-mobile-nav-toggler{
        display: block;
        width: 37px;
        border: 2px solid var(--color-white);
        border-radius: 16px;
    }

    .header {
        padding-top: 5px;
        border-bottom: none !important;
    }

    .map-nav-sAd{
        padding: 4px 12px;
        width: initial;
    }
    
    .header .app-name{
        /* font-size: 24px; */
        line-height: 100%;
        font-weight: 800;
        letter-spacing: -1px;
        /* padding: 0 20px; */
        padding: inherit;
        text-align: center;
    }

    .map-nav-sAd .frame-286-ecd{
        height: 32px;
        box-shadow: none;
        border-radius: 16px;
    }

    /* Side nav */
    .map-nav-Z9P .side-nav{
        /* display: none; */

        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        align-items: center;

        /* flex-direction: row; */
        height: 9%;
        position: absolute;
        z-index: 1000;
        bottom: 0;
        width: 100%;
        /* padding: 9px 12px; */
        padding: 0 12px 9px 12px;
        border-radius: 15px 15px 0 0;
        /* align-items: flex-start; */

        opacity: 0;
        visibility: hidden;
        transform: translateY(100%);
        transition: all 0.5s ease-in-out;
    }

    .map-nav-Z9P .side-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0%);
    }

    .map-nav-Z9P .side-nav .frame-293-CzH{
        width: 100%;
        margin: 0;
        height: inherit;
        /* padding-top: 5px; */
    }
    .map-nav-Z9P .side-nav .frame-293-CzH .auto-group-qeuu-7rM{
        flex-direction: row;
        justify-content: flex-start;
        overflow: scroll;
        padding: 0;
        gap: 10px;
    }

    .map-nav-Z9P .side-nav .frame-293-CzH .auto-group-qeuu-7rM .frame-308-X6m{
        width: auto;
        padding: 2px 10px;
        border-radius: 15px;
    }

    /* Hide minimize icon */
    .mi-chevron-double-right-1eu{
        display: none;
    }

    /* Hide specific side nav content from mobile view */
   .dashboard_div, .details_div, .manual_div, .api_div, .data_request_div{
        display: none !important;
    }

    /* Leaflet controls */
    .leaflet-bottom{
        bottom: 20%;
    }

    .leaflet-touch .leaflet-bar a{
        border-radius: 10px !important;
    }

    .leaflet-touch .leaflet-bar a:first-child{
        margin-bottom: 10px;
    }

    .leaflet-control-zoom, .leaflet-control-browser-print, .leaflet-control-measure, .leaflet-draw{
        display: none !important;
    }

    .minimize-box-mobile_div{
        padding-top: 9px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .minimize-box-mobile{
        display: block;
        width: 37px;
        border: 2px solid var(--color-gray);
        border-radius: 16px;
    }

    .deforest_legend, .watershed_legend, .footprint_classed_legend_box{
        /* right: 10px; */
        left: 10px;
        width: 50%;
        height: max-content;
        z-index: 900;
    }

    .box {
        top: unset;
        bottom: 0;
        width: 100%;
        margin-left: 0;
        max-height: 280px;
        z-index: 10001;
        border-radius: 15px 15px 0 0;
        background: var(--color-white);
    }
    
    .box-title{
        display: none !important;
    }

    .box.details .box-title, .footprint_classed_legend_box .box-title{
        display: flex !important;
    }

    .footprint_classed_legend_box .box-title{
        padding: 0;
    }

    .footprint_classed_legend_box .box-title .title-text{
        font-size: 10px;
        line-height: 20px;
    }

    .footprint_classed_legend_box .accordion-button.collapsed::after, .footprint_classed_legend_box .accordion-button::after{
        font-size: 12px;
    }

    .box.details {
        right: 10px;
        top: 45px;
        width: 64%;
        max-height: 280px;
        z-index: 10001;
        border-radius: 15px;
    }

    .box.footprint_classed_legend_box{
        top: 10px;
        left: 10px;
        width: 37%;
        border-radius: 15px;
    }

    .galamsey-box-body{
        padding: 5px;
    }

    .galamsey-layer-name {
        font-size: 10px;
    }

    .details {
        z-index: 1000;
    }

    #loader-footprint-legend-container{
        padding: 5px 5px 0 5px;
    }

    #skeleton_footprint_loader .skeleton-row:first-child {
        display: none;
    }

    #skeleton_footprint_loader .skeleton-table{
        height: 15px;
    }

    #skeleton_footprint_loader{
        height: 75px;
    }
}



/* Medium devices Tablet Only (768px) */
@media (min-width: 768px) {
    .details-icon{
        font-size: 22px;
        width: 22px;                 
        height: 22px;
    }

    .header .app-name{
       font-size: 28px;
    }

    .partners-container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    /* .map-nav-sAd .frame-286-ecd{
        width: 70%;
    } */
}

/* Medium devices Laptops Only (1024px) */
@media screen and (min-width: 1024px) {
    .map-nav-sAd .frame-286-ecd{
        width: auto;
    } 
}

/* For medium laptop screens only */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .map-nav-sAd .frame-286-ecd{
        height: 3.2rem;
    } 

    .map-nav-sAd .col-lg-6 {
        width: 100%;
        text-align: center;
    }
    .map-nav-sAd .col-lg-6.partners-container {
        width: 100%
    }

    .map-nav-sAd{
        height: 98px;
        align-items: flex-start;
        align-content: flex-start;
        padding: 0 4rem;
    }

    .header .app-name {
        margin-bottom: 0;
        font-size: 24px;
    }
}


@media (max-width: 768px) {
    .box.details {
        width: 50%;
        max-height: 350px;
    }
}


/* Small devices (≥576px) */
@media screen and (max-width: 576px) {
    .map-nav-Z9P {
        /* height: Calc(100lvh - 98px); */
        height: Calc(100dvh - 98px);
        /* height: calc(var(--vh, 1vh) * 100 - 98px); */
    }

    #modal-container .modal-background .modal{
        max-width: 90%;
        padding: 15px;
    }

    .box {
        /* right: 10px; */
        /* top: 45px; */
        /* width: 44%; */
        max-height: 280px;
        /* z-index: 10001; */
    }

    .box.details {
        width: 64%;
    }
    .map-nav-sAd .frame-286-ecd{
        column-gap: 0.1rem;
    }

    .map-logo{
        max-height: 2.1rem;
    }
}


/* Small devices (≥480px) */
@media screen and (max-width: 480px) {

}


/* Small devices (≥360px) */
@media screen and (max-width: 360px) {
    .map-logo{
       max-height: 1.8rem;
    }
}