div#OLMap.OLMap {
    position: relative;
    background: var(--col_whitesmoke);
    height: calc(100vh - 43px);
    top: 0;
    left: 0;
    user-select: none;
}

div#OLMap-featureOverlay {
    position: absolute;
    background-color: var(--col_whitesmoke);
    min-width: max-content;
    bottom: 5px;
    border-radius: var(--bord_rad);
    border: 3px solid var(--col_darkgrey);
    display: flex;
    flex-flow: column nowrap;
    cursor: default;
    overflow: hidden;
    min-width: 320px;
    max-width: 320px;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#OLMap-featureOverlay > div {
    padding: .5rem 1rem;
}

div#OLMap-featureOverlay > div#featureOverlayTitleBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--col_darkgrey);
    gap: .5rem;
}

div#OLMap-featureOverlay > div#featureOverlayTitleBar > div {
    font-weight: 600;
    flex: 0 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

div#OLMap-featureOverlay > div#featureOverlayTitleBar > div#featureOverlayZoom > svg {
    transition: stroke var(--anim_dur), scale var(--anim_dur);
}

div#OLMap-featureOverlay > div#featureOverlayTitleBar :where(div#featureOverlayZoom:active, div#featureOverlayZoom:focus, div#featureOverlayZoom:focus-visible, div#featureOverlayZoom:focus-within, div#featureOverlayZoom:hover) > svg {
    scale: .9;
    stroke: var(--col_darkblue);
}

div#OLMap-featureOverlay > div#featureOverlayTitleBar > div#featureID {
    flex: 3 0 auto;
    cursor: default;
}

div#OLMap-featureOverlay > div#featureOverlayTitleBar > div#featureOverlayClose > svg {
    rotate: 45deg;
    transform-origin: center;
}

div#OLMap-featureOverlay > div#featureOverlayTitleBar :is(div#featureOverlayClose:active, div#featureOverlayClose:focus, div#featureOverlayClose:focus-visible, div#featureOverlayClose:focus-within, div#featureOverlayClose:hover) {
    --epd-cliepd-color: var(--col_red);
    color: var(--epd-cliepd-color);
}

div#OLMap-featureOverlay > div#featureOverlayTitleBar :is(div#featureOverlayClose:active, div#featureOverlayClose:focus, div#featureOverlayClose:focus-visible, div#featureOverlayClose:focus-within, div#featureOverlayClose:hover) > svg {
    fill: var(--epd-cliepd-color);
    stroke: var(--epd-cliepd-color);
}

div#OLMap-featureOverlay > div#featureOverlayTitleBar :is(div#featureOverlayClose:active, div#featureOverlayClose:focus, div#featureOverlayClose:focus-visible, div#featureOverlayClose:focus-within, div#featureOverlayClose:hover) > svg > g > path {
    animation: negativewiggle_45 2.4s ease-in-out infinite;
    transform-origin: center;
}

div#OLMap-featureOverlay > div#featureOverlayShortInfo {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    gap: .5rem;
}

div#OLMap-featureOverlay > div#featureOverlayShortInfo > div :where(span.featureMainAttributeName, span.featureAttributeName) {
    font-weight: 600;
}

div#OLMap-featureOverlay > div#featureOverlayShortInfo :where(div#featureSelectedMainAttribute, div#featureType, div#featureLearnMore) {
    flex: 1 0 100%;
}

div#OLMap-featureOverlay > div#featureOverlayShortInfo :where(div#featureArea, div#featureInhabitants) {
    flex: 1 0 40%;
}

div#OLMap-featureOverlay > div#featureOverlayShortInfo > div#featureLearnMore {
    margin-bottom: 1rem;
}

div#OLMap-featureOverlay > div#featureOverlayShortInfo > div#featureLearnMore > a {
    cursor: pointer;
    user-select: none;
}

div#OLMap.OLMap > div#OLMap-zoom {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 994;
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomInOut {
    flex: 1 0 100%;
    width: 3rem;
    display: flex;
    flex-flow: column nowrap;
    border-radius: var(--bord_rad_circ);
    border: 3px solid var(--col_darkgrey);
    overflow: hidden;
    cursor: pointer;
    background-color: var(--col_darkgrey);
    gap: 3px;
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomInOut :where(div#OLMap-zoomIn, div#OLMap-zoomOut) {
    height: 2rem;
    padding: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 auto;
    background-color: var(--col_whitesmoke);
    transition: scale 2s, stroke var(--anim_dur);
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomInOut :where(div#OLMap-zoomIn:active, div#OLMap-zoomIn:focus, div#OLMap-zoomIn:focus-visible, div#OLMap-zoomIn:focus-within, div#OLMap-zoomIn:hover) > svg {
    scale: 1.1;
    stroke: var(--col_darkblue);
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomInOut > div#OLMap-zoomOut > svg > g > path#vertical {
    display: none;
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomInOut :where(div#OLMap-zoomOut:active, div#OLMap-zoomOut:focus, div#OLMap-zoomOut:focus-visible, div#OLMap-zoomOut:focus-within, div#OLMap-zoomOut:hover) > svg {
    scale: .9;
    stroke: var(--col_darkblue);
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomInOut > div#OLMap-zoomSlider {
    writing-mode: vertical-rl;
    height: 10rem;
    display: flex;
    flex: 3 0 auto;
    background-color: var(--col_grey);
    overflow: hidden;
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomInOut > div#OLMap-zoomSlider > input.zoom {
    height: 100%;
    width: 100%;
    background-color: var(--col_grey);
    outline: none;
    margin: 0;
    cursor: pointer;
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomInOut > div#OLMap-zoomSlider > input.zoom::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 3rem;
    height: 1rem;
    background-color: var(--col_whitesmoke);
    border-radius: 0;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomInOut > div#OLMap-zoomSlider > input.zoom::-moz-range-thumb {
    cursor: pointer;
    width: 3rem;
    height: 1rem;
    background-color: var(--col_whitesmoke);
    outline: 1.5px solid var(--col_darkgrey);
    border-radius: 0;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomToExtent {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--col_whitesmoke);
    border-radius: var(--bord_rad_circ);
    border: 3px solid var(--col_darkgrey);
    height: 2rem;
    padding: .5rem;
}

div#OLMap.OLMap > div#OLMap-zoom > div#OLMap-zoomToExtent > svg {
    height: 1.25rem;
    transition: stroke var(--anim_dur), scale var(--anim_dur);
}

div#OLMap.OLMap > div#OLMap-zoom :where(div#OLMap-zoomToExtent:active, div#OLMap-zoomToExtent:focus, div#OLMap-zoomToExtent:focus-visible, div#OLMap-zoomToExtent:focus-within, div#OLMap-zoomToExtent:hover) > svg {
    scale: 1.1;
    stroke: var(--col_darkblue);
}

div#OLMap.OLMap > div#OLMap-scaleBar {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 994;
    display: flex;
    flex-flow: column nowrap;
    background-color: hwb(0 95% 5% / .8);
    border-radius: var(--bord_rad_circ);
    border: 3px solid var(--col_darkgrey);
    overflow: hidden;
    pointer-events: none;
    font-weight: 600;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-lexicalScale {
    flex: 1 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem 0;
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale {
    flex: 1 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    padding: 0 .5rem;
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale > div.graphicalScaleBar {
    border: 2px solid var(--col_darkgrey);
    border-radius: var(--bord_rad_circ);
    display: flex;
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale > div.graphicalScaleBar :where(div.scaleBarPart, div.scaleBarNegPart) {
    height: .25rem;
    display: flex;
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale > div.graphicalScaleBar > div.scaleBarNegPart > div.scaleBarNegSubPart {
    height: 100%;
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale > div.graphicalScaleBar > div.scaleBarNegPart > div.scaleBarNegSubPart:nth-of-type(odd) {
    background-color: var(--col_whitesmoke);
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale > div.graphicalScaleBar > div.scaleBarNegPart > div.scaleBarNegSubPart:nth-of-type(even) {
    background-color: var(--col_darkgrey);
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale > div.graphicalScaleBar > div.scaleBarPart:nth-of-type(odd) {
    background-color: var(--col_darkgrey);
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale > div.graphicalScaleBar > div.scaleBarPart:nth-of-type(even) {
    background-color: var(--col_whitesmoke);
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale > div.scaleBarStepText {
    padding: .2rem .5rem;
    display: flex;
    font-size: .8rem;
}

div#OLMap.OLMap > div#OLMap-scaleBar > div#OLMap-graphicalScale > div.scaleBarStepText > div.scaleBarPartStepText {
    display: flex;
    justify-content: center;
    align-items: center;
}

div#db-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--col_whitesmoke);
    border-radius: var(--bord_rad_circ);
    border: 3px solid var(--col_darkgrey);
    width: 2rem;
    height: 2rem;
    padding: .5rem;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
    z-index: 994;
}

div#db-toggle > svg {
    height: 1.5rem;
    transition: stroke var(--anim_dur);
}

div#db-toggle > svg > g > path#horizontal-upper {
    transform-origin: center;
}

div#db-toggle > svg > g > path#horizontal-middle {
    transition: stroke var(--anim_dur), translate var(--anim_dur);
}

div#db-toggle > svg > g > path#horizontal-lower {
    transform-origin: center;
}

:is(div#db-toggle:active, div#db-toggle:focus, div#db-toggle:focus-visible, div#db-toggle:focus-within, div#db-toggle:hover) > svg {
    stroke: var(--col_darkblue);
}

div#db-toggle.open > svg > g > path#horizontal-middle {
    stroke: transparent;
    translate: -100%;
}

:is(div#db-toggle.open:active, div#db-toggle.open:focus, div#db-toggle.open:focus-visible, div#db-toggle.open:focus-within, div#db-toggle.open:hover) > svg {
    stroke: var(--col_red);
    animation: 2.4s ease-in-out infinite negativewiggle;
    transform-origin: center;
}

div#OLMap.OLMap > div#OLMap-rotate {
    position: absolute;
    top: 8rem;
    right: 1rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    pointer-events: none;
    z-index: 994;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#OLMap.OLMap > div#OLMap-rotate > div {
    pointer-events: auto;
    opacity: 1;
    transition: opacity var(--anim_dur), visibility var(--anim_dur);
}

div#OLMap.OLMap > div#OLMap-rotate > div.hidden {
    opacity: 0;
    visibility: hidden;
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateNorth {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--col_whitesmoke);
    border-radius: var(--bord_rad_circ);
    border: 3px solid var(--col_darkgrey);
    height: 2rem;
    width: 2rem;
    padding: .5rem;
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateNorth > svg {
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
    height: 1.75rem;
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateNorth > svg > g > path#needleNorth {
    stroke: var(--col_red);
    fill: var(--col_red);
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateNorth > svg > g > ellipse#middle {
    fill: var(--col_whitesmoke);
    stroke-width: 8px;
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateNorth > svg > g > path#needleSouth {
    stroke: var(--col_whitesmoke);
    fill: var(--col_whitesmoke);
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateLR {
    flex: 1 0 100%;
    width: 7rem;
    display: flex;
    border-radius: var(--bord_rad_circ);
    border: 3px solid var(--col_darkgrey);
    overflow: hidden;
    cursor: pointer;
    background-color: var(--col_darkgrey);
    gap: 3px;
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateLR :where(div#OLMap-rotateLeft, div#OLMap-rotateRight) {
    width: 2rem;
    padding: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 auto;
    background-color: var(--col_whitesmoke);
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateLR :where(div#OLMap-rotateLeft, div#OLMap-rotateRight) > svg {
    fill: none;
    stroke-width: 12px;
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateLR :where(div#OLMap-rotateLeft, div#OLMap-rotateRight) > svg > g > text {
    font-size: 3rem;
    stroke-width: 4px;
    font-style: italic;
}

div#OLMap.OLMap > div#OLMap-rotate > div#OLMap-rotateLR :where(div#OLMap-rotateLeft:active, div#OLMap-rotateLeft:focus, div#OLMap-rotateLeft:focus-visible, div#OLMap-rotateLeft:focus-within, div#OLMap-rotateLeft:hover, div#OLMap-rotateRight:active, div#OLMap-rotateRight:focus, div#OLMap-rotateRight:focus-visible, div#OLMap-rotateRight:focus-within, div#OLMap-rotateRight:hover) > svg {
    stroke: var(--col_darkblue);
}

div#OLMap.OLMap > div#OLMap-layerAttributions {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    background-color: var(--col_whitesmoke);
    border-radius: var(--bord_rad);
    border: 3px solid var(--col_darkgrey);
    overflow: hidden;
    font-size: .6rem;
    font-weight: 600;
    padding: .5rem;
    gap: 1rem;
    cursor: default;
    z-index: 994;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMax, div#OLMap-layerAttributionsMaxi.cloned) {
    display: flex;
    flex-flow: column nowrap;
    width: 250px;
    user-select: text;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMaxi.cloned, div#OLMap-layerAttributionsMini.cloned) {
    visibility: hidden;
    position: fixed;
    translate: 200vw;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMax, div#OLMap-layerAttributionsMaxi.cloned) :where(div, div > p) {
    margin: 0 0 .4rem;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMax, div#OLMap-layerAttributionsMaxi.cloned) > div#layerAttributionsTitle {
    font-size: .8rem;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMin, div#OLMap-layerAttributionsMini.cloned) {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    padding: .5rem;
    gap: 1rem;
    flex: 0 0 1rem;
    cursor: pointer;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMin, div#OLMap-layerAttributionsMini.cloned) > div#switchText {
    writing-mode: sideways-rl;
    flex: 1 0;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1rem;
    font-size: .8rem;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMin, div#OLMap-layerAttributionsMini.cloned) > svg {
    min-width: 1rem;
    max-width: 1rem;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMin, div#OLMap-layerAttributionsMini.cloned) > svg#arrowAlt {
    rotate: 270deg;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMin, div#OLMap-layerAttributionsMini.cloned) > svg#arrowAlt > g > path#arrow {
    fill: none;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMin, div#OLMap-layerAttributionsMini.cloned) > svg#arrowAlt > g > path#chevron {
    stroke: none;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :where(div#OLMap-layerAttributionsMin, div#OLMap-layerAttributionsMini.cloned) > svg#arrowAlt > g > path#opaque {
    fill: none;
    stroke: var(--col_whitesmoke);
    stroke-width: 72;
}

div#OLMap.OLMap > div#OLMap-layerAttributions :is(div#OLMap-layerAttributionsMin:active, div#OLMap-layerAttributionsMin:focus, div#OLMap-layerAttributionsMin:focus-visible, div#OLMap-layerAttributionsMin:focus-within, div#OLMap-layerAttributionsMin:hover) > svg#arrowAlt > g > path#opaque {
    animation: 2.4s ease-in-out infinite alternate arrowaltpush;
    transform-origin: center;
}

div#dashboard {
    position: fixed;
    background: var(--col_whitesmoke);
    width: calc(38.2vw - 3px);
    height: calc(100vh - 43px);
    top: 0;
    right: 0;
    display: flex;
    flex-flow: column nowrap;
    border-left: 3px solid var(--col_darkgrey);
    filter: drop-shadow(2.5px 2.5px 5px rgb(0, 0, 0));
    z-index: 993;
}

div#dashboard > div#db-sections {
    position: relative;
    height: 100%;
    padding: 1rem 1rem 0;
    display: flex;
    overflow: hidden;
}

div#dashboard > div#db-sections > div.db-section {
    padding: 0 2rem 2rem;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}

div#dashboard > div#db-sections > div.db-section > div.sectionPart {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding-bottom: 4rem;
}

div#dashboard > div#db-sections > div.db-section > div.sectionPart:not(:first-of-type) {
    border-top: 3px solid var(--col_lightgrey);
    padding-top: 2rem;
}

div#dashboard > div#db-sections > div.db-section > div.sectionPart > h2 {
    width: 85%;
}

div#dashboard > div#db-sections > div#siteSettings > div.sectionPart > div.epd-toggle {
    width: max-content;
    margin: 0 0 2rem;
}

div#dashboard > div#db-sections > div#siteSettings > div.sectionPart > div.epd_settings {
    text-align: center;
    background-color: var(--col_whitesmoke);
    border: 3px solid var(--col_darkgrey);
    border-radius: var(--bord_rad_circ);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1rem;
    cursor: pointer;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
    transition: background-color var(--anim_dur), color var(--anim_dur), fill var(--anim_dur), stroke var(--anim_dur);
}

div#dashboard > div#db-sections > div#siteSettings > div.sectionPart :is(div.epd_settings:hover, div.epd_settings:active, div.epd_settings:focus, div.epd_settings:focus-visible, div.epd_settings:focus-within) {
    background-color: var(--col_lightgrey);
    color: var(--col_darkblue);
    fill: var(--col_darkblue);
    stroke: var(--col_darkblue);
}

div.selectCard {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    border-radius: var(--bord_rad);
    border: 3px solid var(--col_grey);
    overflow: hidden;
    user-select: none;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
    margin-bottom: 1.5rem;
}

div.selectCard > div.selectCardMain {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-end;
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), center/cover url(/src/img/png/studyArea_DeBeBerlinStegZehl.png);
    padding: 15px;
    min-height: 100px;
    flex: 1 0;
}

div#groupBase.selectCard > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), center/cover url(/src/img/png/DeBeBerlinStegZehl_groupBase_BKGTopPlusOpen.png);
}

div#defaultOLOSM.selectCard > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), center/cover url(/src/img/png/DeBeBerlinStegZehl_groupBase_OSM.png);
}

div#BKGTopPlusOpen.selectCard > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), center/cover url(/src/img/png/DeBeBerlinStegZehl_groupBase_BKGTopPlusOpen.png);
}

div#LGBDGM.selectCard > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), center/cover url(/src/img/png/DeBeBerlinStegZehl_groupBase_LGBDGM.png);
}

div#basemapdeBKGHillshade.selectCard > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), center/cover url(/src/img/png/DeBeBerlinStegZehl_groupBase_basemapdeBKGHillshade.png);
}

div#LGBDOP20c.selectCard > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), center/cover url(/src/img/png/DeBeBerlinStegZehl_groupBase_LGBDOP20c.png);
}

div#groupMain.selectCard > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), center/cover url(/src/img/png/DeBeBerlinStegZehl_groupMain.png);
}

div#groupOverlay.selectCard > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), 50% 75%/cover url(/src/img/png/DeBeBerlinStegZehl_groupOverlay.png);
}

div#groupOverlayLabel.selectCard > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), top/cover url(/src/img/png/DeBeBerlinStegZehl_groupOverlayLabel.png);
}

:is(div#LGBDvgBezBE.selectCard, div#LGBDvgKrsBB.selectCard) > div.selectCardMain {
    background: linear-gradient(120deg, transparent, var(--col_whitesmoke) 70%), 50% 75%/cover url(/src/img/png/DeBeBerlinStegZehl_groupOverlay.png);
}

div.selectCard > div.selectCardMain > div.selectCardMainInputContainer {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 0;
    width: 100%;
}

div.selectCard > div.selectCardMain > div.selectCardMainInputContainer > svg#checkmark {
    right: 0;
}

div.selectCard > div.selectCardMain svg#checkmark {
    position: absolute;
    pointer-events: none;
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--col_whitesmoke);
    scale: .5;
    opacity: 0;
}

div.selectCard input {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

div.selectCard input.toggle {
    display: inline-block;
    border-radius: var(--bord_rad_circ);
    border: 2px solid var(--col_grey);
    transition: background-color var(--anim_dur), border-color var(--anim_dur);
    background-color: var(--col_grey);
}

div.selectCard :where(input.toggle:active, input.toggle:focus, input.toggle:focus-visible, input.toggle:focus-within, input.toggle:hover) {
    border: 2px solid var(--col_green);
}

div.selectCard input.toggle::after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

div.selectCard input.toggle:checked {
    background-color: var(--col_green);
    border: 2px solid var(--col_green);
}

div.selectCard input.opacity {
    width: 50%;
    height: 15px;
    background-color: var(--col_grey);
    border: none;
    outline: none;
    border-radius: var(--bord_rad_circ);
}

div.selectCard input.opacity::-webkit-slider-thumb {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background-color: var(--col_green);
    border: 2px solid var(--col_whitesmoke);
    border-radius: var(--bord_rad_circ);
    filter: drop-shadow(1px 1px 5px rgba(0,0,0,.25));
}

div.selectCard input.opacity::-moz-range-thumb {
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-color: var(--col_green);
    border: 2px solid var(--col_whitesmoke);
    border-radius: var(--bord_rad_circ);
    filter: drop-shadow(1px 1px 5px rgba(0,0,0,.25));
}

div.selectCard > div.selectCardMain > p {
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
    text-align: right;
    padding-top: 15px;
}

div.selectCard > div.selectCardToggle {
    padding: 15px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    background-color: var(--col_whitesmoke);
}

div.selectCard > div.selectCardToggle > div.selectCard {
    margin: 1.5rem;
}

div#dashboard > div#db-sections > div#studyArea > div#selectedStudyAreaAbstract.sectionPart.absolute {
    position: absolute;
    left: 2rem;
    bottom: 0;
    width: calc(100% - 4rem);
    height: 150px;
    overflow: scroll;
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
    border: none;
    background-color: var(--col_whitesmoke);
    padding-right: 1rem;
}

div#dashboard > div#db-sections > div#studyArea > div#selectedStudyAreaAbstract.sectionPart.absolute > div.title {
    font-size: 1.25rem;
    font-weight: 600;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown {
    display: flex;
    flex-flow: column nowrap;
    border-radius: var(--bord_rad);
    border: 3px solid var(--col_grey);
    overflow: hidden;
    user-select: none;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
    font-size: 1.25rem;
    background-color: var(--col_whitesmoke);
    margin-bottom: 2rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown :where(svg#custom, svg#smiley, svg#combinedOverall) {
    fill: none;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown svg#smiley > g > g#face > g#eyes {
    fill: var(--col_darkgrey);
    stroke: none;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown :where(svg#custom, svg#smiley, svg#combinedOverall) {
    stroke-width: 8;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown div#strain svg#smiley > g > g#face > path#mouth {
    rotate: 180deg;
    transform-origin: 50% 62.5%;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.selected {
    justify-content: space-between;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart :where(div#mainAttributes.dropdown div.mainAttribute, div#mainAttributes.dropdown > div.selected) {
    cursor: pointer;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown :where(div.selected > div.mainAttribute, div.mainAttribute.selected) {
    font-weight: 600;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.selected > div {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.selected > div.selectedCategory {
    border-right: 3px solid var(--col_grey);
    min-width: 2.5rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.selected > div.selectedCategory > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.selected > div.selectedCategory > div > svg {
    height: 2rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.selected > div.mainAttribute {
    display: grid;
    grid: auto / 99fr 1fr;
    flex: 1 0;
    padding: .5rem 2rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.selected > div.mainAttribute > div.mainAttributeName {
    text-align: center;
    padding: .5rem 1rem;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown :where(div.selected, div.dropdownContainer, div.mainAttributeCategory, div.mainAttributeCategoryName, div.dropdownAttributes, div.mainAttributeName) {
    display: flex;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer {
    flex-flow: column nowrap;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div#custom.mainAttributeCategory {
    background-color: hwb(315 75% 0%);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div#strain.mainAttributeCategory {
    background-color: hwb(20 75% 0%);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div#relief.mainAttributeCategory {
    background-color: hwb(115 75% 0%);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div#overall.mainAttributeCategory {
    background-color: hwb(195 75% 0%);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div.mainAttributeCategory {
    border-top: 3px solid var(--col_grey);
    opacity: 0;
    transition: opacity var(--anim_dur);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div.mainAttributeCategory.down {
    opacity: 1;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div.mainAttributeCategory > div.mainAttributeCategoryName {
    text-orientation: sideways;
    writing-mode: vertical-rl;
    scale: -1;
    font-weight: 600;
    padding: 2rem 1rem;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    font-size: 1.5rem;
    gap: 1rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div.mainAttributeCategory > div.mainAttributeCategoryName > svg {
    height: 2rem;
    rotate: 180deg;
    transform-origin: center;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div.mainAttributeCategory > div.dropdownAttributes {
    border-left: 3px solid var(--col_grey);
    flex-flow: column nowrap;
    flex: 1 0;
    overflow: hidden;
    background: inherit;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div.mainAttributeCategory > div.dropdownAttributes > div.mainAttribute {
    display: grid;
    grid: auto / 99fr 1fr;
    padding: .5rem 2rem;
    flex: 1 0;
    justify-content: center;
    align-items: center;
    background: inherit;
    transition: scale var(--anim_dur), color var(--anim_dur);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div.mainAttributeCategory > div.dropdownAttributes > div.mainAttribute:nth-child(2n) {
    background-color: rgba(0,0,0,.1);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div.mainAttributeCategory > div.dropdownAttributes > :is(div.mainAttribute:active, div.mainAttribute:focus, div.mainAttribute:focus-visible, div.mainAttribute:focus-within, div.mainAttribute:hover):not(.selected) {
    color: var(--col_darkblue);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown > div.dropdownContainer > div.mainAttributeCategory > div.dropdownAttributes > div.mainAttribute > div.mainAttributeName {
    text-align: center;
    padding: .5rem 1rem;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown div.mainAttribute > div.dropdownCheckmark {
    opacity: 0;
    height: 2rem;
    width: 2rem;
    background-color: var(--col_green);
    border: 2px solid var(--col_green);
    border-radius: var(--bord_rad_circ);
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity var(--anim_dur);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown div.mainAttribute > div.dropdownCheckmark > svg {
    pointer-events: none;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--col_whitesmoke);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributes.dropdown :is(div.selected > div.mainAttribute, div.mainAttribute.selected) > div.dropdownCheckmark {
    opacity: 1;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributeInfo {
    font-weight: 600;

}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributeInfo > div.mainAttributeName {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeSelect.sectionPart > div#mainAttributeInfo > div.mainAttributeDesc {
    font-size: 1.25rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    margin-bottom: 4rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > h3 {
    flex: 0 0 100%;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > p {
    margin: 0 0 4rem;
    font-size: 1.25rem;
    font-weight: 600;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend :where(div.bivMatrixVal, div.normValColor) {
    transition: border-color var(--anim_dur), filter var(--anim_dur), outline var(--anim_dur), outline-offset var(--anim_dur), scale var(--anim_dur);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend :where(div.bivMatrixVal, div.normValColor).highlighted {
    border-color: var(--col_gold) !important;
    outline: 3px solid var(--col_gold);
    filter: drop-shadow(2.5px 2.5px 5px rgba(217, 187, 38,.5)) !important;
    outline-offset: -4px;
    z-index: 2;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend :where(div.bivMatrixVal, div.normValColor).notHighlighted:not(.notAvailable) {
    filter: drop-shadow(2.5px 2.5px 5px transparent) opacity(.25) !important;
    scale: .8;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend {
    display: grid;
    grid: 200px calc(50px + .5rem) / 200px calc(50px + .5rem);
    gap: .5rem;
    align-self: center;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivMatrix {
    display: grid;
    grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
    height: 200px;
    width: 200px;
    cursor: pointer;
    border-radius: var(--bord_rad);
    scale: -1 1;
    outline: 3px solid var(--col_darkgrey);
    filter: drop-shadow(1px 1px 5px rgba(0,0,0,.25));
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivMatrix > div.bivMatrixVal {
    display: flex;
    justify-content: center;
    align-items: center;
    scale: -1 1;
    color: var(--col_whitesmoke);
    font-size: 1.25rem;
    font-weight: 700;
    border: 3px solid var(--col_darkgrey);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivMatrix > div.bivMatrixVal:first-of-type {
    border-top-right-radius: var(--bord_rad);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivMatrix > div.bivMatrixVal:nth-of-type(3) {
    border-top-left-radius: var(--bord_rad);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivMatrix > div.bivMatrixVal:nth-last-of-type(3) {
    border-bottom-right-radius: var(--bord_rad);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivMatrix > div.bivMatrixVal:last-of-type {
    border-bottom-left-radius: var(--bord_rad);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivMatrix > div.bivMatrixVal.notAvailable {
    filter: grayscale(.8);
    cursor: not-allowed;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivMatrix > div.bivMatrixVal.notAvailable.notHighlighted {
    filter: grayscale(.5) opacity(.25);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend :where(div.bivXDesc, div.bivYDesc) {
    font-weight: 600;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivXDesc {
    display: grid;
    grid: 25px 25px / 200px;
    gap: .5rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivYDesc {
    display: grid;
    grid: 200px / 25px 25px;
    gap: .5rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivXDesc > div.bivXInnerDesc {
    display: grid;
    grid: 25px / 1fr 2fr 1fr;
    gap: .5rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivYDesc > div.bivYInnerDesc {
    display: grid;
    grid: 1fr 2fr 1fr / 25px;
    gap: .5rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend > div.bivYDesc :where(div.bivYInnerDesc, div.bivYOuterDesc) > div {
    text-orientation: sideways;
    writing-mode: vertical-rl;
    scale: -1;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend :where(div.bivXDesc, div.bivYDesc) :where(div.bivXOuterDesc, div.bivYOuterDesc) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend :where(div.bivXDesc, div.bivYDesc) :where(div.bivXInnerDesc, div.bivYInnerDesc) > div {
    color: var(--col_grey);
    fill: var(--col_grey);
    stroke: var(--col_grey);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend :where(div.bivXDesc, div.bivYDesc) :where(div.bivXInnerDesc, div.bivYInnerDesc) :where(div.bivXInnerArrow, div.bivYInnerArrow) {
    display: flex;
    align-items: center;
    justify-content: center;
    scale: -1;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend :where(div.bivXDesc, div.bivYDesc) :where(div.bivXInnerDesc, div.bivYInnerDesc) :where(div.bivXInnerArrow, div.bivYInnerArrow) > svg {
    stroke-width: 4;
    fill: none;
    stroke: var(--col_grey);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend :where(div.bivXDesc, div.bivYDesc) :where(div.bivXInnerDesc, div.bivYInnerDesc) > div.bivYInnerArrow > svg {
    rotate: 90deg;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.bivLegend :where(div.bivXDesc, div.bivYDesc) :where(div.bivXInnerDesc, div.bivYInnerDesc) :where(div.bivXInnerDescRight, div.bivYInnerDescTop) {
    text-align: end;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.normLegend {
    display: flex;
    flex-flow: row wrap;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.normLegend > div {
    padding: 1rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.normLegend > div.errorLegend {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--col_red);
    font-size: 1.25rem;
    font-weight: 600;
    gap: 2rem;
    padding-top: 0;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.normLegend > div.errorLegend > svg {
    height: 100px;
    fill: var(--col_red);
    stroke: var(--col_red);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.normLegend > div.normVal {
    display: flex;
    align-items: center;
    height: 75px;
    flex: 2 1 350px;
    gap: 2rem;
    font-weight: 600;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#legend > div.normLegend > div.normVal > div.normValColor {
    border-radius: var(--bord_rad_circ);
    min-width: 50px;
    height: 50px;
    cursor: pointer;
    filter: drop-shadow(1px 1px 5px rgba(0,0,0,.25));
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#schemeSelect {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    gap: 2rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#schemeSelect > h3 {
    flex: 0 0 100%;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#schemeSelect > div.colorSchemeOption {
    border: 3px solid var(--col_darkgrey);
    border-radius: var(--bord_rad_circ);
    cursor: pointer;
    height: 50px;
    width: 40%;
    display: flex;
    overflow: hidden;
    margin-bottom: 2rem;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#schemeSelect > div.colorSchemeOption.selected {
    border: 3px solid var(--col_green);
    filter: drop-shadow(2.5px 2.5px 50px rgba(38, 153, 96,.75));
    outline: 3px solid var(--col_green);
    outline-offset: -6px;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#schemeSelect > div.colorSchemeOption > div.colorSchemeColor {
    flex: 1 0;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeStyle.sectionPart > div#schemeSelect > div.colorSchemeOption > div.colorSchemeColor:not(:first-child) {
    outline: 3px solid var(--col_darkgrey);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI :where(div#calcUIInput, div#calcUIMainAttributes > div#calcUIMainAttributeContainer, div#calcUIArithmetics > div#calcUIElementaryArithmetics, div#calcUIArithmetics > div#calcUIAdvancedArithmetics) :is(div[data-attr], div[data-val], div#calcUIDLOptions, div#calcUIULOptions) {
    background-color: var(--col_whitesmoke);
    border: 3px solid var(--col_darkgrey);
    border-radius: var(--bord_rad_circ);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1rem 0;
    cursor: pointer;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
    transition: background-color var(--anim_dur), color var(--anim_dur), fill var(--anim_dur), stroke var(--anim_dur);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI :where(div#calcUIInput, div#calcUIMainAttributes > div#calcUIMainAttributeContainer, div#calcUIArithmetics > div#calcUIElementaryArithmetics, div#calcUIArithmetics > div#calcUIAdvancedArithmetics) :is(div[data-attr]:hover, div[data-val]:hover, div#calcUIDLOptions > div.DLUPOption:hover, div#calcUIULOptions > div.DLUPOption:hover, div[data-attr]:active, div[data-val]:active, div#calcUIDLOptions > div.DLUPOption:active, div#calcUIULOptions > div.DLUPOption:active, div[data-attr]:focus, div[data-val]:focus, div#calcUIDLOptions > div.DLUPOption:focus, div#calcUIULOptions > div.DLUPOption:focus, div[data-attr]:focus-visible, div[data-val]:focus-visible, div#calcUIDLOptions > div.DLUPOption:focus-visible, div#calcUIULOptions > div.DLUPOption:focus-visible, div[data-attr]:focus-within, div[data-val]:focus-within, div#calcUIDLOptions > div.DLUPOption:focus-within, div#calcUIULOptions > div.DLUPOption:focus-within) {
    background-color: var(--col_lightgrey);
    color: var(--col_darkblue);
    fill: var(--col_darkblue);
    stroke: var(--col_darkblue);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput {
    display: flex;
    flex-flow: row wrap;
    flex: 1 0 100%;
    gap: 1rem;
    font-size: 1.5rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput > input#calcUITextInput {
    flex: 1 0 300px;
    min-width: 60%;
    border-radius: var(--bord_rad_circ);
    border: 3px solid var(--col_darkgrey);
    outline: none;
    margin: 0;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    font-style: italic;
    filter: drop-shadow(1px 1px 5px rgba(0,0,0,.25));
    transition: filter var(--anim_dur), border var(--anim_dur);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput > input#calcUITextInput:focus {
    border: 3px solid var(--col_green);
    filter: drop-shadow(2.5px 2.5px 10px rgba(38, 153, 96,.75));
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput > input#calcUITextInput::placeholder {
    opacity: .25;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput :where(div[data-val="C"], div[data-val="AC"]) {
    flex: 1 0 15%;
    min-width: 150px;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput > div[data-val="equals"] {
    flex: 0 1 100%;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput > div#calcUIResult {
    margin: 1rem 0 2rem;
    flex: 0 0 100%;
    min-width: 60%;
    font-size: 1.25rem;
    font-weight: 600;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput :where(div#calcUIResultDL, div#calcUIResultUL) {
    flex: 1 0 300px;
    display: flex;
    flex-flow: column nowrap;
    font-weight: 600;
    gap: 1rem;
    align-items: center;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput :where(div#calcUIResultDL, div#calcUIResultUL) :where(div#calcUIDLTitle, div#calcUIULTitle) {
    display: flex;
    justify-content: center;
    padding: .5rem;
    text-align: center;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput :where(div#calcUIResultDL, div#calcUIResultUL) :where(div#calcUIDLOptions, div#calcUIULOptions) {
    width: 95%;
    gap: .2rem;
    padding: 0;
    background-color: var(--col_darkgrey);
    overflow: hidden;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput :where(div#calcUIResultDL, div#calcUIResultUL) :where(div#calcUIDLOptions, div#calcUIULOptions) > div.DLUPOption {
    flex: 1 0 calc(50% - 1.7rem);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    background-color: var(--col_whitesmoke);
    padding: 1rem .5rem;
    transition: background-color var(--anim_dur), var(--anim_dur), fill var(--anim_dur), stroke var(--anim_dur);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput :where(div#calcUIResultDL, div#calcUIResultUL) :where(div#calcUIDLOptions, div#calcUIULOptions) > div.DLUPOption > svg {
    height: 2rem;
    fill: none;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput :where(div#calcUIResultDL, div#calcUIResultUL) :where(div#calcUIDLOptions, div#calcUIULOptions) > div.DLUPOption[data-action="ul"] > svg > g > g#arrow {
    scale: 1.1;
    translate: 0 -8px;
    rotate: 180deg;
    transform-origin: center;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIInput :where(div#calcUIResultDL, div#calcUIResultUL) :where(div#calcUIDLOptions, div#calcUIULOptions) > div.DLUPOption[data-action="ul"] > svg > g > path#localDisk {
    display: none;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIMainAttributes {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 0 300px;
    gap: 1rem;
    margin-bottom: 2rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIMainAttributes > p {
    font-size: 1.5rem;
    font-weight: 600;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIMainAttributes > div#calcUIMainAttributeContainer {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 100%;
    gap: 1rem;
    border-top: 3px solid var(--col_lightgrey);
    border-bottom: 3px solid var(--col_lightgrey);
    max-height: 360px;
    overflow-y: scroll;
    padding: 1rem 1rem 1rem 0;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIMainAttributes > div#calcUIMainAttributeContainer > div.mainAttribute {
    width: 90%;
    text-align: center;
    padding: 1rem;
    border-radius: var(--bord_rad);
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIArithmetics {
    flex: 1 0 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 5rem;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIArithmetics :where(div#calcUIElementaryArithmetics, div#calcUIAdvancedArithmetics) {
    display: grid;
    flex: 1 0 auto;
    min-width: calc((100px * 4) + (2rem * 3));
    min-height: calc((60px * 5) + (2rem * 4));
    gap: 2rem;
    user-select: none;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIArithmetics > div#calcUIElementaryArithmetics {
    grid: 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIArithmetics > div#calcUIElementaryArithmetics :is(div[data-val = "plus"], div[data-val = "equals"])  {
    grid-row-end: span 2;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIArithmetics > div#calcUIElementaryArithmetics > div[data-val = "0"]  {
    grid-column-end: span 2;
}

div#dashboard > div#db-sections > div#styling > div#mainAttributeCalc.sectionPart > div#calcUI > div#calcUIArithmetics > div#calcUIAdvancedArithmetics {
    grid: 1fr 1fr 1fr 1fr 1fr / 1fr 1fr;
}

div#dashboard > div#db-sections > div#statistics.db-section > div#selectedFeatureAttributes.sectionPart > div#selectedFeatureAttributesContainer {
    font-size: 1.25rem;
    border: 3px solid var(--col_grey);
    border-radius: var(--bord_rad);
    overflow: hidden;
}

div#dashboard > div#db-sections > div#statistics.db-section > div#selectedFeatureAttributes.sectionPart > div#selectedFeatureAttributesContainer :where(div#selectedFeatureTitle, div#selectedFeatureSelectedMainAttribute) {
    font-size: 1.5rem;
    font-weight: 600;
}

div#dashboard > div#db-sections > div#statistics.db-section > div#selectedFeatureAttributes.sectionPart > div#selectedFeatureAttributesContainer :where(div#selectedFeatureGeneralAttributes, div#selectedFeatureOtherMainAttributes) {
    display: contents;
}

div#dashboard > div#db-sections > div#statistics.db-section > div#selectedFeatureAttributes.sectionPart > div#selectedFeatureAttributesContainer :where(div#selectedFeatureTitle, div#selectedFeatureSelectedMainAttribute, div#selectedFeatureGeneralAttributes > div, div#selectedFeatureOtherMainAttributes > div) {
    display: grid;
    grid: auto / 1fr 1fr;
    gap: 1.5rem;
    padding: 1rem;
    align-items: end;
}

div#dashboard > div#db-sections > div#statistics.db-section > div#selectedFeatureAttributes.sectionPart > div#selectedFeatureAttributesContainer :where(div#selectedFeatureTitle, div#selectedFeatureSelectedMainAttribute, div#selectedFeatureGeneralAttributes > div, div#selectedFeatureOtherMainAttributes > div:not(:last-child)) {
    border-bottom: 3px solid var(--col_grey);
}

div#dashboard > div#db-sections > div#statistics.db-section > div#selectedFeatureAttributes.sectionPart > div#selectedFeatureAttributesContainer :where(div#selectedFeatureSelectedMainAttribute, div#selectedFeatureGeneralAttributes > div:nth-child(2n), div#selectedFeatureOtherMainAttributes > div:nth-child(2n)) {
    background-color: #dedede;
}

div#dashboard > div#db-sections > div#db-sections-fadeOverflow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4rem;
    background: linear-gradient(to bottom, transparent, var(--col_whitesmoke) 80%);
    pointer-events: none;
}

div#dashboard > div#toggle-db-sections {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;

    background-color: var(--col_whitesmoke);
    border-top: 3px solid var(--col_darkgrey);
    width: 100%;
}

div#dashboard > div#toggle-db-sections > div#min_toggle {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    background-color: var(--col_whitesmoke);
}

@media (height > 1000px) {
    div#dashboard > div#toggle-db-sections > div#min_toggle {
        opacity: 0;
        height: 0;
        overflow: hidden;
    }
}

div#dashboard > div#toggle-db-sections > div#min_toggle > div#toggle-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%;
    padding: .5rem;
    gap: 0 1rem;
    cursor: pointer;
    font-weight: 700;
}

div#dashboard > div#toggle-db-sections > div#min_toggle > div#toggle-switch > svg {
    height: 1.2rem;
    transition: var(--anim_dur);
}

div#dashboard > div#toggle-db-sections > div#min_toggle > div#toggle-switch > svg > g > path#arrow {
    d: path("m8 71 42-42 42 42");
    fill: none;
}

div#dashboard > div#toggle-db-sections > div#min_toggle > div#toggle-switch > svg > g > path#opaque {
    display: none;
    stroke: none;
}

div#dashboard > div#toggle-db-sections > div#min_toggle > div#toggle-switch > svg > g > path#chevron {
    display: none;
    stroke: none;
}

div#dashboard > div#toggle-db-sections > div#min_toggle :is(div#toggle-switch:hover, div#toggle-switch:active, div#toggle-switch:focus, div#toggle-switch:focus-visible, div#toggle-switch:focus-within):not(.enlarged) > svg > g > path#arrow {
    animation: arrowjump 3.2s ease-in-out infinite;
    transform-origin: center;
}

div#dashboard > div#toggle-db-sections > div#min_toggle > div#toggle-switch.enlarged > svg > g > path#arrow {
    d: path("m8 8 42 21 42-21");
}

div#dashboard > div#toggle-db-sections > div#min_toggle > div#toggle-switch.enlarged > svg > g > path#opaque {
    fill: none;
    stroke: var(--col_whitesmoke);
    stroke-width: 36;
    display: unset;
}

div#dashboard > div#toggle-db-sections > div#min_toggle > div#toggle-switch.enlarged > svg > g > path#chevron {
    display: unset;
}

div#dashboard > div#toggle-db-sections > div#min_toggle :is(div#toggle-switch:hover, div#toggle-switch:active, div#toggle-switch:focus, div#toggle-switch:focus-visible, div#toggle-switch:focus-within) > svg > g :where(path#arrow, path#opaque) {
    animation: 2.4s ease-in-out infinite alternate arrowpush;
    transform-origin: center;
}

div#dashboard > div#toggle-db-sections > div#min_toggle > div#toggle-switch > p {
    margin: 0;
    padding: 0;
}

div#dashboard > div#toggle-db-sections :is(div.toggle-db-subSection, div.toggle-db-mainSection) {
    height: 130px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: stretch;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    overflow-x: scroll;
    padding: 0 1.5rem;
    width: 100%;
    gap: 1.5rem
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div {
    position: relative;
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 15px 5px;
    min-width: 100px;
    height: 100px;
    user-select: none;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    transition: color var(--anim_dur);
    color: var(--col_grey);
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div::after  {
    content: "";
    height: 3px;
    width: 0%;
    bottom: 5px;
    left: 37.5%;
    position: absolute;
    background-color: transparent;
    transition: background-color var(--anim_dur), width var(--anim_dur);
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div {
    position: relative;
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 5px 15px;
    min-width: 90px;
    height: 65px;
    background-color: var(--col_whitesmoke);
    border: 3px solid var(--col_whitesmoke);
    transition: color var(--anim_dur), border var(--anim_dur), filter var(--anim_dur);
    border-radius: var(--bord_rad);
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div > svg {
    height: 25px;
    width: auto;
    fill: var(--col_grey);
    stroke: var(--col_grey);
    scale: 1.4;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div > p {
    margin: .8rem 0 0;
    text-align: center;
    height: 1.5rem;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div :is(svg, svg g, svg path, svg circle, svg text, p) {
    transition: scale var(--anim_dur), color var(--anim_dur), fill var(--anim_dur), stroke var(--anim_dur);
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div :is(svg#cogwheels, svg#locationMarker, svg#layers, svg#style, svg#pieChart, svg#map) {
    stroke-width: 8;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div :is(svg#cogwheels > g > path#bigWheel, svg#locationMarker > g > path#surface) {
    stroke-width: 12;
    fill: none;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div :is(svg#cogwheels, svg#style > g :is(path#palette, path#gripHole), svg#pieChart > g :is(path#piePart1, path#piePart3), svg#map) {
    fill: none;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div :is(svg#style > g > path[id^="color"]) {
    stroke: none;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div :is(svg#layers > g > path#layer1) {
    fill: var(--col_whitesmoke);
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div :is(svg#layers > g > path#layer2, svg#pieChart > g > path#piePart2, svg#map > g > path#mapPart1) {
    fill: var(--col_lightgrey);
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div > div :is(svg#layers > g > path#layer3, svg#pieChart > g > path#piePart4, svg#map > g > path#mapPart3) {
    fill: var(--col_grey);
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div.selected > div {
    color: var(--col_darkgrey);
    border: 3px solid var(--col_grey);
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div.selected > div::after {
    content: "";
    height: 3px;
    width: 25%;
    position: absolute;
    background-color: var(--col_green);
    border-radius: 50px;
    bottom: 8px;
    left: 37.5%;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) > div.selected > div :is(svg, p) {
    fill: var(--col_darkgrey);
    stroke: var(--col_darkgrey);
    scale: 1.1;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) :is(div:active, div:focus, div:focus-visible, div:focus-within, div:hover):not(.selected) > div :is(svg, p) {
    color: var(--col_darkblue);
    fill: var(--col_darkblue);
    stroke: var(--col_darkblue);
    scale: 1.5;
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) :is(div:active, div:focus, div:focus-visible, div:focus-within, div:hover):not(.selected) > div :is(svg#layers > g > path#layer1) {
    fill: var(--col_whitesmoke);
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) :is(div:active, div:focus, div:focus-visible, div:focus-within, div:hover):not(.selected) > div :is(svg#pieChart > g > path#piePart2, svg#layers > g > path#layer2, svg#map > g > path#mapPart1) {
    fill: hwb(215 70% 0%);
}

div#dashboard > div#toggle-db-sections :where(div.toggle-db-subSection > div, div.toggle-db-mainSection) :is(div:active, div:focus, div:focus-visible, div:focus-within, div:hover):not(.selected) > div :is(svg#pieChart > g > path#piePart4, svg#layers > g > path#layer3, svg#map > g > path#mapPart3) {
    fill: hwb(215 15% 20%);
}
div#dashboard > div#toggle-db-sections > div.toggle-db-mainSection::before {
    content: "";
    height: 3px;
    width: 75%;
    position: absolute;
    background-color: var(--col_darkgrey);
    top: 0;
    left: 12.5%;
    border-radius: var(--bord_rad);
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    border-top: 3px solid var(--col_darkgrey);
}

footer > div#min_footer {
    margin: 0;
    padding: .5rem 0;
    height: calc(40px - 1rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer > div#min_footer > div#footer-switch {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0 1rem;
    cursor: pointer;
    font-weight: 700;
}

footer > div#min_footer > div#footer-switch.enlarged {
    justify-content: center;
}

footer > div#min_footer > div#footer-switch > svg {
    height: 1.2rem;
    transition: var(--anim_dur);
}

footer > div#min_footer > div#footer-switch > svg > g > path#arrow {
    d: path("m8 71 42-42 42 42");
    fill: none;
}

footer > div#min_footer > div#footer-switch > svg > g > path#opaque {
    display: none;
    stroke: none;
}

footer > div#min_footer > div#footer-switch > svg > g > path#chevron {
    display: none;
    stroke: none;
}

footer > div#min_footer :is(div#footer-switch:hover, div#footer-switch:active, div#footer-switch:focus, div#footer-switch:focus-visible, div#footer-switch:focus-within):not(.enlarged) > svg > g > path#arrow {
    animation: arrowjump 3.2s ease-in-out infinite;
    transform-origin: center;
}

footer > div#min_footer > div#footer-switch.enlarged > svg > g > path#arrow {
    d: path("m8 8 42 21 42-21");
}

footer > div#min_footer > div#footer-switch.enlarged > svg > g > path#opaque {
    fill: none;
    stroke: var(--col_whitesmoke);
    stroke-width: 36;
    display: unset;
}

footer > div#min_footer > div#footer-switch.enlarged > svg > g > path#chevron {
    display: unset;
}

footer > div#min_footer :is(div#footer-switch:hover, div#footer-switch:active, div#footer-switch:focus, div#footer-switch:focus-visible, div#footer-switch:focus-within) > svg > g :where(path#arrow, path#opaque) {
    animation: 2.4s ease-in-out infinite alternate arrowpush;
    transform-origin: center;
}

footer > div#min_footer > div#footer-switch > p {
    margin: 0;
    padding: 0;
}

footer > div#min_footer > div#min_footer-info {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    user-select: none;
    font-size: .8rem;
}

@media (width < 1000px) {
    footer > div#min_footer > div#min_footer-info {
        font-size: .6rem;
    }
}

footer > div#min_footer > div#min_footer-info > div:not(:last-child) {
    padding-right: .5rem;
    border-right: var(--col_darkgrey) solid .125rem;
}

footer > div#min_footer > div#min_footer-info > div:not(:first-child) {
    padding-left: .5rem;
}