body,
html {
    margin: 0;
    height: 100%;
    font-size: 16px;
    font-size: clamp(calc(16 / 18 * 1rem), 0.9375vw, 1.1111111111rem);
    line-height: 1.5;
    --font-weight-bold: 700;
    --default-text-color: rgb(91, 91, 91);
    --default-text-font: Helvetica, sans-serif;
    --border-radius: .375em;
    --card-shadow-size: .33em;
    color: var(--default-text-color);
    font-family: var(--default-text-font)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0
}

ul {
    list-style-type: none;
    padding-left: 0
}

a,
a:visited {
    text-decoration: none;
    color: var(--link1Color1)
}

a:hover,
a:visited:hover {
    text-shadow: 0 0 1px rgba(0, 0, 0, .4)
}

div.clear {
    clear: both;
    line-height: 0px;
    font-size: 0px;
    height: 0px;
    overflow: hidden;
    text-indent: -100px
}

code {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    white-space: pre
}

@keyframes spin {
    100% {
        transform: rotate(360deg)
    }
}

body.loading:before,
body.loading:after {
    position: fixed
}

.loading {
    position: relative;
    pointer-events: none
}

.loading:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .4);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2090
}

.loading:before {
    content: "";
    --size: min(2em, 25%);
    --border-size: 5px;
    --margin: calc((var(--size) + var(--border-size) * 2) * -0.5);
    margin: var(--margin) 0 0 var(--margin);
    padding-top: var(--size);
    width: var(--size);
    height: 0;
    border-width: var(--border-size);
    border-color: var(--link1Color1);
    border-style: inset;
    border-radius: 50%;
    display: block;
    animation: spin 3s infinite linear;
    position: absolute;
    left: 50%;
    top: min(50vh, 50%);
    z-index: 2099;
    box-sizing: content-box
}

.loading .loading:after,
.loading .loading:before {
    display: none
}

table.hover tbody tr:hover {
    box-shadow: inset 0 0 100vw rgba(0, 0, 0, .1)
}

.space:not(.bg)+.space:not(.bg) {
    padding-top: 0
}

@media only print {
    .noprint {
        display: none !important
    }
}

body ._ma {
    margin: auto
}

body ._m0 {
    margin: 0
}

body ._m0a {
    margin: 0 auto
}

body ._mt1 {
    margin-top: 1em
}

body ._mt2 {
    margin-top: 2.2em
}

body ._mb1 {
    margin-bottom: 1em
}

body ._ml1 {
    margin-left: 1em
}

body ._mr1 {
    margin-right: 1em
}

body ._m1 {
    margin: 1em
}

body ._m1_0 {
    margin: 1em 0
}

body ._mla {
    margin-left: auto
}

body ._ml0 {
    margin-left: 0
}

body ._mra {
    margin-right: auto
}

body ._mr0 {
    margin-right: 0
}

body ._mba {
    margin-bottom: auto
}

body ._mb0 {
    margin-bottom: 0
}

body ._mta {
    margin-top: auto
}

body ._mt0 {
    margin-top: 0
}

body ._p0 {
    padding: 0
}

body ._p1 {
    padding: 1em
}

body ._w33 {
    width: 33.3333%
}

body ._w50 {
    width: 50%
}

body ._w100 {
    width: 100%
}

body ._h100 {
    height: 100%
}

body .__16_9 {
    aspect-ratio: 16/9
}

body ._h10vh {
    height: 10vh
}

body ._h20vh {
    height: 20vh
}

body ._h30vh {
    height: 30vh
}

body ._h50vh {
    height: 50vh
}

body ._fwb {
    font-weight: var(--font-weight-bold)
}

body ._fs1 {
    font-size: 1em
}

body ._fsi {
    font-style: italic
}

body ._ps {
    position: static
}

body ._pr {
    position: relative
}

body ._pf {
    position: fixed
}

body ._pa {
    position: absolute
}

body ._b0 {
    border: 0
}

body ._pen {
    pointer-events: none
}

body ._cp {
    cursor: pointer
}

body ._cd {
    cursor: default
}

body ._tal {
    text-align: left
}

body ._tac {
    text-align: center
}

body ._tar {
    text-align: right
}

body ._dn {
    display: none
}

body ._db {
    display: block
}

body ._dib {
    display: inline-block
}

body ._dg {
    --gap-size: 1em;
    --element-size: calc(50% - (var(--gap-size) / 2));
    display: grid;
    grid: auto-flow/1fr 1fr;
    grid: auto-flow/var(--element-size) var(--element-size);
    -moz-column-gap: var(--gap-size);
    column-gap: var(--gap-size);
    row-gap: var(--gap-size)
}

body ._dg3 {
    grid: auto-flow/1fr 1fr 1fr
}

body ._dg4 {
    grid: auto-flow/1fr 1fr 1fr 1fr
}

body ._dg5 {
    grid: auto-flow/1fr 1fr 1fr 1fr 1fr
}

body ._df {
    display: flex
}

body ._f1 {
    flex: 1
}

body ._f2 {
    flex: 2
}

body ._f3 {
    flex: 3
}

body ._f4 {
    flex: 4
}

body ._f5 {
    flex: 5
}

body ._f6 {
    flex: 6
}

body ._f7 {
    flex: 7
}

body ._f8 {
    flex: 8
}

body ._fdr {
    flex-direction: row
}

body ._fdrr {
    flex-direction: row-reverse
}

body ._fdcr {
    flex-direction: column-reverse
}

body ._fdc {
    flex-direction: column
}

body ._fww {
    flex-wrap: wrap
}

body ._asfe {
    align-self: flex-end
}

body ._asfs {
    align-self: flex-start
}

body ._aic {
    align-items: center
}

body ._ais {
    align-items: stretch
}

body ._jcr {
    justify-content: right
}

body ._jcc {
    justify-content: center
}

body ._jcsb {
    justify-content: space-between
}

body ._fr {
    float: right
}

body ._fl {
    float: left
}

body ._vam {
    vertical-align: middle
}

body ._o4 {
    opacity: .4
}

body ._o8 {
    opacity: .8
}

body ._skew-x {
    transform: skewX(20deg)
}

body ._cskew-x {
    transform: skewX(-20deg)
}

body ._scrollcontent {
    overflow-x: hidden;
    overflow-y: auto
}

@media only screen and (display-mode: fullscreen) {
    body ._fullscreen-hide {
        display: none
    }
}

@media not screen and (display-mode: fullscreen) {
    body ._fullscreen-only {
        display: none
    }
}

.asel {
    display: flex;
    cursor: pointer
}

.asel span {
    white-space: no-wrap
}

.asel span:nth-child(1) {
    order: 3
}

.asel span:nth-child(2) {
    order: 1
}

.asel span:nth-child(2):after {
    content: "@"
}

.asel span:nth-child(3) {
    order: 2
}

.asel span:nth-child(3):after {
    content: "."
}

table._tla {
    table-layout: auto
}

table._tlf {
    table-layout: fixed
}

table._tlf td._f1,
table._tlf th._f1 {
    width: 100%
}

table._tlf td._f2,
table._tlf th._f2 {
    width: 200%
}

table._tlf td._f3,
table._tlf th._f3 {
    width: 300%
}

table._tlf td._f4,
table._tlf th._f4 {
    width: 400%
}

table._tlf td._f5,
table._tlf th._f5 {
    width: 500%
}

table._tlf td._f6,
table._tlf th._f6 {
    width: 600%
}

table._tlf td._f7,
table._tlf th._f7 {
    width: 700%
}

table._tlf td._f8,
table._tlf th._f8 {
    width: 800%
}

html:not(.is-offline) body ._offline-only {
    display: none
}

.t1extra {
    font-size: 38px;
    font-size: clamp(calc(38 / 18 * 1rem), 3.125vw, 3.8888888889rem);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: var(--t1-color)
}

.t1 {
    font-size: 32px;
    font-size: clamp(calc(32 / 18 * 1rem), 2.1875vw, 3rem);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: var(--t1-color);
    color: var(--highlight-color-1)
}

.t2 {
    font-size: 18px;
    font-size: clamp(calc(18 / 18 * 1rem), 1.0416666667vw, 1.2222222222rem);
    line-height: 1.5;
    font-weight: 300;
    color: var(--t2-color);
    color: var(--highlightColor2)
}

.t3 {
    font-size: 22px;
    font-size: clamp(calc(22 / 18 * 1rem), 1.4583333333vw, 1.6666666667rem);
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    color: var(--t1-color);
    color: var(--highlight-color-1)
}

.t4 {
    font-size: 20px;
    font-size: clamp(calc(20 / 18 * 1rem), 1.1458333333vw, 1.3333333333rem);
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    color: var(--t1-color);
    color: var(--highlight-color-1)
}

.text--label.material-icons,
.text--label {
    font-size: .7777777778rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.5
}

.text--large.material-icons,
.text--large {
    font-size: 1.2222222222rem;
    line-height: 2
}

.text--normal.material-icons,
.text--normal {
    font-size: 1rem;
    line-height: 1.7
}

.text--medium.material-icons,
.text--medium {
    font-size: .8333333333rem;
    line-height: 1.8
}

.text--small.material-icons,
.text--small {
    font-size: .7222222222rem;
    line-height: 1.4
}

.space--tiny,
.space.space--tiny {
    padding-top: 15px;
    padding-top: clamp(calc(15 / 18 * 1rem), 1.3020833333vw, 1.6666666667rem);
    padding-bottom: 15px;
    padding-bottom: clamp(calc(15 / 18 * 1rem), 1.3020833333vw, 1.6666666667rem)
}

.space--small,
.space.space--small {
    padding-top: 25px;
    padding-top: clamp(calc(25 / 18 * 1rem), 2.34375vw, 3.3333333333rem);
    padding-bottom: 25px;
    padding-bottom: clamp(calc(25 / 18 * 1rem), 2.34375vw, 3.3333333333rem)
}

.space--medium,
.space.space--medium {
    padding-top: 40px;
    padding-top: clamp(calc(40 / 18 * 1rem), 4.1666666667vw, 5.5555555556rem);
    padding-bottom: 40px;
    padding-bottom: clamp(calc(40 / 18 * 1rem), 4.1666666667vw, 5.5555555556rem)
}

.space--large,
.space.space--large {
    padding-top: 80px;
    padding-top: clamp(calc(80 / 18 * 1rem), 5.2083333333vw, 8.3333333333rem);
    padding-bottom: 80px;
    padding-bottom: clamp(calc(80 / 18 * 1rem), 5.2083333333vw, 8.3333333333rem)
}

.frame {
    margin: 0 auto;
    width: 93.75%;
    max-width: min(98%, 1440px)
}

.frame--text {
    max-width: min(98%, 970px)
}

.frame--site {
    max-width: min(98%, 1000px)
}

.frame--small {
    max-width: min(98%, 1170px)
}

.frame--large {
    max-width: min(98%, 1800px)
}

.frame--x-large {
    max-width: calc(100% - 2rem);
    margin-left: 1rem
}

html.asdf {
    filter: sepia(0.5)
}

html.asdf * {
    filter: contrast(1.01)
}

html.asdf img.leaflet-tile.leaflet-tile-loaded {
    filter: sepia(0.98)
}

html:not(.ogmap) img[src*="LAYERS=Aerial-2023-RGB"].leaflet-tile.leaflet-tile-loaded {
    filter: contrast(1.35) brightness(1.05) saturate(1.1)
}

.button {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-indent: 0;
    border: 0;
    box-shadow: inset 0 0 .25em rgba(0, 0, 0, .1);
    transition: box-shadow .2s linear;
    transition: all .2s;
    line-height: 1
}

.button--large {
    padding: 1.5rem 1rem
}

.button--medium {
    padding: .5rem .7rem
}

.button--small {
    padding: .3rem .6rem
}

.button:not(.button--small):not(.button--medium):not(.button--large) {
    padding: .7rem 1rem
}

.button.button0 {
    border-radius: var(--border-radius)
}

.button.button0:hover,
.button.button0.hoverstate {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .3)
}

.button.button1 {
    border-radius: var(--border-radius);
    background-color: var(--button1Color1);
    color: var(--button1Color2)
}

.button.button1:hover,
.button.button1.hoverstate {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .3)
}

.button.button2 {
    border-radius: var(--border-radius);
    outline: 3px solid var(--button2Color1);
    outline-offset: -3px;
    color: var(--button2Color2);
    background: rgba(0, 0, 0, 0)
}

.button.button2:hover,
.button.button2.hoverstate {
    background-color: var(--button2Color1);
    color: var(--button2Color3)
}

.button.button3 {
    border-radius: var(--border-radius);
    background-color: var(--button3Color1);
    color: var(--button3Color2)
}

.button.button3:hover,
.button.button3.hoverstate {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .3)
}

a.back {
    padding-left: 16px;
    position: relative
}

a.back:before {
    content: "";
    margin-top: -2px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-top-width: 0;
    border-right-width: 0;
    display: inline-block;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    left: 0;
    top: 50%
}

.card,
.banner {
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, .1);
    box-shadow: 0 0 calc(var(--card-shadow-size)*2) 0 rgba(0, 0, 0, .1)
}

li.divider {
    margin: 2em;
    width: calc(100% - 4em);
    height: 2px;
    font-size: 0;
    display: inline-block;
    background-color: currentColor
}

.table tbody,
.table {
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid;
    table-layout: fixed
}

.table {
    border-collapse: collapse
}

.table tr {
    justify-content: stretch
}

.table tr td,
.table tr th {
    padding: 3px 5px 3px 5px;
    border: 1px solid currentColor;
    box-sizing: border-box;
    border-radius: 0
}

.table tr td.small,
.table tr th.small {
    flex: 1;
    width: 100%
}

.table tr td.medium,
.table tr th.medium {
    flex: 2;
    width: 200%
}

.table tr td.large,
.table tr th.large {
    width: 300%;
    flex: 3
}

.table tr th {
    border: 0
}

.banner {
    padding: 1.2em 4em 1.2em 2em;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    color: var(--barColor2);
    background-color: var(--barColor3);
    text-align: left;
    font-size: inherit;
    line-height: inherit;
    outline: none;
    border: 0
}

.banner+.banner {
    margin-top: .8em
}

.banner>* {
    position: relative;
    z-index: 1
}

.banner * {
    color: inherit
}

.banner:before {
    content: "";
    height: 100%;
    width: 1em;
    display: block;
    background-color: var(--barColor1);
    opacity: .5;
    position: absolute;
    left: 0;
    top: 0
}

.banner:after {
    content: "!";
    padding: .2em;
    height: 1em;
    width: 1em;
    display: inline-block;
    color: var(--barColor1);
    border: 5px solid var(--barColor1);
    text-align: center;
    font-size: 1em;
    line-height: 1em;
    font-weight: 900;
    position: absolute;
    right: 1em;
    top: 0em;
    z-index: 0;
    border-radius: 50%;
    opacity: .2;
    transform: scale(8);
    pointer-events: none;
    box-sizing: content-box
}

.banner--error {
    --barColor1: #f14668;
    --barColor2: #cc0f35;
    --barColor3: #feecf0
}

.banner--warning {
    --barColor1: #ffe08a;
    --barColor2: #946c00;
    --barColor3: #fffaeb
}

.banner--info {
    --barColor1: #3e8ed0;
    --barColor2: #296fa8;
    --barColor3: #eff5fb
}

.banner--success {
    --barColor1: #48c78e;
    --barColor2: #257953;
    --barColor3: #effaf5
}

.bg--web {
    background: var(--main-background);
    accent-color: var(--button3Color1);
    --main-background: rgb(255, 255, 255);
    --default-text-color: rgb(91, 91, 91);
    --t1-color: #303757;
    --t2-color: #5c802e;
    --link1Color1: #e74c3c;
    --link1Color1: var(--highlight-color-1);
    --button1Color1: #e74c3c;
    --button1Color1: var(--highlight-color-1);
    --button1Color2: #ffffff;
    --button2Color1: #e74c3c;
    --button2Color1: var(--highlight-color-1);
    --button2Color2: #e74c3c;
    --button2Color2: var(--highlight-color-1);
    --button2Color3: #ffffff;
    --button3Color1: #5c802e;
    --button3Color1: var(--highlightColor2);
    --button3Color2: #ffffff
}

.bg--web+.bg--web {
    padding-top: 0
}

.bg--web.hover.hoverstate,
.table.hover tr.bg--web.hoverstate,
.bg--web.hover:hover,
.table.hover tr.bg--web:hover {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .1)
}

.bg--web2 {
    background: var(--main-background);
    accent-color: var(--button3Color1);
    --main-background: rgb(236, 240, 241);
    --default-text-color: rgb(91, 91, 91);
    --t1-color: #303757;
    --t2-color: #5c802e;
    --link1Color1: #e74c3c;
    --link1Color1: var(--highlight-color-1);
    --button1Color1: #e74c3c;
    --button1Color1: var(--highlight-color-1);
    --button1Color2: #ffffff;
    --button2Color1: #e74c3c;
    --button2Color1: var(--highlight-color-1);
    --button2Color2: #e74c3c;
    --button2Color2: var(--highlight-color-1);
    --button2Color3: #ffffff;
    --button3Color1: #5c802e;
    --button3Color1: var(--highlightColor2);
    --button3Color2: #ffffff
}

.bg--web2+.bg--web2 {
    padding-top: 0
}

.bg--web2.hover.hoverstate,
.table.hover tr.bg--web2.hoverstate,
.bg--web2.hover:hover,
.table.hover tr.bg--web2:hover {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .1)
}

.bg--bar {
    background: var(--main-background);
    accent-color: var(--button3Color1);
    --main-background: #303757;
    --default-text-color: #ffffff;
    --t1-color: #ffffff;
    --t2-color: rgb(191, 191, 191);
    --link1Color1: rgb(191, 191, 191);
    --button1Color1: #e74c3c;
    --button1Color1: var(--highlight-color-1);
    --button1Color2: #ffffff;
    --button2Color1: #e74c3c;
    --button2Color1: var(--highlight-color-1);
    --button2Color2: #e74c3c;
    --button2Color2: var(--highlight-color-1);
    --button2Color3: #ffffff;
    --button3Color1: #5c802e;
    --button3Color1: var(--highlightColor2);
    --button3Color2: #ffffff
}

.bg--bar+.bg--bar {
    padding-top: 0
}

.bg--bar.hover.hoverstate,
.table.hover tr.bg--bar.hoverstate,
.bg--bar.hover:hover,
.table.hover tr.bg--bar:hover {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .1)
}

.bg--list,
.table tr:nth-child(2n+2) {
    background: var(--main-background);
    accent-color: var(--button3Color1);
    --main-background: rgb(249, 249, 249);
    --default-text-color: rgb(91, 91, 91);
    --t1-color: #303757;
    --t2-color: #5c802e;
    --link1Color1: #e74c3c;
    --button1Color1: #e74c3c;
    --button1Color2: #ffffff;
    --button2Color1: #e74c3c;
    --button2Color2: #e74c3c;
    --button2Color3: #ffffff;
    --button3Color1: #5c802e;
    --button3Color1: var(--highlightColor2);
    --button3Color2: #ffffff
}

.bg--list+.bg--list,
.table tr:nth-child(2n+2)+.bg--list,
.table .bg--list+tr:nth-child(2n+2),
.table tr:nth-child(2n+2)+tr:nth-child(2n+2) {
    padding-top: 0
}

.bg--list.hover.hoverstate,
.table tr.hover.hoverstate:nth-child(2n+2),
.table.hover tr.bg--list.hoverstate,
.table.hover tr.hoverstate:nth-child(2n+2),
.bg--list.hover:hover,
.table tr.hover:hover:nth-child(2n+2),
.table.hover tr.bg--list:hover,
.table.hover tr:hover:nth-child(2n+2) {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .1)
}

.bg--list2,
.table tr:nth-child(2n+3) {
    background: var(--main-background);
    accent-color: var(--button3Color1);
    --main-background: rgb(221, 221, 221);
    --default-text-color: rgb(91, 91, 91);
    --t1-color: #303757;
    --t2-color: #5c802e;
    --link1Color1: #e74c3c;
    --button1Color1: #e74c3c;
    --button1Color2: #ffffff;
    --button2Color1: #e74c3c;
    --button2Color2: #e74c3c;
    --button2Color3: #ffffff;
    --button3Color1: #5c802e;
    --button3Color1: var(--highlightColor2);
    --button3Color2: #ffffff
}

.bg--list2+.bg--list2,
.table tr:nth-child(2n+3)+.bg--list2,
.table .bg--list2+tr:nth-child(2n+3),
.table tr:nth-child(2n+3)+tr:nth-child(2n+3) {
    padding-top: 0
}

.bg--list2.hover.hoverstate,
.table tr.hover.hoverstate:nth-child(2n+3),
.table.hover tr.bg--list2.hoverstate,
.table.hover tr.hoverstate:nth-child(2n+3),
.bg--list2.hover:hover,
.table tr.hover:hover:nth-child(2n+3),
.table.hover tr.bg--list2:hover,
.table.hover tr:hover:nth-child(2n+3) {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .1)
}

.bg--highlight {
    background: var(--main-background);
    accent-color: var(--button3Color1);
    --main-background: #e74c3c;
    --default-text-color: #ffffff;
    --t1-color: #ffffff;
    --t2-color: rgb(191, 191, 191);
    --link1Color1: rgb(236, 240, 241);
    --button1Color1: #ffffff;
    --button1Color2: #e74c3c;
    --button2Color1: #ffffff;
    --button2Color2: #ffffff;
    --button2Color3: #e74c3c;
    --button3Color1: #5c802e;
    --button3Color1: var(--highlightColor2);
    --button3Color2: #ffffff
}

.bg--highlight+.bg--highlight {
    padding-top: 0
}

.bg--highlight.hover.hoverstate,
.table.hover tr.bg--highlight.hoverstate,
.bg--highlight.hover:hover,
.table.hover tr.bg--highlight:hover {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .1)
}

.bg--highlight2 {
    background: var(--main-background);
    accent-color: var(--button3Color1);
    --main-background: #5c802e;
    --default-text-color: #ffffff;
    --t1-color: #ffffff;
    --t2-color: rgb(191, 191, 191);
    --link1Color1: rgb(191, 191, 191);
    --button1Color1: #e74c3c;
    --button1Color2: #ffffff;
    --button2Color1: #e74c3c;
    --button2Color2: #e74c3c;
    --button2Color3: #ffffff;
    --button3Color1: #5c802e;
    --button3Color1: var(--highlightColor2);
    --button3Color2: #ffffff
}

.bg--highlight2+.bg--highlight2 {
    padding-top: 0
}

.bg--highlight2.hover.hoverstate,
.table.hover tr.bg--highlight2.hoverstate,
.bg--highlight2.hover:hover,
.table.hover tr.bg--highlight2:hover {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .1)
}

.bg--image {
    background: var(--main-background);
    accent-color: var(--button3Color1);
    --main-background: linear-gradient(360deg, rgba(0, 0, 0, 0.66), transparent);
    --default-text-color: #ffffff;
    --t1-color: #ffffff;
    --t2-color: rgb(191, 191, 191);
    --link1Color1: #e74c3c;
    --button1Color1: #e74c3c;
    --button1Color2: #ffffff;
    --button2Color1: #e74c3c;
    --button2Color2: #e74c3c;
    --button2Color3: #ffffff;
    --button3Color1: #5c802e;
    --button3Color1: var(--highlightColor2);
    --button3Color2: #ffffff
}

.bg--image+.bg--image {
    padding-top: 0
}

.bg--image.hover.hoverstate,
.table.hover tr.bg--image.hoverstate,
.bg--image.hover:hover,
.table.hover tr.bg--image:hover {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .1)
}

.bg--footer {
    background: var(--main-background);
    accent-color: var(--button3Color1);
    --main-background: rgb(44, 62, 80);
    --default-text-color: #ffffff;
    --t1-color: #ffffff;
    --t2-color: rgb(191, 191, 191);
    --link1Color1: #e74c3c;
    --button1Color1: #e74c3c;
    --button1Color2: #ffffff;
    --button2Color1: #e74c3c;
    --button2Color2: #e74c3c;
    --button2Color3: #ffffff;
    --button3Color1: #5c802e;
    --button3Color1: var(--highlightColor2);
    --button3Color2: #ffffff
}

.bg--footer+.bg--footer {
    padding-top: 0
}

.bg--footer.hover.hoverstate,
.table.hover tr.bg--footer.hoverstate,
.bg--footer.hover:hover,
.table.hover tr.bg--footer:hover {
    box-shadow: inset 0px 0px 0px 500px rgba(0, 0, 0, .1)
}

.element {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    margin-bottom: 1.3em;
    margin-bottom: var(--elementSpaceBottom);
    box-sizing: border-box
}

.list1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    --elementSpaceBottom: 20px;
    --elementSpaceBottom: clamp(calc(20 / 18 * 1rem), 1.1458333333vw, 2rem)
}

.list1 .divider {
    width: 100%
}

.list1 .helper {
    margin-bottom: 0
}

.list1>.element {
    width: 100%
}

.list2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    --elementSpaceBottom: 20px;
    --elementSpaceBottom: clamp(calc(20 / 18 * 1rem), 1.5625vw, 2rem)
}

.list2 .divider {
    width: 100%
}

.list2 .helper {
    margin-bottom: 0
}

.list2>.element {
    width: 48.7179487179%
}

.list2>.element.element--full,
.list2>.element.element--double {
    width: 100%
}

@media(max-width: 600px) {
    .list2>.element {
        width: 100%
    }
}

.list3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    --elementSpaceBottom: 20px;
    --elementSpaceBottom: clamp(calc(20 / 18 * 1rem), 1.5625vw, 2rem)
}

.list3 .divider {
    width: 100%
}

.list3 .helper {
    margin-bottom: 0
}

.list3>.element.element--full {
    width: 100%
}

.list3:after,
.list3>.element {
    width: 31.6239316239%
}

@media(max-width: 1200px) {

    .list3:after,
    .list3>.element {
        width: 48.7179487179%
    }
}

@media(max-width: 600px) {

    .list3:after,
    .list3>.element {
        width: 100%
    }
}

.list3:after {
    content: "";
    display: inline-block
}

.list4 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    --elementSpaceBottom: 20px;
    --elementSpaceBottom: clamp(calc(20 / 18 * 1rem), 1.5625vw, 2rem)
}

.list4 .divider {
    width: 100%
}

.list4 .helper {
    margin-bottom: 0
}

.list4:before,
.list4:after,
.list4>.element {
    width: 23.0769230769%
}

.list4:before.element--full,
.list4:after.element--full,
.list4>.element.element--full {
    width: 100%
}

@media(max-width: 1200px) {

    .list4:before,
    .list4:after,
    .list4>.element {
        width: 31.6239316239%
    }
}

@media(max-width: 1024px) {

    .list4:before,
    .list4:after,
    .list4>.element {
        width: 48.7179487179%
    }
}

@media(max-width: 600px) {

    .list4:before,
    .list4:after,
    .list4>.element {
        width: 100%
    }
}

.list4:before,
.list4:after {
    content: "";
    order: 999999;
    display: inline-block
}

input[readonly] {
    opacity: .8;
    cursor: default
}

.disabled {
    filter: grayscale(0.9);
    pointer-events: none
}

.disabled.op {
    opacity: .2
}

[data-overflow="1"] {
    display: none
}

.search {
    --size: 1.5rem
}

.search .material-icons {
    font-size: var(--size);
    width: var(--size);
    height: var(--size);
    top: 0
}

.search .material-icons+input {
    margin-left: var(--size);
    height: var(--size)
}

.search .closeicon,
.search .searchicon {
    position: relative;
    width: 2em
}

.search .closeicon::before,
.search .closeicon::after,
.search .searchicon::before,
.search .searchicon::after {
    content: "";
    position: absolute
}

.search .searchicon::before {
    width: .5em;
    height: .5em;
    border: .15em solid currentColor;
    border-radius: 50%;
    left: .6em;
    top: 0em
}

.search .searchicon::after {
    width: .1em;
    height: .5em;
    background-color: currentColor;
    transform: rotate(45deg);
    left: .5em;
    top: .5em
}

.search .closeicon::after,
.search .closeicon::before {
    width: .1em;
    height: 1em;
    background-color: currentColor;
    transform: rotate(45deg);
    left: 1em;
    top: 0em
}

.search .closeicon::after {
    transform: rotate(-45deg)
}

.search input:-moz-placeholder-shown~.close {
    display: none
}

.search input:placeholder-shown~.close {
    display: none
}

.search+* tr.pagebtn {
    position: absolute;
    overflow: visible;
    margin: 0;
    border: 0;
    right: 110%;
    right: calc(100% + .5em)
}

.search+* tr.pagebtn:hover td:after {
    box-shadow: 0 0 1em 0 currentColor
}

.search+* tr.pagebtn[data-down="0"] {
    bottom: 55%;
    bottom: calc(50% + .5em)
}

.search+* tr.pagebtn[data-down="1"] {
    top: 55%;
    top: calc(50% + .5em)
}

.search+* tr.pagebtn[data-down="1"] td {
    transform: rotate(180deg)
}

.search+* tr.pagebtn td {
    position: relative;
    cursor: pointer;
    padding: 1.5em;
    border: 0;
    height: 3em
}

.search+* tr.pagebtn td::after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0%;
    top: 0;
    width: 90%;
    height: 90%;
    margin: 5%;
    border-radius: .25em;
    box-shadow: inset 0 0 .25em 0 currentColor, 0 0 .25em 0 currentColor
}

.search+* tr.pagebtn td::before {
    content: "";
    display: inline-block;
    position: relative;
    top: .25em;
    background-color: currentColor;
    width: 1em;
    height: 1em;
    background-color: rgba(0, 0, 0, 0);
    border-width: 2px 0 0 2px;
    border-color: currentColor;
    border-style: solid;
    transform: rotate(45deg)
}

.switchactive {
    display: flex;
    margin: .5em 0;
    --transition-time: .4s;
    --half-transition-time: .2s
}

.switchactive>* {
    padding: .7em;
    position: relative;
    background-color: #fff;
    border-radius: .5em;
    flex: 1;
    overflow: hidden;
    transition: all var(--transition-time) linear;
    box-shadow: 0 0 var(--shadow-size) 0 rgba(0, 0, 0, .2)
}

.switchactive>*:nth-child(2) {
    margin-left: 1em
}

.switchactive>*>* *,
.switchactive>*>* {
    transition: opacity var(--half-transition-time) linear, font-size var(--half-transition-time) linear, line-height var(--half-transition-time) linear
}

.switchactive:not(.switched)>*:nth-child(2),
.switchactive.switched>*:nth-child(1) {
    --switchable-active: 0;
    --shadow-size: .6em;
    flex: 1
}

.switchactive:not(.switched)>*:nth-child(2)::after,
.switchactive.switched>*:nth-child(1)::after {
    content: attr(data-preview);
    padding: 1em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, .1);
    cursor: pointer
}

.switchactive:not(.switched)>*:nth-child(2)>* *,
.switchactive:not(.switched)>*:nth-child(2)>*,
.switchactive.switched>*:nth-child(1)>* *,
.switchactive.switched>*:nth-child(1)>* {
    opacity: 0;
    font-size: 0 !important;
    line-height: 0;
    overflow: hidden;
    transition: opacity 0s linear, font-size 0s linear, line-height 0s linear
}

.switchactive:not(.switched)>*:nth-child(1),
.switchactive.switched>*:nth-child(2) {
    --switchable-active: 1;
    --shadow-size: 1.6em;
    flex: 11
}

.sidescroll {
    --shadow-size: .6em;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative
}

.sidescroll::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    width: 20%;
    height: 100%;
    background: linear-gradient(90deg, transparent, red 80%);
    pointer-events: none
}

.sidescroll>.element {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: .7em;
    position: relative;
    background-color: #fff;
    border-radius: .5em;
    box-shadow: inset 0 0 var(--shadow-size) 0 rgba(0, 0, 0, .2);
    flex: 0 0 40%
}

.sidescroll>.element+.element {
    margin-left: 1em
}

.formlist .element {
    position: relative
}

.formlist .element .selection {
    position: absolute;
    top: .5em;
    right: .5em;
    z-index: 2
}

.formlist .element .selection .label {
    position: absolute;
    display: inline-block;
    right: 100%;
    top: 0;
    line-height: 1.8rem
}

@media(max-width: 600px) {
    .formlist .element .selection .label {
        display: none
    }
}

.formlist .element .selection:before,
.formlist .element .selection:after {
    width: 1.3em;
    height: 1.3em
}

.formlist .element>input[type=radio]:checked~.selection .inactive,
.formlist .element>input[type=radio]:not(:checked)~.selection .active {
    display: none
}

.formlist .element>input[type=radio]:not(:checked)~.outercard .card,
.formlist .element>input[type=radio]:not(:checked)~.outercard .banner {
    background-color: rgba(255, 255, 255, .4)
}

.formlist .element .card,
.formlist .element .banner {
    margin: 0;
    padding: 0;
    transition: background-color .2s linear
}

.formlist .element .card .card-content,
.formlist .element .banner .card-content {
    padding: 0
}

.formlist .element .card form,
.formlist .element .banner form {
    margin: 0;
    padding: 1.8rem 1rem 1rem 1rem
}

.formlist .element .card form .input-field,
.formlist .element .banner form .input-field {
    margin: 0
}

.formlist .element .element {
    margin: 0
}

[data-translation-key] {
    outline: .25rem solid orange;
    cursor: pointer;
    transition: outline .1s linear
}

[data-translation-key]:hover {
    outline: .5rem solid orange
}

body>.progress {
    position: fixed;
    top: 0;
    margin: 0;
    pointer-events: none
}

.divider {
    margin-top: 1rem;
    margin-bottom: 1rem;
    clear: both;
    width: 100%
}

.hierarchyrow {
    --spacing-lateral: .8rem;
    margin-bottom: 0;
    padding: .3rem var(--spacing-lateral);
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    overflow: hidden
}

.hierarchyrow:hover {
    background-color: #c9c9c9
}

.hierarchyrow:not(.active):not([data-indent="0"]) {
    display: none
}

.hierarchyrow[onclick] {
    cursor: pointer
}

.hierarchyrow:nth-of-type(1n + 2)::after {
    content: "";
    display: inline-block;
    position: absolute;
    left: var(--spacing-lateral);
    top: 0px;
    z-index: 2;
    width: calc(100% - var(--spacing-lateral) - var(--spacing-lateral));
    height: 1px;
    background-color: currentColor;
    opacity: .8
}

.hierarchyrow .indentation {
    flex-shrink: 0;
    flex-grow: 0
}

.hierarchyrow .expand {
    flex-shrink: 0;
    flex-grow: 0;
    width: 1.5em;
    color: currentColor
}

.hierarchyrow.expanded .expand .plus,
.hierarchyrow:not(.expanded) .expand .minus {
    display: none
}

.hierarchyrow.expanded .expand .plus {
    opacity: .8
}

.grecaptcha-badge {
    visibility: hidden
}

.errorbox {
    display: none;
    color: #f44336;
    font-size: .7em;
    padding-left: .5rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 3;
    line-height: 1;
    margin-top: .5em
}

.input-field .prefix~input.invalid~.errorbox,
.input-field .prefix~textarea.invalid~.errorbox,
.input-field .prefix~select.invalid~.errorbox {
    margin-left: 3rem
}

.invalid~.errorbox {
    display: block
}

.suggestionscontainer {
    position: absolute;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 1em 1em 0 rgba(0, 0, 0, .4);
    top: 100%;
    margin-top: -0.5em;
    z-index: 5
}

.suggestionscontainer>div {
    padding: .5em;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, .4)
}

.suggestionscontainer>div:empty {
    display: none
}

.suggestionscontainer>div:hover {
    box-shadow: inset 0 0 50vw 0 rgba(0, 0, 0, .2)
}

[data-multiscroll] {
    --nav-offset: 1.5em;
    position: relative;
    padding-right: 2em;
    padding-left: 2em;
    box-sizing: content-box;
    margin-left: -2em;
    margin-right: -2em
}

[data-multiscroll] nav {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0);
    color: currentColor;
    box-shadow: none
}

[data-multiscroll] nav a:visited,
[data-multiscroll] nav a {
    position: relative;
    transform: translateX(-100%);
    font-size: 2em;
    pointer-events: auto;
    cursor: pointer;
    color: currentColor;
    width: var(--nav-offset)
}

[data-multiscroll] nav a:visited.next,
[data-multiscroll] nav a.next {
    transform: translateX(100%)
}

[data-multiscroll] .innerscroll {
    width: 100%;
    overflow: hidden
}

[data-multiscroll] .innerscroll>* {
    flex: 1;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    transition: margin-left .4s linear
}

[data-multiscroll] .innerscroll>*:not(._p0):not(._p1) {
    padding: 2px
}

[data-multiscroll][data-multiscroll-elements="1"] .innerscroll>* {
    min-width: 100%
}

[data-multiscroll][data-multiscroll-elements="2"] .innerscroll>* {
    min-width: 50%
}

[data-multiscroll][data-multiscroll-elements="3"] .innerscroll>* {
    min-width: 33.3333333333%
}

[data-multiscroll][data-multiscroll-elements="4"] .innerscroll>* {
    min-width: 25%
}

[data-multiscroll][data-multiscroll-elements="5"] .innerscroll>* {
    min-width: 20%
}

.numberformatter.ok {
    position: relative;
    padding: 0
}

.numberformatter.ok input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0
}

.numberformatter.ok input:focus {
    opacity: 1
}

.numberformatter.ok input:focus+.numberinput {
    opacity: 0
}

.numberformatter.ok .numberinput {
    opacity: 1;
    height: 2em;
    border-bottom: 1px solid #9e9e9e;
    font-size: 1rem;
    height: 3rem;
    line-height: 3rem;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    outline: none;
    padding-right: 12px;
    color: currentColor;
    transition: all .2s
}

.hfmodal {
    position: fixed;
    top: 25vh;
    left: 50vw;
    z-index: 9999;
    display: inline-block;
    max-width: 90vw;
    transform: translateX(-50%);
    padding: 1.2em;
    width: 500px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    border-radius: .75em;
    box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .4), .5em .5em .5em 0 rgba(0, 0, 0, .6)
}

.hfmodal .savebutton {
    margin: 1em auto 0 auto
}

.hiddendiv {
    display: none
}

.material-icons {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased
}

.input-field>label:not(.label-icon).active {
    transform: translateY(-0.3em) scale(0.8)
}

input:not(.browser--default)._m0 {
    margin-bottom: 0
}

.cardlist {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch
}

.cardlist>.col,
.cardlist.row>.col {
    left: 0;
    margin-left: 0
}

.cardlist:not(.showhidden) .hidden {
    display: none
}

.cardlist.showhidden .unhidden {
    display: none
}

.cardlist .hidden .card {
    opacity: .7;
    order: 2
}

.cardlist .card {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    --status-color: white;
    background: var(--status-color)
}

.cardlist .card:hover {
    --card-shadow-size: .8em;
    opacity: .9
}

.cardlist .card .card-title {
    font-size: 1.5rem
}

.cardlist .card .card-action {
    margin-top: auto;
    background: rgba(0, 0, 0, 0)
}

.cardlist .card .card-action a.cardlink:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
    margin-right: 0;
    color: var(--highlight-color-1)
}

.pen ul li {
    list-style-type: initial
}

ol.browser-default li,
ul.browser-default li {
    margin-left: 2em;
    list-style-type: initial
}

nav a,
nav a:visited {
    color: #fff
}

nav ul a {
    font-size: inherit
}

.breadcrumb {
    font-size: 1rem
}

@media(max-width: 600px) {
    .breadcrumb {
        font-size: .8rem
    }
}

.card .card-content {
    padding: 0;
    border-radius: 0
}

.card .card-action {
    padding: .5rem 0 0 0;
    border-radius: 0
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating),
.dropdown-content li>a,
.dropdown-content li>span {
    color: var(--highlight-color-1);
    text-transform: none
}

textarea.materialize-textarea {
    font-size: .9rem;
    line-height: 1.25;
    padding-top: .5rem;
    padding-bottom: .5rem;
    height: 5.5rem
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-color: var(--highlight-color-1);
    box-shadow: 0 1px 0 0 var(--highlight-color-1)
}

input:not([type]):focus:not([readonly])+label,
input[type=text]:not(.browser-default):focus:not([readonly])+label,
input[type=password]:not(.browser-default):focus:not([readonly])+label,
input[type=email]:not(.browser-default):focus:not([readonly])+label,
input[type=url]:not(.browser-default):focus:not([readonly])+label,
input[type=time]:not(.browser-default):focus:not([readonly])+label,
input[type=date]:not(.browser-default):focus:not([readonly])+label,
input[type=datetime]:not(.browser-default):focus:not([readonly])+label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,
input[type=tel]:not(.browser-default):focus:not([readonly])+label,
input[type=number]:not(.browser-default):focus:not([readonly])+label,
input[type=search]:not(.browser-default):focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
    color: var(--highlight-color-1)
}

.switch label input[type=checkbox]:checked+.lever:before {
    opacity: .1;
    background: var(--highlight-color-1)
}

.switch label input[type=checkbox]:checked+.lever:after {
    background: var(--highlight-color-1)
}

.switch label input[type=checkbox]:checked+.lever {
    opacity: .5;
    background: var(--highlight-color-1)
}

.input-field .prefix.active {
    color: var(--highlight-color-1)
}

input[type=range]::-webkit-slider-thumb {
    background: var(--highlight-color-1)
}

.select-wrapper input.select-dropdown:focus {
    border-bottom-color: var(--highlight-color-1)
}

body [type=checkbox]:not(:checked):disabled+span:not(.lever):before {
    background-color: rgba(0, 0, 0, 0)
}

body [type=checkbox][disabled]+span:not(.lever)::after {
    filter: grayscale(1);
    opacity: 1;
    background-color: #ebebeb
}

[type=checkbox]:indeterminate:not([disabled])+span:not(.lever):before,
[type=checkbox]:checked:not([disabled])+span:not(.lever):before {
    border-right-color: var(--highlight-color-1);
    border-bottom-color: var(--highlight-color-1)
}

[type=checkbox][disabled]+span:not(.lever)::after {
    background-color: #999
}

[type=checkbox][disabled]+span:not(.lever) {
    cursor: default
}

[type=radio]:checked+span:after,
[type=radio].with-gap:checked+span:after {
    background: var(--highlight-color-1)
}

[type=radio]:not(:checked)+span {
    color: var(--default-text-color)
}

[type=radio]:not(:checked)+span:before,
[type=radio]:not(:checked)+span:after {
    border: 2px solid currentColor;
    border: 2px solid var(--default-text-color)
}

[type=radio]:checked+span:after,
[type=radio].with-gap:checked+span:before,
[type=radio].with-gap:checked+span:after {
    border-color: var(--highlight-color-1)
}

[type=checkbox]+span:not(.lever):before,
[type=checkbox]:not(.filled-in)+span:not(.lever):after {
    transition: none
}

[type=checkbox]:checked+span:not(.lever):before {
    top: -8px;
    border-width: 3px
}

[type=checkbox]:not(.filled-in)+span:not(.lever):before {
    z-index: 2
}

[type=checkbox]:not(.filled-in)+span:not(.lever):after {
    z-index: 1;
    transform: scale(1);
    opacity: .8;
    border: 2px solid #5a5a5a
}

label,
.input-field>label {
    color: inherit
}

.input-field.checkbox>label,
.input-field.radio>label {
    transform: none
}

.input-field>input[type]:-webkit-autofill:not(.browser-default):not([type=search])+label,
.input-field>input[type=date]:not(.browser-default)+label,
.input-field>input[type=time]:not(.browser-default)+label {
    transform: translateY(-2px) scale(0.8);
    transform-origin: 0 0;
    font-size: .875rem
}

.modal-overlay {
    opacity: 0 !important
}

.modal {
    background-color: rgba(255, 255, 255, .85);
    font-family: var(--default-text-font);
    color: var(--default-text-color);
    -webkit-backdrop-filter: blur(1em);
    backdrop-filter: blur(1em);
    border-radius: .75em;
    box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .5)
}

html.highcontrast .modal {
    background-color: #fff
}

.modal.glass {
    background-color: var(--glass-bg-color);
    text-shadow: 0 0 rgba(0, 0, 0, .75)
}

.modal .modal-footer {
    background: rgba(0, 0, 0, 0)
}

@media only screen and (display-mode: fullscreen) {
    .modal {
        background-color: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-radius: 0;
        box-shadow: none
    }
}

@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v110/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej.woff2) format("woff2")
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased
}

.material-icons-outlined,
.material-icons {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased
}

.global-tooltip {
    position: fixed;
    display: inline-block;
    z-index: 9999;
    right: 100%;
    --width: max(12vw, 220px);
    width: var(--width);
    transform: translateX(-50%) translateY(-100%);
    height: 2em;
    opacity: .2;
    pointer-events: none
}

.global-tooltip.active .mask {
    width: 150%;
    pointer-events: all
}

.global-tooltip .mask {
    display: block;
    width: 0;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: width .1s linear;
    transform: translateX(-50%);
    -webkit-mask-image: radial-gradient(circle closest-corner at 50% 100%, #000000 100%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle closest-corner at 50% 100%, #000000 100%, rgba(0, 0, 0, 0) 100%)
}

.global-tooltip .mask::after {
    content: "";
    padding-top: 100%;
    display: block;
    width: 0;
    height: 0
}

.global-tooltip .mask .content {
    background-color: #0c0c0c;
    padding: 5px;
    width: var(--width);
    left: 50%;
    bottom: 0;
    position: absolute;
    transform: translateX(-50%);
    border-radius: .5em;
    color: #fff;
    font-size: .875rem;
    line-height: 1em;
    text-align: center;
    white-space: pre-line
}

.global-tooltip.active {
    opacity: 1
}

[data-web=par] {
    --theme-color: #ddbd82;
    background-color: #dbd4d4;
    --footer-height: 0;
    --button-color: var(--theme-color);
    --button1Color1: var(--theme-color);
    --button2Color1: var(--theme-color);
    --side-space: 5rem;
    color: #4f5824;
    padding-bottom: var(--footer-height)
}

[data-web=par] header {
    box-shadow: 0 0 .5em 0 rgba(0, 0, 0, .4);
    position: static;
    box-sizing: border-box
}

[data-web=par] header .clonkbar {
    display: flex
}

[data-web=par] header .clonkbar div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

[data-web=par] main {
    padding-bottom: var(--footer-height)
}

[data-web=par] footer {
    margin: 0;
    width: 100%;
    height: var(--footer-height);
    box-sizing: border-box;
    bottom: 0;
    position: fixed;
    box-shadow: 0 0 .5em 0 rgba(0, 0, 0, .4)
}

[data-web=par] .listitem {
    position: relative;
    background-color: var(--theme-color);
    color: #fff;
    padding: 1em;
    border-radius: .75em;
    box-shadow: .15em .25em .5em 0 rgba(0, 0, 0, .4);
    overflow: hidden;
    order: 1;
    --button-color: #fff
}

[data-web=par] .listitem:hover {
    box-shadow: .15em .25em 1.5em 0 rgba(0, 0, 0, .4)
}

[data-web=par] .listitem.empty {
    background-color: #55515e;
    order: 2
}

[data-web=par] .listitem .title {
    margin-bottom: .2em
}

[data-web=par] article.part {
    --circle-size: 3.8rem;
    padding: .5rem;
    border-radius: 1.35rem
}

[data-web=par] article.part.item {
    --theme-color: #b6aa44
}

[data-web=par] article.part.unit {
    --theme-color: rgb(51, 127, 177)
}

[data-web=par] article.part.sff {
    --circle-size: 2.4rem
}

[data-web=par] article.part[data-alive="0"] {
    filter: grayscale(0.8)
}

[data-web=par] article.part .mainrow {
    position: relative;
    overflow: hidden
}

[data-web=par] article.part .mainrow progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1em;
    opacity: .4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

[data-web=par] article.part .mainrow progress progress::-webkit-progress-bar {
    background-color: gray;
    border-radius: .25em
}

[data-web=par] article.part .mainrow progress progress::-webkit-progress-value {
    background-color: red;
    border-radius: 0
}

[data-web=par] article.part .mainrow .title {
    margin: 0;
    line-height: 1
}

[data-web=par] article.part .detailsbutton,
[data-web=par] article.part .stats,
[data-web=par] article.part .mainrow {
    padding: .5rem;
    box-shadow: inset 0 0 1rem #fff;
    border-radius: var(--circle-size);
    margin-top: .5rem
}

[data-web=par] article.part.sff .stats,
[data-web=par] article.part.sff .mainrow {
    padding: .4rem;
    margin: .2rem
}

[data-web=par] article.part .stats {
    justify-content: space-between
}

[data-web=par] article.part .stat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--circle-size);
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    font-size: 10px;
    flex-direction: column;
    position: relative
}

[data-web=par] article.part .stat::after {
    content: "";
    width: 3rem;
    display: flex;
    background-color: rgba(255, 255, 255, .2);
    filter: blur(1px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

[data-web=par] article.part .actions {
    border-radius: var(--circle-size);
    margin: .5rem
}

[data-web=par] article.part .actions .button {
    border: 0;
    height: var(--circle-size);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 1rem #fff;
    border-radius: var(--circle-size) 0 0 var(--circle-size)
}

[data-web=par] article.part .actions .button+.button {
    border-radius: 0 var(--circle-size) var(--circle-size) 0
}

[data-web=par] [data-side="0"] {
    text-align: right;
    margin-left: var(--side-space)
}

[data-web=par] [data-side="1"] {
    margin-right: var(--side-space)
}

[data-web=par] .button1 {
    border: 2px solid var(--button-color);
    color: var(--button-color)
}

[data-module~=item] .boxes .box .row [type=checkbox].browser-default {
    position: static;
    opacity: 1;
    pointer-events: auto
}

[data-module~=item] .boxes {
    width: 100%;
    display: flex;
    flex-direction: column
}

[data-module~=item] .box {
    background: #77b687;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 5px 0 0 0;
    flex: 1;
    padding: 5px;
    border-radius: 5px;
    box-sizing: border-box
}

[data-module~=item] .box .row {
    display: flex;
    align-items: center;
    width: 100%
}

[data-module~=item] .row .fields {
    flex: 10
}

[data-module~=item] input:not([type=checkbox]) {
    width: 100%;
    font-size: 1.4em;
    line-height: 2
}

[data-module~=item] .conditionlink {
    position: relative
}

[data-module~=item] .conditionlink:before {
    font-family: "Material Icons";
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

[data-module~=item] .box .row.fallbackrow {
    margin-bottom: 1px
}

[data-module~=item] .box .row.fallbackrow input[type] {
    background: #d3d3d3;
    opacity: .6;
    margin-bottom: 0;
    font-size: 12px;
    height: 1.3em;
    line-height: 1
}

[data-module~=structure] .item {
    --offsize: .3em;
    margin: var(--offsize);
    padding: var(--offsize);
    box-shadow: 0 var(--offsize) 1em 0 rgba(0, 0, 0, .4);
    border-radius: var(--offsize);
    transition: all .2s linear;
    font-size: 16px;
    line-height: 1.5;
    text-indent: 8px;
    background-color: #c9ca7c
}

[data-module~=structure] .item:nth-child(odd) {
    background-color: #d89d1f
}

[data-module~=structure] .item:not(:focus-within) {
    font-size: 18px
}

[data-module~=structure] .item:not(:focus-within) .focusonly {
    display: none
}

[data-module~=structure] .item:focus-within .nofocus {
    display: none
}

[data-module~=structure] .item [type=checkbox] {
    opacity: 0;
    position: absolute;
    pointer-events: none
}

[data-module~=structure] .item .edit,
[data-module~=structure] .item .add,
[data-module~=structure] .item .adnadd,
[data-module~=structure] .item .instaadd {
    width: 3rem
}

[data-module~=structure] .item .button {
    display: flex;
    flex-direction: column;
    font-size: 12px
}