.atlas-layer-legend-expand-btn {
    position: absolute;
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: collapse;
    width: 16px;
    height: 16px;
    text-align: center;
    cursor: pointer;
    line-height: 32px;
    border-radius: 5px;
    z-index: 200;
    background: no-repeat center center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpath fill='Gray' d='M24 20.5V6.7c0-1.8-1.4-3.256-3.1-3.256-1.708 0-3.098 1.457-3.098 3.256v6.754L5.29.94A3.092 3.092 0 0 0 .908.939a3.097 3.097 0 0 0 0 4.382l12.447 12.446H6.63c-1.825 0-3.303 1.387-3.303 3.1s1.478 3.098 3.303 3.098l14.058-.002c1.826.002 3.305-1.387 3.306-3.096-.001-.045-.014-.083-.016-.128.003-.06.018-.12.018-.18z'/%3E%3C/svg%3E");
    background-size: 9px;
}

    .atlas-layer-legend-expand-btn:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpath fill='DeepSkyBlue' d='M24 20.5V6.7c0-1.8-1.4-3.256-3.1-3.256-1.708 0-3.098 1.457-3.098 3.256v6.754L5.29.94A3.092 3.092 0 0 0 .908.939a3.097 3.097 0 0 0 0 4.382l12.447 12.446H6.63c-1.825 0-3.303 1.387-3.303 3.1s1.478 3.098 3.303 3.098l14.058-.002c1.826.002 3.305-1.387 3.306-3.096-.001-.045-.014-.083-.016-.128.003-.06.018-.12.018-.18z'/%3E%3C/svg%3E");
    }

.atlas-layer-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24px' height='24px' viewBox='0 0 477 477' xml:space='preserve'%3E%3Cpath fill='Gray' d='M470,224c-0-0-1-0-1-0L435,205l-188,99c-5,2-11,2-16,0L42,205L9,223 c-8,4-11,14-7,22c0,0,0,1,0,1l236,125l236-125C480,240,478,230,470,224z M475,333 c-1-2-4-5-6-6L435,308l-188,99c-5,2-11,2-16,0L42,308L9,326c-8,4-11,14-6,23 c1,2,4,5,6,6l221,119c5,2,11,2,16,0l221-119C477,351,480,341,475,333z M470,122 c-0-0-1-0-1-0L247,2c-5-2-11-2-16,0L9,121c-8,4-11,14-7,22c0,0,0,1,0,1l236,125 l236-125C480,138,478,127,470,122z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}

    .atlas-layer-btn:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24px' height='24px' viewBox='0 0 477 477' xml:space='preserve'%3E%3Cpath fill='DeepSkyBlue' d='M470,224c-0-0-1-0-1-0L435,205l-188,99c-5,2-11,2-16,0L42,205L9,223 c-8,4-11,14-7,22c0,0,0,1,0,1l236,125l236-125C480,240,478,230,470,224z M475,333 c-1-2-4-5-6-6L435,308l-188,99c-5,2-11,2-16,0L42,308L9,326c-8,4-11,14-6,23 c1,2,4,5,6,6l221,119c5,2,11,2,16,0l221-119C477,351,480,341,475,333z M470,122 c-0-0-1-0-1-0L247,2c-5-2-11-2-16,0L9,121c-8,4-11,14-7,22c0,0,0,1,0,1l236,125 l236-125C480,138,478,127,470,122z'%3E%3C/path%3E%3C/svg%3E");
    }

.atlas-legend-btn {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5QoEFC8mlLEZWwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAVElEQVRIx2P8//8/Ay0BEwONwagFA28BC7pAS2cfRrKqKS9ipJoF6AYiW4jNckKOYSHFNeT4hCQLcPkAn8Us1DIIF2Ac8kXFaDIdTaajxfWoBUQAANzmNAXUeVukAAAAAElFTkSuQmCC");
    background-position: center;
    background-repeat: no-repeat;
}

    .atlas-legend-btn:hover {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5QoEFDAyQzHDuAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAVElEQVRIx2P8//8/Ay0BEwONwagFA28BC7oA4wEGjGT134GBkWoWoBuIbCE2ywk5hoUU15DjE5IswOUDfBazUMsgnI4a8kXFaDIdTaajxfWoBUQAANQCKbkYDf6GAAAAAElFTkSuQmCC");
    }
/** Container that wraps control when displayed within map area.*/
.atlas-legend-control-container,
.atlas-layer-control-container {
    border-radius: 5px;
    flex-direction: column;
    overflow: auto;
}

.atlas-legend-control {
    border-radius: 5px;
}

.atlas-legend-control,
.atlas-layer-control {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 12px;
    width: fit-content;
}

.atlas-legend-content {
    display: inline-block;
    padding: 10px;
}

.atlas-legend-title,
.atlas-layer-title {
    padding: 10px 10px 5px 10px;
    font-size: 14px;
    font-weight: bold;
}

.atlas-layer-group-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.atlas-legend-subtitle {
    font-size: 14px;
    margin-bottom: 5px;
}

.atlas-control-clear {
    clear: both;
}

.atlas-legend-image-legend img {
    display: block;
    margin: 0 auto;
}

.atlas-legend-category-legend {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 0 auto;
}

.atlas-legend-category-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .atlas-legend-category-item svg,
    .atlas-legend-category-item img {
        display: block;
        margin: auto;
    }

    .atlas-legend-category-item span {
        margin: 0 5px;
    }

.atlas-legend-category-item {
    padding: 2px;
}

.atlas-legend-category-shape {
    stroke: #ccc;
    stroke-linejoin: round;
}

.atlas-legend-gradient-legend {
    text-align: center;
}

.atlas-layer-radio-container {
    display: flex;
    flex-direction: column;
    padding: 2px;
}

.atlas-layer-checkbox,
.atlas-layer-radio {
    display: flex;
    flex-direction: row;
    line-height: 1;
    width: fit-content;
}

    .atlas-layer-checkbox span,
    .atlas-layer-radio span {
        margin-left: 5px;
    }

.atlas-legend-footer {
    font-size: 11px;
    max-width: fit-content;
    min-width: 200px;
}

.atlas-layer-range input,
.atlas-layer-range span {
    vertical-align: middle;
}

.atlas-layer-range span {
    display: inline-block;
    margin-left: 5px;
    min-width: 30px;
}

.atlas-carousel-dot-container {
    padding: 5px;
    text-align: center;
    margin-top: 1px;
    box-shadow: 0 -1px 0 #717171;
}

.atlas-layer-legend-card {
    overflow: auto;
    padding: 10px;
}
/* The dots/bullets/indicators */
.atlas-carousel-dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    border: 1px solid #717171;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    padding: 0;
}

    .atlas-carousel-dot-active,
    .atlas-carousel-dot:hover {
        background-color: #717171;
    }
/* Focus outline for input items. In some browsers the default outline doesn't appear when focus set programmatically, so need to use CSS. */
.atlas-legend-control input:focus,
.atlas-layer-control input:focus {
    box-shadow: 0 0 0.5px 0.5px black, 0 0 1px 1px white;
}
/* Style used for text on input item that has been disabled. */
.atlas-carousel-disabled-text {
    color: lightgray !important;
}

.atlas-accordion-button:focus {
    border-radius: 0px;
    outline: none;
}

.atlas-accordion-button {
    display: block;
    line-height: 18px;
    min-width: max-content;
    outline: none;
    padding: 5px 10px;
    border: none;
    border-bottom: 1px solid darkslategrey;
    width: 100%;
    text-align: left;
    font-size: 14px;
    border-radius: 0px;
}

    .atlas-accordion-button::after {
        content: "\25BC";
        font-size: 14px;
        float: right;
        margin-left: 10px;
    }

    .atlas-accordion-button.active:after {
        content: "\25B2";
        font-size: 14px;
        float: right;
        margin-left: 10px;
    }