/* Just the styles we need from Bootstrap 5.2 */
*, ::after, ::before {
   box-sizing: border-box;
}

body {
   margin: 0;
   font-family: Roboto, sans-serif;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #000;
}

button, input, optgroup, select, textarea {
   margin: 0;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
}

input {
   border-radius: 0;
}

label {
   display: inline-block;
}

.card-body {
   flex: 1 1 auto;
   padding: 1rem 1rem;
}

.d-flex {
   display: flex !important;
}

.flex-column {
   flex-direction: column !important;
}

.flex-row {
   flex-direction: row !important;
}

.fw-light {
   font-weight: 300 !important;
}

.h5 {
   font-size: 1.25rem;
   margin-top: 0;
   line-height: 1.2;
}

.justify-content-center {
   justify-content: center !important;
}

.mb-2 {
   margin-bottom: .5rem !important;
}

.mb-3 {
   margin-bottom: 1rem !important;
}

.mt-2 {
   margin-top: .5rem !important;
}

.min-vh-100 {
   min-height: 100vh !important;
   height: 100vh; /* hack for IE */
}

.pt-2 {
   padding-top: .5rem !important;
}

.shadow-lg {
   box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.text-center {
   text-align: center !important;
}

/* Floating form styles from Bootstrap 5.2 */
.form-floating {
   position: relative;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
   color: transparent;
}

.form-control::placeholder {
   color: #6c757d;
   opacity: 1;
}

.form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown), .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
   padding-top: 1.625rem;
   padding-bottom: .625rem;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext {
   padding: 1rem .75rem;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
   height: calc(3.5rem + 2px);
   line-height: 1.25;
}

@media(prefers-reduced-motion: reduce) {
   .form-control {
      transition: none;
   }

   .form-floating > label {
      transition: none;
   }
}

.form-control {
   display: block;
   width: 100%;
   padding: .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:focus {
   color: #212529;
   background-color: #fff;
   border-color: #86b7fe;
   outline: 0;
   box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
   opacity: .65;
   transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

.form-floating > label {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding: 1rem .75rem;
   overflow: hidden;
   text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
   pointer-events: none;
   border: 1px solid transparent;
   transform-origin: 0 0;
   transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}

/* Custom styles start here */
a {
   color: #151515 !important;
}

.login-card {
   background-color: #ffcd00;
   padding: 0 1rem 0 1rem;
}

.logo {
   display: block;
}

.logo-icon {
   height: 30px;
   fill: #ffcd00;
}

.logo--tab {
   width: 154px;
   height: 80px;
   padding: 25px;
   background: #151515;
}

.btn-uids {
   display: inline-block;
   position: relative;
   width: 100%;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   line-height: 1.4;
   font-family: "Antonio", sans-serif;
   font-size: 1.25rem;
   padding: 1rem 2rem;
}

.btn-uids:focus {
   text-decoration: underline;
}

.btn-uids::after {
   content: '';
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 100%;
   height: 4px;
   transform-origin: center;
   transform: translate(-50%) scaleX(0);
   transition: transform 0.3s ease-in-out;
}

.btn-uids:hover::after, .btn-uids:focus::after {
   transform: translate(-50%) scaleX(1);
}

.btn-uids-primary {
   color: #fff !important;
   background: #151515;
   border: 1px solid #151515;
}

.btn-uids-primary::after {
   background-color: #ffcd00;
}

.btn-uids-primary__icon {
   width: 0.875rem;
   height: 0.875rem;
   color: #ffcd00;
}

.btn-uids-secondary {
   color: #151515 !important;
   background: none;
   border: 1px solid #151515;
}

.btn-uids-secondary::after {
   background-color: #ffcd00;
}

@media(min-width: 601px) {
   body {
      background: url("/uip/images-2022/iowa-community-light.webp");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-color: #fff;
   }

   .login-card {
      width: 440px;
      margin-left: auto;
      margin-right: auto;
   }
}

@media(max-width: 600px) {
   .login-card {
      height: 100vh;
   }
}

@media(prefers-reduced-motion: reduce) {
   .btn-uids::after {
      transition: none;
   }
}

@media(prefers-color-scheme: dark) {
   body {
      color: #e4e4e4;
      background-color: #000;
   }

   a {
      color: #e4e4e4 !important;
   }

   /* Override default autofill color in Firefox (and other browsers that support it) */
   input:autofill {
      background-image: none; /* remove background image that firefox uses to apply the auto-fill yellow color */
      background-color: rgba(232, 240, 254, 0.2) !important; /* set our own background color based on chrome's choice, but more transparent */
   }

   /* WCAG contrast ratio fix for floating label when autofilled in Firefox (and related browsers) */
   input:autofill ~ label {
      opacity: 1.0 !important;
   }

   /* Chrome specific style to fix contrast for floating label in dark mode because Chrome forces a light background */
   input:-internal-autofill-selected ~ label {
      color: #000 !important;
   }

  /* Safari (and other WebKit) specific style to fix contrast for floating label in dark mode because WebKit forces a light background */
   input:-webkit-autofill ~ label {
      color: #000 !important;
   }

   .login-card {
      background-color: #1c1c1e;
   }

   .logo-icon {
      fill: #1c1c1e;
   }

   .logo--tab {
      background: #ffcd00;
   }

   .btn-uids-primary {
      color: #e4e4e4 !important;
      background: #101010;
      border: 1px solid #ffcd00;
   }

   .btn-uids-primary::after {
      background-color: #ffcd00;
   }

   .btn-uids-primary__icon {
      color: #ffcd00;
   }

   .btn-uids-secondary {
      color: #e4e4e4 !important;
      background: #101010;
      border: 1px solid #e4e4e4;
   }

   .btn-uids-secondary::after {
      background-color: #ffcd00;
   }

   .form-control {
      border: none;
      color: #e4e4e4;
      background-color: #35363a !important;
   }

   .form-control:focus {
      color: #e4e4e4;
   }

   .shadow-lg {
      box-shadow: none;
   }

   @media(min-width: 601px) {
      body {
         background: url("/uip/images-2022/iowa-community-dark.webp");
         background-position: center;
         background-size: cover;
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-color: #000;
      }
   }
}
/*!
 * Polyfills for floating form selected from Bootstrap for IE11 v5.2.2 (https://github.com/coliff/bootstrap-ie11)
 * Copyright 2022 C.Oliff
 * Licensed under MIT (https://github.com/coliff/bootstrap-ie11/blob/main/LICENSE)
 */
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .form-floating {
       display: flex;
       flex-direction: column-reverse;
   }
   .form-control::-ms-input-placeholder {
       color: #6c757d;
   }
   .form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
       opacity: 0.65;
       transform: scale(0.9) translateY(-0.01rem) translateX(0.15rem);
   }
   .form-floating input:-ms-input-placeholder,
   .form-floating select:-ms-input-placeholder,
   .form-floating textarea:-ms-input-placeholder {
       color: transparent;
   }
   .form-floating input:not(:-ms-input-placeholder) {
       padding-top: 1.25rem;
       padding-bottom: 0.25rem;
   }
   .form-floating input:not(:-ms-input-placeholder) ~ label,
   .form-floating select:not(:-ms-input-placeholder) ~ label,
   .form-floating textarea:not(:-ms-input-placeholder) ~ label {
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
       font-size: 14px;
       color: #777;
       opacity: 0.65;
   }
}

/* Polyfills for floating form in EdgeHTML v12 - v18. Mostly original with other sources credited as necessary.
   Required to support Microsoft Office desktop applications' embedded login window on Microsoft Windows.
   Yes, it uses EdgeHTML under the hood. I know.  Quirks include:
   - EdgeHTML allows you to style the '::placeholder' pseudo-element but requires you to refer to it as '::-ms-input-placeholder'
   - EdgeHTML does _not_ support the ':placeholder-shown' pseudo-class, so we apply the relevant styles to a class named 'placeholder-shown'
     (applied in JS) to achieve the same effect.
   - EdgeHTML v12 - v18 detection hack from https://browserstrangeness.github.io/css_hacks.html#edge
   */
@supports (-ms-ime-align:auto) {
    .form-floating > .form-control::-ms-input-placeholder {
        color: transparent;
    }

    .form-control::-ms-input-placeholder {
        color: #6c757d;
        opacity: 1;
    }

    .form-floating > .form-control-plaintext:focus,
    .form-floating > .form-control-plaintext:not(.placeholder-shown),
    .form-floating > .form-control:focus,
    .form-floating > .form-control:not(.placeholder-shown) {
        padding-top: 1.625rem;
        padding-bottom: .625rem;
    }

    .form-floating > .form-control-plaintext ~ label,
    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(.placeholder-shown) ~ label,
    .form-floating > .form-select ~ label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    }
}

/* Fonts from Google served locally */
/* latin */
@font-face {
   font-family: 'Antonio';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("/uip/fonts-2022/antonio-latin-400.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url("/uip/fonts-2022/roboto-latin-300.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("/uip/fonts-2022/roboto-latin-400.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}