:root {
    /* replace blue accents of primary and hove/active styles by grey */
    --pf-global--active-color--100: var(--pf-global--palette--black-700);
    --pf-global--active-color--200: var(--pf-global--palette--black-800);
    --pf-global--active-color--400: var(--pf-global--palette--black-800);
    --pf-global--primary-color--light-100: var(--pf-global--palette--black-700);
    --pf-global--primary-color--dark-100: var(--pf-global--palette--black-800);
    --pf-global--primary-color--100: var(--pf-global--palette--black-700);
    --pf-global--primary-color--200: var(--pf-global--palette--black-800);
}

:focus-visible {
    /* replace blue focus box by a yellow one */
    outline: var(--pf-global--palette--gold-400) solid 2px; /* explicit definition of 'solid' is needed for FF */
}

.pficon {
    /* change blue icons to text color */
    color: var(--pf-global--primary-color--light-100);
}

input[type='radio'], input[type='checkbox'] {
    /* make input radio and checkboxes grey */
    accent-color: var(--pf-global--active-color--200);
}

/* fix wrapping of OTP token selection tiles and reduce size of tiles */
div.pf-c-tile__div label {
    --pf-c-tile--PaddingTop: var(--pf-global--spacer--xs);
    --pf-c-tile--PaddingRight: var(--pf-global--spacer--sm);
    --pf-c-tile--PaddingBottom: var(--pf-global--spacer--xs);
    --pf-c-tile--PaddingLeft: var(--pf-global--spacer--sm);
    --pf-c-tile--TranslateY: 0;
    justify-content: left;
    min-width: 94%;
    margin-bottom: var(--pf-global--spacer--sm);
}
div.pf-c-tile__div input[type='radio'], div.pf-c-tile__div input[type='checkbox'] {
    width: 5%;
}
div.pf-c-tile__div .pf-c-tile:active {
    --pf-c-tile--TranslateY: 0;
}

/* setup background an mgm logo */
.login-pf body {
    background-color: var(--pf-global--BackgroundColor--light-100);
    background-image: url("../img/mgm-logo-white.svg"),
    url("../img/mgm-chroma_1920x1080_0055.jpg");
    background-repeat: no-repeat;
    background-size: 12em, cover;
    background-position: 20px 20px, top left;
}
@media (max-width: 767px) {
    /* setup background an mgm logo for smaller screens */
    .login-pf body {
        background-size: 8em, cover;
        background-position: 1em 1.2em, top left;
    }
}

/* hide realm name in login box header and add some padding instead */
#kc-header {
    padding-top: 20px;
}
#kc-header-wrapper {
    display: none;
}