:root {
    --pf-global--primary-color--100: var(--thi-sys-color-primary-700);
    --pf-global--secondary-color--100: var(--thi-sys-color-secondary-400);
    --pf-global--palette--white: var(--thi-sys-color-basic-white);
    --pf-global--FontSize--xl: 22px;
    --pf-global--FontSize--lg: 19px;
    --pf-global--FontSize--md: 16px;
    --pf-global--FontSize--sm: 14px;
    --pf-global--FontSize--xs: 12px;
}
.pf-c-button {
    --pf-c-button--m-primary--Color: var(--thi-sys-color-primary-700);
    --pf-c-button--m-primary--BackgroundColor: var(--thi-sys-color-secondary-400);
    --pf-c-button--m-primary--hover--Color: var(--thi-sys-color-primary-700);
    --pf-c-button--m-primary--hover--BackgroundColor: #81C7F1;
    --pf-c-button--m-primary--focus--Color: var(--thi-sys-color-primary-700);
    --pf-c-button--m-primary--focus--BackgroundColor: #81C7F1;

    --pf-c-button--m-plain--disabled--Color: var(--thi-sys-color-neutral-400);
    --pf-c-button--m-plain--disabled--BackgroundColor: var(--thi-sys-color-neutral-200);
    --pf-c-button--m-control--disabled--BackgroundColor: var(--thi-sys-color-neutral-200);

    font-weight: 300;
}
.pf-c-button:focus {
    border: 4px solid var(--thi-sys-color-warning-600);
    color: var(--thi-sys-color-basic-white);
    background: var(--thi-sys-color-primary-700);
}
.pf-c-form-control {
    --pf-c-form-control--BackgroundColor: #F1F5F9;
}
.pf-c-form-control:hover, .pf-c-form-control:focus {
    background-color: #E3ECF3;
}
.required {
    --pf-global--danger-color--200: var(--thi-sys-color-error-700);
}

body {
    font-size: var(--pf-global--FontSize--md);
}
/*phone*/
@media (max-width: 767px) {
    body {
        font-size: var(--pf-global--FontSize--sm);
    }
}


.thieme-body {
    font-family: var(--thieme-argo),Roboto,sans-serif !important;
    color: var(--pf-global--primary-color--100); /* primary-700 */
    display: flex;
    flex-direction: row;
}

.thieme-link {
    color: var(--pf-global--primary-color--100); /* primary-700 */
    font-weight: bold;
    font-size: var(--thi-sys-typescale-link-xs-bold);
    text-decoration: underline;
}

.thieme-separator {
    font-weight: lighter;
}

#thiemeTriColore {
    width: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#thiemeTriColore * {
    width: 16px;
}
#thiemeTriColore :first-child {
    height: 22%;
    background: var(--pf-global--primary-color--100);
}
#thiemeTriColore :nth-child(2) {
    height: 34%;
    background: var(--pf-global--secondary-color--100);
}
#thiemeTriColore :nth-child(3) {
    height: 44%;
    background: var(--pf-global--palette--white);
}
/*phone*/
@media (max-width: 767px) {
    #thiemeTriColore {
        width: 12px;
    }
    #thiemeTriColore * {
        width: 12px;
    }
}

.thieme-form-wrapper {
    width: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.thieme-kc-header {
    background: var(--thi-sys-color-neutral-50);
    height: 128px;
    display: flex;
    justify-content: space-between;
}
.thieme-logo-wrapper {
    display: flex;
}
.thieme-logo {
    height: 48px;
    width: 200px;
    margin: auto 36px;
}
.thieme-header-options {
    height: 100%;
    margin: auto 36px;
    display: flex;
    justify-content: end;
}
.thieme-header-options > * {
    margin: auto 0;
}
.thieme-header-options > #kc-locale {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
}
/*phone*/
@media (max-width: 767px) {
    .thieme-form-wrapper {
        width: calc(100% - 12px);
    }
    .thieme-kc-header {
        height: 60px;
    }
    .thieme-logo {
        background-size: auto 36px;
        height: 36px;
        margin: auto 12px;
    }
    .thieme-header-options {
        height: 100%;
        margin: auto 12px;
        display: flex;
        justify-content: end;
    }
}

.thieme-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 11px;
    font-size: var(--thi-sys-typescale-text-fontsize-s);
    margin-bottom: var(--spacing-2);
}
.thieme-footer a {
    text-decoration: none;
}
/* small phone */
@media (max-width: 410px) {
    .thieme-footer {
        font-size: var(--thi-sys-typescale-navigation-fontsize-s);
    }
}

.thieme-card-pf {
    margin: 0 auto;
    padding: 40px 48px;
    max-width: calc(min(100% - 24px, 500px));
    background: var(--pf-global--palette--white);
    border-radius: 16px;
}
.form-group .btn-lg {
    font-size: var(--pf-global--FontSize--lg);
    line-height: 24px;
}
/*phone*/
@media (max-width: 767px) {
    .thieme-card-pf {
        margin: 0 auto;
        padding: 32px 24px;
    }
    .form-group .btn-lg {
        font-size: var(--pf-global--FontSize--md);
        line-height: 24px;
    }
}

#kc-page-title {
    text-align: left;
}

h1 {
    font-size: var(--thi-sys-typescale-heading-fontsize-m) !important;
    font-weight: 500;
}

/* Button overrides */
.btn-group-lg > .btn, .btn-lg {
    padding: 12px 20px;
    border-radius: 8px;
}

/* Input overrides */
input:autofill, :-webkit-autofill, :-moz-autofill, :-moz-autofill-preview {
    filter: none;
    background-image: unset;
}
/* see https://github.com/twbs/bootstrap/issues/21323 */
input:required {
    box-shadow: none;
    filter: none;
    background-image: unset;
}
:not(output):-moz-ui-invalid {
    box-shadow: none;
}
:not(output):-moz-ui-invalid:-moz-focusring {
    box-shadow: none;
}
input {
    filter:none; /* u need this for firefox */
    background-image: unset;
    border-color: #000000;
    background-color: var(--pf-c-form-control--BackgroundColor);
}
input:focus {
    border: none #000000;
}

.form-group {
    filter:none; /* u need this for firefox */
    border-color: var(--thi-sys-color-neutral-600);
}
.form-group:focus {
    border-color: var(--thi-sys-color-neutral-400);
}
/* default style for unwrapped and therefore unstyled inputs */
.form-group > div:not(.form-group-input) > input:not(input[type=button], input[type=submit]) {
    background: var(--thi-sys-color-neutral-100) !important;
}
.form-group-input {
    position: relative;
    border-radius: 4px 4px 0 0;
}
.form-group-input > input {
    border-bottom: 1px solid;
    border-color: #5286B6;
}
.form-group-input > input[aria-invalid="true"] {
    border-bottom: 2px solid !important;
    border-color: var(--thi-sys-color-error-700) !important;
}
.form-group .pf-c-form__label-text[aria-invalid="true"] {
    color: var(--thi-sys-color-error-700);
}
.form-group-info {
    margin-top: -10px;
    margin-bottom: 25px;
    font-size: var(--thi-sys-typescale-text-fontsize-xs);
    font-weight: 300;
}
.thieme-info {
    font-size: var(--thi-sys-typescale-text-fontsize-xs);
    font-weight: 300;
    margin-top: 25px;
    margin-bottom: 0;
}
.form-group-info > .pf-m-error {
    display: flex;
    gap: 4px;
    margin-left: 12px;
}
.form-group-info > .pf-m-error:before {
    content: "";
    display: inline-block;
    /* Error Icon */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23B50015' d='M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM11.25 7.25C11.25 6.8355 11.5855 6.5 12 6.5C12.4145 6.5 12.75 6.8355 12.75 7.25V13.25C12.75 13.6645 12.4145 14 12 14C11.5855 14 11.25 13.6645 11.25 13.25V7.25ZM12 17.5C11.4475 17.5 11 17.0525 11 16.5C11 15.9475 11.4475 15.5 12 15.5C12.5525 15.5 13 15.9475 13 16.5C13 17.0525 12.5525 17.5 12 17.5Z'/%3E%3C/svg%3E");
    background-size: 16px;
    height: 16px;
    width: 16px;
    margin-top: 2px;
    background-origin: content-box;
    background-repeat: no-repeat;
}
.pf-c-form__label-text {
    background: #fff;
    padding: 0 var(--spacing-1);
    color: var(--thi-sys-color-neutral-600);
    font-size: var(--thi-sys-typescale-text-fontsize-xs);
}
.form-group > div {
    padding-left: 0;
    padding-right: 0;
}

.form-horizontal, .form-group {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.pf-c-form-control {
    font-weight: 400;
    font-size: 1rem;
    height: 1.4375em;
    padding: 8.5px 14px !important;
    box-sizing: content-box;
    width: calc(100% - 28px);
    border-radius: 4px 4px 0 0;
    border: none;
}
.pf-c-form-control[aria-invalid="true"] {
    background-image: unset;
}

/* Alert overrides */
.pf-c-alert {
    margin-bottom: var(--spacing-6);
    border: none;
    border-radius: 4px;
}
.pf-c-alert__icon {
    align-items: center;
}

.fa-exclamation-circle::before {
    content: "";
    /* Error Icon */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23B50015' d='M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM11.25 7.25C11.25 6.8355 11.5855 6.5 12 6.5C12.4145 6.5 12.75 6.8355 12.75 7.25V13.25C12.75 13.6645 12.4145 14 12 14C11.5855 14 11.25 13.6645 11.25 13.25V7.25ZM12 17.5C11.4475 17.5 11 17.0525 11 16.5C11 15.9475 11.4475 15.5 12 15.5C12.5525 15.5 13 15.9475 13 16.5C13 17.0525 12.5525 17.5 12 17.5Z'/%3E%3C/svg%3E");display: inline-block;
    background-size: 16px;
    height: 16px;
    width: 16px;
}

/* Remove Eye from password fields from Edge */
/* see https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control */
::-ms-reveal {
    display: none;
}

.password-revealable {
    padding-right: 48px !important;
    width: calc(100% - 64px);
}

.thieme-password-policy-container {
    position: relative;
    margin-top: var(--spacing-4);
    background: var(--thi-sys-color-primary-50);
    font-size: var(--thi-sys-typescale-navigation-fontsize-s);
    width: fit-content;
    padding: 10px;
}
.thieme-password-policy-container:after {
    bottom: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: 8px solid transparent;
    border-bottom-color: #F1F5F9;
    margin-left: -8px;
}
.thieme-password-policy-title {
    font-weight: 700;
    margin-bottom: var(--spacing-2);
}
.thieme-password-policy {
    font-weight: 500;
    margin-left: var(--spacing-1);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.thieme-password-policy-pass-info {
    height: 16px;
    width: 16px;
}
.thieme-password-policy-not-passed {
    color: var(--thi-sys-color-error-600);
}
.thieme-password-policy-passed {
    color: var(--thi-sys-color-primary-700);
}