:root {
    --subtle-detail-color: #007759;
    --subtle-detail-color-contrast: #ffffff;
    --subtle-detail-color-light-contrast: white;

    --unsubtle-detail-color: #b34f26;
    --unsubtle-detail-color-contrast: #ffffff;
    --catch-detail-color: #FE6F32;
    --catch-detail-color-contrast: #ffffff;
    --alert-color: #fee4d1;
    --background-color: white;
    --foreground-color: #007759;
    --popup-border: white;
    --shadow-color: #00000066;
    --variable-title-height: 0px; /* Set by javascript */
    --return-to-the-map-height: 2em;

    --image-carousel-height: 350px;
}

@font-face{
    font-family:"Open Sans Regular";
    src:url("/assets/themes/natuurpunt/fonts/OpenSans-Regular.ttf") format("truetype");
}

@font-face{
    font-family:"Amaranth";
    src:url("/assets/themes/natuurpunt/fonts/Amaranth-Regular.otf") format("opentype");;
}

body {
    --non-active-tab-svg: #556c5c;
	font-family: 'Open Sans Regular', sans-serif;
}

.layer-toggle .alert {
    background: unset !important;
    padding: 0 !important;
}

.layer-toggle svg path {
    fill: var(--foreground-color) !important;
}

.layer-toggle .alert::before {
    content: " - "
}


h1, h2, h3, h4 {
    font-family: 'Amaranth', sans-serif;
}

.tab-non-active svg {
    fill: white !important;
    stroke: white !important;
}

.tab-non-active svg path {
    fill: white !important;
    stroke: white !important;
}

.btn-secondary {
    background-color: var(--unsubtle-detail-color);
}

.btn-secondary:hover {
    background-color: var(--catch-detail-color);
}

.layer-toggle {
    border-top: 2px solid var(--foreground-color);
    margin-top: 0.25rem;
}

.md\:rounded-xl {
    border-radius: unset !important;
}

.rounded-lg {
     border-radius: unset !important;
}

.rounded-3xl {
    border-radius: unset !important;
}

.layer-toggle {
    /* The checkbox that toggles a single layer */
    border-top: unset;
    margin-top: unset;
}

.filter-panel {
    /* The panel for a single layer, containing both the toggle and the filters (if any) */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-top: 2px solid var(--foreground-color);
    display: block;
    border-bottom: unset;
    margin-bottom: unset;
}

.layer-filters {
    /* If needed, the panel which contains the extra filters for a layer */
}

.first-filter-panel {
    /* Additional class on the first layer filter */
    border-top: unset !important;
}