@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

[data-bs-theme="light"] {
    --bs-tools-header-color: #1b3c5c;
    --bs-tools-name-color: #181c32;
    --bs-tools-icon-color: #1f3384;
    --bs-tools-btn-bg-color: #f3f3f3;
    --bs-tools-btn-border-color: #e2e6e9;
}

[data-bs-theme="dark"] {
    --bs-tools-header-color: #c3821f;
    --bs-tools-name-color: #b5b5b5;
    --bs-tools-icon-color: #ffffff;
    --bs-tools-btn-bg-color: #35393c;
    --bs-tools-btn-border-color: #414a50;
}

body {
    background: #fff !important;
}

body,
html,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
}
.esri-view .esri-view-surface--inset-outline:focus::after {
    outline: auto 0px Highlight !important;
    outline: auto 0px -webkit-focus-ring-color !important;
}

.header {
    position: absolute;
    z-index: 9;
    background: var(--bs-body-bg);
    padding: 1rem;
    left: 27px;
    top: 27px;
    /* bottom: 27px; */
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    width: 300px;
    border-radius: 1rem;
    /* height: calc(100% - 54px); */
    transition: 0.45s;
}

@media screen and (min-width: 1600px) {
    .header {
        /* height: calc(100% - 254px); */
    }
}

.header.only {
    /* height: 130px;
    overflow: hidden; 
    transition: 0.45s; */
}

.inner {
    height: 100%;
}

.flex-stack {
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 171px;
}

.theme-mode-stick {
    position: absolute;
    width: 54px;
    height: 15px;
    z-index: -1;
    background: #1b3c5c;
    right: 2px;
    top: 10px;
    border-radius: 30px;
    transition: 1.5s;
}

[data-bs-theme="light"] .theme-mode-stick {
    background: #ff9900;
} 
.floatbtn {
    position: absolute;
    opacity: 1;
    /* transition: 0.5s; */
    visibility: visible;
    top: 27px;
    left: 335px;
    z-index: 9;
    transition: 0.5s;
    &:is(.animate) {
        /* opacity: 0;
        left: 0px;
        transition: 0.5s;
        visibility: hidden; */
        div{
            cursor: not-allowed;
            div{
                pointer-events: none;
                opacity: 0.6;
            }
        }
    }
    div{
        display: flex;
        list-style: none;
        gap: 10px;
        div{
            text-align: center;
            padding: 5px 10px;
            background: white;
            box-shadow: 0 1px 2px rgba(60,64,67,0.3),0 2px 6px 2px rgba(60,64,67,0.15);
            white-space: nowrap;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            font-weight: 500;
            align-items: center;
            display: flex;
            gap: 4px;
            transition: 0.25s;
            &:hover{
                box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 0 0 1px #1b3c5c;
                transform: translateY(-2px);
                transition: 0.25s;
            }
            &:is(.floatbtnSelected){
                box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 0 0 3px #1b3c5c;
                transform: translateY(-5px);
            }
        }
    }
}
.thmbtn {
    position: absolute;
    top: 25px;
    right: 70px;
    z-index: 9;
    filter: drop-shadow(0px 4px 9px #00000054);
}

.theme-mode-icon {
    width: 36px;
    height: 36px;
    text-align: center;
    border-radius: 100px;
    display: grid;
    place-content: center;
    text-decoration: none;
    transition: 1s;
}

.theme-mode-icon span {
    transition: 1s;
    transform: rotate(-45deg);
}

.theme-mode-icon.dark {
    background: #1b3c5c;
    color: #ffffff;
    transform: translateX(-24px);
}

.theme-mode-icon.dark span {
    transform: rotate(0deg);
}

.theme-mode-icon.light {
    background: #ff9900;
    color: #ffffff;
    transform: translateX(0px);
}

.theme-mode-icon.light span {
    transform: rotate(180deg);
}


.make-mymap-btn {
    width: 36px;
    height: 36px;
    text-align: center;
    border-radius: 100px;
    display: grid;
    place-content: center;
    text-decoration: none;
    transition: 1s;
}

.make-mymap-btn.dark {
    background: #1b3c5c;
    color: #ffffff;
}

.make-mymap-btn.light {
    background: #ff9900;
    color: #ffffff;
}

.logo-link.toggle .logo.light {
    display: block;
}

.logo-link .logo.dark {
    display: block;
}

.logo-link .logo.light {
    display: none;
}

.logo-link.toggle .logo.dark {
    display: none;
}

.menu-icon {
    text-decoration: none;
    color: #1f3384;
    width: 36px;
    height: 36px;
    display: inline-grid;
    background: #e4e7f1;
    place-content: center;
    border-radius: 90px;
    margin-right: 7px;
}

.tool-btn.qr {
    background: #ffffff;
    padding: 5px;
    width: 36px;
    height: 34px;
    margin-left: 9px;
    border-radius: 5px;
    border: 1px solid #4792ff;
}

.tool-btn.qr span {
    color: #1f3384 !important;
}

.tool-btn .tools-name {
    color: var(--bs-tools-name-color);
    font-size: 12px;
    font-weight: 600 !important;
    display: none;
}

.tool-btn span.material-symbols-outlined {
    color: var(--bs-tools-icon-color);
    font-size: 30px;
}

.tool-btn {
    display: grid;
    place-content: center;
    text-align: center;
    width: 100%;
    background: var(--bs-tools-btn-bg-color);
    border: 1px solid var(--bs-tools-btn-border-color);
    padding: 9px;
    height: 48px;
    text-decoration: none;
    border-radius: 5rem;
    transition: 0.25s;
}

.tool-btn:hover {
    background: #e0ecff;
    border: 1px solid #c0cfe9;
}

.tool-btn:hover .tools-name,
.tool-btn:hover .material-symbols-outlined {
    color: #3e56ff;
}


.tool-btn:hover,
.tool-btn.active {
    background: #e0ecff;
    border: 1px solid #c0cfe9;
    box-shadow: 0px 2px 0px #797979;
    transform: translateY(-2px);
}

.tool-btn:hover .tools-name,
.tool-btn:hover .material-symbols-outlined,
.tool-btn.active .tools-name,
.tool-btn.active .material-symbols-outlined {
    color: #3e56ff;
}

.tools-outer {
    /* height: calc(100% - 171px); */
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    transition: 0.5s;
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.custom-tooltip-primary {
    --bs-tooltip-bg: var(--bs-primary-bg-subtle);
    --bs-tooltip-color: var(--bs-primary-text);
}

.custom-tooltip-danger {
    --bs-tooltip-bg: var(--bs-danger-bg-subtle);
    --bs-tooltip-color: var(--bs-danger-text);
}

.custom-tooltip-success {
    --bs-tooltip-bg: var(--bs-success-bg-subtle);
    --bs-tooltip-color: var(--bs-success-text);
}

.tools-outer::-webkit-scrollbar {
    background: #ffffff66 !important;
}

/*  change Map Layer start */
#change-map-layer {
    position: fixed;
    bottom: 18px;
    left: auto;
    right: 18px;
    z-index: 999;
}

.blur-box {
    background-color: var(--bs-body-bg) !important;
    border: 0px solid #ffffff;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    border-radius: 7px;
    overflow: hidden;
}

#change-map-layer ul {
    padding: 15px;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 9px;
}

#change-map-layer ul li {
    margin: 0px 0px;
    text-align: center;
}

.blur-box.bb2 ul li {
    width: 72px;
}

#change-map-layer ul li a {
    text-decoration: none;
    color: var(--bs-body-color);
    display: block;
}

#change-map-layer ul li:hover img {
    border: 2px solid #376ac7;
}

#change-map-layer ul li:hover a {
    color: #3384ff;
}

#change-map-layer ul li img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 9px;
}

#change-map-layer ul li a p {
    margin-top: 5px;
    font-size: 9px;
    font-weight: 500;
}

.blur-box.bb2.show {
    transform: translateY(0px) !important;
    transition: 0.45s;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.blur-box.bb2 {
    bottom: 18px !important;
    right: 18px !important;
    transform: translateY(-20px);
    transition: 0.45s;
    opacity: 0;
    visibility: hidden;
    display: block;
}

/* change Map Layer end */



.gj-unselectable {
    width: 100% !important;
}

.gj-tree-bootstrap-3 ul.gj-list-bootstrap li {
    background: var(--bs-tools-btn-bg-color);
    margin-top: 7px !important;
}

.esri-component.esri-attribution.esri-widget {
    display: none;
}

::-webkit-scrollbar {
    width: 7px;
    background: #ffffff66;
    height: 5px;
    border-radius: 50px;
    cursor: pointer;
}


.tools-outer::-webkit-scrollbar-thumb {
    background: #ffd080 !important;
}

::-webkit-scrollbar-thumb {
    background: #ffd080;
    border-radius: 50px;
}

.scale-number {
    position: absolute;
    left: 27px;
    bottom: 18px;
    padding: 7px 14px;
    background-color: var(--bs-body-bg) !important;
    border: 0px solid #ffffff;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    border-radius: 7px;
    z-index: 9;
}

.scale-number p,
.hash-Box p {
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    /* text-transform: uppercase; */
    color: var(--bs-body-color);
    margin-bottom: 0px;
}

.hash-Box {
    position: absolute;
    right: 99px;
    bottom: 18px;
    padding: 7px 14px;
    background-color: var(--bs-body-bg) !important;
    border: 0px solid #ffffff;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    border-radius: 7px;
    z-index: 9;
}
     .hash-Box+.hash-Box {
            left: 27px;
            right: auto;
            bottom: 60px;
        }

.search-box {
    position: relative;
    width: 100%;
    padding: 0px;
    /*right: 18px;*/
    /*top: 27px;*/
    z-index: 999;
    background: var(--bs-tools-btn-bg-color);
    border: 1px solid var(--bs-tools-btn-border-color);
    /* box-shadow: 0 1px 3px rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15); */
    border-radius: 7px;
    margin-bottom: 27px;
}

.search-box .esri-search__submit-button {
    border-radius: 0px 7px 7px 0px;
}

.search-box #divSearch-source-menu-button {
    border-radius: 7px 0px 0px 7px;
}

.search-box .fa-search {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px;
    height: 100%;
    width: 45px;
    cursor: pointer;
    background: #1a64b1;
    border-radius: 0px 5px 5px 0px;
    display: grid;
    place-content: center;
    color: #ffffff;
}


.tool-popup {
    /* max-height: 360px; */
    overflow: hidden;
    /* min-width: 320px; */
    /* max-width: 100vh; */
    /* z-index: 9; */
    background: var(--bs-body-bg);
    position: absolute;
    top: 27px;
    width: 370px;
    left: calc(100% - 420px);
    z-index: 999;
}

.tool-header {
    background: var(--bs-tools-header-color);
    padding: 10px;
    position: sticky;
}

.tool-header span,
.tool-header h4 {
    color: #ffffff !important;
}

.tool-popup-body {
    max-height: 360px;
    overflow: auto;
    min-width: 320px;
    max-width: 100vh;
    padding: 16px;
    background: var(--bs-body-bg);
}

.collapse-popup-body {
    max-height: 0px;
    padding: 0;
    transition: 0.5s;
}


.tool-popup-body {
    transition: 0.5s;
}
.tool-popup span {
    cursor: pointer;
    color: var(--bs-body-color);
}

#Tocbox .esri-layer-list__item-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

[class^=esri-icon-],
.esri-building-phase-picker__arrow-left,
.esri-building-phase-picker__arrow-right,
.esri-building-level-picker__arrow-up,
.esri-building-level-picker__arrow-down {
    font-size: 18px;
}

.menu-bottom-box-heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.watermark-nic {
    width: 160px;
    position: fixed;
    z-index: 99;
    bottom: 18px;
    right: 0;
    left: 0;
    margin: 0 auto;
    opacity: 1;
}

/*esri plus minus icon start*/
.esri-ui-top-left.esri-ui-corner .esri-component.esri-zoom.esri-widget {
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    border-radius: 5px !important;
    margin-bottom: 0px !important;
    overflow: hidden;
}

.esri-layer-list__item {
    background-color: var(--bs-tools-btn-bg-color);
    border-bottom: 0px solid rgb(0 0 0 / 30%);
    font-size: 15px;
    font-family: "Poppins", sans-serif;
}

.esri-layer-list__item--has-children {
    margin-top: 7px;
}

.esri-ui-top-left {
    bottom: auto !important;
    right: 0px !important;
    top: 12px !important;
    left: auto !important;
}

.esri-widget--button {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/*esri plus minus icon end*/

.esri-feature-content table {
    font-size: .875em;
    margin-top: 1rem !important;
}

.esri-feature-content .table>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

.esri-ui .esri-popup {
    /* border-radius: 0.5rem;
    overflow: hidden; */
    box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), .15) !important;
}

.esri-popup__main-container {
    background-color: var(--bs-body-bg);

}

.esri-popup__button,
.esri-widget__heading {
    color: var(--bs-body-color);
}

.esri-feature-content table tbody,
td,
tfoot,
th,
thead,
tr {
    background-color: var(--bs-body-bg);
}

.esri-popup__pointer-direction,
.esri-popup__navigation {
    background-color: var(--bs-body-bg);
}

.esri-popup__header,
.esri-popup__header-container--button,
.esri-popup__header-buttons,
.esri-popup__feature-menu-header {
    background-color: var(--bs-tools-header-color) !important;
    border-radius: 7px 7px 0px 0px;
}

.esri-popup__header-container--button .esri-widget__heading,
.esri-popup__header-buttons .esri-popup__button,
.esri-popup__feature-menu-header {
    color: #fff;
    background-color: var(--bs-tools-header-color) !important;
}

.esri-popup__button.esri-popup__button--dock {
    display: none;
}

.esri-sketch__info-count-section {
    display: none !important;
}

.spinner {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    position: absolute;
    z-index: 9;
    background: #ffffff47;
    backdrop-filter: blur(4px);
}

.spinner-border.outer {
    margin: -40px -8px;
    border: var(--bs-spinner-border-width) solid #ff6a00;
    border-bottom-color: transparent;
    width: 3rem;
    height: 3rem;
}

.spinner-border.inside {
    border: var(--bs-spinner-border-width) solid #218d24;
    border-right-color: transparent;
}




/* <!--basemap design--> */
.esri-basemap-gallery__item-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 9px;
    padding: 12px;
    margin-bottom: 0;
}

.esri-basemap-gallery__item {
    display: grid !important;
    border-radius: 9px;
    text-align: center;
}

.esri-basemap-gallery__item-title {
    margin-top: 5px;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    line-height: 1;
}

.esri-basemap-gallery__item-thumbnail {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto;
    border-radius: 9px;
}

.esri-basemap-gallery__item {
    border-left: none !important;
    border-right: none !important;
    margin-top: 0px !important;
}

.esri-ui-corner .esri-expand .esri-widget--panel-height-only {
    width: auto !important;
    background-color: #fff !important;
    border: 0px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
    border-radius: 7px !important;
}

.esri-basemap-gallery {
    background-color: var(--bs-body-bg) !important;
}

.esri-directions__save-buttons calcite-button,
.esri-directions__save-as-button-with-popover {
    display: none;
}


.info-popup-box {
    position: fixed;
    left: 350px;
    bottom: 20px;
    right: 150px;
    border-radius: 10px;
    background: var(--bs-body-bg);
    overflow: hidden;
    z-index: 1001;

}

.info-popup-box-inner {
    padding: 15px;
    min-height: 150px;
    max-height: 250px;
    width: 320px;
    overflow: auto;
}

.trBufferActive {
    background-color: #183f74;
    color: #fff;
}

.table-hover>tbody>tr.trBufferActive:hover>* {
    color: #ffffff;
}

#tableBuffered nav {
    position: sticky;
    top: -16px;
    background: var(--bs-body-bg);
    padding-top: 10px;
}

#tableBuffered table thead {
    position: sticky;
    top: 35px;
    background: var(--bs-body-bg);
}

/* .timeSlider {
    position: absolute;
    left: 350px;
    right: 75%;
    bottom: 20px;
} */
.timeSlider {
    position: absolute;
    left: 350px;
    right: 99px;
    bottom: 20px;
    background: var(--bs-body-bg);
    border-radius: 10px;
    z-index: 99;
}

.timeSlider .text-primary-emphasis {
    font-size: 14px;
}

.hashContainer {
    position: absolute;
    right: 99px;
    bottom: 55px;
    padding: 7px 14px;
    background-color: var(--bs-body-bg) !important;
    border: 0px solid #ffffff;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    border-radius: 7px;
    z-index: 9;
}

.hashContainer p {
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    /* text-transform: uppercase; */
    color: var(--bs-body-color);
    margin-bottom: 0px;
}

.header.only .tools-outer {
    /* height: 0px; */
    max-height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    margin-top: 0rem;
    padding-top: 0rem;
    border-top: none !important;
}

.ui-autocomplete{
    z-index: 9999;
    list-style: none;
    background-color: var(--bs-body-bg);
    border-radius: 9px;
    width: 266px !important;
    box-shadow: 0px 9px 18px #00000045;
    margin-top: 7px;
    padding: 16px;
    font-size: 14px;
    max-height: 500px;
    min-height: 150px;
    overflow: auto;
}

.ui-menu-item-wrapper {
    position: relative;
    border-bottom: 1px solid #ddd;
    padding: 5px 7px;
    margin-bottom: 7px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.25s;
} 

.ui-menu-item-wrapper:before{
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-btn-color);
    top: 0px;
    left: 0px;
    transition: 0.45s;
    z-index: -1;
    border-radius: 5px;
}
.ui-menu-item-wrapper:hover:before{
    width: 100%;
}

.ui-menu-item-wrapper.ui-state-active{   
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-btn-color); 
    transition: 0.45s; 
}

/* .ui-menu-item-wrapper:hover {
    color: #001f3c;
    background: #e4e7f1;
} */



/*new css add start*/
.tb-content-ul {
    padding-left: 0px;
    margin-bottom: 0px;
}

    .tb-content-ul li {
        padding: 10px 7px;
        background: var(--bs-tools-btn-bg-color);
        margin-bottom: 9px;
    }
.login-btn {
    position: absolute;
    text-decoration: none;
    right: 144px;
    z-index: 9;
    top: 22px;
    display: flex;
}



/*09-01-2024 RD mobile view*/
 .header.footer {
    top: auto !important;
    bottom: 0px;
    left: 0;
    right: 0;
    width: 100%;
        padding: 5px;
    border-radius: 0;
    position: fixed;
}
        .footer .tool-btn{
               height: 40px;
    width: 90px;
    display: grid;
    place-content: center;
    background: none;
    border: none;
        }
        .footer h6.small{
            line-height: 1;
    margin: 0px;
                font-size: 9px;
        }
        .footer .tool-btn span.addmore {
        width: 54px;
    height: 54px;
            font-size: 36px;
            margin: 0 auto 9px auto;
    margin-top: -37px;
            color: var(--bs-white);
            box-shadow: 0px 7px 13px -5px #00000080;
}
        .more-menu {
        position: absolute;
    bottom: 51px;
    z-index: 9998;
    left: 12px;
    right: 12px;
    background: var(--bs-body-bg);
    box-shadow: 0px -6px 18px rgb(0 0 0 / 27%);
    border-radius: 27px 27px 0px 0px;
    padding: 0px 0px 20px 0px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transform-origin: bottom;
    transition: 0.5s;
}
        .more-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
        
        .more-menu ul {
    list-style: none;
    padding: 9px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    margin: auto;
}
        .more-menu .m-li {
    position: relative;
    width: auto;
}
        .more-menu .m-li a {
    color: var(--bs-tools-icon-color);
    padding: 9px 5px;
        display: grid;
    text-decoration: none;
}
        .mobile-bottom-menu li a span {
    font-size: 24px;
    position: relative;
    z-index: 2;
}
        .mobile-bottom-menu li a small {
    font-size: 9px;
    line-height: 1;
                margin-top: 5px;
}
        #more-btn.active span {
    transform: rotate(135deg);
}
        .mobile-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
/*09-01-2024 RD mobile view*/

.esri-directions__warning-card{
    display: none;
}
.esri-directions__panel-content{
    padding: 0;
}

/*new css add end*/

@media screen and (max-width: 768px) {
    .header {
        left: 9px;
        right: 9px;
        top: 9px;
        /* bottom: 8px; */
        width: 250px;
        padding: 0.7rem;
        z-index: 1001;
        /* height: calc(100% - 108px); */
    }

    .header.only {
        /* height: 106px;
    overflow: inherit;
    transition: 0.45s; */
    }

        
        .header.only .searchbox-mobile {
    display: none !important;
}
        
        .header .searchbox-mobile {
    display: flex !important;
}
    
    .tooltip {
        display: none;
    }

    .info-popup-box {
        left: 10px;
        bottom: 10px;
        right: 10px;
        zoom: 0.7;
    }

    .thmbtn {
        top: 82px;
        right: 9px;
        transform: rotate(-90deg);
    }

    .login-btn {
        right: 35px;
    }

    .tools-outer {
        /* height: calc(100% - 90px); */
        max-height: calc(100vh - 200px);
    }


    .tool-btn span.material-symbols-outlined {
        font-size: 22px;
    }

    .tool-popup-body {
        min-width: 100%;
        max-width: 100%;
    }
    #boxLandCover .tool-popup-body {
        padding: 7px
    }

    .tool-btn .tools-name {
        font-size: 10px;
        line-height: 1.2;
        display: block;
    }

    .watermark-nic {
        width: 126px;
        bottom: 60px;
        right: 0;
        left: 9px;
        margin: 0;
    }

    .scale-number,
    .hash-Box {
        left: 9px;
        right: auto;
        bottom: 99px;
        padding: 4px 5px;
        position: fixed;
        z-index: 99;
        justify-content: center;
    }

    .scale-number p,
    .hash-Box p {
        font-size: 10px;
    }

    .hash-Box {
        left: 9px;
        right: auto;
        bottom: 134px;
    } 
        .hash-Box+.hash-Box {
            left: 9px;
            right: auto;
            bottom: 163px;
        }
    #change-map-layer {
        bottom: 63px;
        right: 9px;
    }

    .blur-box.bb2 {
        bottom: 63px !important;
        right: 9px !important;
    }

    .logo {
        width: 126px;
    }

    .menu-icon,
    .theme-mode-icon,
    .theme-mode-stick,
    .make-mymap-btn {
        zoom: 0.9;
    }

    .tool-btn {
        display: flex;
        align-items: center;
        height: auto;
        place-content: start;
        padding: 7px;
    }

    .tool-popup {
        top: auto;
        right: 10px;
        left: 10px;
        bottom: 110px;
        zoom: 0.7;
    }

    #boxElevation {
        width: 516px;
        left: 10px;
        right: 10px;
        bottom: 99px;
        top: auto;
    }

    .esri-ui-top-left {
        right: -7px !important;
        top: -7px !important;
        zoom: 0.9;
    }

    .esri-time-slider {
        min-width: 100%;
        margin-bottom: 20px;
    }

    .esri-view-width-xsmall .esri-popup--is-docked-top-center .esri-popup__main-container,
    .esri-view-width-xsmall .esri-popup--is-docked-bottom-center .esri-popup__main-container {
        width: 310px;
        height: 270px;
        left: 10px;
        right: 20px;
        top: 25%;
    }

    .timeSlider {
        left: 10px;
        right: 10px;
        z-index: 999;
        bottom: 82px;
    }

    #timerLegendContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .info-popup-box-inner .nav-tabs {
        text-wrap: nowrap;
        flex-flow: nowrap;
    }
    .info-popup-box-inner .nav-tabs .nav-link{
        background:  var(--bs-body-bg);
    }
    .info-popup-box-inner table tr :where(th, td){
        text-wrap: nowrap;
    }
    .info-popup-box-inner { 
        max-height: 300px; 
    }
    .select2-results__option--selectable {
        font-size: 12px;
    }
    .floatbtn{
        display: none;
    }
}