:root {
    --pf-v5-global--FontFamily--text: UniversForFiserv55, "OpenSans", sans-serif;
    --pf-v5-global--FontFamily--heading: UniversForFiserv55, "OpenSans", sans-serif;
    --pf-v5-global--FontFamily--monospace: UniversForFiserv55, "OpenSans", sans-serif;
    --pf-v5-global--FontFamily--text--vf: UniversForFiserv55, "OpenSans", sans-serif;
    --pf-v5-global--FontFamily--heading--vf: UniversForFiserv55, "OpenSans", sans-serif;
    --pf-v5-global--FontFamily--monospace--vf: UniversForFiserv55, "OpenSans", sans-serif;

    --pf-v5-global--primary-color--100: #FF6600;
    --pf-v5-global--primary-color--200: #EB6600;
    --pf-v5-global--primary-color--dark-100: #FF6600;
    --pf-v5-global--active-color--100: #FF6600;
    --pf-v5-global--active-color--400: #FF6600;
}

html {
    font-size: 12px;
}

.fiserv-body {
    background: url(../img/fiserv_logo_orange_rgb.png) no-repeat 30px 30px;
    background-size: 150px;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.kc-logo-text {
    display: block;
    width: 150px;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.pf-v5-c-login__container {
    align-self: baseline;
    margin-top: 4%;
}


.pf-v5-c-card {
    color: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-card--m-rounded--BorderRadius: 5px;
    --pf-v5-c-card--BoxShadow: 0 5px 10px 6px rgba(0, 0, 0, 0.3);
    --pf-v5-c-card--m-selectable--hover--BoxShadow: 0 5px 10px 6px rgba(0, 0, 0, 0.3);
    --pf-v5-c-card--BackgroundColor: unset !important;
    background: linear-gradient(to right bottom, #000000, #060606, #0c0b0c, #111011, #151415, #181819, #1c1b1c, #1f1f20, #242424, #282829, #2d2d2d, #323232);
    text-align: center;
    transition: all 0.3s ease-in-out, border-radius 0s;
    width: 325px;
    height: 200px;
    justify-content: center;
}

:where(.pf-v5-theme-dark) .pf-v5-c-card {
    --pf-v5-c-card--BoxShadow: 0 0.25rem 0.5rem 0rem rgba(255, 102, 0, 0.48), 0 0 0.25rem 0 rgba(255, 102, 0, 0.24);
    --pf-v5-c-card--m-selectable--hover--BoxShadow: 0 0.25rem 0.5rem 0rem rgba(255, 102, 0, 0.48), 0 0 0.25rem 0 rgba(255, 102, 0, 0.24);
    /*background: linear-gradient(to right bottom, #ffffff, #f2f2f2, #e6e6e6, #d9d9d9, #cccccc, #c0c0c0, #b3b3b3, #a6a6a6, #999999, #8c8c8c, #808080, #737373);*/
}

.pf-v5-c-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 5px;
    box-shadow: var(--pf-v5-c-card--m-selectable--hover--BoxShadow);
    transition: opacity 0.3s ease-in-out;
}

.pf-v5-c-card:hover {
    transform: scale(1.05, 1.05);
}

.pf-v5-c-card:hover::after {
    opacity: 1;
}

.pf-v5-c-card__body:not(.pf-m-no-fill) {
    color: var(--pf-v5-global--Color--light-100);
    flex: unset !important;
}

.pf-v5-c-card__selectable-actions .pf-v5-c-check__label:hover, .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label:hover {
    --pf-v5-c-card--BackgroundColor: unset !important;
}

.pf-v5-c-card__selectable-actions .pf-v5-c-check__label:before, .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label:before {
    border-radius: var(--pf-v5-c-card--m-rounded--BorderRadius);
}

.pf-v5-c-card__title-text h4 {
    --pf-v5-c-title--m-xl--FontSize: 3em;
    font-family: UniversForFiserv55;
}
.pf-v5-c-card__actions{
    --pf-v5-c-card__actions--PaddingLeft: 0;
}

.pf-v5-c-card__footer {
    --pf-v5-c-card--child--PaddingRight: 0.3em;
    padding-block-end: 0;
    position: absolute;
    bottom: 0;
    font-size: 1.7em;
    opacity: 0.3;
    background-image: linear-gradient(45deg, #eeeaea, #414141 95%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    align-self: flex-end;
}

.new_tab_icon {
    position:absolute;
    top: 0.5em;
    right: 0.5em;
    width: 22px;
    height: 22px;
    background-image: url('../img/new_tab_icon.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* firefox displays this element under the pf-v5-c-radio__label which covers tho whole card, so we need to put it on top */
    z-index: 1;
}

.new_tab_icon:hover {
    transform: scale(1.15, 1.15);
}