:root {
    --yellow: rgba(255,193,25,0.8);
    --teal: #8CE0EB;
    --gray: #D2CCB1;
    --red: rgba(255,75,0,0.8);
    --violet: rgba(187, 32, 138, 0.6);
    --green: rgba(0, 138, 58, 0.6);
    --blue: rgba(3, 170, 234, 0.6);
    --black: #000;
    --white-transparent: rgba(255, 255, 255, 0.8);
}

html, body {
    height: 100%;
    margin: 0;
}

.leaflet-container {
    height: 400px;
    width: 600px;
    max-width: 100%;
    max-height: 100%;
}

.mapMarkerIcon {
    text-align: center;
    line-height: 40px;
}

.color_cat_0 {
    color: var(--violet) !important;
}

.color_cat_1 {
    color: var(--green) !important;
}

.color_cat_2 {
    color: var(--blue) !important;
}

li.overlayGroup, li.overlayLayer {
    list-style-type: none;
    padding: 2px 2px;
    margin: 2px 0;
    border-radius: 5px;
}

li.overlayLayer.enabled {
    background-clip: padding-box;
    background-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
}

#date_range {
    padding-left: .5rem;
}

hr.catDivider {
    width: 100%;
    color: var(--white-transparent);
    border-radius: 2px;
    border-color: var(--bs-white);
}

ul > .catDivider {
    margin-left: -2rem !important;
    width: calc(100% + 2rem);
}

.layer-item {
    background-color: var(--bs-secondary);
    color: var(--bs-gray-dark);
}

.layer-item:hover {
    background-color: var(--bs-secondary) !important;
}

td.in-range {
    background-color: var(--bs-secondary) !important;
}

td.start-date, td.end-date {
    background-color: var(--bs-primary) !important;
}

button.applyBtn, button.applyBtn:hover {
    color: var(--bs-light);
}

div.leaflet-popup-content {
    max-width: 400px !important;
}

div.slider-handle {
    background-image: unset !important;
    background-color: var(--bs-primary) !important;
}

div.slider-selection {
    background-image: unset !important;
    background-color: var(--bs-secondary) !important;
}

option:checked, option:focus, option:focus-within, option:active, option:target, option:visited {
    background-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
}

.text-outline-light {
    -webkit-text-stroke: var(--bs-light) 1px;
}