@font-face {
  font-family: UniversForFiserv55;
  src: url(../font/UniversForFiserv55.ttf);
}

: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;
}

.login-pf body {
  background: white;
}

div.kc-logo-text {
  background-image: url(../img/fiserv_logo_orange_rgb.png);
  width: 150px;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 auto;
}

.pf-v5-c-form-control>:is(input,select,textarea):focus {
  --pf-v5-c-form-control--OutlineOffset: -1px;
}

.pf-v5-c-form__group.pf-m-action {
  /*overflow visible so the shadow from buttons are visible*/
  overflow: visible !important;
}

.pf-v5-c-button.pf-m-primary {
  box-shadow: var(--pf-v5-global--BoxShadow--md-bottom) !important;
}
.pf-v5-c-button.pf-m-secondary {
  box-shadow: var(--pf-v5-global--BoxShadow--md-bottom) !important;
}

#kc-totp-secret-key {
  font-weight: var(--pf-v5-global--FontWeight--bold);
}

/* application screen */

#app .pf-v5-c-card .pf-v5-c-title {
  color: var(--pf-v5-global--primary-color--100);
}

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

#app .pf-v5-c-card {
  --pf-v5-c-card--BackgroundColor: unset !important;
  text-align: center;
  background: linear-gradient(to right bottom, #000000, #060606, #0c0b0c, #111011, #151415, #181819, #1c1b1c, #1f1f20, #242424, #282829, #2d2d2d, #323232);
  transition: all 0.3s ease-in-out, border-radius 0s;
  border-radius: 5px;
  width: 325px;
  height: 200px;
  justify-content: center;
}

#app .pf-v5-c-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 5px;
  box-shadow: 0 5px 10px 6px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease-in-out;
}

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

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

#app .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--BoxShadow: var(--pf-v5-c-card--m-selectable--hover--BoxShadow);
}

#app .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;
}

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