:root {
    --html-doc-height: 100dvh;
    --body-bg: rgba(255,255,255,1);
    --body-color: white;
    --body-container-bg: rgba(240,240,240,1);
    --btn-border-width: 1px;
    --btn-border-radius: 0px;
    --btn-padding-x: 1rem;
    --btn-padding-y: 0.5rem;
    --btn-margin: 0.375rem;
    --btn-font-size: 1rem;
    --font-name: Rubik;
    --font-size: 1em;

    --content-box-top: 2rem;    /* navigation wave margins */
    --content-box-bottom: 7rem; /* navigation wave margins */

    --logo-text-shadow: 3px 3px #696969;
    --letter-spacing: 0.04em;
    --navbar-height: 90px;
    --total-nav-height: var(--navbar-height);
    --navbar-margin: 0;
    --navbar-padding: 7px;
    --navbar-link-font-size: 1.5em;
    --navbar-border-radius: 0px;
    --navbar-transition: all 0.15s ease-in-out;
    --navbar-border: #e0e0e0 1px solid;
    --navbar-link-border-x: unset;
    --navbar-link-border-y: unset;
    --navbar-color: rgb(255, 255, 255);
    --navbar-container-background-color: #03244b;
    --navbar-background-color: #03244b;
    --navbar-link: rgb(255, 255, 255);
    --navbar-link-hover-color: rgba(240,240,240,1);
    --navbar-link-active-color: rgba(240,240,240,1);
    --navbar-link-disabled-color: rgba(0,0,0,1);
    --navbar-link-bg: #03244b;
    --navbar-link-bg-hover-color: rgba(2.9,43.4,91.8,1);
    --navbar-link-bg-active-color: rgba(3,36,75,1);
    --navbar-link-bg-disabled-color: rgba(204.2,204.2,204.2,1);
    
    --footer-li-url: url(/static/core/icons/filter-circle.svg);
    --footer-background-color: #03244b;
    --footer-text-color-rgb: 255, 255, 255;
    --footer-text-color: rgb(var(--footer-text-color-rgb));

    --component-color: rgba(51,51,51,1);
    --component-color-hover: rgba(51,51,51,1);
    --component-color-active: rgba(51,51,51,1);
    --component-color-disabled: rgba(51,51,51,1);
    --component-bg: rgba(255,255,255,1);
    --component-bg-hover: rgba(239,239,239,1);
    --component-bg-active: rgba(239,239,239,1);
    --component-bg-disabled: rgba(232,232,232,1);
    --component-color-secondary: rgba(51,51,51,1);
    --component-color-secondary-hover: rgba(51,51,51,1);
    --component-color-secondary-active: rgba(51,51,51,1);
    --component-color-secondary-disabled: rgba(51,51,51,1);
    --component-bg-secondary: rgba(250,250,250,1);
    --component-bg-secondary-hover: rgba(239,239,239,1);
    --component-bg-secondary-active: rgba(239,239,239,1);
    --component-bg-secondary-disabled: rgba(232,232,232,1);
    --component-color-soft: rgba(51,51,51,1);
    --component-bg-soft: rgba(0,0,0,1);
    --component-bg-soft-hover: rgba(0,0,0,1);
    --component-bg-soft-active: rgba(0,0,0,1);
    --component-bg-soft-disabled: rgba(0,0,0,1);
    --component-box-shadow-rgb: 0,0,0;
    --component-box-shadow-alpha: 0.4;
    --component-box-shadow-geometry: 0 1px 3px;
    --component-box-shadow: var(--component-box-shadow-geometry) rgba(var(--component-box-shadow-rgb),var(--component-box-shadow-alpha));
    --component-box-shadow-hover: var(--component-box-shadow-geometry) rgba(var(--component-box-shadow-rgb),calc(var(--component-box-shadow-alpha) + 0.1));
    --component-box-shadow-active: var(--component-box-shadow-geometry) rgba(var(--component-box-shadow-rgb),calc(var(--component-box-shadow-alpha) + 0.15));
    --component-box-shadow-active: var(--component-box-shadow-geometry) rgba(var(--component-box-shadow-rgb),calc(var(--component-box-shadow-alpha) + 0.15));
    --component-border-radius: 4px;
    --component-margin: 0px;

    --loader-bg: #004297;
    --loader-height: 3px;

    --link-color: rgba(0,66,151,1);
    --link-hover-color: rgba(0,43,100,1);
    --link-active-color: rgba(0,43,100,1);
    --link-disabled-color: rgba(21,48,83,1);

    --primary-button: rgba(250,250,250,1);
    --primary-button-hover: rgba(250,250,250,1);
    --primary-button-active: rgba(250,250,250,1);
    --primary-button-disabled: rgba(250,250,250,1);
    --primary-button-bg: rgba(3, 36, 75, 1);
    --primary-button-bg-hover: rgba(1.9,41,87.3,1);
    --primary-button-bg-active: rgba(1.9,41,87.3,1);
    --primary-button-bg-disabled: rgba(41.7,64.7,91.5,1);
    --primary-button-border: rgba(3,36,75,1);
    --primary-button-border-hover: rgba(1.9,41,87.3,1);
    --primary-button-border-active: rgba(1.9,41,87.3,1);
    --primary-button-border-disabled: rgba(41.7,64.7,91.5,1);
    --primary-button-rgb: 3,36,75;
    --primary-button-rgb-hover: 1,41,87;
    --primary-button-rgb-active: 1,41,87;

    --secondary-button: rgba(250,250,250,1);
    --secondary-button-hover: rgba(250,250,250,1);
    --secondary-button-active: rgba(250,250,250,1);
    --secondary-button-disabled: rgba(250,250,250,1);
    --secondary-button-bg: rgba(36,120,135,1);
    --secondary-button-bg-hover: rgba(46,130,145,1);
    --secondary-button-bg-active: rgba(51,135,150,1);
    --secondary-button-bg-disabled: rgba(26,110,125,1);
    --secondary-button-border: rgba(36,120,135,1);
    --secondary-button-border-hover: rgba(46,130,145,1);
    --secondary-button-border-active: rgba(51,135,150,1);
    --secondary-button-border-disabled: rgba(26,110,125,1);
    --secondary-button-rgb: 36,120,135;
    --secondary-button-rgb-hover: 46,130,145;
    --secondary-button-rgb-active: 51,135,150;

    --tertiary-button: rgba(250,250,250,1);
    --tertiary-button-hover: rgba(250,250,250,1);
    --tertiary-button-active: rgba(250,250,250,1);
    --tertiary-button-disabled: rgba(250,250,250,1);
    --tertiary-button-bg: rgba(36,120,135,1);
    --tertiary-button-bg-hover: rgba(46,130,145,1);
    --tertiary-button-bg-active: rgba(51,135,150,1);
    --tertiary-button-bg-disabled: rgba(26,110,125,1);
    --tertiary-button-border: rgba(250,250,250,1);
    --tertiary-button-border-hover: rgba(250,250,250,1);
    --tertiary-button-border-active: rgba(250,250,250,1);
    --tertiary-button-border-disabled: rgba(250,250,250,1);
    --tertiary-button-rgb: 36,120,135;
    --tertiary-button-rgb-hover: 46,130,145;
    --tertiary-button-rgb-active: 51,135,150;

    --success-button: rgba(250,250,250,1);
    --success-button-hover: rgba(250,250,250,1);
    --success-button-active: rgba(250,250,250,1);
    --success-button-disabled: rgba(250,250,250,1);
    --success-button-bg: rgba(36,137,77,1);
    --success-button-bg-hover: rgba(46,147,87,1);
    --success-button-bg-active: rgba(51,152,92,1);
    --success-button-bg-disabled: rgba(26,127,67,1);
    --success-button-border: rgba(250,250,250,1);
    --success-button-border-hover: rgba(250,250,250,1);
    --success-button-border-active: rgba(250,250,250,1);
    --success-button-border-disabled: rgba(250,250,250,1);
    --success-button-rgb: 36,137,77;
    --success-button-rgb-hover: 46,147,87;
    --success-button-rgb-active: 51,152,92;

    --warning-button: rgba(250,250,250,1);
    --warning-button-hover: rgba(250,250,250,1);
    --warning-button-active: rgba(250,250,250,1);
    --warning-button-disabled: rgba(250,250,250,1);
    --warning-button-bg: rgba(135,135,36,1);
    --warning-button-bg-hover: rgba(145,145,46,1);
    --warning-button-bg-active: rgba(150,150,51,1);
    --warning-button-bg-disabled: rgba(125,125,26,1);
    --warning-button-border: rgba(250,250,250,1);
    --warning-button-border-hover: rgba(250,250,250,1);
    --warning-button-border-active: rgba(250,250,250,1);
    --warning-button-border-disabled: rgba(250,250,250,1);
    --warning-button-rgb: 135,135,36;
    --warning-button-rgb-hover: 145,145,46;
    --warning-button-rgb-active: 150,150,51;

    --danger-button: rgba(250,250,250,1);
    --danger-button-hover: rgba(250,250,250,1);
    --danger-button-active: rgba(250,250,250,1);
    --danger-button-disabled: rgba(250,250,250,1);
    --danger-button-bg: rgba(135,36,36,1);
    --danger-button-bg-hover: rgba(145,46,46,1);
    --danger-button-bg-active: rgba(150,51,51,1);
    --danger-button-bg-disabled: rgba(125,26,26,1);
    --danger-button-border: rgba(250,250,250,1);
    --danger-button-border-hover: rgba(250,250,250,1);
    --danger-button-border-active: rgba(250,250,250,1);
    --danger-button-border-disabled: rgba(250,250,250,1);
    --danger-button-rgb: 135,36,36;
    --danger-button-rgb-hover: 145,46,46;
    --danger-button-rgb-active: 150,51,51;

    --info-button: rgba(250,250,250,1);
    --info-button-hover: rgba(250,250,250,1);
    --info-button-active: rgba(250,250,250,1);
    --info-button-disabled: rgba(250,250,250,1);
    --info-button-bg: rgba(36,135,130,1);
    --info-button-bg-hover: rgba(46,145,140,1);
    --info-button-bg-active: rgba(51,150,145,1);
    --info-button-bg-disabled: rgba(26,125,120,1);
    --info-button-border: rgba(250,250,250,1);
    --info-button-border-hover: rgba(250,250,250,1);
    --info-button-border-active: rgba(250,250,250,1);
    --info-button-border-disabled: rgba(250,250,250,1);
    --info-button-rgb: 36,135,130;
    --info-button-rgb-hover: 46,145,140;
    --info-button-rgb-active: 51,150,145;

    --fireworks-bottom-right: url(/static/blockapp/assets/fireworks/bottom-right.svg);
    --fireworks-top-middle-left: url(/static/blockapp/assets/fireworks/top-middle-left.svg);
    --fireworks-top-middle-right: url(/static/blockapp/assets/fireworks/top-middle-right.svg);
    --fireworks-middle-right: url(/static/blockapp/assets/fireworks/middle-right.svg);
    --fireworks-top-left: url(/static/blockapp/assets/fireworks/top-left.svg);
    --fireworks-bottom-left: url(/static/blockapp/assets/fireworks/bottom-left.svg);
    --flags-top: url(/static/blockapp/assets/festive/flags-top.svg);
    --confetti: url(/static/blockapp/assets/festive/confetti.svg);
    --baloons: url(/static/blockapp/assets/festive/baloons.svg);
    --hearts: url(/static/blockapp/assets/hearts/background.svg);
    --flowers: url(/static/blockapp/assets/flowers/background.svg);
    --stars: url(/static/blockapp/assets/stars/background.svg);
    --rainbow: url(/static/blockapp/assets/rainbow/rainbow.svg);
    --bubbles: url(/static/blockapp/assets/bubbles/background.svg);
    --snow: url(/static/blockapp/assets/snow/background.svg);
    --list-icon: url(/static/site_settings/img/check2-circle.svg);

    --navbar-bg-start-rgba: #fcfcfc;
    --navbar-bg-mid-rgba: #fcfcfc;
    --navbar-bg-end-rgba: #636363;
    --full-page-size: calc(100vh - var(--box-top) - var(--content-box-bottom) - var(--navbar-height));
}
html {
    min-height: var(--html-doc-height);
}
body {
    color: var(--body-color);
    font-family: var(--font-name), sans-serif;
    font-size: var(--font-size);
    letter-spacing: var(--letter-spacing);

    margin: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: var(--html-doc-height);
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
p {
    margin: 0;
    margin-bottom: 0.375rem;
}
.fullpage {
    min-height: var(--full-page-size);
}
div.content[role="main"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #28271f;
    background-image: 
        url(../img/hori-wood-panels-opaque-lg.jpg),
        url(../img/hori-wood-panels-opaque-preoad.jpg);
    /* background: linear-gradient(100deg, var(--navbar-bg-start-rgba) 0%, var(--navbar-bg-mid-rgba) 70%, var(--navbar-bg-end-rgba) 100%); */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 10;
}
div.content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: var(--content-box-top);        /* navigation wave margins */
    padding-bottom: var(--content-box-bottom);  /* navigation wave margins */
}
div.content[role="main"] .content-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: var(--navbar-margin);
    padding-right: var(--navbar-margin);
}
div.navigation-container[role="navigation"] {
    position: relative;
    /* position: sticky; */
    top: 0;
    z-index: 99;
    width: 100%;
    display: flex;
    background-color: var(--navbar-container-background-color);
    height: var(--navbar-height);
}
div.navigation-container[role="navigation"] .navigation {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background-color: var(--navbar-background-color);
    margin-left: var(--navbar-margin);
    margin-right: var(--navbar-margin);
}
div.navigation-container[role="navigation"] .navigation-burger {
    position: absolute;
    top: calc(var(--navbar-height) / 2);
    right: 0;
    transform: translateY(-50%);
    display: none;
    cursor: pointer;

    & span {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px;
        background-color: var(--navbar-color);
        transition: var(--navbar-transition);
    }
}
div.navigation-container[role="navigation"] .navigation-logo,
footer.footer .footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    & a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--navbar-color);
        text-shadow: var(--logo-text-shadow);
        text-decoration: none;
        font-size: calc(var(--navbar-link-font-size) * 1.7);
        font-weight: bold;
        height: 100%;

        & img {
            height: 100%;
            width: auto;
        }
    }
}
footer.footer .footer-logo {
    --navbar-color: var(--footer-text-color);
}
div.navigation-container[role="navigation"] .navigation-menu {
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;

    & .nav-icon {
        width: calc(var(--navbar-link-font-size) * 0.8);
        height: calc(var(--navbar-link-font-size) * 0.8);
    }

    & .hidden-icon-text {
        display: none;
    }
}
div.navigation-wave {
    z-index: 8;
    pointer-events: none;
    position: absolute;
    top: calc(var(--navbar-height) - 1px);
    color: var(--navbar-background-color);
    left: 0;
    right: 0;
    height: 150px;
    width: 100%;
}
div.content-wave {
    z-index: 8;
    pointer-events: none;
    position: absolute;
    color: var(--navbar-background-color);
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}
div.navigation-container[role="navigation"] .navigation-menu-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--navbar-link-font-size);
}
div.navigation-container[role="navigation"] .navigation-menu-item a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navbar-link);
    text-decoration: none;
    padding-left: var(--navbar-padding);
    padding-right: var(--navbar-padding);
    border-radius: var(--navbar-border-radius);
    transition: var(--navbar-transition);
}
div.navigation-container[role="navigation"] .navigation-menu-item a:hover {
    color: var(--navbar-link-hover-color);
    background-color: var(--navbar-link-bg-hover-color);
}
div.navigation-container[role="navigation"] .navigation-avatar {
    border-radius: 50%;
    overflow: hidden;
    width: 40px;
    height: 40px;
    object-fit: cover;
}
footer.footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--footer-background-color);
    color: var(--footer-text-color);
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
footer.footer a {
    color: var(--footer-text-color);
    text-decoration: underline;
}
footer.footer .footer-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
footer.footer .footer-wrapper-left,
footer.footer .footer-wrapper-right {
    flex: 1;
    display: flex;
    justify-content: center;
}
footer.footer .footer-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
footer.footer .web-creator-link {
    margin-top: 1rem;
    color: var(--footer-text-color);
    text-decoration: none;
}
.social-media-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.5rem;
}
.social-media-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--footer-text-color);
    border: 1px solid rgba(var(--footer-text-color-rgb), 0.5);
}
.social-media-menu-item svg {
    width: 24px;
    height: 24px;
    padding: 0.5rem;
    vertical-align: middle;
    color: var(--footer-text-color);
}
.footer-lint-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.footer-lint {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    footer.footer .footer-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    div.navigation-container[role="navigation"] .navigation {
        flex-direction: column;
    }
    div.navigation-container[role="navigation"] .navigation-burger {
        display: block;
    }
    div.navigation-container[role="navigation"] .navigation.open .navigation-menu {
        display: flex;
        height: auto;
    }
    div.navigation-container[role="navigation"] .navigation-menu {
        display: none;
        flex-direction: column;
        background-color: var(--navbar-background-color);
        top: var(--navbar-height);
        position: absolute;
        width: 100%;
    }
    div.navigation-container[role="navigation"] .navigation-menu-item:first-child {
        border-top: var(--navbar-border);
    }
    div.navigation-container[role="navigation"] .navigation-menu-item {
        flex-direction: column;
        width: 100%;

        border-left: var(--navbar-border);
        border-right: var(--navbar-border);
        border-bottom: var(--navbar-border);

        & a {
            width: 100%;
            padding: 0;
            padding-top: calc(var(--navbar-padding) / 2);
            padding-bottom: calc(var(--navbar-padding) / 2);
            justify-content: center;
        }

        & .hidden-icon-text {
            display: block;
            margin-right: 0.5rem;
        }
    }
}
@media (min-width: 576px) {
    :root {
        --navbar-margin: 5vw;
    }
}
@media (min-width: 768px) {
    :root {
        --navbar-margin: 10vw;
    }
    div.navigation-container[role="navigation"] .navigation-menu-item:has(.nav-icon) a {
        width: 2em;
    }
}
@media (min-width: 992px) {
    :root {
        --navbar-margin: 15vw;
    }
}
@media (min-width: 1200px) {
    :root {
        --navbar-margin: 20vw;
    }
}
.text-left.text-left {
    text-align: left;
}
.text-center.text-center{
    text-align: center;
}
.text-right.text-right {
    text-align: right;
}


.form-input {
    & label {
        display: inline-block;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }
    & input:not([type="submit"], [type="button"], [type="file"], [type="checkbox"], [type="radio"]) {
        width: calc(100% - 1rem);
        padding: 0.5rem;
        border: 1px solid rgb(0, 0, 0, 0.1);
        border-radius: 4px;
    }
}

input:read-only:not([type="submit"], [type="button"], [type="file"], [type="checkbox"], [type="radio"]) {
    background-color: rgb(202, 202, 202);
    cursor: not-allowed;
}

.btn {
    --color: unset;
    --hover: unset;
    --active: unset;
    --disabled: unset;
    --bg: unset;
    --bg-hover: unset;
    --bg-active: unset;
    --bg-disabled: unset;
    --border: unset;
    --border-hover: unset;
    --border-active: unset;
    --border-disabled: unset;
    --btn-outline: none;
    --padding-x: var(--btn-padding-x,1rem);
    --padding-y: var(--btn-padding-y,0.5rem);
    --padding: var(--padding-y) var(--padding-x);
    --margin: var(--btn-margin,0);
    --font-size: var(--btn-font-size,1rem);
    --icon-size: calc(var(--font-size) * 1);
    position: relative;
    display: inline-block;
    font-size: var(--font-size);
    cursor: pointer;
    text-decoration: none;
    white-space: normal;
    text-wrap: balance;
    color: var(--color);
    background-color: var(--bg);
    border: var(--btn-border-width) solid var(--border);
    line-height: 1.5;
    outline: none;
    border-radius: var(--btn-border-radius);
    padding: var(--padding);
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    z-index: 1;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    -webkit-font-smoothing: antialiafsed;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-wrapper .btn + .btn {
    margin-left: var(--btn-margin);
}

.btn:has(.icon) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.btn .icon {
    width: var(--icon-size);
    height: var(--icon-size);
    margin: 0 0.25em;
    padding: 0
}

.btn.sm {
    --icon-size: calc(var(--font-size) * 0.75);
    font-size: calc(var(--font-size) * 0.875);
    padding: calc(var(--padding-y) * 0.75) calc(var(--padding-x) * 0.75);
    margin: calc(var(--margin) * 0.75)
}

.btn.lg {
    --icon-size: calc(var(--font-size) * 1.25);
    font-size: calc(var(--font-size) * 1.25);
    padding: calc(var(--padding-y) * 1.5) calc(var(--padding-x) * 1.5);
    margin: calc(var(--margin) * 1.25)
}

.btn.xl {
    --icon-size: calc(var(--font-size) * 1.5);
    font-size: calc(var(--font-size) * 1.5);
    padding: calc(var(--padding-y) * 2) calc(var(--padding-x) * 2);
    margin: calc(var(--margin) * 1.5)
}

.btn.xxl {
    --icon-size: calc(var(--font-size) * 2);
    font-size: calc(var(--font-size) * 2);
    padding: calc(var(--padding-y) * 2.5) calc(var(--padding-x) * 2.5);
    margin: calc(var(--margin) * 1.5)
}

.btn:hover {
    color: var(--hover);
    background-color: var(--bg-hover);
    border-color: var(--border-hover)
}

.btn:focus,.btn:active {
    color: var(--active);
    background-color: var(--bg-active);
    border-color: var(--border-active);
    outline: var(--btn-outline)
}

.btn:disabled {
    color: var(--disabled);
    background-color: var(--bg-disabled);
    border-color: var(--border-disabled)
}

.btn-outline {
    color: var(--bg);
    background-color: transparent;
    border: max(1px,var(--btn-border-width)) solid var(--bg)
}

.btn-outline:hover {
    color: var(--hover);
    border-color: var(--bg-hover)
}

.btn-outline:active {
    color: var(--active);
    border-color: var(--bg-active)
}

.btn-outline:disabled {
    color: var(--disabled);
    border-color: var(--bg-disabled)
}

.btn-primary {
    --color: var(--primary-button);
    --hover: var(--primary-button-hover);
    --active: var(--primary-button-active);
    --disabled: var(--primary-button-disabled);
    --bg: var(--primary-button-bg);
    --bg-hover: var(--primary-button-bg-hover);
    --bg-active: var(--primary-button-bg-active);
    --bg-disabled: var(--primary-button-bg-disabled);
    --border: var(--primary-button-border,0);
    --border-hover: var(--primary-button-border-hover,0);
    --border-active: var(--primary-button-border-active,0);
    --border-disabled: var(--primary-button-border-disabled,0);
    --btn-outline: 2px solid rgba(var(--primary-button-rgb),0.3)
}

.btn-secondary {
    --color: var(--secondary-button);
    --hover: var(--secondary-button-hover);
    --active: var(--secondary-button-active);
    --disabled: var(--secondary-button-disabled);
    --bg: var(--secondary-button-bg);
    --bg-hover: var(--secondary-button-bg-hover);
    --bg-active: var(--secondary-button-bg-active);
    --bg-disabled: var(--secondary-button-bg-disabled);
    --border: var(--secondary-button-border);
    --border-hover: var(--secondary-button-border-hover);
    --border-active: var(--secondary-button-border-active);
    --border-disabled: var(--secondary-button-border-disabled);
    --btn-outline: 2px solid rgba(var(--secondary-button-rgb),0.3)
}

.btn-tertiary {
    --color: var(--tertiary-button);
    --hover: var(--tertiary-button-hover);
    --active: var(--tertiary-button-active);
    --disabled: var(--tertiary-button-disabled);
    --bg: var(--tertiary-button-bg);
    --bg-hover: var(--tertiary-button-bg-hover);
    --bg-active: var(--tertiary-button-bg-active);
    --bg-disabled: var(--tertiary-button-bg-disabled);
    --border: var(--tertiary-button-border);
    --border-hover: var(--tertiary-button-border-hover);
    --border-active: var(--tertiary-button-border-active);
    --border-disabled: var(--tertiary-button-border-disabled);
    --btn-outline: 2px solid rgba(var(--tertiary-button-rgb),0.3)
}

.btn-success {
    --color: var(--success-button);
    --hover: var(--success-button-hover);
    --active: var(--success-button-active);
    --disabled: var(--success-button-disabled);
    --bg: var(--success-button-bg);
    --bg-hover: var(--success-button-bg-hover);
    --bg-active: var(--success-button-bg-active);
    --bg-disabled: var(--success-button-bg-disabled);
    --border: var(--success-button-border);
    --border-hover: var(--success-button-border-hover);
    --border-active: var(--success-button-border-active);
    --border-disabled: var(--success-button-border-disabled);
    --btn-outline: 2px solid rgba(var(--success-button-rgb),0.3)
}

.btn-warning {
    --color: var(--warning-button);
    --hover: var(--warning-button-hover);
    --active: var(--warning-button-active);
    --disabled: var(--warning-button-disabled);
    --bg: var(--warning-button-bg);
    --bg-hover: var(--warning-button-bg-hover);
    --bg-active: var(--warning-button-bg-active);
    --bg-disabled: var(--warning-button-bg-disabled);
    --border: var(--warning-button-border);
    --border-hover: var(--warning-button-border-hover);
    --border-active: var(--warning-button-border-active);
    --border-disabled: var(--warning-button-border-disabled);
    --btn-outline: 2px solid rgba(var(--warning-button-rgb),0.3)
}

.btn-danger {
    --color: var(--danger-button);
    --hover: var(--danger-button-hover);
    --active: var(--danger-button-active);
    --disabled: var(--danger-button-disabled);
    --bg: var(--danger-button-bg);
    --bg-hover: var(--danger-button-bg-hover);
    --bg-active: var(--danger-button-bg-active);
    --bg-disabled: var(--danger-button-bg-disabled);
    --border: var(--danger-button-border);
    --border-hover: var(--danger-button-border-hover);
    --border-active: var(--danger-button-border-active);
    --border-disabled: var(--danger-button-border-disabled);
    --btn-outline: 2px solid rgba(var(--danger-button-rgb),0.3)
}

.btn-info {
    --color: var(--info-button);
    --hover: var(--info-button-hover);
    --active: var(--info-button-active);
    --disabled: var(--info-button-disabled);
    --bg: var(--info-button-bg);
    --bg-hover: var(--info-button-bg-hover);
    --bg-active: var(--info-button-bg-active);
    --bg-disabled: var(--info-button-bg-disabled);
    --border: var(--info-button-border);
    --border-hover: var(--info-button-border-hover);
    --border-active: var(--info-button-border-active);
    --border-disabled: var(--info-button-border-disabled);
    --btn-outline: 2px solid rgba(var(--info-button-rgb),0.3)
}

.btn-light {
    --color: var(--light-button);
    --hover: var(--light-button-hover);
    --active: var(--light-button-active);
    --disabled: var(--light-button-disabled);
    --bg: var(--light-button-bg);
    --bg-hover: var(--light-button-bg-hover);
    --bg-active: var(--light-button-bg-active);
    --bg-disabled: var(--light-button-bg-disabled);
    --border: var(--light-button-border);
    --border-hover: var(--light-button-border-hover);
    --border-active: var(--light-button-border-active);
    --border-disabled: var(--light-button-border-disabled);
    --btn-outline: 2px solid rgba(var(--light-button-rgb),0.3)
}

.btn-dark {
    --color: var(--dark-button);
    --hover: var(--dark-button-hover);
    --active: var(--dark-button-active);
    --disabled: var(--dark-button-disabled);
    --bg: var(--dark-button-bg);
    --bg-hover: var(--dark-button-bg-hover);
    --bg-active: var(--dark-button-bg-active);
    --bg-disabled: var(--dark-button-bg-disabled);
    --border: var(--dark-button-border);
    --border-hover: var(--dark-button-border-hover);
    --border-active: var(--dark-button-border-active);
    --border-disabled: var(--dark-button-border-disabled);
    --btn-outline: 2px solid rgba(var(--dark-button-rgb),0.3)
}

button.link {
    background-color: transparent;
    border: 0px;
    padding: 0px;
    cursor: pointer;
    outline: none
}

.ga-rich-text a,.link {
    color: var(--link-color,#004297);
    padding-bottom: 1px;
    text-underline-offset: 4px;
    text-decoration: solid underline 2px;
    transition: all 0.2s ease-in-out
}

.file-input-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;   
}
.plain-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.plain-list li:not(:last-child):has(> .plain-list) {
    margin-bottom: 0.5rem;
}
.padding {
    --pad: var(--padding, 1rem);
    height: var(--pad);
}