.active-layers .clear-layers {
    display: none;
}

.active-layers:has(.active-layer:nth-of-type(2)) > .clear-layers {
    display: flex;
    gap: 5px;
    justify-content: end;
}

.active-layers .clear-layers .clear-layers-button {
    display: flex;
    gap: 5px;
    cursor:pointer;
}

.active-layers .clear-layers .clear-layers-button span {        
    color: var(--color-400);
}

.active-layers .clear-layers .clear-layers-button .icon {
    filter: var(--filter-400);
}

.active-layers .active-layer:last-child {
    border-bottom: none;
}

.active-layer {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 2px solid var(--color-g-100);
}

.active-layer .active-layer-left-content-container {
    display: flex;
    flex-direction: column;
}

.active-layer .active-layer-left-content {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 18px;
}

.active-layer .active-layer-left-content .active-layer-zoom {
    filter: var(--filter-200)
}

.active-layer .active-layer-left-content .active-layer-sorter {
    cursor: grab;
}

.active-layer .active-layer-left-content .active-layer-visibility {
    filter: var(--filter-g-300)
}

.active-layer .active-layer-left-content-container .active-layer-dataset-content {
    color: var(--color-g-400);
    font-size: 0.66rem;
    margin-top: 7px;
    margin-bottom: -7px;
}

.active-layer .active-layer-right-content {
    margin-left: auto;
    width: fit-content;
    display: flex;
    gap: 5px;
}

.active-layer .active-layer-right-content.not-available {
    color: var(--danger);
}

.active-layer .active-layer-tools > * {
    margin: 0 3px;
    filter: var(--filter-g-400);
}

.active-layer .active-layer-right-content .active-layer-legend-container {
    display: inline-block;
    cursor: pointer;
}

.active-layer .active-layer-right-content .active-layer-legend-container .active-layer-legend-div {
    width: 120px;
}

.active-layer .active-layer-right-content .active-layer-legend-container .active-layer-legend-values {
    display: flex;
    justify-content: space-between;
    margin: 0px -6px 0 -6px;
}

.active-layer .active-layer-right-content .active-layer-legend-container .active-layer-legend-values .active-layer-legend-value {
    width: 12px;
    height: 10px;
    text-align: center;
    color: var(--color-g-400);
}

.active-layer .active-layer-right-content .active-layer-legend-container .active-layer-legend-values .active-layer-legend-value::before {
    content: "";
    display: block;
    width: 1px;
    height: 5px;
    background-color: var(--color-g-400);
    margin-left: 6px;
    align-items: center;
}

.active-layer .active-layer-close {
    align-self: self-start;
    margin-top: 5px;
    filter: var(--filter-g-400);
}

.active-layer-color-icon {
    margin-left: -10px;
}

.active-layer-info {
    cursor: pointer;
}

.active-layer-break {
    flex-basis: 100%;
    height: 0;
}

.active-layer-details {
    background-color: var(--color-g-050);
    padding: 10px;
}

.active-layer-details-content {
    padding-right: 30px;
}

.active-layer-section {
    margin-bottom: 10px;
}

.active-layer-details-close {
    width: auto;
    float: right;
    filter: var(--filter-g-400)
}

.active-layer-details-label {
    font-weight: 500;
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
}

.active-layer-details-input {
    display: block;
}

.active-layer-details-label.inline {
    display: inline-block;
    margin-right: 5px;
}

.active-layer-details-label.inline ~ input[type="checkbox"] {
    vertical-align: middle;
}

.active-layer-palettes-body {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.active-layer-legend-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.active-layer-legend {
    cursor: pointer;
}

.active-layer-palettes-icon {
    translate: -15px;
}

/* Custom transparency slider */
.active-layer-slider {
    /* removing default appearance */
    appearance: none;
    /* creating a custom design */
    width: 100%;
    cursor: pointer;
    outline: none;
    height: 4px;
    background: var(--color-g-300);
}

.active-layer-slider::-webkit-slider-thumb {
    appearance: none;
    height: 12px;
    width: 12px;
    background-color: var(--primary-color);
    border-radius: 50%;
    border: none;
}

.active-layer-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 5px;
    color: var(--color-g-300);
}

.active-layer .active-layer-color-range .active-layer-color-range-input {
    width: 40px;
    margin-right: 3px;
    color: var(--color-g-300);
    border: 1px solid var(--color-g-100);
    border-radius: 5px;
    padding-left:5px;
}

.active-layer .active-layer-color-range .active-layer-color-range-auto {
    background-color: var(--color-g-300);
    text-transform: uppercase;
    color: white;
    border: none;
    border-radius: 5px;
    margin-left: 3px;
}

.active-layer .active-layer-color-range .active-layer-color-range-error {
    color: var(--danger);
    margin-top: 5px;
}

.no-layers-add-layers {
    display: block;
    background-color: var(--primary-color);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: medium;
    color: white;
    border: none;
    margin-top: 10px;
}

.active-layer-legend-name {
    vertical-align: bottom;
    font-size: 11px;
    margin-left: 5px;
}

.active-layer-color-container {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

.active-layer-color-scheme {
    display: flex;
    gap: 0px;
    cursor: pointer;
}

.active-layer-color-scheme .active-layer-color-scheme-part {
    width: 20px;
    height: 13px;
}

.active-layer-details .active-layer-streamline {
    border-top: 1px solid var(--color-g-300);
    padding: 10px 0;
    margin-top: 5px;
}

.active-layer-details .active-layer-streamline-top {
    display: flex;
}

.active-layer-details .active-layer-streamline-top .active-layer-streamline-toggle {
    display: flex;
    align-items: center;
}

.active-layer-details .active-layer-streamline .active-layer-streamline-label {
    font-weight: 600;
    font-size: 0.813rem;
    margin-right: 5px;
}

.active-layer-details .active-layer-streamline .active-layer-streamline-collapse {
    margin-left: auto;
}

.active-layer-details .active-layer-streamline .active-layer-streamline-collapse .icon {
    transition: all 0.3s ease;
}

.active-layer-details .active-layer-streamline .active-layer-streamline-collapse.collapsed .icon {
    transform: rotate(180deg);
}

/* Toggle Switch */
/* The switch - the box around the slider */
.active-layer .switch {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 11px;
  vertical-align: middle;
}

/* Hide default HTML checkbox */
.active-layer .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.active-layer .slider { 
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.active-layer .slider:before {
  position: absolute;
  content: "";
  height: 7px;
  width: 7px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  box-shadow: 0 0 5px var(--color-g-300);
  -webkit-transition: .4s;
  transition: .4s;
}

.active-layer input:checked + .slider {
  background-color: var(--primary-color);
}

.active-layer input:disabled + .slider {
    background-color: var(--color-g-200);
  }

.active-layer input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-color);
}

.active-layer input:checked + .slider:before {
  -webkit-transform: translateX(7px);
  -ms-transform: translateX(7px);
  transform: translateX(7px);
}

/* Rounded sliders */
.active-layer .slider.round {
  border-radius: 14px;
  border: 1px solid var(--primary-color);
}

.active-layer input:disabled + .slider.round {
    border-radius: 14px;
    border: 1px solid var(--color-g-200);
  }

.active-layer .slider.round:before {
  border-radius: 50%;
}