.form {
    background-color: var(--tw-brilliantwhite);
    border: 1px solid var(--tw-black-10);
    border-top-left-radius: 2rem;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 0.25rem 0.25rem 1rem var(--tw-black-10);
    margin: 4rem auto 0 auto;
    padding: 0 2rem 4rem 2rem;
    width: 100%;
}

@media (min-width: 641px) {
    .form {
        width: 600px;
    }
}

.form h3 {
    padding: 0 1rem;
    text-align: left;
}

.form p.plain {
    padding: 0 1rem;
}

.form p.feedback {
    padding: 0 1rem;
}

.form-divider {
    margin-top: 3rem !important;
}

.form-box {
    position: relative;
}

.form-control-icon {
    left: 1rem;
    position: absolute;
    top: 1rem;
}

    .form-control-icon .icon {
        height: 1.25rem;
        width: 1.25rem;
    }

section .form-control-icon .icon {
    background-color: var(--tw-pink);
}

section.shine .form-control-icon .icon {
    background-color: var(--tw-green);
}

.form-control {
    border: 1px solid var(--tw-black-10);
    border-top-left-radius: 1rem;
    border-top-right-radius: 0.125rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    box-shadow: 0.25rem 0.25rem 1rem var(--tw-polishwhite) inset;
    color: var(--tw-black);
    font-size: 1.25rem;
    margin: 1rem 0 0 0;
    padding: 0.5rem 0.25rem 0.5rem 3rem;
}

    .form-control.first {
        margin-top: 3rem;
    }

    .form-control::placeholder {
        color: var(--tw-black-25);
    }

    .form-control:focus {
        border-color: var(--tw-black-50);
        color: var(--tw-pink);
    }

section.shine .form-control:focus {
    color: var(--tw-green);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0.5rem var(--tw-pink);
}

section.shine .btn:focus, section.shine .btn:active:focus, section.shine .btn-link.nav-link:focus, section.shine .form-control:focus, section.shine .form-check-input:focus {
    box-shadow: 0 0 0.5rem var(--tw-green);
}

.btn-bar {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 1.5rem 0 1rem 0;
    row-gap: 1rem;
}

.form .btn-bar {
    margin: 3rem 0 0 0;
}

section .btn-bar {
    margin: 4rem 0 0 0;
}

button.primary-button, button.secondary-button, button.regular-button, a.icon-only-button, a.popcard-button, a.primary-button, a.secondary-button, a.regular-button {
    border: none;
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 1rem;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button.primary-button, button.secondary-button, button.regular-button, a.popcard-button, a.primary-button, a.secondary-button, a.regular-button {
    border-top-left-radius: 2rem;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 0.5rem 0.5rem 1rem var(--tw-black-33);
    color: var(--tw-black-75);
    padding: 1rem 2rem;
    text-align: center;
}

a.icon-only-button .icon {
    height: 3.25rem;
    width: 3.25rem;
}

button.primary-button:hover, button.secondary-button:hover, button.regular-button:hover, a.popcard-button:hover, a.primary-button:hover, a.secondary-button:hover, a.regular-button:hover,
button.primary-button:focus, button.secondary-button:focus, button.regular-button:focus, a.popcard-button:focus, a.primary-button:focus, a.secondary-button:focus, a.regular-button:focus {
    box-shadow: 0.65rem 0.65rem 1.25rem var(--tw-black-25);
    outline: none;
    transform: scale(1.1);
}

a.icon-only-button:hover,
a.icon-only-button:focus {
    outline: none;
    transform: scale(1.2);
}

button.primary-button, a.primary-button {
    background-color: var(--tw-pink);
    color: var(--tw-brilliantwhite) !important;
}

button.secondary-button, a.secondary-button {
    background-color: var(--tw-green);
    color: var(--tw-brilliantwhite) !important;
}

button.regular-button, a.regular-button {
    background-color: var(--tw-brilliantwhite);
    color: var(--tw-black) !important;
}

a.popcard-button {
    background-color: var(--tw-brilliantwhite);
    color: var(--tw-green);
}

    button.primary-button .icon, button.secondary-button .icon, button.regular-button .icon, a.primary-button .icon, a.secondary-button .icon, a.regular-button .icon, a.popcard-button .icon {
        margin-right: 0.5rem;
    }

button.primary-button .icon, button.secondary-button .icon, a.primary-button .icon, a.secondary-button .icon {
    background-color: var(--tw-brilliantwhite);
}

button.regular-button .icon, a.regular-button .icon {
    background-color: var(--tw-black);
}

button.primary-button:disabled span.processing, button.secondary-button:disabled span.processing, button.regular-button:disabled span.processing {
    animation: spin-clockwise 10s linear infinite; /* 10s per rotation, smooth, repeats forever */
    display: inline-block;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg>');
}

a.popcard-button .icon {
    background-color: var(--tw-green);
}

button:disabled { /* buttons can only be disabled when part of a form */
    opacity: 0.5;
}

.btn-primary {
    background: linear-gradient(170deg, rgba(127, 24, 186, 0.75) 20%, rgba(133, 41, 186, 0.75) 60%, rgba(127, 24, 186, 0.75) 90%);
    border: none;
    color: var(--tw-white);
}

    .btn-primary:enabled:hover {
        background: linear-gradient(170deg, rgba(127, 24, 186, 1) 20%, rgba(133, 41, 186, 1) 60%, rgba(127, 24, 186, 1) 90%);
    }

button.btn-primary:disabled span.processing {
    animation: spin-clockwise 10s linear infinite; /* 5s per rotation, smooth, repeats forever */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg>');
    display: inline-block;
}

.btn-secondary {
}

    .btn-secondary:enabled:hover {
        background: var(--tw-black-10);
        border-color: var(--tw-black);
        border-style: solid;
        color: var(--tw-black);
    }

button.btn-secondary:disabled span.processing {
    animation: spin-clockwise 10s linear infinite; /* 5s per rotation, smooth, repeats forever */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg>');
    display: inline-block;
}

.btn-icon {
    margin: 0 0.5rem;
    opacity: 0.75;
}

    .btn-icon:hover {
        opacity: 1;
    }

    .btn-icon .bi {
        height: 2rem;
        width: 2rem;
    }

.validation-error {
    color: var(--tw-danger);
    font-size: 1rem;
    padding: 0.25rem 1rem 0 3rem;
}