/* roboto-300 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/roboto/roboto-v15-latin-300.eot");
  /* IE9 Compat Modes */
  src:
    local("Roboto Light"),
    local("Roboto-Light"),
    url("../fonts/roboto/roboto-v15-latin-300.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/roboto/roboto-v15-latin-300.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/roboto/roboto-v15-latin-300.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/roboto/roboto-v15-latin-300.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/roboto/roboto-v15-latin-300.svg#Roboto") format("svg");
  /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto/roboto-v15-latin-regular.eot");
  /* IE9 Compat Modes */
  src:
    local("Roboto"),
    local("Roboto-Regular"),
    url("../fonts/roboto/roboto-v15-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/roboto/roboto-v15-latin-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("../fonts/roboto/roboto-v15-latin-regular.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/roboto/roboto-v15-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/roboto/roboto-v15-latin-regular.svg#Roboto") format("svg");
  /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto/roboto-v15-latin-700.eot");
  /* IE9 Compat Modes */
  src:
    local("Roboto Bold"),
    local("Roboto-Bold"),
    url("../fonts/roboto/roboto-v15-latin-700.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/roboto/roboto-v15-latin-700.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/roboto/roboto-v15-latin-700.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/roboto/roboto-v15-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/roboto/roboto-v15-latin-700.svg#Roboto") format("svg");
  /* Legacy iOS */
}

@font-face {
  font-weight: 400;
  font-family: "Material Icons Outlined";
  font-style: normal;
  src:
    url("../fonts/materialicons/MaterialIcons-Outlined.woff2") format("woff2"),
    url("../fonts/materialicons/MaterialIcons-Outlined.woff") format("woff");
}

:root {
  --bs-body-font-family: Roboto, Libre Franklin, sans-serif;
  --bs-body-color: #262627;
  --bs-heading-color: #262627;
  --bs-link-color-rgb: 0, 114, 200; /* #0072c8 */
  --bs-secondary-color: #496374;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  font-family:
    Roboto,
    Libre Franklin,
    sans-serif;
}

.btn-primary {
  --bs-btn-bg: #0072c8;
  --bs-btn-disabled-color: #47586d;
}

.bb-icon {
  font-family: "Material Icons Outlined", sans-serif;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

.identity-logo {
  background-image: url(../img/logoBCSLine.svg);
  background-repeat: no-repeat;
  display: inline-block;
  height: 3em;
  min-width: 180px;
  width: 50%;
  background-size: contain;
}

div.branding-logo {
  width: 10rem;
  height: 2.5rem;
}

.pse-logo {
  background-image: url("../img/pse-logo.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 3em;
  max-width: 60px;
  width: 45%;
  margin-left: 1.5rem;
}

.login-logos-wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 340px;
}

.pse-body,
.download-app-body-card,
.push-notification-code-box {
  background-color: #f1f4f6;
}

.download-app-body-card {
  padding: 0.75rem;
  border-radius: 0.5rem;
}
.download-app-body-card p {
  margin-bottom: 0;
}

.push-notification-code-box {
  border-radius: 1rem;
  padding: 1.5rem;
}

.btn {
  min-height: 2.75rem;
  --bs-btn-font-family: Roboto, Libre Franklin, sans-serif;
}

.bb-input-password__visibility-toggle-button {
  min-height: 2.5rem;
}

.btn-primary:focus:not(:hover):not(:active):not(:disabled):not(.disabled) {
  background-color: #0072c8;
}

.btn.btn-secondary {
  color: #0072c8;
  border-color: #0072c8;
}

.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled):hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled):focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
  background-color: #0072c8;
  border-color: #0072c8;
}

.form-control[type="text"]:focus,
.bb-country-selector.ng-select.ng-select-multiple
  .ng-select-container[type="text"]:focus,
.form-control[type="number"]:focus,
.bb-country-selector.ng-select.ng-select-multiple
  .ng-select-container[type="number"]:focus,
.form-control[type="email"]:focus,
.bb-country-selector.ng-select.ng-select-multiple
  .ng-select-container[type="email"]:focus,
.form-control[type="password"]:focus,
.bb-country-selector.ng-select.ng-select-multiple
  .ng-select-container[type="password"]:focus,
.form-control[type="tel"]:focus,
.bb-country-selector.ng-select.ng-select-multiple
  .ng-select-container[type="tel"]:focus,
.form-control[type="search"]:focus,
.bb-country-selector.ng-select.ng-select-multiple
  .ng-select-container[type="search"]:focus {
  outline: 3px solid #0072c8;
}

#bb-support-dropdown-link .bb-stack__item {
  margin-inline-end: 0.2rem;
}

.btn-link-text,
.btn-link-text-light {
  --bs-btn-color: #0072c8;
}

.btn-link-text:focus,
.btn-link-text:hover,
.btn-link-text-light:focus,
.btn-link-text-light:hover,
.btn-link-text:focus:not(:hover):not(:active):not(:disabled):not(.disabled),
.btn-link-text-light:focus:not(:hover):not(:active):not(:disabled):not(
    .disabled
  ) {
  color: #00508c;
}

.btn-link-text:not(:disabled):not(.disabled):active,
.btn-link-text:not(:disabled):not(.disabled).active,
.btn-link-text:not(:disabled):not(.disabled):active:focus,
.btn-link-text:not(:disabled):not(.disabled).active:focus,
.btn-link-text-light:not(:disabled):not(.disabled):active,
.btn-link-text-light:not(:disabled):not(.disabled).active,
.btn-link-text-light:not(:disabled):not(.disabled):active:focus,
.btn-link-text-light:not(:disabled):not(.disabled).active:focus {
  color: #00508c;
  background-color: transparent;
  border-color: transparent;
}

.btn:not(.btn-unstyled):focus::before {
  border: 3px solid #00508c;
}

.bb-form-field--md {
  margin-bottom: 1rem;
}

.form-group label {
  margin-bottom: 0.3rem;
}

input#bb-username-then-password-input,
input#bb-identity-password-input {
  margin-bottom: 0.3rem;
}

.bb-username-example,
.helper-text,
.input-helper-text {
  color: #496374;
  font-size: 0.875rem;
}

.text-helper {
  color: #496374;
}

.input-group-prepend .btn,
.input-group-append .btn {
  color: #262627;
}

.form-control {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.form-control[type="text"]:focus,
select.form-control:focus {
  border-style: solid;
  border-width: 1px;
  border-color: #c2c7ce;
  outline: 3px solid #0072c8;
  outline-offset: 4px;
  box-shadow: none;
}

/* Alerts */
.alert {
  border: 1px solid #c2c7ce;
}

.alert-heading {
  color: inherit;
}

.alert-description {
  color: #262627;
}

.alert-danger {
  color: #721c1c;
  background-color: #fdebec;
}
.alert-danger .bb-icon {
  color: #721c1c;
}

.alert-success {
  color: #15442f;
  background-color: #dff8ed;
}
.alert-success .bb-icon {
  color: #15442f;
}

.alert-warning {
  color: #6e4a09;
  background-color: #fff9e5;
}
.alert-warning .bb-icon,
.alert-warning .alert-icon .bb-icon {
  color: #6e4a09;
}

.alert-info {
  color: #262627;
  background-color: #e8f1fb;
  border: 1px solid #c2c7ce;
  box-shadow: 0px 4px 9px 0px rgba(16, 47, 67, 0.12);
}
.alert-info .bb-icon {
  color: #143e61;
}

.alert-secondary {
  background-color: #f1f4f6;
  color: #262627;
  border: none;
  box-shadow: 0px 4px 9px 0px rgba(16, 47, 67, 0.12);
}

.pse-landing-logo {
  height: 80px;
  width: 80px;
  background-image: url("../img/pse-logo.svg");
  background-size: 100%;
}

.pse-landing-img {
  height: 60px;
  width: 60px;
  background-size: 100%;
  background-repeat: no-repeat;
}

.pse-landing-img--retail {
  background-image: url("../img/portal-personas-icon.svg");
}

.pse-landing-img--business {
  background-image: url("../img/portal-empresas-icon.svg");
}

.pse-landing-img--current-business {
  background-image: url("../img/portal-business-icon.svg");
}

.pse-landing-img--new-business {
  background-image: url("../img/nuevo-portal-empresas-icon.svg");
}

.bb-input-password #bb-toggle-password-visibility-button {
  height: 1rem;
}

.reset-password-dropdown {
  transform: translateY(45px);
}
.bb-input-password
  input:not(:last-child):not(.dropdown-menu):not(.dropdown-item):not(
    .valid-tooltip
  ):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-width: 1px;
  border-end-end-radius: 0.5rem;
  border-start-end-radius: 0.5rem;
}

.input-group
  > .btn:not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(
    .invalid-tooltip
  ):not(.invalid-feedback):not(:first-child) {
  position: absolute;
  right: 0;
  border: none;
  background: none;
  z-index: 10;
}

.input-group
  > .btn:not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(
    .invalid-tooltip
  ):not(.invalid-feedback):not(:first-child):not(.disabled):not(
    :disabled
  ):hover {
  background-color: transparent;
}

.identity-page--ready.identity-background-1 .identity-bg-layout {
  background-image: url("../img/background-1.png") !important;
}

.identity-page--ready.identity-background-2 .identity-bg-layout {
  background-image: url("../img/background-2.png") !important;
}

.identity-page--ready.identity-background-3 .identity-bg-layout {
  background-image: url("../img/background-3.png") !important;
}

.identity-page--ready.identity-background-4 .identity-bg-layout {
  background-image: url("../img/background-4.png") !important;
}

#challenge-reset-password-form .bb-form-field--md {
  max-width: 100%;
}

.identity-create-password-form-container {
  max-width: 600px !important;
}

.identity-icon--push-device {
  background-image: url("../img/SMS-OTP.svg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 50px;
  width: 28px;
}

.identity-container__form {
  max-width: 480px;
}

.identity-container {
  height: initial;
}

select:invalid {
  color: #7d7f82;
}

input.form-control[type="number"]::-webkit-outer-spin-button,
input.form-control[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 767px) {
  .template-stack-container {
    align-items: center;
    height: 100vh;
  }

  .bb-button-bar--reverse .bb-button-bar__button:first-child {
    margin-inline-end: 0;
  }

  #background {
    visibility: hidden;
  }

  .bb-form-field--md {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .identity-container {
    min-height: 100vh;
  }

  .template-stack-container {
    align-items: flex-start !important;
    min-height: 100vh;
  }

  #inner-background {
    visibility: hidden;
  }
}

#background {
  width: 50%;
  position: fixed;
  top: 0;
  height: 100vh;
  background-position: center;
}

.text-dim {
  font-size: 0.75rem;
}

.progress-separator {
  background-color: #0072c8;
  border-radius: 0.5rem;
  height: 4px;
  width: 100%;
}

.modal.fade .modal-dialog {
  transform: translate(0, 50px);
}

.bcs-support-modal--list li {
  margin-bottom: 1rem;
}

.dropleft .dropdown-menu {
  right: 0%;
  margin-top: 0.25rem;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-menu {
  max-height: 400px;
  overflow: auto;
  cursor: pointer;
}

.bb-subtitle .btn {
  font-size: inherit;
}

#bb-identity-create-password-form .bb-card--highlight {
  background-color: #f1f4f6;
}

#bb-identity-create-password-form {
  .bb-card:not(.bb-card--ignore) {
    border-radius: 8px;
    &.bb-card--highlight {
      background-color: #f1f4f6;
      ul {
        color: #496374;
        font-size: 12px;
      }
    }
  }
  label,
  .bb-button-bar {
    font-size: 16px;
  }
}

.bb-input-validation-message {
  align-items: flex-start;
  color: #d32f2f;
  display: flex;
  font-size: 14px;
  gap: 0.25rem;
  line-height: 1.25rem;
}

.bb-input-validation-message__icon {
  color: inherit;
  flex: 0 0 auto;
  margin-top: 0.0625rem;
}

#challenge-reset-password-form .form-control {
  margin-bottom: 0;
}

#challenge-reset-password-form .bb-input-validation-message {
  display: flex;
  margin-top: 0.25rem;
}

#challenge-reset-password-form .bb-input-validation-message.d-none {
  display: none;
}

#challenge-reset-password-form .bb-username-example {
  display: block;
}

#challenge-reset-password-form .reset-password-datepicker {
  align-items: stretch;
  background-color: #fff;
  border: 1px solid #c2c7ce;
  border-radius: 4px;
  display: flex;
  position: relative;
}

#challenge-reset-password-form .reset-password-datepicker .form-control {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  flex: 1 1 auto;
  padding-right: 3rem;
}

#challenge-reset-password-form .reset-password-datepicker .form-control:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}

#challenge-reset-password-form .reset-password-datepicker:focus-within {
  border-color: #c2c7ce;
  box-shadow: none;
  outline: 3px solid #0072c8;
  outline-offset: 4px;
}

#challenge-reset-password-form .reset-password-datepicker.is-invalid {
  border-color: #d32f2f;
}

#challenge-reset-password-form .reset-password-datepicker .bb-input-datepicker__calendar-opener-button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: #262627;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0 0.75rem;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

#challenge-reset-password-form .reset-password-native-date-picker {
  border: 0;
  cursor: pointer;
  height: 100%;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 3rem;
  z-index: 11;
}

#kc-form-options [data-role="forgot-password__back"] .bb-icon-arrow-back {
  color: #003f6e;
}