@keyframes test-autofill {
    from {
        font-size: var(--font-size-small);
    }
    to {
        font-size: var(--font-size-small);
        border:2px solid var(--input-border-color);
    }
}

form {

    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    border-radius: 8px;
    color: var(--color-text);
    /* min-width: 500px;*/
    max-width: 500px;

    s-card {
        padding: 1rem;
    }

    .forgot-password {
        margin-top: .5rem;
        text-align: right;
        font-size: var(--font-size-small);
        color: var(--color-blue-dark);
    }



    s-inputs {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        overflow: hidden;


        .s-checkbox {
            display: flex;
            align-items: center;
            position: relative;
            cursor: pointer;
            user-select: none;

            input[type=checkbox] {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }

            input[type=checkbox]:focus~span.checkmark {
                border: 1px solid var(--input-border-color);
            }

            span.checkmark {
                box-sizing: border-box;
                font-family: icons;
                position: relative;
                height: 1.2rem;
                width: 1.2rem;
                background-color: var(--color-blue-faded);
                border-radius: 8px;
                border: 0px solid var(--input-border-color);
                display: flex;
                align-items: center;
                justify-content: center;

                &:after {
                    content: '\e828';
                    font-size: var(--font-size-xsmall);
                    position: absolute;
                    display: none;
                }
            }

            input[type=checkbox]:checked~span.checkmark {
                background-color: var(--color-blue);
                color: var(--color-white);

                &:after {
                    display: block;
                }
            }

            .label {
                margin-left: 0.5rem;
                font-size: var(--font-size-small);
                color: var(--color-text);
            }
        }

        input {
            display: flex;
            box-sizing: border-box;
            position: relative;
            color: var(--color-text);
            padding: 0rem 0.75rem;
            border-radius: 8px;
            min-height: 3.5rem;
            max-height: 3.5rem;
            border: 0px solid var(--input-border-color);
            background-color: var(--color-form-field);
            font-size: var(--font-size-small);

            &:focus {
                outline: 0px solid transparent;
                border: 1px solid var(--input-border-color);
            }

            &:-webkit-autofill {
                box-shadow: 0 0 0px 1000px var(--color-form-field) inset;
                -webkit-text-fill-color: var(--color-text);
                font-size: var(--font-size-small);
                animation-name: test-autofill;
                transition: background-color 5s ease-in-out 0s;
            }
        }
    }

    h2 {
        margin-top: 0;
        text-align: center;

        &.icon {
            font-family: icons;
        }
    }

    p {
        text-align: center;
    }

    p.error-text {
        font-size: var(--font-small);
    }

    p.error-info {
        font-size: var(--font-small);
    }

    .buttons {
        margin-top: .75rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0;

    }
}



div.message {

    position: relative;
    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    margin-top: 0.5rem;
    margin-bottom: 0;
    color: var(--color-text);
    font-size: var(--font-size-small);

    padding: 0.5rem 1rem;
    background-color: var(--color-gold-lighter);
    border-radius: 8px;


    box-shadow: rgba(0, 0, 0, 0.418) 0px 2px 6px;

    opacity: 0;

    transition: opacity 0.5s ease-in-out;

    &.show {
        opacity: 1;
    }



}