/* ------------------------------- */
/*          BASIC STYLES           */
/* ------------------------------- */

.sid__hidden {
    visibility: hidden;
}

.sid__display--none {
    display: none;
}

.sid__text-color--primary-dark {
    color: var(--colors--primary--dark);
}

.sid__text-color--primary-light {
    color: var(--colors--primary--light);
}

.sid__text-color--contrast-red {
    color: var(--colors--contrast--red);
}

.sid__text-color--contrast-blueish {
    color: var(--colors--contrast--blueish) !important;
}


/* ------------------------------- */
/*  CONFLICTING PATTERNFLY REMOVAL */
/* ------------------------------- */

html body {
    line-height: normal;

    font-family:
            system-ui,
            -apple-system,
            "Segoe UI",
            Roboto,
            "Helvetica Neue",
            "Noto Sans",
            "Liberation Sans",
            Arial,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol",
            "Noto Color Emoji";
}

html, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h3, h4,h5, h6 {
    margin: revert;
    padding: revert;
}

body {
    margin: 0;
    padding: 0;
}

a {
    /* Removes underline on hovered a-elements (e.g. on buttons wrapped by a-elements) */
    --pf-v5-global--link--TextDecoration--hover: none;
}

.sid__form-container, #sid__re-authentication {
    input:focus-visible, textarea:focus-visible, select:focus-visible {
        outline: inherit;
        border-color: inherit;
    }
}

.sid__form, #sid__re-authentication {
    /* Removes conflicting PatternFly styling on wrapping span and inheriting input */
    span {
        --pf-v5-c-form-control--before--BorderLeftWidth: 0;
        --pf-v5-c-form-control--before--BorderRightWidth: 0;
        --pf-v5-c-form-control--before--BorderBottomWidth: 0;
        --pf-v5-c-form-control--before--BorderTopWidth: 0;
        --pf-v5-c-form-control--after--BorderBottomWidth: 0;
        --pf-v5-c-form-control--hover--after--BorderBottomWidth: 0;
        --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
        --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: 0;
        --pf-v5-c-form-control--BackgroundColor: none;
    }

    /* Removes conflicting PatternFly styling on input field when invalid data was submitted */
    .pf-v5-c-form-control.pf-m-error {
        --pf-v5-c-form-control--after--BorderBottomWidth: 0;
    }
}

.sid__button {
    margin-block-end: 0;
    margin-block-start: 0;
}

.pf-v5-c-check[for="rememberMe"], .pf-v5-c-check[for="logout-sessions"] {
    input {
        transform: translate(0);
    }
}

/* ------------------------------- */
/*      CONTAINERS & WRAPPERS      */
/* ------------------------------- */

#sid__template__body {
    background: url("../img/bg_world_2k.webp") no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}

/* Container holding the content of the view, inside of 2 sub-containers (header- and content-container) */
.sid__main-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 30rem;

    position: relative;
    padding: var(--dimensions--margin-padding-gap--desktop--top-bottom) 0;
    margin: 0 auto;
}

.sid__header__container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dimensions--radius--large) var(--dimensions--radius--large) 0 0 ;
    width: 100%;
    height: var(--dimensions--height--header);
    background-color: var(--colors--primary--light);
    padding: var(--dimensions--margin-padding-gap--large);
}

.sid__content-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 var(--dimensions--radius--large) var(--dimensions--radius--large);
    background-color: var(--colors--secondary--light);
}

.sid__content-box {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: var(--dimensions--margin-padding-gap--x-large);
}

.sid__content-container__inner-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}

.sid__form__wrapper {
    display: flex;
    flex-direction: column;
    margin-top: var(--dimensions--margin-padding-gap--large);
    width: 100%;
}

.sid__social-providers__container {
    width: 100%;
}

.sid__social-providers__separator__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--dimensions--margin-padding-gap--small);
    width: 100%;
    color: var(--colors--contextual--gray--light);
    margin: var(--dimensions--margin-padding-gap--x-large) 0;
}

.sid__info__container {
    display: flex;
    flex-direction: column;
}

#sid__back-to-login__container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-top: var(--dimensions--margin-padding-gap--xx-large);
}


/* ------------------------------- */
/*             HEADER              */
/* ------------------------------- */

.sid__header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.sid__header__logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}


/* ------------------------------- */
/*           TITLE LABEL           */
/* ------------------------------- */

.sid__title-label {
    display: inline-block;
    margin: var(--dimensions--margin-padding-gap--small) 0 0 0;
}


/* ------------------------------- */
/*        FORM FIELD LABEL         */
/* ------------------------------- */

.sid__form-container, #sid__re-authentication {
    /* styles label of an input field */
    .pf-v5-c-form__label {
        margin-bottom: var(--dimensions--margin-padding-gap--x-small);
    }

    /* effectively acts as a container for a forms field consisting of an input field, label, error msg. etc. */
    .pf-v5-c-form__group {
        display: flex;
        flex-direction: column;
    }

    /*  effectively acts as a container for the buttons associated with a form */
    .pf-v5-c-form__actions, #kc-button-register {
        /* Form has a gap which needs to be added to extra large margin */
        margin-top: var(--dimensions--margin-padding-gap--xx-large-modified);

        /* Offsets the patternfly styling effectively translocating the button by 8px */
        margin-bottom: 0;
    }

    /* styles required field marker */
    .pf-v5-c-form__label-required {
        font-style: normal;
        font-weight: var(--fonts--weight--regular);
        font-size: var(--fonts--size--small);
        color: var(--colors--primary--dark);
        margin-inline-start: 0;
    }
}


/* ------------------------------- */
/*        INPUT TYPE TEXT          */
/* ------------------------------- */

input::placeholder {
    color: var(--colors--contrast--blueish) !important;
}

.sid__form-container, #sid__re-authentication {
    input {
        /* General styling for all states */
        font-style: normal;
        font-weight: var(--fonts--weight--regular);
        font-size: var(--fonts--size--large);

        border-radius: var(--dimensions--radius--medium);
        border-style: solid;
        border-width: var(--dimensions--border--regular);
        height: var(--dimensions--height--input);
        margin: 0;
        padding: 0 0 0 var(--dimensions--margin-padding-gap--medium);

        /* default state */
        background-color: var(--colors--secondary--white);
        color: var(--colors--primary--dark);
        border-color: var(--colors--contrast--blueish);
    }

    input:disabled {
        background-color: var(--colors--secondary--light);
        color: var(--colors--contrast--blueish);
    }

    input:focus {
        border-color: var(--colors--primary--dark);
        color: var(--colors--primary--dark);
    }

    input:invalid.touched:not(:focus) {
        border-color: var(--colors--contrast--red);
        color: var(--colors--primary--dark);
    }

    input:valid:not(:focus) {
        border-color: var(--colors--contrast--blueish);
    }
}


/* ------------------------------- */
/*      INPUT TYPE TEXTAREA        */
/* ------------------------------- */

.sid__form-container, #sid__re-authentication {
    textarea {
        /* General styling for all states */
        font-style: normal;
        font-weight: var(--fonts--weight--regular);
        font-size: var(--fonts--size--large);

        border-radius: var(--dimensions--radius--medium);
        border-style: solid;
        border-width: var(--dimensions--border--regular);
        height: var(--dimensions--height--textarea);
        min-height: var(--dimensions--height--textarea);
        margin: 0;
        padding: var(--dimensions--margin-padding-gap--medium) 0 0 var(--dimensions--margin-padding-gap--medium);

        /* default state */
        background-color: var(--colors--secondary--white);
        color: var(--colors--primary--dark);
        border-color: var(--colors--contrast--blueish);

        resize: vertical;
        box-sizing: border-box;
    }

    textarea:disabled {
        background-color: var(--colors--secondary--light);
        color: var(--colors--contrast--blueish);
    }

    textarea:focus {
        border-color: var(--colors--primary--dark);
        color: var(--colors--primary--dark);
    }

    textarea:invalid.touched:not(:focus) {
        border-color: var(--colors--contrast--red);
        color: var(--colors--primary--dark);
    }

    textarea:valid:not(:focus) {
        border-color: var(--colors--contrast--blueish);
    }
}


/* ------------------------------- */
/*    INPUT TYPE (MULTI-)SELECT    */
/* ------------------------------- */

.sid__input--select__container {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Custom arrow icon */
.sid__input--select__container::after {
    content: '▼';
    position: absolute;
    right: var(--dimensions--margin-padding-gap--medium);
    top: 50%;
    transform: translateY(-50%);
    color: var(--colors--primary--dark);
    pointer-events: none;
    font-size: var(--fonts--size--medium);
}

.sid__form-container, #sid__re-authentication {
    select {
        /* removes default arrow */
        appearance: none;

        /* overwrites mobile browsers default styling */
        -webkit-appearance: none;

        /* General styling for all states */
        font-style: normal;
        font-weight: var(--fonts--weight--regular);
        font-size: var(--fonts--size--large);

        border-radius: var(--dimensions--radius--medium);
        border-style: solid;
        border-width: var(--dimensions--border--regular);
        height: var(--dimensions--height--input);
        width: 100%;
        margin: 0;
        padding: 0 0 0 var(--dimensions--margin-padding-gap--medium);

        /* default state */
        background-color: var(--colors--secondary--white);
        color: var(--colors--primary--dark);
        border-color: var(--colors--contrast--blueish);
    }

    select:disabled {
        background-color: var(--colors--secondary--light);
        color: var(--colors--contrast--blueish);
    }

    select:focus {
        border-color: var(--colors--primary--dark);
        color: var(--colors--primary--dark);
    }

    select:invalid.touched:not(:focus) {
        border-color: var(--colors--contrast--red);
        color: var(--colors--primary--dark);
    }

    select:valid:not(:focus) {
        border-color: var(--colors--contrast--blueish);
    }
}


/* ------------------------------- */
/*   INPUT TYPE RADIO & CHECKBOX   */
/* ------------------------------- */

.sid__select-radiobuttons__container, .sid__checkbox__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--dimensions--margin-padding-gap--medium);
}


/* ------------------------------- */
/*              FORM               */
/* ------------------------------- */

.sid__form, #sid__re-authentication {
    gap: var(--dimensions--margin-padding-gap--medium);

    /* styles Forgot password element */
    #sid__field-password__forgot-password__container {
        display: flex;
        flex-direction: row;
        justify-content: end;
        margin-top: var(--dimensions--margin-padding-gap--small);
    }

    .pf-v5-c-helper-text__item-text, a {
        font-weight: var(--fonts--weight--regular);
        font-size: var(--fonts--size--medium);
    }

    /* Hides validation error icon of input elements */
    .fa-exclamation-circle {
        display: none;
    }
}


/* ------------------------------- */
/*   FORM FIELD VALIDATION ERROR   */
/* ------------------------------- */

.sid__form-field__validation-error {
    margin-top: var(--dimensions--margin-padding-gap--x-small);
    font-size: var(--fonts--size--medium);
    font-style: normal;
    font-weight: var(--fonts--weight--regular);
    color: var(--colors--contrast--red);
}


/* ------------------------------- */
/*           SID BUTTON            */
/* ------------------------------- */

.sid__button {
    width: 100%;
    height: var(--dimensions--height--input);
    border-radius: var(--dimensions--radius--medium);
    border: none;
    overflow: hidden;
    font-style: normal;
    font-weight: var(--fonts--weight--medium-bold);
    font-size: var(--fonts--size--large);
}


/* ------------------------------- */
/*         PRIMARY BUTTON          */
/* ------------------------------- */

.sid__button--primary, #kc-form-buttons {
    color: var(--colors--secondary--white);
    background-color: var(--colors--primary--light);
}

#kc-form-buttons:hover, .sid__button--primary:hover {
    background-color: var(--colors--contextual--medium);
}

#kc-form-buttons:active, .sid__button--primary:active {
    background-color: var(--colors--contextual--dark);
}

#kc-form-buttons:disabled, .sid__button--primary:disabled {
    color: var(--colors--secondary--white);
    background-color: var(--colors--contextual--gray--blueish);
    pointer-events: none;
}


/* ------------------------------- */
/*   SECONDARY & ON CLICK BUTTON   */
/* ------------------------------- */

.sid__button--secondary, .sid__button--route-on-click-button {
    background-color: var(--colors--secondary--light);
    border: var(--dimensions--border--regular) solid var(--colors--primary--light);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--dimensions--margin-padding-gap--small);
}

.sid__button--secondary:hover,
.sid__button--secondary:active,
.sid__button--route-on-click-button:hover,
.sid__button--route-on-click-button:active {
    background-color: var(--colors--primary--light);
    color: var(--colors--secondary--white);
    fill: var(--colors--secondary--white);
}

.sid__button--secondary button:disabled, .sid__button--route-on-click-button:disabled {
    color: var(--colors--contrast--blueish);
    pointer-events: none;
    border: var(--dimensions--border--regular) solid var(--colors--contrast--blueish);
}

/* styles icon of social providers */
.sid__button--secondary svg, .sid__button--route-on-click-button i {
    width: var(--dimensions--icon--medium);
    height: var(--dimensions--icon--medium);
}


/* ------------------------------- */
/*       PASSWORD VALIDATION       */
/* ------------------------------- */

.sid__password-requirements__container, .sid__password-requirements__wrapper {
    display: flex;
    flex-direction: column;
    margin-top: var(--dimensions--margin-padding-gap--x-small);
}

.sid__password-requirements__error-container {
    display: flex;
    flex-direction: column;
    gap: var(--dimensions--margin-padding-gap--x-small);
}

.sid__password-validation__policy-item__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--dimensions--margin-padding-gap--small);
}

.sid__password-validation__policy-item__container span {
    font-size: var(--fonts--size--medium);
}

.sid__password-validation__policy-item__container p, .sid__password-requirements__label {
    font-style: normal;
    font-weight: var(--fonts--weight--regular);
    font-size: var(--fonts--size--medium);
    margin: 0;
}


/* ------------------------------- */
/*   SHOW / HIDE PASSWORD BUTTON   */
/* ------------------------------- */

#sid__login__password {
    position: relative;
    align-items: center;

    button {
        position: absolute;
        right: var(--dimensions--margin-padding-gap--medium);
        border: none;
        background-color: transparent;
        cursor: pointer;
    }

    i {
        color: var(--colors--contrast--blueish);
    }

    i.has-input {
        color: var(--colors--primary--dark);
    }
}


/* ------------------------------- */
/*         SOCIAL PROVIDERS        */
/* ------------------------------- */

#kc-social-providers ul {
    margin: 0;
    padding: 0;
}

.sid__social-providers__separator__line {
    height: var(--dimensions--border--regular);
    border: none;
    background-color: var(--colors--contextual--gray--light);
    flex: 1;
}

.sid__social-providers__grid {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    gap: var(--dimensions--margin-padding-gap--x-small);
}

.sid__social-providers__grid li {
    grid-column-end: span 6;
}


/* ------------------------------- */
/*          MOBILE VIEW            */
/* ------------------------------- */

/* Note: unlike SCSS, CSS media calls can't handle variables making breakpoints.css obsolete */
@media (max-width: 576px) {
    .sid__main-container {
        padding: var(--dimensions--margin-padding-gap--mobile--top-bottom) 0;
        max-width: 90%;
    }

    .sid__content-box {
        padding: var(--dimensions--margin-padding-gap--large);
    }
}


/* ------------------------------- */
/*       LANGUAGE SELECTOR         */
/* ------------------------------- */

#sid__language-selector__container {
    position: relative;
    width: max-content;
    color: var(--colors--primary--light);
}

#sid__language-selector__icon-container {
    display: flex;
    position: absolute;
    pointer-events: none;
    height: 100%;
}

#sid__language-selector__icon {
    display: inline-flex;
    align-items: center;
    width: var(--dimensions--icon--small);
    font-size: var(--dimensions--icon--small);
}

#sid__language-selector {
    margin: 0;
    padding: 0 var(--dimensions--margin-padding-gap--language-selector);
    height: var(--dimensions--height--language-selector);
    border: none;
    outline: none;
    background: none;
    appearance: none;
    color: var(--colors--primary--light);
    font-size: var(--fonts--size--medium);
}

#sid__language-selector__arrow-icon {
    position: absolute;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    width: var(--dimensions--icon--small);
    height: 100%;
    margin-left: var(--dimensions--margin-padding-gap--language-selector);
    font-size: var(--dimensions--icon--small);
}


/* ------------------------------- */
/*     TERMS & PRIVACY POLICY      */
/* ------------------------------- */

#sid__register__terms-and-conditions {
    margin-top: var(--dimensions--margin-padding-gap--large);

    .pf-v5-c-form__group {
        gap: var(--dimensions--margin-padding-gap--x-small);
    }
}

#sid__register__terms-and-conditions__label {
    margin-bottom: var(--dimensions--margin-padding-gap--x-small);
}

.sid__register__terms-and-conditions__checkbox-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--colors--secondary--white);
    width: 100%;
    height: var(--dimensions--height--register--checkbox-container);
    border-radius: var(--dimensions--radius--medium);
    padding: var(--dimensions--margin-padding-gap--small) var(--dimensions--margin-padding-gap--medium);
    gap: var(--dimensions--margin-padding-gap--small);
    cursor: pointer;

    /* explicitly adds pointer cursor to checkbox, otherwise all but checkbox would use a pointer */
    input {
        cursor: pointer;
    }
}

.sid__register__terms-and-conditions__checkbox {
    height: auto !important;
    width: auto !important;
    align-self: center;
    accent-color: var(--colors--primary--light);
    color: var(--colors--secondary--white);
}
.sid__register__terms-and-conditions__checkbox[aria-invalid="true"] {
    outline: 2px solid var(--colors--contrast--red);
}

.sid__register__terms-and-conditions__error {
    font-size: var(--fonts--size--medium);
    font-style: normal;
    font-weight: var(--fonts--weight--regular);
    color: var(--colors--contrast--red);
}

/* ------------------------------- */
/*  BUTTON GROUP (e.g. FORGOT PW)  */
/* ------------------------------- */

.sid__button-group {
    display: flex;
    flex-direction: column;
    gap: var(--dimensions--margin-padding-gap--small);
}


/* ------------------------------- */
/*          RESET PASSWORD         */
/* ------------------------------- */

#sid__reset-password__button-group {
    margin-top: var(--dimensions--margin-padding-gap--xx-large-modified);
}


/* ------------------------------- */
/*           VERIFY EMAIL          */
/* ------------------------------- */

#sid__verify-email__button-group {
    display: flex;
    flex-direction: column;
    gap: var(--dimensions--margin-padding-gap--small);
    margin-top: var(--dimensions--margin-padding-gap--xx-large-modified);
}


/* ------------------------------- */
/*    UPDATE PASSWORD / EMAIL      */
/* ------------------------------- */

#sid__update-password__button-group {
    margin-top: var(--dimensions--margin-padding-gap--xx-large);
}

#sid__update-email__button-group {
    margin-top: var(--dimensions--margin-padding-gap--xx-large);
    display: flex;
    flex-direction: column;
}

#sid__passwd-update__checkbox-container, #sid__update-email__checkbox-container {
    /* Counteracts the gap on parent (kc-form-login) which is +12px */
    margin-top: var(--dimensions--margin-padding-gap--neg-small);
}


/* ------------------------------- */
/*       INFO AND TEXT MACRO       */
/* ------------------------------- */

#kc-register-link, #sid__contact-support-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-top: var(--dimensions--margin-padding-gap--xx-large);
}


/* ------------------------------- */
/*           REMEMBER ME           */
/* ------------------------------- */

#sid__remember-me__container {
    /* Counteracts the gap on parent (kc-form-login) which is +12px */
    margin-top: var(--dimensions--margin-padding-gap--neg-large);
}

.pf-v5-c-check[for="rememberMe"], .pf-v5-c-check[for="logout-sessions"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;

    label {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    input {
        height: var(--dimensions--height--remember-me--checkbox) !important;
        width: var(--dimensions--height--remember-me--checkbox) !important;
        align-self: center;
        accent-color: var(--colors--primary--light);
        color: var(--colors--secondary--white);
    }

    span {
        color: var(--colors--primary--dark);
        font-style: normal;
        font-weight: var(--fonts--weight--regular);
        font-size: var(--fonts--size--medium);
    }
}


/* ------------------------------- */
/*            HYPERLINKS           */
/* ------------------------------- */

:where(a) {
   color: var(--colors--primary--light);
}


/* ------------------------------- */
/*        DISPLAY MESSAGE          */
/* ------------------------------- */

.pf-v5-c-alert {
    margin-bottom: var(--dimensions--margin-padding-gap--large);
    border-radius: var(--dimensions--radius--small);
    border-style: solid;
    border-width: var(--dimensions--border--regular);
    padding: var(--dimensions--margin-padding-gap--medium);
}

/* this matches 'fonts__button__label' */
.pf-v5-c-alert__title {
    font-style: normal;
    font-weight: var(--fonts--weight--medium-bold);
    font-size: var(--fonts--size--large);
}

.pf-v5-c-alert.pf-m-warning {
    border-color: var(--pf-v5-c-alert--m-warning--BorderTopColor);
}

.pf-v5-c-alert.pf-m-info {
    border-color: var(--pf-v5-c-alert--m-info--BorderTopColor);
}

.pf-v5-c-alert.pf-m-danger {
    border-color: var(--pf-v5-c-alert--m-danger--BorderTopColor);
}

.pf-v5-c-alert.pf-m-success {
    border-color: var(--pf-v5-c-alert--m-success--BorderTopColor);
}


/* ------------------------------- */
/*         FIELD LABELS            */
/* ------------------------------- */

.sid__form__wrapper, .sid__form-container {
    .pf-v5-c-form__group-label {
        font-style: normal;
        font-weight: var(--fonts--weight--regular);
        font-size: var(--fonts--size--medium);
        margin: 0;
        padding: 0;
        color: var(--colors--primary--dark);
    }
}


/* ------------------------------- */
/*       RE-AUTHENTICATION         */
/* ------------------------------- */

#sid__re-authentication__container {
    display: flex;
    flex-direction: column;
    gap: var(--dimensions--margin-padding-gap--small);

    input[readonly], input[readonly]:focus, input[readonly]:hover {
        cursor: default;
    }
}


/* ------------------------------- */
/*        PAGE HAS EXPIRED         */
/* ------------------------------- */

#sid__login-page-expired__container {
    display: flex;
    flex-direction: column;
    gap: var(--dimensions--margin-padding-gap--small);
    margin-top: var(--dimensions--margin-padding-gap--large);
}


/* ------------------------------- */
/*     DELETE ACCOUNT CONFIRM      */
/* ------------------------------- */

#sid__delete-account-confirm__warning {
    margin-top: var(--dimensions--margin-padding-gap--x-large);
}


/* ------------------------------- */
/*     REMOVE CHROMIUM STYLE       */
/* ------------------------------- */

input.autofill-detected:-webkit-autofill, input.autofill-detected:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--colors--contextual--gray--blueish) !important;
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

input.autofill-cleared:-webkit-autofill,
input.autofill-cleared:-webkit-autofill:focus,
input.autofill-cleared:-webkit-autofill:hover,
input.autofill-cleared:-webkit-autofill:active {
    -webkit-text-fill-color: inherit !important;
}


/* ------------------------------- */
/*      REMOVE FIREFOX STYLE       */
/* ------------------------------- */

/* Note: linter might not recognize selector */
input:autofill {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}