:root {
    --nav-height: 80px;
}

.pretty_container {
    border-radius: 5px;
    /*background-color: #2E3037;*/
    margin: 10px;
    padding: 25px;
    position: relative;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.12);
}

.pretty_container_expanded {
    margin: 0;
    padding: 0;
    position: relative;
    /*box-shadow: 0 0 2px 2px rgba(0,0,0,0.12);*/
}

body {
    /*color: #718BA5;*/
    /*background-color: #d6e4ea;*/
    overflow-x: hidden; /* Hide scrollbars */
}

/*.navbar .navbar-brand{*/
/*    margin-left:5% !important;*/
/*}*/

/* map style */
.map_viewport {
    height: 78vh;
    display: flex;
    position: relative;
}

.map_viewport_expanded {
    height: calc(100vh - var(--nav-height));
    display: flex;
    position: relative;
}

#map-y-slider {
    height: 80vh !important;
}

a.basemap-link {
    background-color: #ffa700;
    border-radius: 1.5em;
    color: #3d2900;
    /*text-transform:uppercase;*/
    text-decoration: none;
    padding: 1em 1.5em;
}

a.basemap-link:hover {
    background-color: #ffff60;
    cursor: pointer;
    color: black;
}

a.basemap-satellite {
    position: absolute;
    top: 2em;
    right: 2em;
}

a.basemap-roadmap {
    position: absolute;
    top: 4em;
    right: 2em;
}

.dropdown {
    margin-top: 20px;
}

#basemap-dropdown .Select-control {
    background-color: rgb(255, 255, 255) !important;
    min-width: 200px;
}

#basemap-dropdown .Select-value {
    border-color: #e3a700 !important;
}

#basemap-dropdown .Select-menu-outer {
    background-color: #0E3183;
    width: 41%;
    height: inherit;
    top: 56px;
    right: 20px;
    opacity: 1 !important;
    cursor: pointer;
    min-width: 200px;
}

#basemap-dropdown .Select-value-label {
    color: #000000 !important;
}

#basemap-dropdown .VirtualizedSelectFocusedOption {
    background-color: #4E9BEE;
    color: #ffffff;
    width: 40%;
    min-width: 200px;
}

#basemap-dropdown .Select-control, .Select div, .is-open>.Select-control {
    color: white;
    border-color: slategray;
}

#basemap-dropdown .is-open>.Select-control {
    opacity: 1;
}

#basemap-dropdown .Select-placeholder {
    color: darkgray;
}

#basemap-dropdown :not(.is-open) > .Select-control {
    border-color: slategray;
    opacity: 0.5 !important;
}

/*table, th, td {*/
/*    border: 1px solid white;*/
/*    border-collapse: collapse;*/
/*}*/
/*th, td {*/
/*    border: 1px solid gray;*/
/*    border-radius: 10px;*/
/*    padding-left: 10px;*/
/*    padding-right: 10px;*/
/*}*/

/* Base styling for the table */
table {
    width: 100%; /* Adjust as per your layout */
    border-collapse: collapse;
    border-spacing: 0;
    /*margin: 20px; !* Adjust for proper spacing *!*/
    background-color: #f9f9f9; /* Subtle background color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    border-radius: 10px; /* Rounded corners for the table */
    overflow: hidden; /* Ensures the border-radius is applied */
}

/* Styling for table headers */
thead th {
    background-color: #007BFF; /* Pleasant blue, adjust as needed */
    line-height: 1.4;
    height: 30px;
    color: white;
    font-weight: normal;
    padding: 10px 5px; /* More padding for a spacious look */
    text-align: left; /* Adjust based on preference */
    border-bottom: 2px solid #f0f0f0; /* Subtle separation from rows */
    box-sizing: border-box;
}

/* Styling for table cells */
td {
    padding: 10px;
    border-top: 1px solid #eaeaea; /* Lighter border for a softer look */
    color: #333; /* Darker text for better readability */
    vertical-align: middle; /* Adjust based on content */
}

.popup {
    display: block;
    position: absolute;
    padding: 2px 6px;
    font-family: sans-serif;
    font-size: 0.9em;
    background-color: #0E3183;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 5px;
    z-index: 1000;
}

.btn {
    padding: 7px 12px;
    font-size: 14px;
    background-color: #0E3183;
    color: white;
}

.btn:hover {
    background-color: #4E9BEE;
}

#adaptation-button {
    background-color: #FF5500;
}
#adaptation-button:hover {
    background-color: #FFAA00;
}

.homebtn {
    padding: 10px 25px;
    font-size: 14px;
    background-color: #5FCD94;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #313131;
}

.homebtn:hover {
    background-color: #469A6D;
}

.new-line {
    display: block;
}

.home-logos {
    display: inline-block;
    height: 120px;
    margin-top: 70px;
}

.home-logos img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-right: 30px;
}

.home-logos img:last-child {
    margin-right: 0px;
}

/*slider configurations*/

.rc-slider-track {
    background-color: #0E3183;
}

.rc-slider-dot-active {
    border-color: #0E3183;
    /*border: solid 2px red;*/
}

.rc-slider-handle {
    /*background-color: #0E3183;*/
    /*border-color: #0E3183;*/
    border: solid 3px #0E3183;
    width: 15px;
    height: 15px;
    /*box-shadow: 0 0 2px 2px rgba(0,0,0,0.12);*/

}

.rc-slider-handle:hover {
    border-color: #0E3183;
}

.rc-slider-handle-active:active {
    border-color: #0E3183;
}

.rc-slider-handle:focus {
    border-color: #0E3183;
}

.shepherd-button {
    color: white;
}

.btn-primary.active {
    background-color: #4E9BEE; /* Update with your desired active background color */
}

/* basic positioning */
.legend {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0px 10px;
    font-family: Poppins;
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0);
}

.legend li {
    float: left;
    /* margin-left: 20px; */
    margin-bottom: 10px;
    align-items: center;
    text-align: center;
    display: flex;
}

.legend span {
    /* border: 1px solid #ccc; */
    float: left;
    width: 25px;
    height: 12px;
    margin-right: 15px;
}

/* your colors */
.legend .tile-level1 {
    background-color: #FFF5B3;
}

.legend .tile-level2 {
    background-color: #D2EFA5;
}

.legend .tile-level3 {
    background-color: #B2E1B6;
}

.legend .tile-level4 {
    background-color: #64C3BF;
}

.legend .tile-level5 {
    background-color: #2CA1C2;
}

.legend .tile-level6 {
    background-color: #216DAF;
}

.legend .tile-level7 {
    background-color: #252A8A;
}

.legend .tile-level8 {
    background-color: #081D2B;
}

.legend .road-level1 {
    background-color: #FFFF00;
}

.legend .road-level2 {
    background-color: #FFAA00;
}

.legend .road-level3 {
    background-color: #CD6699;
}

.legend .road-level4 {
    background-color: #8400A8;
}

.legend .road-level5 {
    background-color: #002673;
}

.legend .asset-level1 {
    background-color: #FFFF73;
}

.legend .asset-level2 {
    background-color: #FFEBAF;
}

.legend .asset-level3 {
    background-color: #FFAA00;
}

.legend .asset-level4 {
    background-color: #FF5500;
}

.legend .asset-level5 {
    background-color: #A80000;
}

.legend .asset-level6 {
    background-color: #730000;
}

.legend .asset-level7 {
    background-color: #48000C;
}

.legend .asset-level8 {
    background-color: #000000;
}

#mobile-dropup-row {
    height: 45px;
    width: auto;
    padding-top:2px;
    margin-left: 0px;
    margin-right: 0px;
}

@media (max-width: 500px) {
    .hidden-mobile {
        display: none;
    }
}

.show-mobile {
    display: none;
}

@media (max-width: 500px) {
    .show-mobile {
        display: flex !important;
    }
    .col-4, #map-y-slider-collapse, #map-x-slider-collapse, #map-expansion-btn, .navbar-toggler  {
        display: none !important;
    }
    .map_viewport {
        height: calc(100vh - var(--nav-height)) !important;
    }
    #map-container {
        margin: 0px;
        padding: 0px;
    }
    #map-panel {
        width: 100% !important;
    }
    .px-3, .ms-2.navbar-brand {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .px-4 {
        padding-left: 0.5rem !important;
        padding-right: 1.5rem !important;
    }
    .py-3 {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    .legend-btn {
        bottom: 15px !important;
        left: 5px !important;
    }
    #basemap-dropdown {
        top: -10px !important;
        right: 0px !important;
    }
    .g-0 {
        flex-wrap: nowrap !important;
    }
    .mt-3 {
        top: -10px;
        left: 10px;
        width: 50px;
        height: 30px;
        position: absolute;
        z-index: 100;
    }
    .dropup-row, .dropup-group {
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        justify-content: center;
    }
    .dropup {
        width: 100% !important;
    }
}

.info-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    margin: 10px;
    background-color: #5FCD94;
    justify-content: center;
    align-items: center;
}

.modal-content {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-title {
    color: #000000;
}

.fixed-width {
    max-width: 700px; /* Or any other maximum width you want for the 4-column side */
}

.stretch-width {
    flex-grow: 1; /* Let the 8-column side stretch to fill the available space */
}