:root {
    /* Colors */
    --efa-dark: #2B3980;
    --efa-white: #FFFFFF;
    --efa-black: #04071A;
    --efa-primary: #3375D4;
    --efa-primary-light: #ECF4FF;
    --efa-line: #CCCCCC;
    --efa-gray: #F7F8FA;
    --efa-dark-gray: #6c6e72;
    --border-31: #949494;
    --text-grau: #727272;
    --error: #DC3545;
    --error-bg: rgba(220, 53, 69, 0.10);
    --success: #00A645;
    --success-bg: #E5F6EC;

    /* Padding */
    --padding-sides-login-container: 140px;

    /* spacing */
    --spacing-extra-small: 8px;
    --spacing-small: 16px;
    --spacing-medium: 24px;
    --spacing-large: 32px;

    /* sizes */
    --size-small: 24px;
}

[hidden] {
    display: none !important;
}

.login-dpc body {
    background: var(--efa-white);
    font-family: 'Open Sans', sans-serif;
}

.login-pf-page {
    padding: 0;
}

.login-dpc .pf-c-button {
    border: 1px solid var(--efa-primary);
    border-radius: 26px;
    background-color: var(--efa-white);
    color: var(--efa-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    line-height: 110%;
    transition: all ease .15s;
    padding: 12px 24px;
    width: fit-content;
    margin: 0;
}

.login-dpc .pf-m-primary {
    border: 1px solid var(--efa-primary);
    background-color: var(--efa-primary);
    color: var(--efa-white);
}

.login-dpc .pf-c-button:hover {
    color: var(--efa-white);
    background-color: var(--efa-primary);
}

.login-dpc .pf-c-button::after {
    display: none;
}

.login-dpc .pf-c-button .kc-social-provider-name {
    top: 0;
}

h1 {
    font-size: 22px;
    font-weight: 500;
    color: var(--efa-black);
}

/* alerts */
.pf-c-alert.pf-m-danger {
    padding: 16px 24px;
    border-top: none;
    border-left: 4px solid var(--error);
    background-color: var(--error-bg);
}

.pf-c-alert.pf-m-danger .pf-c-alert__icon {
    display: none;
}

.pf-c-alert.pf-m-danger .pf-c-alert__title {
    color: var(--efa-black);
    font-size: 14px;
    font-weight: 400;
}

/* show error as feature */
.kc-error-feat .pf-c-alert.pf-m-danger {
    background-color: var(--success-bg);
    border-color: var(--success);
}

/* Header */
#kc-header {
    border-top: 6px solid var(--efa-dark);
    margin-bottom: 0;
    position: fixed;
    z-index: 3;
    background-color: var(--efa-white);
    width: 100%;
}

#kc-header::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(180deg, #f2f2f2 0%, rgba(242, 242, 242, 0) 100%);
}

#kc-header-wrapper {
    padding: 0 32px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 12px;
}

#kc-header-wrapper > p {
    color: var(--efa-black);
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.pipe-gray {
    color: var(--efa-line);
    font-size: 22px;
}

.kc-header-wrapper {
    background-color: var(--efa-white);
}

.container .kc-header-wrapper {
    background-color: var(--efa-gray);
}

.login-idp .kc-header-wrapper {
    background-color: transparent;
    text-align: center;
}

/* locale */
#kc-locale {
    position: absolute;
    top: 30px;
    right: 32px;
}

/* title */
.kc-title {
    font-size: 22px !important;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    padding: 32px 0 16px;
}

.kc-title--lg {
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 120%;
}

.kc-title--xl {
    font-size: 40px !important;
    font-weight: 600;
    line-height: 120%;
}

/* form */
.form-horizontal .form-group {
    margin-bottom: 40px;
}

/* Login fields */
.login-pf-page .card-pf {
    border: none;
    box-shadow: none;
    margin-left: 0;
    margin-right: 0;
    padding-top: 118px;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

/* login page */
.login .login-pf-page .card-pf {
    padding-top: 174px;
}

.login .login-pf-signup {
    margin-top: 72px;
    padding: 16px 0;
    background-color: var(--efa-gray);
}

.login-pf-page .card-pf .login-pf-header {
    margin: 0;
}

#kc-content-wrapper {
    display: flex;
    flex-direction: column;
    margin: 0;
}

#kc-form {
    background-color: var(--efa-white);
    padding-top: 40px;
}

.pf-c-form__label.pf-c-form__label-text {
    color: var(--efa-black);
    font-size: 15px;
    font-weight: 600;
    line-height: 125%;
    margin-bottom: 12px;
}

input[type=text].pf-c-form-control,
input[type=password].pf-c-form-control {
    height: 48px;
    border-radius: 2px;
    border: 1px solid var(--border-31);
    padding: 11px 16px 12px 16px;
    color: var(--efa-black);
    font-size: 16px;
    font-weight: 400;
}

input[type=text].pf-c-form-control[aria-invalid=true],
input[type=password].pf-c-form-control[aria-invalid=true] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.94004 21.465C3.65004 21.465 3.36004 21.395 3.10004 21.275C2.83004 21.145 2.59004 20.945 2.41004 20.715C2.23004 20.485 2.10004 20.205 2.04004 19.905C1.98004 19.615 1.99004 19.305 2.07004 19.015C2.11004 18.875 2.16004 18.735 2.22004 18.605L10.24 4.21495C10.42 3.91495 10.66 3.66495 10.95 3.48495C11.56 3.10495 12.38 3.10495 12.99 3.48495C13.28 3.66495 13.52 3.91495 13.69 4.20495L21.71 18.585C21.78 18.715 21.83 18.855 21.87 19.005C21.95 19.295 21.95 19.595 21.89 19.895C21.83 20.185 21.7 20.465 21.52 20.705C21.34 20.9349 21.1 21.135 20.83 21.2649C20.56 21.3949 20.26 21.465 19.97 21.465H3.94004ZM11.96 4.49495C11.84 4.49495 11.73 4.52495 11.63 4.59495C11.52 4.66495 11.43 4.75495 11.37 4.86495L3.37004 19.205C3.37004 19.205 3.34004 19.285 3.32004 19.3449C3.29004 19.445 3.29004 19.545 3.31004 19.645C3.33004 19.745 3.37004 19.8349 3.43004 19.9149C3.49004 19.9949 3.57004 20.0649 3.66004 20.1049C3.75004 20.145 3.85004 20.1649 3.95004 20.1649H19.97C20.07 20.1649 20.17 20.1449 20.26 20.0949C20.35 20.0549 20.43 19.985 20.49 19.905C20.55 19.825 20.59 19.735 20.61 19.635C20.63 19.535 20.63 19.4349 20.61 19.3349C20.6 19.285 20.58 19.235 20.56 19.185L12.55 4.85495C12.49 4.75495 12.4 4.66495 12.3 4.59495C12.2 4.53495 12.08 4.49495 11.96 4.49495ZM11.93 15.9449C11.74 15.9449 11.54 16.0049 11.38 16.1149C11.22 16.2249 11.09 16.3749 11.02 16.5549C10.95 16.7349 10.93 16.9349 10.96 17.1249C11 17.3149 11.09 17.4949 11.23 17.6249C11.37 17.7649 11.54 17.8549 11.73 17.8949C11.92 17.9349 12.12 17.9149 12.3 17.8349C12.48 17.7649 12.63 17.6349 12.74 17.4749C12.85 17.3149 12.91 17.1249 12.91 16.9249C12.91 16.6649 12.81 16.4149 12.62 16.2249C12.43 16.0349 12.18 15.9349 11.92 15.9349L11.93 15.9449ZM12.61 9.38498V13.975C12.61 14.345 12.32 14.635 11.95 14.635C11.58 14.635 11.29 14.335 11.29 13.975V9.38498C11.29 9.01498 11.58 8.72498 11.95 8.72498C12.32 8.72498 12.61 9.02498 12.61 9.38498Z' fill='%23DC3545'/%3E%3C/svg%3E");
    background-size: auto;
    border-color: var(--error);
}

.required {
    color: var(--efa-dark-gray);
}

#login-info.kc-accordion {
    padding: 0 32px 32px 32px;
}

.login-wrapper {
    border: 1px solid var(--border-31);
    padding: 0 16px;
}

#kc-form-login {
    padding-left: calc(var(--padding-sides-login-container) - 16px);
    padding-right: calc(var(--padding-sides-login-container) - 16px);
    padding-top: 24px;
}

#kc-form-login .kc-accordion {
    margin: 8px 0 33px 0;
}

#kc-form-login .kc-accordion__toggle {
    position: relative;
    left: -12px;
}

#kc-login {
    position: absolute;
    right: 0;
}

#support-accordion .kc-accordion__content {
    margin: 35px -90px 0 -90px;
    padding: 24px 24px 16px 24px;
    background-color: var(--efa-gray);
    width: calc(465px + 180px);
}

.subtitle {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 156% !important;
    color: var(--efa-dark-gray);
}

/* Identity Providers */
#kc-social-providers {
    padding-left: var(--padding-sides-login-container);
    padding-right: var(--padding-sides-login-container);
    background-color: var(--efa-gray);
}

#kc-social-providers > hr {
    display: none;
}

#kc-social-providers .kc-social-headline {
    margin-bottom: 6px;
}

.pf-c-login__main-footer-links.kc-social-links {
    margin-top: 0;
    padding-bottom: 32px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.pf-c-login__main-footer-links.kc-social-links > li {
    width: auto;
}

#kc-form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

input#kc-login {
    color: var(--efa-white);
    background-color: var(--efa-primary);
    border-color: var(--efa-primary);
}

input#kc-login:hover {
    color: var(--efa-primary);
    background-color: var(--efa-white);
}

/* OTP Header */
#kc-otp-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 71px;
}

#kc-otp-header > h1 {
    margin-top: 32px;
    margin-bottom: 21px;
    font-size: 40px;
}

#kc-otp-header > p.otp-header-text {
    font-size: 20px;
    font-weight: 400;
    color: var(--efa-black);
}

/* OTP Content */
#kc-otp-login-form {
    padding: 0 var(--padding-sides-login-container);
}

.otp-support-accordion-content {
    margin-right: 20px;
}

/* IDP Content */
#kc-idp-review-profile-form #kc-form-buttons {
    justify-content: flex-end;
}

.kc-form-group .pf-c-button:not(:last-child) {
       margin-right: var(--spacing-small);
}

#kc-idp-review-profile-form .subtitle {
    margin-top: 12px;
}

.login-idp .kc-info-wrapper {
    --component-width: 958px;
    margin-top: 48px;
    padding: 24px 0 72px 0;
    background-color: var(--efa-primary-light);
    position: relative;
    text-align: left;
}

@media (min-width: 1200px) {
    .login-idp .kc-info-wrapper {
        --component-width: 764px;
    }
}

.login-idp .kc-info-wrapper::before,
.login-idp .kc-info-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: calc((100vw - var(--component-width)) / 2);
    height: 100%;
    background: var(--efa-primary-light);
}

.login-idp .kc-info-wrapper::before {
    left: 0;
    transform: translateX(-100%);
}

.login-idp .kc-info-wrapper::after {
    right: 0;
    transform: translateX(100%);
}

.login-idp .kc-info-box {
    background-color: var(--efa-white);
    padding: 24px;
}

.kc-info-phone-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.kc-info-icon {
    width: var(--size-small);
    height: var(--size-small);
}

.kc-info-wrapper .kc-info-box .kc-info-phone {
    font-size: 18px;
    font-weight: 600;
    color: var(--efa-primary);
    margin-left: var(--spacing-extra-small);
}

.login-idp .kc-header-wrapper {
    padding-top: var(--spacing-large);
}

.login-idp .kc-header-wrapper .kc-title {
    padding-top: var(--spacing-medium);
}

.login-idp .login-pf-signup {
    margin-top: 78px;
}

/* custom accordion */
.login-accordion-toggle {
    background: none;
    border: 0;
    border-left: none;
    border-right: none;
    font-size: 22px;
    font-weight: 500;
    padding: 16px 0;
    line-height: normal;
    color: var(--efa-black);
    width: 100%;
    display: flex;
    gap: 12px;
    transition: all ease .15s;
}

.login-accordion-intro {
    padding: 0 34px 0 44px;
}

.login-accordion-content {
    position: relative;
}

#login-accordion.expanded .login-accordion-toggle:hover {
    color: var(--efa-black);
}

#login-accordion.expanded .login-accordion-toggle,
#login-accordion:not(.expanded) .login-accordion-toggle:hover {
    color: var(--efa-primary);
}

.login-accordion-toggle-icon {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='32' viewBox='0 0 33 32' fill='none'%3E%3Ccircle cx='16.5' cy='16' r='12.5' stroke='%23CCCCCC'/%3E%3Cpath d='M15.75 11H17.25V21H15.75V11Z' fill='%2304071A'/%3E%3Cpath d='M11.5 16.75V15.25H21.5V16.75H11.5Z' fill='%2304071A'/%3E%3C/svg%3E");
}

#login-accordion.expanded .login-accordion-toggle-icon {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='32' viewBox='0 0 33 32' fill='none'%3E%3Ccircle cx='16.5' cy='16' r='12.5' stroke='%23CCCCCC'/%3E%3Crect x='11.5' y='16.5' width='1.5' height='10' transform='rotate(-90 11.5 16.5)' fill='%2304071A'/%3E%3C/svg%3E");
}

#login-accordion .subtitle {
    position: absolute;
    bottom: -24px;
    left: -16px;
    transform: translate(0, 100%);
}

/* Support Accordion */
.support-accordion-content {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: 43px;
    padding: 24px 24px 16px 24px;
    background-color: var(--efa-gray);
    color: var(--efa-black);
    font-size: 16px;
}

.support-accordion-content:after {
    position: absolute;
    content: "";
    bottom: -48px;
    height: 1px;
    width: 1px;
}

.support-accordion-content p.small-text-gray {
    color: var(--text-grau);
    font-size: 14px;
    margin-top: 8px;
}

.support-content-tel {
    font-size: 18px;
    font-weight: 600;
    line-height: 156%;
    margin: 8px 0 32px 0;
}

.support-content-tel:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.88477 5.00912C6.62689 4.26701 7.85149 4.34325 8.49583 5.17168L10.2895 7.47787C10.6187 7.90108 10.735 8.45213 10.605 8.97227L10.0577 11.1613C9.99994 11.3924 10.0677 11.6369 10.2361 11.8054L12.6927 14.2619C12.8611 14.4304 13.1056 14.4981 13.3367 14.4403L15.5258 13.8931C16.0459 13.763 16.597 13.8793 17.0202 14.2085L19.3264 16.0022C20.1548 16.6466 20.231 17.8712 19.4889 18.6133L18.455 19.6472C17.7153 20.3869 16.6089 20.7117 15.5778 20.3492C13.0175 19.4491 10.6144 17.9755 8.56849 15.9296C6.5226 13.8837 5.04895 11.4805 4.14884 8.9203C3.78632 7.88917 4.11113 6.78277 4.85085 6.04305L5.88477 5.00912Z' stroke='%2304071A' stroke-width='1.3'/%3E%3C/svg%3E");
    margin-right: 8px;
    position: relative;
    top: 5px;
}

#support-accordion .accordion-toggle {
    border: none;
    background: none;
    color: var(--efa-black);
    font-size: 14px;
    display: flex;
    padding-left: 0;
}

#support-accordion .accordion-toggle:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4242 14.4242C12.1899 14.6586 11.81 14.6586 11.5757 14.4242L7.07571 9.92424C6.8414 9.68993 6.8414 9.31003 7.07571 9.07571C7.31003 8.8414 7.68992 8.8414 7.92424 9.07571L12 13.1514L16.0757 9.07571C16.31 8.8414 16.6899 8.8414 16.9242 9.07571C17.1586 9.31003 17.1586 9.68993 16.9242 9.92424L12.4242 14.4242Z' fill='%2304071A'/%3E%3C/svg%3E");
    display: block;
    transition: all ease .15s;
    height: 24px;
}

#support-accordion.expanded .accordion-toggle:before {
    transform: rotate(180deg);
}


/* spacer */
.mt-2 {
    margin-top: calc(var(--spacing-small) * 2) !important;
}

.mb-0-5 {
    margin-bottom: calc(var(--spacing-small) / 2) !important;
}

.mb-1 {
    margin-bottom: var(--spacing-small) !important;
}

.mb-2 {
    margin-bottom: calc(var(--spacing-small) * 2) !important;
}

.mb-3 {
    margin-bottom: calc(var(--spacing-small) * 3) !important;
}

.mb-4 {
    margin-bottom: 56px !important;
}

.ml-0-5 {
    margin-left: calc(var(--spacing-small) / 2) !important;
}

/* text */
.text {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 156% !important;
    color: var(--efa-black) !important;
    margin: 0;
}

.text p {
    color: inherit !important;
}

.text--sm {
    font-size: 14px !important;
    line-height: 140% !important;
    color: var(--efa-dark-gray) !important;
}

.text--lg {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 156% !important;
}

.text--xl {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 156% !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-bold {
    font-weight: 600 !important;
}

/* colors */
.bg-color-gray {
    background-color: var(--efa-gray);
}

.c-dark-gray {
    color: var(--efa-dark-gray);
}

/* layout */
.l-v-center {
    display: flex;
    align-items: center;
}