body {
    font-family: "Work Sans", "Open Sans";
    background: transparent;
    color: #262B26;
    background-image: url("../img/background_1.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    margin: 0;
    padding: 3rem 17rem;
    overflow: auto;

    /* color wheel */
    --black: #000000;
    --blueDark: #002790;
    --blueMain: #010fb0;
    --blueNeon: #0887ff;
    --blueSoft: #7fa4ed;
    --bluePale: #beddff;
    --blueBright: #dee8f5;
    --blueDeep: #051531;
    --purple: #d4adfe;
    --greenMain: #24cc88;
    --greenLight: #76ff86;
    --greenBright: #45dea0;
    --greenPale: #cceedd;
    --redDark: #c43f3f;
    --redMain: #ff3f3f;
    --redBright: #ff7272;
    --redPale: #f5e1e1;
    --orangeLight: #ffd974;
    --orangeBright: #ffb47e;
    --orangeDark: darkOrange;
    --yellowLight: #fffee7;
    --shark: #262b30;
    --grayCharcoal: #676D75;
    --grayDark: #3c444d;
    --grayLight: #d4d9db;
    --grayBright: #f2f2f6;
    --white: #fff;
    --avocadoInside: #9caf88;
    --avocadoOutside: #001e15cf;

    /* theme color names */
    --active: var(--bluePale);
    --activeEmphasized: var(--blueSoft);
    --alertSuccess: var(--greenLight);
    --background: var(--grayBright);
    --cancel: var(--grayBright);
    --cardBorder: var(--grayLight);
    --cardCorrect: var(--greenPale);
    --cardIncorrect: var(--redPale);
    --degree: var(--bluePale);
    --delete: var(--redDark);
    --dynamicHover: var(--shark);
    --highlight: var(--yellowLight);
    --initial: var(--grayBright);
    --message: var(--greenMain);
    --nav: var(--blueDeep);
    --negative: var(--redMain);
    --negativeQuiet: var(--redBright);
    --neutral: var(--grayLight);
    --outline: var(--blueNeon);
    --pending: var(--orangeBright);
    --positive: var(--greenMain);
    --positiveQuiet: var(--greenBright);
    --primary: var(--blueMain);
    --primaryDisabled: var(--blueSoft);
    --primaryHover: var(--blueNeon);
    --quiet: var(--blueBright);
    --secondary: var(--white);
    --selected: var(--blueDark);
    --sent: var(--blueMain);
    --shadows-hover: rgba(0, 0, 0, 0.5);
    --spinnerPrimary: var(--blueMain);
    --spinnerSecondary: var(--blueNeon);
    --submitted: var(--purple);
    --subtitle: var(--grayDark);
    --text: var(--shark);
    --textButton: var(--white);
    --textDisabled: var(--grayCharcoal);
    --textHover: var(--blueNeon);
    --textInverted: var(--white);
    --textPlaceholder: var(--grayDark);
    --tooltip: var(--grayDark);
    --transparent: transparent;
    --warning: var(--orangeLight);
}

.pf-v5-c-login {
}

.pf-v5-c-login__container {
    display: grid;
    justify-items: center;
    align-content: center;
    margin: 0;
    padding: 0;
    grid-gap: 0;
    max-width: 100%;
}

.bb-login-pf-page-header {
    height: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}

.pf-v5-c-login__main {
    margin: 0px;
    background: var(--white);
    border-radius: 10px;
    padding: 3rem 10rem;
    box-sizing: border-box;
    box-shadow: 0px 1px 3px 0px var(--shadows-hover);
}

.pf-v5-c-login__main-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0rem;
    margin: 0px;
    padding: 0px;
    text-align: center;
    margin-bottom: 3rem;
    font-family: "Work Sans", "Open Sans";
    font-size: 1.25rem;
    font-weight: 600;
}

.pf-v5-c-title.pf-m-3xl {
    background: no-repeat center center url("../img/BloomBoard-Full-Logo.svg");
    background-size: contain;
    height: 3rem;
    margin-bottom: 1.5rem;
}

.pf-v5-c-subtitle.pf-m-lg {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.bb-login-subtitle {
    font-size: 1rem;
    font-weight: normal;
}

.pf-v5-c-login__main-body {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.pf-v5-c-form {
    display: grid;
    min-width: 25vw;
    grid-gap: 0.25rem;
}

.pf-v5-c-form__group {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0.3rem;
    margin: 0px 0px 1rem;
    padding: 0px;
}

.pf-v5-c-input-group {
    display: grid;
    grid-template-columns: 1fr 0px;
}

.pf-v5-c-form-control:before, .pf-v5-c-form-control:after {
  border: none;
}

.pf-v5-c-form__label-text {
    font-weight: 500;
    font-size: 1rem;
}

button.pf-v5-c-button.pf-m-control {
    background: transparent;
    cursor: pointer;
    display: inline;
    position: relative;
    height: 25px;
    width: 25px;
    left: -56px;
    top: 10px;
    border: none;
    outline: none;
}

.fa-eye,
.fa-eye-slash {
    display: block;
    height: 25px;
    width: 25px;
    transition: all 200ms;
    mask-size: cover;
    background: var(--text);
}

button.pf-v5-c-button.pf-m-control:hover .fa,
button.pf-v5-c-button.pf-m-control:focus .fa,
button.pf-v5-c-button.pf-m-control:focus-within .fa,
button.pf-v5-c-button.pf-m-control:focus-visible  .fa {
    background: var(--primaryHover);
}

.fa-eye {
    mask: url('../img/EyeOpen.svg');
}

.fa-eye-slash {
    mask: url('../img/EyeClose.svg');
}

.pf-v5-c-button.pf-m-control:after {
    border: none;
}

.bb-login-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    margin-top: -1rem;
}

#kc-form-options {
    justify-self: start;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover,
a:active,
a:focus,
a:focus-within,
a:focus-visible {
    text-decoration: underline;
    color: var(--primaryHover);
    outline: none;
}

.bb-forgotPassword-area {
    justify-self: end;
}

#rememberMe {
    vertical-align: middle;
    margin-top: -2px;
    cursor: pointer;
}

#bb-forgotPassword {
    font-size: 1rem;
    font-weight: normal;
    height: 0.875rem;
    letter-spacing: -0.5px;
}


.bb-sign-in-area {
    margin-top: 2rem;
}

.pf-v5-c-login__main-footer-band {
    border: none;
    padding: 0;
}

.pf-v5-c-login__main-footer-band-item {
    color: rgb(102, 102, 102);
    font-size: 1rem;
    letter-spacing: 0px;
    text-align: center;
}

#kc-terms-text {
    overflow-wrap: break-word;
    overflow: auto;
}
input[type="checkbox"] {
    background: black;
    border-radius: 5px;
    border: 1px solid rgb(151, 151, 151);
    height: 1rem;
    width: 1rem;
}

input[type="submit"] {
    background: var(--primary);
    border-radius: 5px;
    border: 1.5px solid var(--transparent);
    box-sizing: border-box;
    color: var(--textButton);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1rem;
    margin: 0;
    padding: 0.5rem 1rem;
    user-select: none;
    width: 100%;
}

input[type="submit"]:active,
input[type="submit"]:focus,
input[type="submit"]:focus-within,
input[type="submit"]:hover {
    outline: none;
    color: var(--textButton);
    background: var(--primaryHover);
    border: 1.5px solid var(--primaryHover);
    box-shadow: 0px 1px 3px 0px var(--shadows-hover);
}

input.pf-v5-c-button[disabled],
input.pf-v5-c-button[disabled]:active,
input.pf-v5-c-button[disabled]:focus,
input.pf-v5-c-button[disabled]:focus-within,
input.pf-v5-c-button[disabled]:hover {
    color: var(--primaryDisabled);
    cursor: not-allowed;
}

input[type="password"],
input[type="text"] {
    background: var(--background) !important;
    border-radius: 5px;
    border: 1.5px solid transparent;
    box-sizing: border-box;
    color: var(--text) !important;
    font-family: "Work Sans", "Open Sans" !important;
    font-size: 1rem !important;
    font-weight: normal;
    letter-spacing: -0.16px;
    line-height: 1.5rem;
    outline: none;
    padding: 0.5rem;
    padding-inline: 1rem;
    text-rendering: geometricprecision;
    width: 100%;
    -webkit-text-fill-color: var(--text) !important;
}

input[type="password"]:active,
input[type="password"]:focus-within,
input[type="password"]:focus,
input[type="password"]:hover,
input[type="text"]:active,
input[type="text"]:focus-within,
input[type="text"]:focus,
input[type="text"]:hover {
    border: 1.5px solid var(--primaryHover);
}

/* Forgot Password Page */
#kc-info-wrapper {
      max-width: 100%;
}

.bb-help-text {
    font-size: 0.875rem;
}

@media (max-height: 600px) {
    body {
        padding: 3rem;
    }
    .pf-v5-c-login__main {
        padding: 2rem;
        width: 100%;
    }
}

@media (max-width: 1375px) {
    body {
        padding: 3rem 15rem;
    }
}

@media (max-width: 1250px) {
    body {
        padding: 3rem 12rem;
    }
}

@media (max-width: 1100px) {
    body {
        padding: 3rem 10rem;
    }
    .pf-v5-c-login__main {
        padding: 3rem 5rem;
    }
}

@media (max-width: 850px) {
    body {
        padding: 3rem 5rem;
    }
    .pf-v5-c-login__main {
        padding: 3rem;
    }
}

@media (max-width: 600px) {
    body {
        padding: 2rem;
    }
    .pf-v5-c-login__main {
        padding: 2rem;
        width: 100%;
    }
    .pf-v5-c-form__group.login-pf-settings {
        margin: 0;
    }
    .bb-login-options {
        grid-template-columns: 1fr;
        grid-gap: 0.5rem;
    }
    .bb-login-options > * {
        justify-self: start;
    }
    #kc-info-wrapper {
        max-width: 100%;
    }
    .form-actions {
        padding-bottom: 1rem;
    }
}

/* reset password back to login */
.bb-add-top-padding {
    padding-top: 1rem;
}

/* Registration Page */

.bb-error-text {
    font-size: 0.875rem;
    color: var(--negative);
}

/* Terms of Use Page */
.bb-terms-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

input.pf-v5-c-button[name=cancel],
.bb-cancel-button {
    background: var(--transparent);
    border: 1.5px solid var(--delete);
    border-radius: 5px;
    color: var(--delete);
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

input.pf-v5-c-button[name=cancel]:hover,
input.pf-v5-c-button[name=cancel]:active,
input.pf-v5-c-button[name=cancel]:focus,
input.pf-v5-c-button[name=cancel]:focus-within,
.bb-cancel-button:hover,
.bb-cancel-button:active,
.bb-cancel-button:focus,
.bb-cancel-button:focus-within {
    cursor: pointer;
    background: var(--trasparent);
    border: 1.5px solid var(--redMain);
    boxShadow: none,
    color: var(--redMain);
}

.bb-update-password-button-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    direction: rtl;
}