:root {
    --transition-time: 0.2s;
    --button-outine-color: black;
    --button-primary-outline: #0077ff;
    --button-outine-primary-bg-hover: rgb(0 255 255 / 28%);
    --button-outline-disabled-ol: #0077ff5c;
    --color-primary: #2646cc;
    --text-input-error-border: red;
    --text-input-error-text: red;
    /* --hamburger-color: #FAFAFA; */
    --hamburger-color: black;
    --fade-in-time: 0.2s;
}
.hamburger-wrapper {
    z-index: 100;
}

.modal-window {
    z-index: 200;
}

.toast {
    z-index: 300;
}
:root {
    --button-color: #4281CB;
}

@keyframes spinner {
    to {transform: rotate(360deg);}
}

a:is(.btn,.btn-link) {
        text-decoration: none;
    }

button:is(.btn,.btn-link),a:is(.btn,.btn-link) {
        position: relative;
        color: white;
        background-color: var(--button-color);
        padding: 0.5rem 2rem;
        font-size: 1rem;
        border: none;
    }

:is(button:is(.btn,.btn-link),a:is(.btn,.btn-link)):hover {
            cursor: pointer;
            opacity: 0.6;
        }

:is(button:is(.btn,.btn-link),a:is(.btn,.btn-link)):disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }

.spinning:is(button:is(.btn,.btn-link),a:is(.btn,.btn-link)) {
            opacity: 0.6;
        }

.spinning:is(button:is(.btn,.btn-link),a:is(.btn,.btn-link)) .btn-content {
                visibility: hidden;
            }

.spinning:is(button:is(.btn,.btn-link),a:is(.btn,.btn-link)):hover {
                cursor: initial;
            }

.spinning:is(button:is(.btn,.btn-link),a:is(.btn,.btn-link))::after {
                content: "";
                background: transparent;
                box-sizing: border-box;
                position: absolute;
                width: 16px;
                height: 16px;
                inset: 0;
                margin: auto;
                border-radius: 50%;
                border-top: 2px solid white;
                border-right: 2px solid transparent;
                animation: spinner 0.6s linear infinite;
            }
body {
    font-family: sans-serif;
}

.backlink {
    margin-bottom: 2rem;
}

h2 {
    margin-top: 0;
}

h2.tonic-example {
        margin-top: 4rem;
    }

h3 {
    font-family: sans-serif;
    border-bottom: 1px solid;
    padding-left: 1rem;
    font-weight: 500;
    margin-top: 2rem;
    border-color: gray;
}

#content {
    margin-top: 0;
}

.form-demo .reactive-form {
        border: 1px solid;
        padding: 1rem;
    }

.preact-example .mobile-nav-list,.preact-example .hamburger,.preact-example .hamburger-wrapper {
        margin-top: 0;
    }

#root-preact .form-demo {
        margin-top: 6rem;
    }

#root-tonic {
    margin-top: 4rem;
}

hr {
    margin: 6rem 0;
    border-style: solid;
    border-width: 3px;
    color: lightgray;
}

.example-form {
    max-width: 40rem;
    margin: 0 auto;
}

.pencil {
    margin-top: 4rem;
}
.copy-btn {
    min-width: 7em;
}

.copy-icon-btn {
    background-color: transparent;
    width: 1.8rem;
    height: 1.8rem;
    border: none;
}

.copy-icon-btn.has-copied:hover svg {
                fill: cornflowerblue;
            }

.copy-icon-btn.has-copied svg {
            fill: deepskyblue;
        }

.copy-icon-btn:hover svg {
            fill: black;
        }

.copy-icon-btn svg {
        fill: gray;
    }

    .editable-field button {
        margin-left: 1rem;
    }

.edit-pencil {
    position: relative;
    top: 6px;
    background-color: transparent;
    border: none;
    font-size: 2rem;
    color: blue;
}

.edit-pencil:hover {
        color: cyan;
        cursor: pointer;
    }
:root {
    --form-color-primary: #4285f4; 
}

.input-group {
    position: relative;
    width: 100%;
    margin: 2rem 0;
}

.input-group input {
        width: 100%;
        font-size: 1.2rem;
        padding: 10px 10px 10px 5px;
        display: block;
        border: none;
        border-bottom: 1px solid #757575;
        outline: none;
    }

:is(.input-group input):focus {
            border-bottom: 1px solid #4285f4;
            box-shadow: 0 3px 0 0 var(--form-color-primary, #4285f4);
        }

/* When input is...
            1. NOT empty
            2. NOT in focus
            3. NOT valid */

:is(.input-group input):invalid:not(:focus):not(:placeholder-shown) {
            border-bottom: 4px solid var(--text-input-error-border, red);
        }

:is(.input-group input):invalid:not(:focus):not(:placeholder-shown) ~ .requirements {
                max-height: 200px;
                padding: 0 30px 20px 50px;
            }

.input-group .requirements {
        padding: 0 30px 0 50px;
        max-height: 0;
        transition: 0.28s;
        overflow: hidden;
        color: var(--text-input-error-text);
        font-style: italic;
    }

.input-group label {
        color: #5f5f5f;
        font-size: 18px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 10px;
        transition: 0.2s ease all;
    }

/* this part makes the `label` float */

/* input:valid ~ label, */

.input-group input:focus ~ label,.input-group input:not(:placeholder-shown) ~ label {
        top: -20px;
        font-size: 14px;
        /* color: black; */
        color: #4285f4;
    }
.hamburger-wrapper {
    padding-right: 1rem;
    position: absolute;
    margin-left: auto;
    width: 10%;
    float: right;
    justify-self: right;
    right: 0;

    text-align: right;
    padding-right: 1rem;
    display: none;
}

:is(.hamburger-wrapper.open .burger) .line {
                background-color: white;
            }

@media (max-width: 600px) {
    .hamburger-wrapper {
        display: block;
    }
}

.hamburger {
    display: inline-block;

    /* --------------- The important stuff --------------------------- */
}

.hamburger .line {
        transition: transform 0.2s ease-in-out;
    }

.hamburger .container {
        transition: transform 0.2s ease-in-out 0.1s;
    }

.top:is(.hamburger .container) {
            transform: translateY(-3px) scaleX(.88235);
        }

.bottom:is(.hamburger .container) {
            transform: translateY(3px) scaleX(.88235);
        }

.bottom:is(.hamburger.open .line) {
                transform: none;
                transition-delay: 0.1s;
            }

.top:is(.hamburger.open .line) {
                transform: none;
                transition-delay: 0.1s;
            }

.hamburger.open .container {
            transition-delay: 0s;
        }

.bottom:is(:is(.hamburger.open .container) .line) {
                    transform: rotateZ(45deg);
                }

.top:is(:is(.hamburger.open .container) .line) {
                    transform: rotateZ(-45deg);
                }

.bottom:is(.hamburger.open .container) {
                transform: none;
                z-index: 99;
            }

.top:is(.hamburger.open .container) {
                transform: none;
                z-index: 99;
            }

/* ----------------- The boilerplate stuff --------------------- */

.hamburger button {
        all: unset;
        cursor: pointer;
        display: block;
    }

.hamburger button * {
        pointer-events: none;
    }

.hamburger .burger {
        z-index: 200;
        height: 31px;
        width: 31px;
        display: block;
        position: relative;
    }

.hamburger .container {
        position: absolute;
        left: 5px;
        /* top: -5px; */
    }

.hamburger .line {
        height: 2px;
        border-radius: 3px;
        background: var(--hamburger-color, black);
        width: 25px;
    }

.hamburger input {
        display: none;
    }

.hamburger-wrapper {
    padding-right: 1rem;
    position: absolute;
    margin-left: auto;
    width: 10%;
    float: right;
    justify-self: right;
    right: 0;
}

.hamburger .line {
        width: 25px;
    }
.edit-pencil {
    position: relative;
    top: 6px;
    background-color: transparent;
    border: none;
    font-size: 2rem;
    color: blue;
}
.edit-pencil:hover {
        color: cyan;
        cursor: pointer;
    }
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 0.8; }
}

.mobile-nav-list {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
    animation: fadeIn var(--fade-in-time, 0.2s);
}

.mobile-nav-list ul {
        list-style: none;
        align-items: center;
        margin-bottom: 20vh;
        padding: 0;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

:is(.mobile-nav-list ul) a {
            color: white;
        }

:is(.mobile-nav-list ul) li {
            margin: 1.2rem 0;
        }

.mobile-nav-list button {
        background: none;
        border: 1px solid white;
        color: white;
        padding: 0.5rem 1rem;
    }

/* & ul {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        margin-bottom: 30vh;

        & li {
            margin-bottom: 2rem;

            & a {
                color: white;
            }
        }
    } */

.mobile-nav-list.open {
        z-index: 97;
        opacity: 0.85;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        position: fixed;
    }

:is(.mobile-nav-list.open .burger) .line {
                background-color: white;
            }

    .form-group.radios {
        display: flex;
        justify-content: space-around;
    }

.radio-input {
    --form-control-color: #4281CB;

    margin-right: 1rem;
    cursor: pointer;
}

.radio-input input {
        cursor: pointer;
    }

.radio-input {

    font-family: system-ui, sans-serif;
    font-size: 1.5rem;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
}

.radio-input input[type="radio"] {
        -webkit-appearance: none;
        appearance: none;
        /* For iOS < 15 to remove gradient background */
        background-color: #fff;
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 1.15em;
        height: 1.15em;
        border: 0.15em solid currentColor;
        border-radius: 50%;
        display: grid;
        place-content: center;
    }

:is(.radio-input input[type="radio"])::before {
            content: "";
            width: 0.65em;
            height: 0.65em;
            border-radius: 50%;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em var(--form-control-color);
        }

:is(.radio-input input[type="radio"]):checked::before {
            appearance: initial;
            transform: scale(1);
        }
.input-group-number {
    min-height: 3rem;
}
.input-group-number input[type=number]::-webkit-inner-spin-button,.input-group-number input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }
.input-group-number input[type=number] {
        appearance: textfield;
        -moz-appearance: textfield;

        width: 45px;
        height: 42px;
        line-height: 1.65;
        float: left;
        display: block;
        padding: 0;
        margin: 0;
        padding-left: 20px;
        border: 1px solid #eee;
    }
:is(.input-group-number input[type=number]):focus {
            outline: 0;
        }
.input-group-number .number-nav {
        float: left;
        position: relative;
        height: 42px!important;
    }
:is(.input-group-number .number-nav) button {
            width: 100%;
            height: 100%;
            cursor: pointer;
            position: initial;
            color: #333;
            border: none;
            background-color: transparent;
            padding: 0;
        }
:is(.input-group-number .number-nav) .number-button {
            position: relative;
            border-left: 1px solid #eee;
            width: 20px;
            text-align: center;
            color: #333;
            font-size: 13px;
            line-height: 1.7;
            transform: translateX(-100%);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
.number-up:is(:is(.input-group-number .number-nav) .number-button) {
                position: absolute;
                height: 50%;
                top: 0;
                border-bottom: 1px solid #eee;
            }
.number-down:is(:is(.input-group-number .number-nav) .number-button) {
                position: absolute;
                bottom: -1px;
                height: 50%;
            }
:root {
    --button-outine-color: black;
    --button-primary-outline: #0077ff;
    --button-outine-primary-bg-hover: rgb(0 255 255 / 28%);
    --button-outline-disabled-ol: #0077ff5c;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

button.btn-outline {
    position: relative;
    border: none;
    outline: 2px solid transparent;
    border: 2px solid;
    border-radius: 5px;
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
    background-color: transparent;
    transition: 0.4s all;
}

button.btn-outline:disabled {
        cursor: not-allowed;
    }

button.btn-outline:hover {
        outline-color: var(--button-outine-color, inital);
    }

button.btn-outline:hover:disabled {
            background-color: transparent;
        }

button.btn-outline.primary {
        border: 2px solid var(--button-primary-outline, #0077ff);
        outline-color: transparent;
    }

button.btn-outline.primary:hover {
            outline-color: var(--button-primary-outline, #0077ff);
            background-color: var(
                --button-outine-primary-bg-hover,
                #0077ff
            );
        }

button.btn-outline.primary:hover:disabled {
                background-color: transparent;
            }

button.btn-outline.primary:disabled {
            outline-color: var(--button-outline-disabled-ol, #0077ff5c);
        }

button.btn-outline.primary:disabled:hover {
                background-color: transparent;
            }

button.btn-outline.spinning {
        opacity: 0.6;
    }

button.btn-outline.spinning .btn-content {
            visibility: hidden;
        }

button.btn-outline.spinning {

        cursor: initial;
    }

button.btn-outline.spinning::after {
            content: "";
            background: transparent;
            box-sizing: border-box;
            position: absolute;
            width: 16px;
            height: 16px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            border-top: 2px solid var(--button-outline-color, black);
            border-right: 2px solid transparent;
            animation: spinner 0.6s linear infinite;
        }
hr.wavy-hr {
    margin: 2em 0;
    border: none;
}
hr.wavy-hr:after {
        background: transparent url("data:image/svg+xml,%3csvg%20preserveAspectRatio='xMidYMid%20meet'%20width='34'%20height='10'%20viewBox='0%200%2034%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0)'%3e%3cpath%20d='M0%200H34L27%203L22%207.5L15.5%209L3.5%202L0%200Z'%20fill='none'/%3e%3cpath%20d='M0%201C8.2895%201%208.2895%209%2016.579%209C24.8685%209%2024.8685%201%2033.158%201C41.4475%201%2041.4475%209%2049.737%209C58.0265%209%2058.0265%201%2066.3262%201C74.6157%201%2074.6157%209%2082.9052%209C91.1947%209%2091.1947%201%2099.4842%201C107.774%201%20107.774%209%20116.063%209C124.353%209%20124.353%201%20132.652%201C140.942%201%20140.942%209%20149.231%209C157.521%209%20157.521%201%20165.81%201C174.1%201%20174.1%209%20182.389%209C190.679%209%20190.679%201%20198.979%201C207.268%201%20207.268%209%20215.558%209C223.847%209%20223.847%201%20232.137%201C240.426%201%20240.426%209%20248.716%209C257.005%209%20257.005%201%20265.305%201C273.594%201%20273.594%209%20281.884%209C290.173%209%20290.173%201%20298.463%201C306.752%201%20306.752%209%20315.052%209C323.342%209%20323.342%201%20331.641%201C339.931%201%20339.931%209%20348.22%209C356.51%209%20356.51%201%20364.81%201C373.099%201%20373.099%209%20381.399%209C389.688%209%20389.688%201%20397.978%201C406.267%201%20406.267%209%20414.567%209C422.857%209%20422.857%201%20431.156%201C439.446%201%20439.446%209%20447.735%209C456.025%209%20456.025%201%20464.325%201C472.614%201%20472.614%209%20480.914%209C489.203%209%20489.203%201%20497.503%201C505.793%201%20505.793%209%20514.092%209C522.382%209%20522.382%201%20530.681%201C538.971%201%20538.971%209%20547.271%209C555.56%209%20555.56%201%20563.86%201C572.149%201%20572.149%209%20580.449%209C588.739%209%20588.739%201%20597.028%201C605.318%201%20605.318%209%20613.607%209C621.897%209%20621.897%201%20630.186%201C638.476%201%20638.476%209%20646.775%209C655.065%209%20655.065%201%20663.354%201C671.644%201%20671.644%209%20679.933%209C688.223%209%20688.223%201%20696.512%201C704.802%201%20704.802%209%20713.102%209C721.391%209%20721.391%201%20729.681%201C737.97%201%20737.97%209%20746.26%209C754.549%209%20754.549%201%20762.849%201C771.138%201%20771.138%209%20779.428%209C787.717%209%20787.717%201%20796.017%201C804.307%201%20804.307%209%20812.596%209C820.886%209%20820.886%201%20829.175%201C837.465%201%20837.465%209%20845.764%209C854.054%209%20854.054%201%20862.343%201C870.633%201%20870.633%209%20878.933%209C887.222%209%20887.222%201%20895.512%201C903.801%201%20903.801%209%20912.101%209C920.39%209%20920.39%201%20928.69%201C936.98%201%20936.98%209%20945.279%209C953.569%209%20953.569%201%20961.869%201C970.158%201%20970.158%209%20978.458%209C986.747%209%20986.747%201%20995.047%201C1003.34%201%201003.34%209%201011.64%209C1019.93%209%201019.93%201%201028.23%201C1036.51%201%201036.51%209%201044.81%209C1053.1%209%201053.1%201%201061.4%201C1069.7%201%201069.69%209%201077.99%209C1086.28%209%201086.28%201%201094.58%201C1102.88%201%201102.88%209%201111.17%209C1119.46%209%201119.46%201%201127.76%201C1136.05%201%201136.05%209%201144.35%209C1152.64%209%201152.64%201%201160.94%201C1169.23%201%201169.23%209%201177.53%209C1185.82%209%201185.82%201%201194.12%201C1202.42%201%201202.42%209%201210.71%209C1219%209%201219%201%201227.3%201C1235.59%201%201235.59%209%201243.89%209C1252.19%209%201252.19%201%201260.47%201C1268.77%201%201268.77%209%201277.06%209C1285.35%209%201285.35%201%201293.65%201C1301.95%201%201301.95%209%201310.24%209C1318.54%209%201318.54%201%201326.83%201C1335.13%201%201335.13%209%201343.43%209C1351.73%209%201351.73%201%201360.03%201'%20stroke='%231D0070'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0'%3e%3crect%20width='1360'%20height='10'%20fill='none'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") bottom;
        background-repeat: repeat-x;
        background-size: 26px auto;
        content: " ";
        width: 100%;
        height: 10px;
        display: block;
    }
.toast {
    left: calc(1.5rem - 2px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 1rem;
    position: fixed;
    padding: 1rem;
    width: calc(100vw - 5rem);
    border: 1px solid rgba(231, 237, 241, 1);
    box-shadow: 0px 10px 40px -20px rgb(0 0 0 / 40%), 0 0 1px #a2a9b1;
    background-color: white;
    margin-bottom: 2rem;
}

.toast.error {
        border: 1px solid red;
        background-color: var(--err-bgc);
    }

.toast-body {
    display: flex;
    color: black;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.green-check {
    width: 2rem;
    display: inline-block;
    margin-right: 1rem;
}
.close-btn {
    padding: 0;
    display: inline-block!important;
    width: 2rem;
    height: 2rem;
    border: none;
    background-color: transparent;
}
.close-btn svg {
        max-width: 100%;
        max-height: 100%;
        fill: gray;
    }
:root {
    --accordion-transition-time: 0.4s;
    --x-transition-time: 0.2s;
}

details {
    border-bottom: 2px solid;
    padding-block-end: 1rem;
    transition: max-height var(--accordion-transition-time, 0.4s) ease-in-out;

    /* Set a max-height value just enough to show the summary content */
    max-height: 4rem; 
    overflow: hidden; /* Hide the rest of the content */
}

details[open] {
        max-height: 800px;
    }

details[open] svg {
            rotate: 45deg;
        }

summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

summary svg {
        transition: rotate var(--x-transition-time, 0.2s) ease-in-out;
        margin-inline: 0;
    }

/* for svg */

summary fill {
        color: black;
    }
    .switch input {
        appearance: none;
        position: relative;
        display: inline-block;
        background: lightgrey;
        height: 1.65rem;
        width: 2.75rem;
        vertical-align: middle;
        border-radius: 2rem;
        box-shadow: 0px 1px 3px #0003 inset;
        transition: var(--transition-time) linear background-color;
    }
:is(.switch input):checked {
            background: green;
        }
:is(.switch input):checked::before {
            transform: translateX(1rem);
        }
.switch input::before {
        content: "";
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        background: #fff;
        border-radius: 1.2rem;
        position: absolute;
        top: 0.2rem;
        left: 0.2rem;
        box-shadow: 0px 1px 3px #0003;
        transition: 0.25s linear transform;
        transform: translateX(0rem);
    }
label.checkbox {
    --color-primary: #2646cc; 
    --color-primary-light: rgb(7.82 0 234.47 / 13%);
    --colorNeutral600: #7d8699;

    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row-reverse;
    gap: 1rem;
    cursor: pointer;
}

label.checkbox .box-container {
        border: 2px solid var(--colorNeutral600);
        width: 24px;
        height: 24px;
        border-radius: 6px;
        tab-size: 4;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.2s ease-in-out;
        align-items: center;
        display: inline-grid;
        justify-items: center;
        fill: none;
    }

:is(label.checkbox .box-container):focus-within {
            border-color: var(--color-primary);
            outline-color: var(--color-primary-light);
            outline-offset: 0;
            outline-style: solid;
            outline-width: 4px;
        }

.checked:is(label.checkbox .box-container) {
            fill: var(--color-primary);
            border-color: var(--color-primary);
        }

:is(label.checkbox .box-container) svg {
            overflow: hidden;
            margin-left: calc(-1 * 1px);
            margin-top: calc(-1 * 1px);
            grid-column: 1/2;
            grid-row: 1/2;
        }

input.checkbox {
    cursor: pointer;
    grid-column: 1/2;
    grid-row: 1/2;
    touch-action: manipulation;
    height: 24px;
    width: 24px;
    opacity: 0;
    cursor: pointer;
    margin-left: calc(-1 * 2px);
    margin-top: calc(-1 * 2px);
}