/* Stylesheets for keycloak css theme pages are cached, so clear the cache or use incognito to view changes */

body {
  font-family: 'Helvetica', sans-serif;
}

.identity-page--ready.identity-page--background-1.identity-page--wfcu
  .identity-bg-layout {
  background-image: url('../img/login-image-personal.webp');
  background-position: left center;
}
.identity-page--ready.identity-page--background-2.identity-page--wfcu
  .identity-bg-layout {
  background-image: url('../img/login-image-business.webp');
  background-position: left center;
}
.identity-page--ready.identity-page--background-3.identity-page--wfcu
  .identity-bg-layout {
  background-image: url('../img/login-image-employee.jpg');
  background-position: left center;
}

@media only screen and (min-width: 768px) {
  .identity-page--ready.identity-page--background-1.identity-page--wfcu
    .identity-bg-layout {
    height: 37%;
  }
  .identity-page--ready.identity-page--background-2.identity-page--wfcu
    .identity-bg-layout {
    height: 37%;
  }
  .identity-page--ready.identity-page--background-3.identity-page--wfcu
    .identity-bg-layout {
    height: 37%;
  }
}

@media only screen and (min-width: 992px) {
  .identity-page--ready.identity-page--background-1.identity-page--wfcu
    .identity-bg-layout {
    background-position-x: left;
    height: 100vh;
    background-repeat: no-repeat;
  }
  .identity-page--ready.identity-page--background-2.identity-page--wfcu
    .identity-bg-layout {
    background-position-x: left;
    height: 100vh;
    background-repeat: no-repeat;
  }
  .identity-page--ready.identity-page--background-3.identity-page--wfcu
    .identity-bg-layout {
    background-position-x: left;
    height: 100vh;
    background-repeat: no-repeat;
  }
}

.identity-logo--wfcu {
  background-image: url('../img/wildfire-byot-logo-270x109.webp');
  background-size: 100%;
  background-repeat: no-repeat;
  height: 50px;
  margin: 16px 0 38px;
  width: 140px;
}

@media only screen and (min-width: 768px) {
  .identity-logo--wfcu {
    height: 60px;
    margin: -10px 0 40px;
    width: 175px;
    background-repeat: no-repeat;
  }
}

@media only screen and (min-width: 992px) {
  .identity-logo--wfcu {
    height: 80px;
    margin: 20px 0 5px;
    width: 200px;
  }
}

.identity-logo--wfcub {
  background-image: url('../img/logo-wfcubb-270x69.png');
  background-size: contain;
  background-repeat: no-repeat;
  height: 40px;
  margin: 16px 0 38px;
  width: 140px;
}

@media only screen and (min-width: 768px) {
  .identity-logo--wfcub {
    height: 46px;
    margin: -10px 0 40px;
    width: 175px;
    background-repeat: no-repeat;
  }
}

@media only screen and (min-width: 992px) {
  .identity-logo--wfcub {
    height: 56px;
    margin: 20px 0 5px;
    width: 200px;
  }
}

.vh-100.vh-100--wfcu {
  height: auto !important;
}

@media only screen and (min-width: 421px) {
  .vh-100.vh-100--wfcu {
    height: 100vh !important;
  }
}

/* The class for the OOTB identity-container__form changed in v2024.03-LTS, so this will fix the styling */
.identity-container__form--wfcu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 464px;
}

/* This will format the space between the form groups on the login pages since form-group was removed as a Bootstrap class */
.form-group-custom {
  margin-bottom: 1rem;
}

.wfcu-h1 {
  font-weight: 600;
  line-height: 51px;
  width: 500px;
}

@media only screen and (max-width: 768px) {
  .wfcu-h1 {
    width: 300px;
  }
}

.bb-subtitle--wfcu {
  margin: 3px 0 15px;
}

@media only screen and (min-width: 768px) {
  .bb-subtitle--wfcu {
    margin: 3px 0 25px;
  }
}

@media only screen and (min-width: 768px) {
  .bb-subtitle--wfcu {
    margin: 0 0 25px;
  }
}

.bb-button-bar--wfcu {
  margin-top: 22px;
}

.small-wfcu {
  font-size: 16px;
  line-height: 24px;
}

.btn-wfcu {
  padding: 0.4rem 1.5rem;
}

@media only screen and (min-width: 768px) {
  .btn-wfcu {
    margin-bottom: 0.3rem;
    padding: 0.5rem 1.5rem;
  }
}

.btn-primary--wfcu {
  background: #233a71;
}

.alert-content-wfcu {
  padding-left: 36px;
  padding-right: 0.7rem;
  position: relative;
}

.alert-content-wfcu:after {
  background-image: url('../img/error_outlineic_.png');
  background-size: contain;
  content: '';
  height: 24px;
  left: 0;
  position: absolute;
  top: -2px;
  width: 24px;
}

@media only screen and (min-width: 768px) {
  .alert-content-wfcu {
    padding-right: 0.3rem;
  }
}

.form-control--wfcu-error {
  border: 1px solid #d32f2f;
}

.btn--wfcu-error, .btn--wfcu-error:hover {
  border-top: 1px solid #d32f2f !important;
  border-right: 1px solid #d32f2f !important;
  border-bottom: 1px solid #d32f2f !important;
}

.no-account {
  background-color: #D9E1EE;
  padding-left: 10px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.login-page-buttons {
  margin-bottom: 20px;
}

.buttonBorder {
  border-color: black;
  border-width: 1px;
  margin: 0 10px;
}

.mfaNextBtn {
  margin-right: 10px;
}

.otp-sms-message {
  font-size:.8rem;
  font-weight: 400;
}

/* The following styles were copied from the BB stylesheet from v2023.02-LTS */
/* The hide password toggle button was removed from the OOTB styles for the v2024.03-LTS */
.input-group-prepend,
.input-group-append {
  display: flex; 
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2; 
}

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3; 
}

.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px; 
}

.input-group-append {
  margin-left: -1px; 
}

.input-group-lg > .form-control, .bb-country-selector.ng-select.ng-select-multiple .input-group-lg > .ng-select-container, .bb-select-list.ng-select.ng-select-single .input-group-lg > .ng-select-container, .bb-select-list.ng-select.ng-select-multiple .input-group-lg > .ng-select-container,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.5rem; 
}

.input-group-sm > .form-control, .bb-country-selector.ng-select.ng-select-multiple .input-group-sm > .ng-select-container, .bb-select-list.ng-select.ng-select-single .input-group-sm > .ng-select-container, .bb-select-list.ng-select.ng-select-multiple .input-group-sm > .ng-select-container,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.5rem; 
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0; 
}

.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.input-group-append .btn {
  border-start-end-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
  border-inline-start: none;
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn, .input-group-append .btn {
  height: calc(1.75em + 1rem);
  padding-inline: 1rem;
  color: #333333;
  background-color: #fff;
  border: 1px solid #dedede;
}

.input-group-prepend .btn.btn-sm, .input-group-prepend .btn-group-sm > .btn,
.input-group-append .btn.btn-sm,
.input-group-append .btn-group-sm > .btn {
  height: calc(1.75em + 0.5rem); 
}

.input-group-prepend .btn:not(.disabled):not(:disabled):focus, .input-group-prepend .btn:not(.disabled):not(:disabled).focus,
.input-group-append .btn:not(.disabled):not(:disabled):focus,
.input-group-append .btn:not(.disabled):not(:disabled).focus {
  border-color: #dedede; 
}

.input-group-prepend .btn:not(.disabled):not(:disabled):hover,
.input-group-append .btn:not(.disabled):not(:disabled):hover {
  color: #0062c4;
  background-color: #fff;
  border-color: #dedede; 
}

.input-group-prepend .btn.disabled, .input-group-prepend .btn:disabled,
.input-group-append .btn.disabled,
.input-group-append .btn:disabled {
  color: #616161;
  background-color: #f5f5f5;
  cursor: not-allowed;
  pointer-events: initial; 
}
/* ######################################### */