.add-layers .sub-menu {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    margin-bottom: 10px;
    position: relative;
}

.add-layers .sub-menu .sub-menu-button {    
    background-color: white;
    border:1px solid var(--primary-color);
    padding: 8px 12px;
    margin: 5px;
    cursor: pointer;
    border-radius: 18px;
    color: var(--primary-color);
}

.add-layers .sub-menu .sub-menu-button * {
    pointer-events: none;
}

.add-layers .sub-menu .sub-menu-button-icon {
    margin-left: 8px;
    filter: var(--primary-filter);
}

.add-layers .sub-menu .sub-menu-button:hover, .add-layers .sub-menu .sub-menu-button.active {
    background-color: var(--primary-color);
    color: white;
}

.add-layers .sub-menu .sub-menu-button:hover .sub-menu-button-icon, .add-layers .sub-menu .sub-menu-button.active .sub-menu-button-icon {
    transform: rotate(180deg);
}

.add-layers .sub-menu .sub-menu-button:hover .sub-menu-button-icon, .add-layers .sub-menu .sub-menu-button.active .sub-menu-button-icon {
    filter: var(--filter-000);
}

.add-layers .sub-menu-content-container {
    background-color: var(--color-g-050);
    margin: 0 -25px 15px -25px;
    padding: 15px 25px;
    width: calc(100% + 50px); /* twice the value of the parent's padding*/
}

.add-layers .gallery-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.add-layers .gallery-content .gallery-item {
    padding: 10px;
    margin: 3px;
    text-align: center;
    background: white;
    border-radius: 5px;
    border: 1px solid var(--color-g-100);
}

.add-layers .gallery-content .gallery-item .gallery-item-map {
    display: block;
    width: 90px;
    height: 60px;
    margin-bottom: 5px;
}

.add-layers .gallery-content .gallery-item .gallery-item-icon {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 5px auto;
    filter: var(--primary-filter);
}

.add-layers .gallery-content .gallery-item .gallery-item-text {
    display:inline-block;
}

.add-layers .gallery-content .gallery-item:hover {
    cursor: pointer;
}

.add-layers .gallery-content .gallery-item.active {
    background-color: var(--color-100);
}

.add-layers .layers .layer .layer-checkbox {
    vertical-align: text-bottom;
    margin-right: 5px;
}

.add-layers .layers .layer.failed .layer-info {
    filter: var(--filter-scale-1000);
}

.add-layers .layers .layer .layer-icon {
    width: 19px;
    height: 19px
}

.add-layers .layers .dataset {
    font-weight: bold;
    margin: 15px 0px 15px 0px;    
}

.add-layers .layers .dataset:last-child {
    margin-bottom: 0;
}

.add-layers .layers .dataset .dataset-arrow {
    margin-left: 10px;
    filter: var(--primary-filter);
}

.add-layers .layers .dataset .dataset-arrow.rotated {
    transform: rotate(180deg);
}

.add-layers .layers .dataset .dataset-layers {
    margin-top: 5px;
    margin-right: 10px;
}

.add-layers .layers .dataset .layer {
    display: flex;
    font-weight: initial;
    border-top: 1px solid var(--color-g-100);
    padding: 5px 0;    
}

.add-layers .layers .dataset .layer:first-child {
    border-top: none;
}

.add-layers .dataset-layers .layer-checkbox {
    display: none;
}

.add-layers .layers .layer-checkbox:checked + .layer-checkbox-plus-minus .layer-checkbox-minus-icon {
    display: inline;
}

.add-layers .layers .layer-checkbox:checked + .layer-checkbox-plus-minus .layer-checkbox-plus-icon {
    display: none;
}

.add-layers .layers .layer-checkbox-plus-minus-icon {
    display: flex;
    align-items: center;
}

.add-layers .layers .layer-checkbox-plus-icon {
    filter: var(--filter-200);
}

.add-layers .layers .layer-checkbox-minus-icon {
    display: none;
}

.add-layers .dataset-layers .layer.failed .layer-label  {
    color: var(--color-scale-1000);
}

.add-layers .dataset-layers .layer-label {
    margin-left: 5px;
}

.add-layers .dataset-layers .layer-streamline {
    margin-left: 5px;
    filter: var(--filter-300);
}

.add-layers .dataset-layers .layer-loading {
    filter: var(--filter-200)
}


.add-layers .dataset-layers .layer-icons {
    display: flex;
    gap: 3px;
    margin-left: auto;
}

.add-layers .grid-content .row {
    padding: 8px 0;
}

.add-layers .grid-content .col {
    padding: 0;
}

.add-layers .grid-content .col.hoverable {
    cursor: pointer;
}

.add-layers .grid-content .col-content {
    cursor: pointer;    
    width: fit-content;
}

.add-layers .grid-content td:hover, .add-layers .grid-content .active {
    text-shadow: 0 0 var(--primary-color);
    color: var(--primary-color);
}

.add-layers .grid-content .active .remove-icon {
    display: initial;    
    filter: var(--primary-filter);
}

.add-layers .grid-content .remove-icon {
    display: none;
    margin-left: 3px;
}

.add-layers .pills-container {
    display: flex;    
    justify-content: space-between;
    gap: 5px;
    margin: 10px 0;
}

.add-layers .pills-container .pill-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.add-layers .pills-container:has(.pill-container:empty) {
    display: none;
}

.add-layers .pills-container .pill-type {
    color: var(--primary-color);
    padding: 7px 15px;
    border-radius: 18px;
    height: fit-content;
    border: 0;
    font-size: 0.625rem;
}

.add-layers .pills-container .pill-container .pill-type.pill {
    background-color: var(--color-100);
    color: var(--primary-color);
}

.add-layers .pills-container .pill-container .pill-text {
    margin-right: 5px;
}

.add-layers .pills-container .pill-container .pill-close {
    filter: var(--primary-filter);
    padding: 3px;
    margin: -3px;
    cursor: pointer;
}

.add-layers .pills-container .pill-type.clear-button {
    background-color: var(--color-g-100);    
}

/* scroll bar */



.scroller {
    --scrollbar-color-track: var(--color-g-100);
    --scrollbar-color-thumb: var(--color-g-200);
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
    scrollbar-gutter: stable;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

/* map popups */
.content-property-key {
    font-weight: bold;
}

.feature-info .open-view-arrow {
    margin: 5px; 
}

.feature-info .open-view-action {
    cursor: pointer;
    color: var(--color-300);
    font-size: 11px;
}

.feature-info .open-view-button {
    width: 100px;
}

.feature-info .open-view-action:hover {
    text-decoration: underline;
}
.add-layers .dataset-layers .layer-historical {
    margin-left: 5px;
    display: inline-block;
    filter: var(--filter-200);
}