/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* GENERALES */
:root {
  --white: #FFF;
  --yellow: #FFCE00;
  --black: #2B2922;
  --green: #11C66F;
  --blue: #0094E7;
  --lightYellow: #FFF6D0;
  --midYellow: #FFE784;
  --lightOrange: #FFB11A;
  --midOrange: #FF8A00;
  --orange: #FF6A16;
  --red: #DE1B1B;
  --grayText: #9A9997;
  --bgInput: #FCFAF5;
  --bgHome: #FFCE00;
  --bgGray: #F7F6F4;
}


html {
  font-size: 16px;
}

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: var(--white);
  color: var(--black);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

@media (min-width: 1300px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1280px;
  }
}

.section {
  margin-bottom: 3rem;
}

.title-banner {
  font-weight: 700;
  font-size: 48px;
}

.title {
  font-weight: 600;
  font-size: 24px;
}

.title-secondary {
  font-weight: 600;
  font-size: 18px;
}

.text-bold {
  font-weight: 600;
}

.number-text-light {
  font-family: 'Public Sans', sans-serif;
}

.number-text {
  font-family: 'Public Sans', sans-serif;
  font-weight: 800;
  font-size: 24px;
}

.number-text-alt {
  font-family: 'Public Sans', sans-serif;
  font-weight: 600;
  color: var(--grayText);
  font-size: 16px;
}

.text-through {
  text-decoration: line-through;
}

.text-nowrap {
  white-space: nowrap;
}

.btn, .form-control {
  border-radius: 8px;
  height: 48px;
}

.btn:focus, .btn.focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 206, 0, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(255, 206, 0, 0.25);
}

.btn:focus, .btn.focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 206, 0, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(255, 206, 0, 0.25);
}

.form-control {
  background-color: var(--bgInput);
}

.form-control-search {
  padding-left: 1rem;
}

.form-control:focus {
  color: var(--black);
  background-color: #fff;
  border-color: var(--yellow);
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 206, 0, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(255, 206, 0, 0.25);
}

.form-control-style-none:focus {
  color: var(--black);
  background-color: #fff;
  border-color: var(--white) !important;
  outline: 0 !important;
  -webkit-box-shadow: 0 0 0 0.2rem var(--white) !important;
          box-shadow: 0 0 0 0.2rem var(--white) !important;
}

.btn-primario {
  font-weight: 600;
  background-color: var(--yellow);
  /* For browsers that do not support gradients */
  background-image: -o-linear-gradient(top left, #FFE578, #FFCE00, #FFB01A);
  background-image: -webkit-gradient(linear, left top, right bottom, from(#FFE578), color-stop(#FFCE00), to(#FFB01A));
  background-image: linear-gradient(to bottom right, #FFE578, #FFCE00, #FFB01A);
}

.btn-primario:hover {
  background-color: var(--lightYellow);
  /* For browsers that do not support gradients */
  background-image: -o-linear-gradient(top left, #FFF6D0, #FFE784, #FFCE00);
  background-image: -webkit-gradient(linear, left top, right bottom, from(#FFF6D0), color-stop(#FFE784), to(#FFCE00));
  background-image: linear-gradient(to bottom right, #FFF6D0, #FFE784, #FFCE00);
}

.btn-secundario {
  border: 1px solid var(--black);
}

.btn-secundario:hover {
  border: 1px solid var(--black);
}

.btn-outline-dark {
  font-weight: 600;
}

.btn-exito {
  font-weight: 600;
  background-color: var(--green);
  border-color: var(--green);
}

.btn-exito:focus, .btn-exito.focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(33, 234, 126, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(33, 234, 126, 0.25);
}

.btn-style-none {
  background-color: var(--white);
  border-color: none;
}

.btn-style-none:hover {
  color: var(--black);
  background-color: var(--white);
  border-color: 0;
}

.btn-style-none:focus, .btn-style-none.focus {
  background-color: var(--white);
  border-color: 0 !important;
  -webkit-box-shadow: 0 0 0 0.2rem var(--white) !important;
          box-shadow: 0 0 0 0.2rem var(--white) !important;
}

.btn-style-none.disabled, .btn-style-none:disabled {
  color: var(--white);
  background-color: var(--white);
  border-color: 0;
}

.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btn-rounded {
  border-radius: 50%;
  height: 48px;
  width: 48px;
}

.btn-large {
  padding-left: 3rem;
  padding-right: 3rem;
}

.btn-icon {
  /* background-color: pink; */
  border: none;
  font-size: 24px;
  height: 28px;
  padding: 0.5rem;
}

.btn-link {
  font-weight: 600;
  color: var(--black);
}

.btn-link:hover {
  color: var(--black);
}

/*OCULTAR CONTROLES INCREMENTO */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */
}

/* FIN OCULTAR CONTROLES INCREMENTO */
/* BACKGROUNDS */
.bg-home {
  background-color: var(--bgHome);
}

.bg-main-category {
  background-color: var(--white);
}

.bgAtWork {
  background-color: var(--bgAtWork);
}

.bg-white {
  background-color: var(--white) !important;
}

/* FIN BACKGROUNDS */
/* TEXT COLORS */
.text-white {
  color: var(--white);
}

/* FIN TEXT COLORS */
/* SHADOWS */
.nav-shadow {
  -webkit-box-shadow: 0 .8rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 .8rem 1rem rgba(0, 0, 0, 0.15);
}

/* FIN SHADOWS */
/* CUSTOM SCROLLBAR */
.custom-scrollbar::-webkit-scrollbar {
  width: .5rem;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--bgInput);
}

/* .custom-scrollbar::-webkit-scrollbar-track:hover {
  background: lavFINer;
} */
/* scrollbar itself */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--yellow);
  border-radius: .5rem;
}

/* FIN CUSTOM SCROLLBAR */
/* BORDERS */
.border-none {
  border: none !important;
}

/* FIN BORDERS */
/* PADDING */
.padding-none {
  padding: 0;
}

/* FIN PADDING */

/* BADGE */
.badge {
  font-family: 'Public Sans', sans-serif;
  font-weight: 700;
  color: #fff;
  height: 24px;
  width: 24px;
  background-color: var(--red);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50%;
  font-size: 12px;
}
/* FIN BADGE */

/* MARGIN */

/* FIN MARGIN */

.dropdown-item.active, .dropdown-item:active {
  color: var(--black);
  text-decoration: none;
  background-color: var(--yellow);
}
/* FIN GENERALES ====================================*/
.wrap-bg-login {
  /* background-color: lightgreen; */
  min-height: 100vh;
}

.container-form-login {
  /* background-color: pink; */
  padding-left: 0;
  padding-right: 0;
}

.wrap-form-login {
  /* background-color: peru; */
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.form-login {
  /* background-color: lavender; */
  min-width: 300px;
  max-width: 450px;
  padding-bottom: 2rem;
}

.form-login__img {
  /* background-color: lightgreen; */
  text-align: center;
}

.form-login img {
  margin: 1rem 0;
  height: 28px;
}

.title-login, .title-confirmacion {
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  margin-bottom: 1.5rem;
  padding-top: .5rem;
}

.form-login .title-login {
  /* background-color: pink; */
  text-align: center;
}

.invalid-feedback {
  color: var(--red);
  /* display: block; */
}

.label-help {
  /* background-color: yellow; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

label {
  /* background-color: lightgreen; */
}

.label-help .btn {
  padding: 0;
  height: 16px;
}

.field-icon {
  background-color: transparent;
  /* background-color: pink; */
  cursor: pointer;
  height: 48px;
  width: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  float: right;
  margin-top: -48px;
  border-radius: 8px;
  position: relative;
  z-index: 2;
}

.bg-login {
  background-image: url(../img/bg/bg-login.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* FOOTER */
.header-footer {
  background-color: var(--yellow);
  padding-top: .5rem;
  padding-bottom: .5rem;
  text-align: right;
  padding-left: 2rem;
  padding-right: 2rem;
}

.header-footer span {
  font-weight: 600;
}

.footer-main {
  background-color: var(--black);
  padding-top: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.list-group-footer {
  font-size: 1rem;
}

.list-group-footer h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 0;
}

.list-group-footer .list-group-item {
  border: none;
  background-color: var(--black);
  /* background-color: pink; */
  color: var(--white);
  padding-left: 0;
}

.list-group-footer .list-group-item a {
  color: var(--white);
}

.list-group-footer .list-group-item a:hover {
  color: var(--yellow);
  text-decoration: none;
}

.footer-bottom {
  background-color: var(--black);
  padding-top: .5rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: right;
  border: none;
}

/* FIN FOOTER */
/* CONFIRMACION validador */
.content-confirmacionvalidador .btn {
  margin: 2rem auto;
}

/* FIN CONFIRMACION validador */
/* validador */
.wrap-left-validador {
  background-color: var(--yellow);
  background-image: -o-linear-gradient(top left, #FFE578, #FFCE00, #FFB01A);
  background-image: -webkit-gradient(linear, left top, right bottom, from(#FFE578), color-stop(#FFCE00), to(#FFB01A));
  background-image: linear-gradient(to bottom right, #FFE578, #FFCE00, #FFB01A);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.wrap-mensaje-validador {
  /* background-color: lavender; */
  max-width: 450px;
  padding-bottom: 2rem;
}

.wrap-mensaje-validador img {
  margin: 3rem 0;
  height: 28px;
}

.wrap-right-validador {
  /* background-color: lightsalmon; */
  min-height: 100vh;
  padding-left: 0;
  padding-right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.navbar-validador {
  background-color: var(--white);
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.navbar-validador .navbar-brand {
  /* background-color: pink; */
  padding: 0;
  display: none;
}

.navbar-validador .dropdown-toggle::after {
  display: none;
}

.navbar-validador .navbar-brand img {
  height: 1rem;
}

.form-validador {
  /* background-color: lightgreen; */
  min-width: 300px;
  max-width: 450px;
}

.form-validador .fieldset {
  /* background-color: lavender; */
  margin-top: 1rem;
  width: 100%;
}

.fieldset-nav {
  /* background-color: pink; */
  margin-bottom: 1rem;
  height: 48px;
}

.indicators-validador {
  list-style: none;
  /* background-color: pink; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 1rem;
}

.indicators-validador li {
  margin: 0 .5rem;
  height: 12px;
  width: 12px;
  background-color: var(--grayText);
  border-radius: 50%;
}

.indicators-validador .active {
  background-color: var(--yellow);
}

.content-btn-fieldset {
  /* background-color: teal; */
  width: 100%;
  padding: 1rem 0 2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.content-btn-fieldset a:first-child {
  /* background-color: pink; */
  margin-bottom: .5rem;
}


.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: var(--yellow);
  background-color: var(--yellow);
}

.custom-control-input:focus~.custom-control-label::before {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 206, 0, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(255, 206, 0, 0.25);
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: var(--yellow);
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
  color: #fff;
  background-color: var(--midYellow);
  border-color: var(--midYellow);
}

.custom-control-label {
  cursor: pointer;
}

.custom-control-label a {
  color: var(--black);
  font-weight: 600;
}

/* FIN validador */

/* ESTADO DEL CÓDIGO */
.wrap-validador-estado {
  /* background-color: lightsalmon; */
  min-height: 100vh;
  padding-top: 3rem;
  padding-left: 0;
  padding-right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;

}

.back {
  /* background-color: lavender; */
  width: 100%;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.back .btn {
  font-size: 1rem;
}

.back .btn-link:hover {
  text-decoration: none;
}

.back .btn-link:hover .text-link {
  /* background-color: yellow; */
  text-decoration: underline;
}

.back .btn-link:hover span {
  /* background-color: pink; */
  text-decoration: none;
}

.title-login-mobile {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 0;
  padding-right: 1rem;
  display: none;
}

.content-cards {
  /* background-color: pink; */
}

.content-cards .row {
  margin-left: -.25rem;
  margin-right: -.25rem;
}

.content-cards .col-card {
  padding: 0 .25rem .5rem .25rem;
}

.card-validador {
  background-color: var(--white);
  border: 1px solid rgba(43, 41, 34, 0.3);
  border-radius: .5rem;
  padding: .8rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.card-codigo {
  background-color: var(--black);
  color: var(--white);
}

.card-codigo .label-card {
  color: rgba(252,250,245,.5);
}

.content-text-card {
  /* background-color: yellow; */
  max-width: 75%;
}

.card-validador p {
  font-size: 14px;
  margin-bottom: 0;
}

.label-card {
  color: rgba(43, 41, 34, 0.5)
}

.name-product {
  font-weight: 600;
}

.text-card-description {
  font-size: 12px;
}

.content-img-card {
  /* background-color: salmon; */
  overflow: hidden;
  border-radius: .5rem;
  height: 80px;
  width: 80px;
}

.state-icon {
  color: var(--white);
  font-size: 2rem;
  border-radius: 50%;
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.enabled {
  background-color: var(--green);
}

.disabled {
  background-color: var(--red);
}

.expired {
  background-color: var(--blue);
}

.enabled-bg {
  background-color: rgba(17,198,11,0.2);
}

.disabled-bg {
  background-color: rgba(222,27,27,0.2);
}

.expired-bg {
  background-color: rgba(0,148,131,0.2);
}


/* FIN ESTADO DEL CÓDIGO */

/* MODALS */
.modal-title {
  font-weight: 700;
}
/* FIN MODALS */

/* CONFIRMACION DE CANJE */
.navbar-confirmacion {
  /* background-color: lavender; */
}

.navbar-confirmacion .navbar-brand {
  display: block;
}

.wrap-confirmacion-canje {
  /* background-color: pink; */
  min-height: 100vh;
  padding-top: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.confirmacion-canje {
  /* background-color: lightgreen; */
  min-width: 300px;
  max-width: 350px;
  text-align: center;
}

.confirmacion-canje span {
  display: inline-block;
}

.confirmacion-canje p {
  /* background-color: salmon; */
  margin-bottom: .5rem;
}

.card-confirm {
  background-color: var(--white);
  border: 1px solid rgba(43, 41, 34, 0.3);
  border-radius: .5rem;
  padding: .8rem 1rem;
  margin-bottom: .5rem;
}

.card-confirm .cod-product {
  font-weight: 600;
  margin-bottom: 0;
}

.confirmacion-canje .content-btn-fieldset {
  /* background-color: yellow; */
  padding-top: 2.5rem;
}

/* FIN CONFIRMACION DE CANJE */
.card-copy{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
/* LOADER */

.loader {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    background-color: rgba(20, 20, 43, .7);
    width:100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1055;
    /* display: none; */
}

.loader img {
    margin-bottom: 1rem;
    height: 8rem;
    width: 8rem;
}

.loader span {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}
/* END LOADER */