html,
body {
    height: 100%;
    width: 100%;
    background-color: transparent;

}



:root {
    --xeco-nav-bg: #ffffff;
    --xeco-nav-link-color: #4D5DE0;
    --xeco-nav-link-active-color: #000;
    --xeco-nav-link-active-bg: #EEEEEE;
    --xeco-bottom-stuff-bg: #ffffff;
    --xeco-info-bg: rgba(255, 255, 255, 0.8);
    --xeco-legend-bg: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] {
    --xeco-nav-bg: #212529;
    --xeco-nav-link-color: #a8b1ff;
    --xeco-nav-link-active-color: #fff;
    --xeco-nav-link-active-bg: #343a40;
    --xeco-bottom-stuff-bg: #212529;
    --xeco-info-bg: rgba(33, 37, 41, 0.8);
    --xeco-legend-bg: rgba(33, 37, 41, 0.9);

    /* Override Bootstrap Danger Colors for Higher Contrast */
    --bs-danger: #ff6666;
    --bs-danger-rgb: 255, 102, 102;
    --bs-danger-text-emphasis: #ff8888;
}

[data-bs-theme="dark"] .leaflet-bar a,
[data-bs-theme="dark"] .leaflet-bar a:hover {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .leaflet-control-zoom-in,
[data-bs-theme="dark"] .leaflet-control-zoom-out {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-menu-country {
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .nav__link img {
    filter: invert(1);
}

[data-bs-theme="dark"] img.small__img {
    filter: invert(1) !important;
}

[data-bs-theme="dark"] .leaflet-control-scale {
    filter: invert(1) !important;
}

[data-bs-theme="dark"] .esri-dynamic-attribution {
    background-color: var(--bs-table-bg) !important;
}

[data-bs-theme="dark"] .leaflet_popup_wrapper {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .typeahead__button button,
[data-bs-theme="dark"] .typeahead__list,
[data-bs-theme="dark"] .typeahead__result .typeahead__list,
[data-bs-theme="dark"] .typeahead__dropdown {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .typeahead__field input,
[data-bs-theme="dark"] .typeahead__query {
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
}

[data-bs-theme="dark"] .typeahead__list>li {
    border-top: solid 1px var(--bs-border-color);
}

[data-bs-theme="dark"] .typeahead__list .typeahead__item>a {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .typeahead__list .typeahead__item:not([disabled]).active>a,
[data-bs-theme="dark"] .typeahead__list .typeahead__item:not([disabled])>a:focus,
[data-bs-theme="dark"] .typeahead__list .typeahead__item:not([disabled])>a:hover {
    background-color: var(--xeco-nav-link-active-bg);
    color: #fff;
}

[data-bs-theme="dark"] .typeahead__list>li.typeahead__group+li.typeahead__item {
    border-top: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .toggler {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .leaflet-control-layers,
[data-bs-theme="dark"] .leaflet-control-layers-expanded {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 2px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .text-dark {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] #triggerFavorites img {
    filter: invert(80%) sepia(100%) saturate(2000%) hue-rotate(220deg) brightness(100%) contrast(100%) !important;
}

[data-bs-theme="dark"] #triggerFavorites {
    background-color: var(--bs-body-bg);
}


.table-striped {
    --bs-table-bg: transparent !important;
}

.bg-theme-btn {
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .leaflet-control-scale {
    filter: invert(1) !important;
}

.leaflet-bar,
.leaflet-control-layers,
.leaflet-control-layers-toggle {
    border-radius: 0.375rem !important;
}

.leaflet-bar a:first-child {
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
}

.leaflet-bar a:last-child {
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

[data-bs-theme="dark"] .information_img {
    filter: invert(1) !important;
}

.iconshadow {
    filter: drop-shadow(2px 2px 2px #888);
}

[data-bs-theme="dark"] .iconshadow {
    filter: drop-shadow(1px 1px 1px #c5c5c5) !important;
}

/* Optimized Markers */
.xeco-marker {
    background: none !important;
    border: none !important;
}

.marker-inner {
    width: 100%;
    height: 100%;
    background-color: #fff;
    /* Default */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* AQI Colors */
.aqi-0 .marker-inner {
    background-color: #fff;
}

.aqi-1 .marker-inner {
    background-color: #4d9a4b;
}

.aqi-2 .marker-inner {
    background-color: #ffe85d;
}

.aqi-3 .marker-inner {
    background-color: #e7a05c;
}

.aqi-4 .marker-inner {
    background-color: #d5182f;
}

.aqi-5 .marker-inner {
    background-color: #7940a5;
}

.aqi-6 .marker-inner {
    background-color: #7b2a1a;
}

/* Marker Shapes (Masks) */
.m-state .marker-inner {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256,0C161.899,0,85.333,76.565,85.333,170.667c0,104,146.731,322.667,152.981,331.925 c3.947,5.867,10.56,9.387,17.621,9.408H256c7.061,0,13.653-3.477,17.621-9.301c6.251-9.152,153.045-225.344,153.045-332.032 C428.667,76.565,350.101,0,256,0z M256,128c-23.531,0-42.667,19.136-42.667,42.667c0,11.776-9.557,21.333-21.333,21.333 s-21.333-9.557-21.333-21.333c0-47.061,38.272-85.333,85.333-85.333c11.776,0,21.333,9.557,21.333,21.333S287.776,128,256,128z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256,0C161.899,0,85.333,76.565,85.333,170.667c0,104,146.731,322.667,152.981,331.925 c3.947,5.867,10.56,9.387,17.621,9.408H256c7.061,0,13.653-3.477,17.621-9.301c6.251-9.152,153.045-225.344,153.045-332.032 C428.667,76.565,350.101,0,256,0z M256,128c-23.531,0-42.667,19.136-42.667,42.667c0,11.776-9.557,21.333-21.333,21.333 s-21.333-9.557-21.333-21.333c0-47.061,38.272-85.333,85.333-85.333c11.776,0,21.333,9.557,21.333,21.333S287.776,128,256,128z'/%3E%3C/svg%3E");
}

.m-pentagram .marker-inner {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 20.757848 25.026225 L 24.829743 12.579445 L 14.250368 4.8593687 L 3.6416231 12.535852 L 7.6631703 24.999239 L 20.757848 25.026225 z M 19.482365 23.157962 L 12.748319 23.141356 L 21.576003 15.313336 L 19.482365 23.157962 z ' transform='matrix(-0.93101994,0,0,-0.94088088,25.253705,25.382634)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 20.757848 25.026225 L 24.829743 12.579445 L 14.250368 4.8593687 L 3.6416231 12.535852 L 7.6631703 24.999239 L 20.757848 25.026225 z M 19.482365 23.157962 L 12.748319 23.141356 L 21.576003 15.313336 L 19.482365 23.157962 z ' transform='matrix(-0.93101994,0,0,-0.94088088,25.253705,25.382634)'/%3E%3C/svg%3E");
}

.m-home .marker-inner {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-9H0l10.327-9.388a1 1 0 0 1 1.346 0L22 11h-3v9zm-8-5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-9H0l10.327-9.388a1 1 0 0 1 1.346 0L22 11h-3v9zm-8-5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
}

.m-klimerko .marker-inner {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9zM7 11v2a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7zm0 4v3h3a3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9zM7 11v2a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7zm0 4v3h3a3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}

.m-weatherlink .marker-inner {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9zM9 10v6h6v-6H9zm2 2h2v2h-2v-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9zM9 10v6h6v-6H9zm2 2h2v2h-2v-2z'/%3E%3C/svg%3E");
}

.m-purpleair .marker-inner {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 12 1.3515625 C 11.75888 1.3515625 11.516931 1.4377566 11.326172 1.6113281 L 1 11 L 4 11 L 4 20 C 4 20.552284 4.4477159 21 5 21 L 19 21 C 19.552284 21 20 20.552284 20 20 L 20 11 L 23 11 L 12.673828 1.6113281 C 12.483069 1.4377566 12.24112 1.3515625 12 1.3515625 z M 12 8.2207031 L 13.669922 11.496094 L 17.787109 11.109375 L 15.341797 13.998047 L 17.787109 16.888672 L 13.669922 16.501953 L 12 19.777344 L 10.330078 16.501953 L 6.2128906 16.888672 L 8.6582031 14 L 6.2128906 11.111328 L 10.330078 11.498047 L 12 8.2207031 z '/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 12 1.3515625 C 11.75888 1.3515625 11.516931 1.4377566 11.326172 1.6113281 L 1 11 L 4 11 L 4 20 C 4 20.552284 4.4477159 21 5 21 L 19 21 C 19.552284 21 20 20.552284 20 20 L 20 11 L 23 11 L 12.673828 1.6113281 C 12.483069 1.4377566 12.24112 1.3515625 12 1.3515625 z M 12 8.2207031 L 13.669922 11.496094 L 17.787109 11.109375 L 15.341797 13.998047 L 17.787109 16.888672 L 13.669922 16.501953 L 12 19.777344 L 10.330078 16.501953 L 6.2128906 16.888672 L 8.6582031 14 L 6.2128906 11.111328 L 10.330078 11.498047 L 12 8.2207031 z '/%3E%3C/svg%3E");
}

.m-aqicn .marker-inner {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m 12,1.3515625 c -0.24112,0 -0.483069,0.086194 -0.673828,0.2597656 L 1,11 h 3 v 9 c 0,0.552284 0.4477159,1 1,1 h 14 c 0.552284,0 1,-0.447716 1,-1 v -9 h 3 L 12.673828,1.6113281 C 12.483069,1.4377566 12.24112,1.3515625 12,1.3515625 Z M 17.787109,11.109375 12,19.777344 6.2128906,11.111328 C 12,13.791263 12,13.844142 17.787109,11.109375 Z '/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m 12,1.3515625 c -0.24112,0 -0.483069,0.086194 -0.673828,0.2597656 L 1,11 h 3 v 9 c 0,0.552284 0.4477159,1 1,1 h 14 c 0.552284,0 1,-0.447716 1,-1 v -9 h 3 L 12.673828,1.6113281 C 12.483069,1.4377566 12.24112,1.3515625 12,1.3515625 Z M 17.787109,11.109375 12,19.777344 6.2128906,11.111328 C 12,13.791263 12,13.844142 17.787109,11.109375 Z '/%3E%3C/svg%3E");
}

.m-openaq .marker-inner {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 12 1.3515625 C 11.75888 1.3515625 11.516931 1.4377564 11.326172 1.6113281 L 1 11 L 4 11 L 4 20 C 4 20.552285 4.4477153 21 5 21 L 19 21 C 19.552285 21 20 20.552285 20 20 L 20 11 L 23 11 L 12.673828 1.6113281 C 12.483069 1.4377564 12.24112 1.3515625 12 1.3515625 z M 12 6.5429688 A 3.9623971 5.9788485 0 0 1 15.962891 12.521484 A 3.9623971 5.9788485 0 0 1 12 18.5 A 3.9623971 5.9788485 0 0 1 8.0371094 12.521484 A 3.9623971 5.9788485 0 0 1 12 6.5429688 z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 12 1.3515625 C 11.75888 1.3515625 11.516931 1.4377564 11.326172 1.6113281 L 1 11 L 4 11 L 4 20 C 4 20.552285 4.4477153 21 5 21 L 19 21 C 19.552285 21 20 20.552285 20 20 L 20 11 L 23 11 L 12.673828 1.6113281 C 12.483069 1.4377564 12.24112 1.3515625 12 1.3515625 z M 12 6.5429688 A 3.9623971 5.9788485 0 0 1 15.962891 12.521484 A 3.9623971 5.9788485 0 0 1 12 18.5 A 3.9623971 5.9788485 0 0 1 8.0371094 12.521484 A 3.9623971 5.9788485 0 0 1 12 6.5429688 z'/%3E%3C/svg%3E");
}

.m-iqair .marker-inner {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 11 1.3515625 C 10.75888 1.3515625 10.516931 1.4377566 10.326172 1.6113281 L 0 11 L 3 11 L 3 20 C 3 20.552284 3.4477159 21 4 21 L 18 21 C 18.552284 21 19 20.552284 19 20 L 19 11 L 22 11 L 11.673828 1.6113281 C 11.483069 1.4377566 11.24112 1.3515625 11 1.3515625 z M 11 3.6523438 C 14.333329 3.6523438 14.333329 8.6523438 11 8.6523438 C 7.6666714 8.6523438 7.6666714 3.6523438 11 3.6523438 z M 8.5019531 9.9550781 L 13.498047 9.9550781 L 13.498047 19.955078 L 8.5019531 19.955078 L 8.5019531 9.9550781 z '/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 11 1.3515625 C 10.75888 1.3515625 10.516931 1.4377566 10.326172 1.6113281 L 0 11 L 3 11 L 3 20 C 3 20.552284 3.4477159 21 4 21 L 18 21 C 18.552284 21 19 20.552284 19 20 L 19 11 L 22 11 L 11.673828 1.6113281 C 11.483069 1.4377566 11.24112 1.3515625 11 1.3515625 z M 11 3.6523438 C 14.333329 3.6523438 14.333329 8.6523438 11 8.6523438 C 7.6666714 8.6523438 7.6666714 3.6523438 11 3.6523438 z M 8.5019531 9.9550781 L 13.498047 9.9550781 L 13.498047 19.955078 L 8.5019531 19.955078 L 8.5019531 9.9550781 z '/%3E%3C/svg%3E");
}

.nav_bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: var(--xeco-nav-bg);
    display: flex;
    overflow-x: auto;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    /* shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    color: var(--xeco-nav-link-color);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
}

.nav__link.active {
    color: var(--xeco-nav-link-active-color);
    background-color: var(--xeco-nav-link-active-bg);
}

.nav__icon {
    color: #4D5DE0;
    font-size: 18px;
}

.nav__text {
    line-height: 1.0;
    text-align: center;
}

.progress-animate {
    transition: width 2s ease-in-out;
}

.modal.fade {
    z-index: 10000000 !important;
}

.bottomStuff {
    height: 0px;
    bottom: -50vh;
    position: fixed;
    width: 100%;
    text-align: center;
    z-index: 1001;
    /* background-color:#FFF; */
    transition: top .5s, bottom .5s, left .5s, width .5s;
    background-color: var(--xeco-bottom-stuff-bg);
    overflow-x: hidden;
    /* Hide horizontal scrollbar */
    /* overflow-y: auto; */
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 30%);
    overflow-y: hidden;

    transition: transform 0.5s, border-radius 0.5s;
    transform: translateY(0);
    padding-top: 1.5rem;
}

.draggable-body {
    height: 100%;
    overflow-y: auto;
    gap: 1rem;
}

.thin_scroll {
    scrollbar-width: thin;
}

.thin_scroll::-webkit-scrollbar {
    width: 8px;
    scrollbar-width: thin;
    background-color: #CCC;
}

.thin_scroll::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}

.thin_scroll::-webkit-scrollbar-thumb {
    background-color: #CCC;
}


.badge-mine_6 {
    background: #7b2a1a;
    color: #FFFFFF;
}

.badge-mine_5 {
    background: #7940a5;
    color: #FFFFFF;
}

.badge-mine_4 {
    background: #d5182f;
    color: #FFFFFF;
}

.badge-mine_3 {
    background: #e7a05c;
    color: #FFFFFF;
}

.badge-mine_2 {
    background: #ffe85d;
    color: #FFFFFF;
}

.badge-mine_1 {
    background: #4d9a4b;
    color: #FFFFFF;
}

.leaflet-div-icon_0 {
    background: #FFFFFF;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
}

.leaflet-div-icon_1 {
    background: #4d9a4b;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
}

.leaflet-div-icon_2 {
    background: #ffe85d;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
}

.leaflet-div-icon_3 {
    background: #e7a05c;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
}

.leaflet-div-icon_4 {
    background: #d5182f;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
}

.leaflet-div-icon_5 {
    background: #7940a5;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
}

.leaflet-div-icon_6 {
    background: #7b2a1a;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
}


.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: var(--xeco-info-bg);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.info h4 {
    margin: 0 0 5px;
    color: #777;
}



canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* <!-- Legenda mapa	 */
/*Legend specific*/
.legend {
    padding: 3px 3px;
    font-size: 12px;
    background: var(--xeco-legend-bg);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    color: var(--bs-body-color, #555);
    margin-bottom: 24px !important;
}

.legend h4 {
    text-align: center;
    font-size: 16px;
    margin: 2px 12px 8px;
    color: #777;
}

.legend span {
    position: relative;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 8px 0 0;
    opacity: 0.7;
}

.legend i.icon {
    background-size: 18px;
    background-color: rgba(255, 255, 255, 1);
}

.tooltip-hidden {
    display: none;
}

/* Forecast Trend Icons */
.trend-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background-color: var(--xeco-info-bg);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.trend-icon svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}


/*==========  Media queries for test ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
    .bottomStuff.active {
        overflow-x: hidden;
        /* Hide horizontal scrollbar */
        overflow-y: hidden;
        position: fixed;
        bottom: 55px;
    }

    .water_mark {
        margin-bottom: 74px;
        width: 70px;
        float: left;
        display: inline;
    }

    .water_mark1 {
        position: absolute;
        left: 120px;
        bottom: 10px;
    }

    .logoNEA {
        height: 20px
    }

    .hollow_logo {
        height: 80px;
    }

    .hollow_bottom {
        height: 70px;
    }

    .leaflet_popup_wrapper {
        clear: both;
        width: 240px;
        max-width: 240px;
        border-radius: 20px;
    }

    .elipse {
        position: absolute;
        text-align: center;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        left: 50%;
        transform: translate(-50%, 0);
        /* animation: move-in-steps 1s; */
        /* margin-top: -160px; */
        text-align: left;
        font-size: 100%;
        z-index: 1;
        margin-top: -135px;

    }

    .elipse-small {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        left: 95%;
        transform: translate(-50%, 0);
        /* animation: move-in-steps 1s; */
        /* margin-top: -160px; */
        text-align: center;
        z-index: 1;
        margin-top: -0px;
    }

    .elipse-bottom {
        position: absolute;
        text-align: center;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        left: 0%;
        /* transform: translate(-50%, 0); */
        /* animation: move-in-steps 1s; */
        /* margin-top: -160px; */
        text-align: left;
        font-size: 100%;
        z-index: 1;
        /* margin-top:-140px; */
    }

    .elipse-inside {
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-48%, -70%);
        font-style: normal;
        line-height: 1;
        text-transform: uppercase;
        opacity: 100%;
        border-radius: 20%;
    }

    .gv-rotated {
        position: absolute;
        top: 76%;
        right: 35%;
        background-color: transparent;
        /* color: rgba(255,255,255,0.6); */
        font-style: normal;
        line-height: 1;
        text-transform: uppercase;
        transform: rotate(0deg);

    }

    .eu-rotated {
        position: absolute;
        top: 76%;
        right: -23%;
        background-color: transparent;
        /* color: rgba(255,255,255,0.6); */
        font-style: normal;
        line-height: 1;
        text-transform: uppercase;
        transform: rotate(0deg);

    }

    .szo-rotated {
        position: absolute;
        top: 76%;
        left: -30%;
        background-color: transparent;
        /* color: rgba(255,255,255,0.6); */
        font-style: normal;
        line-height: 1;
        text-transform: uppercase;
        transform: rotate(0deg);

    }

    .rsquare {
        position: absolute;
        text-align: center;
        width: 200px;
        height: 200px;
        border-radius: 20%;
        left: 50%;
        transform: translate(-50%, 0);
        /* animation: move-in-steps 1s; */
        /* margin-top: -160px; */
        text-align: left;
        font-size: 170%;
        font-weight: 500;
        z-index: 1;
        margin-top: -165px;

    }

    .rsquare_45 {
        position: absolute;
        text-align: center;
        width: 200px;
        height: 200px;
        border-radius: 20%;
        left: 50%;
        transform: translate(-50%, 0);
        /* animation: move-in-steps 1s; */
        /* margin-top: -160px; */
        text-align: left;
        font-size: 170%;
        font-weight: 500;
        z-index: 1;
        margin-top: -165px;
    }

    .border-largescreen {
        border-left: 0;
    }

    .table-calendar {
        margin: auto;
        border-collapse: collapse;
        border: none;
    }

    .table-calendar>thead>tr>td {
        font-size: 50%;
    }

    .table-calendar>tbody>tr {
        height: 5px;
        line-height: 5px;
    }

    .table-calendar>tbody>tr>td {
        border: 1px inset #DDD;
        width: 5px;
        height: 5px;
        line-height: 5px;
    }

    .cal_cell {
        display: inline-block;
        position: relative;
        height: 5px;
        width: 5px;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {
    .bottomStuff.active {
        overflow-x: hidden;
        /* Hide horizontal scrollbar */
        overflow-y: hidden;
        position: fixed;
        bottom: 55px;
    }

    .water_mark {
        margin-bottom: 80px;
        width: 70px;
        float: left;
        display: inline;
    }

    .water_mark1 {
        position: absolute;
        left: 120px;
        bottom: 0;
    }

    .logoNEA {
        height: 20px
    }

    .leaflet_popup_wrapper {
        clear: both;
        width: 240px;
        max-width: 240px;
        border-radius: 20px;
    }

}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
    .bottomStuff.active {
        overflow-x: hidden;
        /* Hide horizontal scrollbar */
        overflow-y: hidden;
        position: fixed;
        bottom: 0;
    }

    .water_mark {
        bottom: 100px;
        background: radial-gradient(rgba(230, 230, 230, 0.9), rgba(255, 255, 255, 1.0)), url("../rect855-blue.png");
        width: 100%;
        float: left;
        display: none;
    }

    .water_mark1 {
        position: absolute;
        left: 205px;
        bottom: 0;
    }

    .logoNEA {
        height: 20px
    }

    .hollow_logo {
        height: 100px;
    }

    .hollow_bottom {
        height: 70px;
    }

    .leaflet_popup_wrapper {
        clear: both;
        width: 270px;
        max-width: 270px;
        border-radius: 20px;
    }

    .elipse {
        position: absolute;
        text-align: center;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        left: 50%;
        transform: translate(-50%, 0);
        /* animation: move-in-steps 1s; */
        /* margin-top: -160px; */
        text-align: left;
        font-size: 120%;
        z-index: 1;
        margin-top: -150px;
    }

    .elipse-small {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        left: 95%;
        transform: translate(-50%, 0);

        /* animation: move-in-steps 1s; */
        /* margin-top: -160px; */
        text-align: center;
        z-index: 1;
        margin-top: -0px;
    }

    .elipse-bottom {
        position: absolute;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        top: 0;
        left: 0;
        /* transform: translate(-50%, 0); */
        /* animation: move-in-steps 1s; */
        /* margin-top: -160px; */
        font-size: 100%;
        z-index: 1;
        /* margin-top:-140px; */
    }

    .elipse-inside {
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translate(-48%, -70%);
        font-style: normal;
        line-height: 1;
        text-transform: uppercase;
        opacity: 100%;

    }

    .gv-rotated {
        position: absolute;
        top: 76%;
        right: 35%;
        background-color: transparent;
        /* color: rgba(255,255,255,0.6); */
        font-style: normal;
        line-height: 1;
        text-transform: uppercase;
        transform: rotate(0deg);

    }

    .eu-rotated {
        position: absolute;
        top: 77%;
        right: -23%;
        background-color: transparent;
        /* color: rgba(255,255,255,0.6); */
        font-style: normal;
        line-height: 1;
        text-transform: uppercase;
        transform: rotate(0deg);

    }

    .szo-rotated {
        position: absolute;
        top: 77%;
        left: -30%;
        background-color: transparent;
        /* color: rgba(255,255,255,0.6); */
        font-style: normal;
        line-height: 1;
        text-transform: uppercase;
        transform: rotate(0deg);

    }

    .rsquare {
        position: absolute;
        text-align: center;
        width: 220px;
        height: 220px;
        border-radius: 20%;
        left: 50%;
        transform: translate(-50%, 0);
        /* animation: move-in-steps 1s; */
        /* margin-top: -160px; */
        text-align: left;
        font-size: 200%;
        font-weight: 500;
        z-index: 1;
        margin-top: -185px;

    }

    .border-largescreen {
        border-left: 1px solid #c9c9c9
    }

    .table-calendar {
        margin: auto;
        border-collapse: collapse;
        border: none;
    }

    .table-calendar>thead>tr>td {
        font-size: 60%;
    }

    .table-calendar>tbody>tr {
        height: 5px;
        line-height: 5px;
    }

    .table-calendar>tbody>tr>td {
        border: 1px inset #DDD;
        width: 5px;
        height: 5px;
        line-height: 5px;
    }

    .cal_cell {
        display: inline-block;
        position: relative;
        height: 5px;
        width: 5px;
    }

}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {

    .logoNEA {
        height: 25px
    }

    .logoNEA_pos {
        position: absolute;
        bottom: 140px;
        right: 10px;
    }

}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
    .table-calendar {
        margin: auto;
        border-collapse: collapse;
        border: none;
    }

    .table-calendar>thead>tr>td {
        font-size: 80%;
    }

    .table-calendar>tbody>tr {
        height: 5px;
        line-height: 5px;
    }

    .table-calendar>tbody>tr>td {
        border: 1px inset #DDD;
        width: 5px;
        height: 5px;
        line-height: 5px;
    }

    .cal_cell {
        display: inline-block;
        position: relative;
        height: 5px;
        width: 5px;
    }
}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) and (min-height: 1024px) {
    .logoNEA_pos {
        position: absolute;
        bottom: 105px;
        right: 130px;
    }

    .bootsidemenu {
        min-width: 60vw;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
    .logoNEA_pos {
        position: absolute;
        bottom: 105px;
        right: 130px;
    }

    .bootsidemenu {

        min-width: 60vw;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
    .logoNEA_pos {
        position: absolute;
        bottom: 105px;
        right: 105px;
    }

    .bootsidemenu {
        min-width: 60vw;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
    .logoNEA_pos {
        position: absolute;
        bottom: 80px;
        right: 115px;
    }

    .bootsidemenu {
        min-width: 100vw;
    }

    .bottomStuff.active {
        overflow-x: hidden;
        /* Hide horizontal scrollbar */
        overflow-y: hidden;
        position: fixed;
        bottom: 55px;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
    .logoNEA_pos {
        position: absolute;
        bottom: 80px;
        right: 130px;
    }

    .bootsidemenu {
        width: 100%;
    }

    .bottomStuff.active {
        overflow-x: hidden;
        /* Hide horizontal scrollbar */
        overflow-y: hidden;
        position: fixed;
        bottom: 55px;
    }
}


/* ADDITIONAL*/
.leaflet-div-icon_sensor_0 {
    background: #FFFFFF;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
    transform: rotate(45deg);
}

.leaflet-div-icon_sensor_1 {
    background: #4d9a4b;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
    transform: rotate(45deg);
}

.leaflet-div-icon_sensor_2 {
    background: #ffe85d;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
    transform: rotate(45deg);
}

.leaflet-div-icon_sensor_3 {
    background: #e7a05c;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
    transform: rotate(45deg);
}

.leaflet-div-icon_sensor_4 {
    background: #d5182f;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
    transform: rotate(45deg);
}

.leaflet-div-icon_sensor_5 {
    background: #7940a5;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
    transform: rotate(45deg);
}

.leaflet-div-icon_sensor_6 {
    background: #7b2a1a;
    border: 3px solid rgba(255, 255, 255, 0.8);
    color: black;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    line-height: 50px;
    transform: rotate(45deg);
}

.position_2_3 {
    position: absolute;
    top: 17%;
    left: 14%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}

.position_2 {
    position: absolute;
    top: 12%;
    right: 57%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_3 {
    position: absolute;
    top: 24%;
    right: 51%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_4_5 {
    position: absolute;
    top: 17%;
    right: 12%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}

.position_4 {
    position: absolute;
    top: 12%;
    right: 32%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_5 {
    position: absolute;
    top: 24%;
    right: 32%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_6_7 {
    position: absolute;
    top: 59%;
    left: 7%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}

.position_6 {
    position: absolute;
    top: 65%;
    left: 23%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_7 {
    position: absolute;
    top: 57%;
    left: 22%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_8_9 {
    position: absolute;
    top: 59%;
    right: 7%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}

.position_8 {
    position: absolute;
    top: 65%;
    right: 24%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_9 {
    position: absolute;
    top: 57%;
    right: 24%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_10_11 {
    position: absolute;
    top: 72%;
    left: 42%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}

.position_10 {
    position: absolute;
    top: 70%;
    left: 53%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_11 {
    position: absolute;
    top: 78%;
    left: 53%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_2_3_r {
    position: absolute;
    top: 17%;
    left: 3%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}

.position_2_r {
    position: absolute;
    top: 12%;
    left: -8%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_3_r {
    position: absolute;
    top: 24%;
    left: -13%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_4_5_r {
    position: absolute;
    top: 17%;
    right: 3%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}

.position_4_r {
    position: absolute;
    top: 12%;
    right: -8%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_5_r {
    position: absolute;
    top: 24%;
    right: -13%;
    border-radius: 20%;
    line-height: 1;
    display: none
}

.position_6_7_r {
    position: absolute;
    top: 57%;
    left: 6%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}

.position_8_9_r {
    position: absolute;
    top: 57%;
    right: 6%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}

.position_10_11_r {
    position: absolute;
    top: 70%;
    left: 44%;
    line-height: 1;
    text-transform: uppercase;
    display: none
}


.ocena-in-elipse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: normal;
    line-height: 1.2;
    text-transform: uppercase;
}

.ocena-in-elipse-comment {
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translate(-50%, 0%);
    font-weight: normal;
    line-height: 1;
}

.ocena-in-elipse-bottom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: normal;
    line-height: 1;
    text-transform: uppercase;
}

.ocena-in-elipse-light {
    color: white;
    -webkit-text-stroke: 1px #F8F8F8;
    text-shadow: 0px 1px 4px #23430C;
}

.ocena-in-elipse-dark {
    color: black;
    -webkit-text-stroke: 1px #070707;
    text-shadow: 0px 1px 4px #dcbcf3;
}

:root {
    --swiper-navigation-color: #0d6efd;
    --swiper-navigation-size: 22px;

    --arrow-bg: rgba(255, 255, 255, 0.3);
    --arrow-icon: url(../buttons/Caret_down.svg);
    --option-bg: white;
    --select-bg: rgba(255, 255, 255, 0.2);
}

.swiper-button-next {
    margin-top: -25px !important;
    font-weight: 800 !important;
}

.swiper-button-prev {
    margin-top: -25px !important;
    font-weight: 800 !important;
}

.swiper {
    width: 100%;
    height: 100%;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;

}

.disabled_swiper_button {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
}

.swiper-slide {
    text-align: center;
    background: transparent;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
}

.fixed-bg {
    /* The background image */
    background: radial-gradient(rgba(230, 230, 230, 0.9), rgba(255, 255, 255, 1.0)), url("../hollow-xeco.png");

    /* Set a specified height, or the minimum height for the background image */
    min-height: 100px;

    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;

    /* Center the background image */
    background-position: center;

    /* Set the background image to no repeat */
    background-repeat: no-repeat;

    /* Scale the background image to be as large as possible */
    background-size: contain;
}

.fixed-bg-repeat-y {
    /* The background image */
    background: radial-gradient(rgba(230, 230, 230, 0.9), rgba(255, 255, 255, 1.0)), url("../hollow-xeco.png");

    /* Set a specified height, or the minimum height for the background image */
    min-height: 100px;

    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;

    /* Center the background image */
    background-position: center;

    /* Set the background image to no repeat */
    background-repeat: repeat-y;

    /* Scale the background image to be as large as possible */
    background-size: contain;
}

@keyframes gv-rotate {
    0% {
        top: 85%;
        right: -10%;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        right: -29%;
        transform: rotate(-30deg);
    }
}

@keyframes szo-rotate {
    0% {
        top: 85%;
        left: -10%;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        left: -32%;
        transform: rotate(30deg);
    }
}

@-moz-keyframes gv-rotate {
    0% {
        top: 85%;
        right: -10%;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        right: -29%;
        transform: rotate(-30deg);
    }
}

@-moz-keyframes szo-rotate {
    0% {
        top: 85%;
        left: -10%;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        left: -32%;
        transform: rotate(30deg);
    }
}

@-o-keyframes gv-rotate {
    0% {
        top: 85%;
        right: -10%;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        right: -29%;
        transform: rotate(-30deg);
    }
}

@-o-keyframes szo-rotate {
    0% {
        top: 85%;
        left: -10%;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        left: -32%;
        transform: rotate(30deg);
    }
}

@-webkit-keyframes gv-rotate {
    0% {
        top: 85%;
        right: -10%;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        right: -29%;
        transform: rotate(-30deg);
    }
}

@-webkit-keyframes szo-rotate {
    0% {
        top: 85%;
        left: -10%;
        transform: rotate(0deg);
    }

    100% {
        top: 70%;
        left: -32%;
        transform: rotate(30deg);
    }
}


.draggable-area {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 5rem;
    margin: auto;
    padding: 1rem;
    cursor: grab;
}

.draggable-thumb {

    height: 0.3rem;
    background: #dcdcdc;
    border-radius: 0.125rem;
}

.close-sheet {
    position: absolute;
    right: 0;
    top: 0;
    border: none;
}

.not-selectable {
    user-select: none;
}

.selectable {
    user-select: auto;
}

.close-sheet {
    position: absolute;
    right: 0;
    top: 0;
    border: none;
}

/* .btn-special-hover:hover { */
/* color: blue !important; */
/* } */

.select_country {
    /* Reset */
    appearance: none;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 110%;
    /* Personalize */
    width: 70%;
    padding: 0.2rem 0.2rem 0.2rem 0.4rem;
    margin: 0.2rem 0 0.2rem 0;
    background: var(--arrow-icon) no-repeat right 0.2em center / 1.4em,
        linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
    color: var(--bs-primary);
    border-radius: 0.25em;
    box-shadow: 0 0 0.2em 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;

    /* Remove IE arrow */
    &::-ms-expand {
        display: none;
    }

    /* Remove focus outline */
    &:focus {
        outline: none;
    }

    /* <option> colors */
    option {
        color: var(--bs-primary);
        background-color: var(--option-bg);
    }
}

.select_in_report {
    /* Reset */
    appearance: none;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 110%;
    /* Personalize */
    background: var(--arrow-icon) no-repeat right 0.2em center / 1.4em,
        linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
    color: var(--bs-primary);
    border-radius: 0.25em;
    box-shadow: 0 0 0.2em 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;

    /* Remove IE arrow */
    &::-ms-expand {
        display: none;
    }

    /* Remove focus outline */
    &:focus {
        outline: none;
    }

    /* <option> colors */
    option {
        color: var(--bs-primary);
        background-color: var(--option-bg);
    }
}

.table .first-col {
    /*white-space: nowrap; /* Prevent word wrapping in first column */
    overflow: hidden;
    /* Hide overflowing content */
    text-overflow: ellipsis;
    /* Add ellipsis for truncated text */
    width: 62%;
    /* Initially set a small width to prioritize second column */
}

.table .second-col {
    white-space: nowrap;
    /* Prevent word wrapping in second column */
    width: 38%;
    /* Allow second column to take full width */
}

.offscreen-sidebar-trigger {
    position: absolute;
    top: -65px;
    /* Adjust to control how much is visible */
    height: 80px;
    width: 90px;
    right: -100px;
    /* Position 5px to the right of the parent div */
    padding-top: 53px;
    padding-bottom: 7px;
    margin: auto;
    border-radius: 15px;
    /* Adjust for desired roundedness */
    cursor: pointer;
    /* Indicates it's clickable */
    background-color: white;
    display: none;
}

.country-dropdown {
    /* Style the button (select) */
    display: flex;
    align-items: center;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    cursor: pointer;
    border-radius: 0.25rem;
    width: 70%;
    /* Make it take full width */
}

.selected-item-country-img {
    width: 36px;
    height: 27px;
    margin-right: 5px;
}

.dropdown-menu-country {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    font-size: 1rem;
    min-width: 70%;
    /* Match button width */
}

.dropdown-item-country {
    cursor: pointer;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    color: var(--bs-primary);
}

.dropdown-item-country img {
    width: 36px;
    height: 27px;
    margin-right: 5px;
    vertical-align: middle;
}

.dropdown-item-country:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.dropdown-item-country+.dropdown-item-country {
    border-top: 1px solid var(--bs-border-color, #eee);
}

[data-bs-theme="dark"] .dropdown-item-country:hover {
    background-color: var(--bs-secondary-bg);
}


/* Custom Accordion Chevron Styling */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23256bf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-size: 1.25rem !important;
    transition: transform 0.2s ease-in-out !important;
}

/* Custom Leaflet Layer Control - Left Side Expansion */
.leaflet-control-layers-expanded {
    padding: 0 !important;
}

.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: block !important;
}

.leaflet-control-layers .leaflet-control-layers-list {
    position: absolute !important;
    right: 100%;
    top: 0;
    margin-right: 8px;
    background: var(--bs-body-bg, #fff);
    padding: 6px 10px 6px 6px;
    border: 2px solid var(--bs-border-color, rgba(0, 0, 0, 0.2));
    border-radius: 0.375rem;
    min-width: max-content;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .leaflet-control-layers-list {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23256bf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    transform: rotate(-180deg) !important;
}