@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
    --jitbase-navy: #001b44;
    --jitbase-navy-hover: #002a66;
    --jitbase-gray: #7f8da1;
    --jitbase-muted: #72767b;
    --jitbase-page-bg: #ffffff;
    --keycloak-logo-url: url('../img/jitbase-logo.svg');
    --keycloak-logo-height: 150px;
    --keycloak-logo-width: 300px;
    --keycloak-card-top-color: transparent;
    --pf-v5-global--FontFamily--sans-serif: "Inter", sans-serif;
    --pf-v5-global--FontFamily--heading--sans-serif: "Inter", sans-serif;
    --pf-v5-global--FontFamily--text: "Inter", sans-serif;
    --pf-v5-global--primary-color--100: var(--jitbase-navy);
    --pf-v5-global--primary-color--200: var(--jitbase-navy-hover);
    --pf-v5-global--active-color--100: var(--jitbase-navy);
    --pf-v5-global--focus-grid-color: var(--jitbase-navy);
}

html,
body,
.login-pf,
#keycloak-bg {
    font-family: "Inter", sans-serif;
}

.login-pf {
    background: none;
}

.login-pf body,
#keycloak-bg {
    background: var(--jitbase-page-bg);
    height: 100%;
}

.pf-v5-c-login {
    --pf-v5-c-login--PaddingTop: 0;
    padding-top: 4rem;
    align-items: flex-start;
}

.pf-v5-c-login__container {
    grid-template-columns: 34rem;
    grid-template-areas: "header" "main";
}

#kc-header.pf-v5-c-login__header,
.pf-v5-c-login__header {
    --pf-v5-c-login__header--MarginBottom: 2rem;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 2rem;
}

.pf-v5-c-login__main {
    border: 1px solid var(--jitbase-gray);
    border-radius: 4px;
    box-shadow: none;
}

.pf-v5-c-login__main-header {
    border-top: none;
}

#kc-header-wrapper,
.pf-v5-c-login__header .pf-v5-c-brand {
    background-image: var(--keycloak-logo-url);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: var(--keycloak-logo-height);
    width: var(--keycloak-logo-width);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    color: transparent !important;
    text-indent: -9999px;
    overflow: hidden;
    font-size: 0;
    letter-spacing: 0;
    text-transform: none;
}

div.kc-logo-text {
    background-image: var(--keycloak-logo-url);
    height: var(--keycloak-logo-height);
    width: var(--keycloak-logo-width);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 auto;
}

div.kc-logo-text span {
    display: none;
}

h1#kc-page-title {
    color: var(--jitbase-navy);
    text-align: center;
}

.login-pf a {
    color: var(--jitbase-gray);
}

.login-pf a:hover {
    color: var(--jitbase-navy);
}

.pf-v5-c-form-control {
    --pf-v5-c-form-control--BorderColor: var(--jitbase-gray);
    --pf-v5-c-form-control--before--BorderBottomColor: var(--jitbase-gray);
    --pf-v5-c-form-control--after--BorderBottomColor: var(--jitbase-gray);
    --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--jitbase-gray);
    --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
    --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within {
    --pf-v5-c-form-control--after--BorderBottomColor: transparent;
    --pf-v5-c-form-control--after--BorderBottomWidth: 0;
}

.pf-v5-c-form-control:focus-within::after {
    border-bottom-width: 0;
    border-bottom-color: transparent;
}

.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control input:focus-visible,
.pf-v5-c-form-control textarea:focus,
.pf-v5-c-form-control textarea:focus-visible,
.pf-v5-c-form-control select:focus,
.pf-v5-c-form-control select:focus-visible {
    outline: 2px solid var(--jitbase-navy);
    outline-offset: 0;
    border-color: var(--jitbase-navy);
    box-shadow: 0 0 0 1px var(--jitbase-navy);
}

.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--Color: #ffffff;
    --pf-v5-c-button--m-primary--BackgroundColor: var(--jitbase-navy);
    --pf-v5-c-button--m-primary--after--BorderColor: var(--jitbase-navy);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--jitbase-navy-hover);
    --pf-v5-c-button--m-primary--hover--after--BorderColor: var(--jitbase-navy-hover);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--jitbase-navy-hover);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--jitbase-navy-hover);
    color: #ffffff;
    background-color: var(--jitbase-navy);
    border-color: var(--jitbase-navy);
    border-radius: 4px;
}

.pf-v5-c-button.pf-m-control {
    border-color: var(--jitbase-gray);
}

.pf-v5-c-check__input:checked,
input[type="checkbox"]:checked {
    accent-color: var(--jitbase-navy);
}

#kc-registration-terms-text {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 5px;
}

.register-card {
    display: flex;
    flex-direction: column;
}

.register-introduction {
    border-bottom: 1px solid var(--jitbase-gray);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .login-pf body,
    #keycloak-bg {
        background: var(--jitbase-page-bg);
    }

    .pf-v5-c-login__main {
        margin-left: 6px;
        margin-right: 6px;
    }

    #kc-header-wrapper,
    .pf-v5-c-login__header .pf-v5-c-brand {
        max-width: 100%;
    }
}