:root {
    --primary-purple: #723287;
    --primary-dark: #58126F;
    --light-grey: #CFD8E1;
    --error-text: #cc2159;
    --error-bg: #FFE8EF;
    --primary-gray: #515565;
    --bg-gray: #FAFAFA;
    --neutral-grey-color: #FBF9FD;
}

body {
    font-size: 16px;
    line-height: 1.66666667;
    color: #363636;
    background-color: #fff;
}

.cs-body {
    margin: 0;
    font-family: Barlow, "Open Sans", Helvetica, Arial, sans-serif;
}

.cs-app {
    height: 100vh;
    /* This is the main grid with footer at the bottom */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'header'
        'main'
        'footer';

    /* This is the bit in between - the main display area */
    >.cs-form {
        grid-area: main;
        overflow: auto;
        padding: 15px 5px 10px 5px;
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 20px;
        margin-bottom: auto;
    }

    /* Keycloak puts a header, with the realm, hide that */
    >#kc-header {
        display: none;
        grid-area: header;
    }

    >footer {
        grid-area: footer;
        background-color: var(--bg-gray);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        height: 77.5px;

        >a {
            font-size: 14px;
            color: var(--primary-gray);
        }

    }
}


img#logo {
    display: block;
    width: 298px;
    margin-left: auto;
    margin-right: auto;
}

img#sent-check {
    display: block;
    width: 64px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* This is the "Forgot Your Password" message etc... */
#kc-page-title {
    color: var(--primary-purple);
    font-weight: 600;
    font-size: 32px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.1;
}

/* This is the little help text, moved to the top */
#cs-email-instructions {
    color: var(--primary-gray);
    font-size: 16px;
    font-weight: 400;
}


/* Label class for forms, used for "Email" label */
.cs-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-purple);
    text-align: left;
    margin-top: .2rem;
}

/* Input class for forms eg email form */
.cs-input {
    width: 100%;
    min-height:44px;
    padding: 8px 10px;
    margin: 3px 2px 10px 0;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--light-grey);
    outline: none;
    font-size: 16px;
}

.cs-input-fixed {
    font-family: "Roboto Mono", sans-serif;
    font-weight: bold;
    min-width: 500px;
}

.cs-button {
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-size: 18px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.cs-button-inline {
    margin-top: 0.5rem;
    margin-bottom: 0rem;
}

.cs-button-primary {
    background-color: var(--primary-purple);
    color: white;
    font-weight: 700;
}

.cs-button-primary:hover {
    background-color: var(--primary-dark);
}

.cs-button-primary:disabled {
    background-color: #A98FB4;
}


.cs-button-block {
    width: 100%;
}

.cs-button svg {
    width: 0.9em;
    height: 0.9em;
    fill: #333;
}


.cs-input-error {
    color: var(--error-text);
    background-color: var(--error-bg);
    padding: 2px;
    width: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
    text-align: center;
}

.cs-input-checkbox {
    accent-color: var(--primary-purple)
}

.cs-reset-header {
    display: flex;
    flex-direction: column;

    >img {
        width: 64px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        margin-bottom: 20px;
    }

}

.cs-reset-instructions {
    color: var(--primary-gray);
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
    text-align: center;
}


.cs-input-group {
    position: relative;

    >button {
        position: absolute;
        right: 20px;
        top: 0;
        height: 40px;
        margin-top: 5px;
        z-index: 2;
        background-color: transparent;
        width: 10px;
        border: none;
        font-size: 15px;
    }

}

.alert {
    border-radius: 0.5rem;
    color: oklch(21% .006 285.885);
    background-color: oklch(98% 0 0);
    text-align: start;
    border: 1px solid oklch(98% 0 0);
    place-items: center start;
    gap: 0;
    padding-block: .75rem;
    padding-inline: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    display: grid;

    & ul {
        list-style: disc;
        margin-top: 0;
        margin-left: 1rem;
    }

    & p {
        display: flex;
        margin-bottom: 0;
    }

    & svg {
        width: 24px;
        height: 24px;
        stroke: rgb(0, 186, 254);
        margin-right: .2rem;
    }
}

.inactiveField {
    background-color: var(--neutral-grey-color);
}