/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
:root {
  --offering-color: #bbbbbb;
  --offering-color-button: #ffffff;
  --offering-color-button-letter: #ff7944;
  --offering-color-letter: #282828;
}

/* Structure */
#igou-recarga .igou-section h1,
#igou-recarga .igou-section h2,
#igou-recarga .igou-section h3,
#igou-recarga .igou-section h4,
#igou-recarga .igou-section h5,
#igou-recarga .igou-section p,
#igou-recarga .igou-section span,
#igou-recarga .igou-section ul,
#igou-recarga .igou-section li,
#igou-recarga .igou-section {
  font-family: DM Sans;
}

#igou-recarga h1,
#igou-recarga h2,
#igou-recarga h3,
#igou-recarga h4,
#igou-recarga h5 {
  font-family: DM Sans;
}

/* Heading */
.igou-section h1 {
  font-size: 32px;
  font-family: DM Sans;
}

#igou-recarga .igou-section h2 {
  font-size: 28px;
}

.igou-section h3 {
  font-size: 24px;
}

.igou-section h4 {
  font-size: 20px;
}

.igou-container {
  font-size: 18px;
  max-width: 1140px;
  margin: 0 auto;
}

.igou-title-container {
  margin-bottom: 20px;
  margin-top: 20px;
}

h1.igou-heading-title {
  font-family: DM Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 58px;
  line-height: 76px;
  text-align: center;
  color: #333740;
}

.igou-heading-title span {
  color: #000000;
  font-size: 18px;
}

#igou-recarga h3.title-center,
#igou-recarga h3,
#igou-recarga .summary h3 {
  font-family: "DM Sans";
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

#igou-recarga h3.title-center-segmento {
  font-family: "DM Sans";
  font-size: 45px;
  font-weight: 900;
  text-align: center;
}

.igou-center {
  text-align: center;
}

.igou-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.igou-col-16 {
  width: 16.6666%;
  padding: 0px 15px;
}

.igou-col-25 {
  width: 25%;
  padding: 0px 15px;
}

.igou-col-33 {
  width: 33.3333%;
  padding: 0px 15px;
}

.igou-col-50 {
  width: 50%;
  padding: 0px 15px;
}

.igou-col-66 {
  width: 66.6666%;
  padding: 0px 15px;
}

.igou-col-83 {
  width: 83.3333%;
  padding: 0px 15px;
}

.igou-col-100 {
  width: 100%;
  padding: 0px 15px;
}

/* General */

section.igou-section.contrata {
  padding: 0;
}

section.igou-section.recarga {
  padding: 0;
}

h1.igou-heading-title {
  color: #3f00ba;
  font-weight: 600;
  text-align: center;
}

div#igou-contrata,
div#igou-recarga {
  max-width: 1140px !important;
  margin: 0 auto;
}

div#igou-contrata select,
div#igou-recarga select {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-radius: 5px;
  line-height: inherit;
  height: 45px;
  padding: 5px 15px;
}

.step-indicator {
  width: 100%;
  display: flex;
  clear: both;
  justify-content: center;
  margin: 40px auto;
}

.step-number {
  width: 90px;
  height: 32px;
  background: rgba(63, 0, 186, 0.1);
  border-radius: 20px;
  color: #333740;
  display: none;
  font-weight: 400;
  text-align: center;
  padding: 0 20px;
  font-size: 16px;
  line-height: 32px;
}

.step-number.active {
  display: block;
}

.step {
  display: none;
  animation: fadeEffect 1s;
}

.step.active {
  display: block;
}

.step-indicator-mobile {
  display: none;
}

.plan.offeringTemplate {
  margin: 0 20px 55px 20px;
  min-height: 380px;
  float: left;
  padding: 25px 15px;
  font-size: 14px;
  position: relative;
  width: 310px;
  text-align: center;
  background: var(--offering-color);
}

.plan.offeringTemplate.super-oferta {
  box-shadow: 0px 0px 15px 5px rgba(179, 138, 255, 0.46);
}

.button-underline button {
  background: #3f00ba;
  border: none;
  margin: 5px;
  color: white;
  font-weight: 700;
  border-radius: 9px;
  padding: 9px 24px;
  box-shadow: none;
  cursor: pointer;
}

.button-underline button:focus {
  background: #5bfba0;
}

.button-underline button.prev,
.button-underline button.prev_imei {
  background: #c4c4c4;
  margin-right: 25px;
}

.button-underline button.prev:before,
.button-underline button.prev_imei:before {
  content: "<";
  display: inline-block;
  margin-right: 10px;
}

.button-underline button.next:after {
  content: ">";
  display: inline-block;
  margin-left: 10px;
}

.button-underline button:hover {
  background: #5bfba0;
}

button[type="button"]:focus,
button[type="submit"]:focus,
button:focus {
  outline: none;
}

/* Check IMEI */

#imei-step .subtitle > a {
  color: #3f00ba;
  font-weight: 700;
}

form#imei_check,
form#msisdn_check {
  width: 400px;
  margin: auto;
}

#imei-step {
  text-align: center;
}

.imei-form-container {
  margin-top: 5px;
}

#igou-contrata input,
#igou-recarga input {
  color: rgba(0, 0, 0, 0.6);
  font-weight: normal;
  border-bottom: 1px solid #7c7c7c;
  box-sizing: border-box;
  height: 46px;
  padding: 0px 10px;
  width: 300px;
}

#igou-contrata input#imei,
#igou-recarga input#msisdn {
  color: #000000;
  font-weight: normal;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 0px 0px 17px;
  margin: 0 auto;
  text-align: center;
  width: 400px;
}

#igou-contrata input#imei:focus,
#igou-recarga input#msisdn:focus {
  border: 2px solid #3f00ba;
}

.igou-info-card {
  background: #f1f8ff;
  border: 1px solid #0080e8;
  box-sizing: border-box;
  border-radius: 8px;
  text-align: left;
  padding: 10px 20px;
  margin: 30px auto;
  width: 366px;
}

.igou-info-card p,
.igou-info-card ul,
.igou-info-card ul li {
  font-weight: normal;
  font-size: 14px;
  line-height: 21px;
  color: #172430;
  padding: 0;
  position: relative;
}

.igou-info-card ul {
  list-style: decimal;
  list-style-position: outside;
  margin: 0 0 0 20px !important;
}

/* Payments */
.stripe-credit-card {
  display: none;
}

.conekta-credit-card {
  display: none;
}

.clip-credit-card {
  display: none;
}

.store-cash {
  display: none;
}

.summary {
  background: #e9e8ec;
  border-radius: 8px;
  box-shadow: 0px 0px 36px #a0a0d247;
  width: 100%;
  padding: 15px;
}

#payment-form {
  background: #ffffff;
  float: left;
  width: 100%;
}

.stripe-credit-card #card-element {
  background: #ffffff;
  border: 1px solid #391186;
  border-radius: 5px;
  padding: 15px 10px;
  margin: 25px 0;
}

.summary .plan-name {
  color: #3f00ba;
  font-size: 24px;
  font-weight: 500;
  margin: 15px 0;
}

.summary .incluye {
  margin-bottom: 15px;
}

button#paymentSubmit:hover {
  background: #67f7af;
  color: #3f00ba;
}

span.success-reference {
  color: #000000;
  font-weight: 500;
}

#card-error {
  color: red;
}

.openpay-credit-card span.card-errors {
  color: #721c24;
  background-color: #f5c6cb;
  border: 1px solid red;
  font-weight: 500;
  padding: 8px 25px;
  margin: 15px auto;
  text-align: center;
  width: 100%;
}

.stripe-credit-card img.stripe-cards {
  margin-top: -10px;
}

#payment-form button#submit {
  background: #3f00ba;
  color: #ffffff;
  cursor: pointer;
  border: none;
  border-radius: 25px;
  box-shadow: none;
  margin-bottom: 20px;
  margin-top: 10px;
  width: 100%;
  padding: 10px 15px;
}

#payment-form button#submit:hover {
  background: #3f00ba;
}

#payment-form button#submit:focus {
  outline: none;
}

.summary td.label-plan {
  width: 50%;
}

.summary .total-total,
.summary .total-sim,
.summary .total-plan {
  text-align: left;
}

.summary .total-total {
  font-weight: 700;
}

.store-cash {
  text-align: center;
}

.store-imprime {
  background: #ffffff;
  border: 1px solid #666666;
  border-radius: 8px;
  box-shadow: 0px 0px 36px #d2d2d2;
  padding: 25px;
  width: 550px;
  margin: 0 auto;
  text-align: center;
}

.no-imprime {
  background: #000000;
  display: block;
  color: #ffffff;
  font-size: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -25px;
  margin-bottom: 25px;
  padding: 3px 10px;
  width: fit-content;
}

.store-cash span.nombre-plan {
  font-size: 24px;
  margin-bottom: 10px;
  display: block;
}

.store-cash span.monto {
  font-size: 24px;
  display: block;
  color: #000000;
  font-weight: 700;
}

.store-cash span.store-comision {
  display: inline-block;
  font-size: 12px;
  margin-bottom: 15px;
}

.store-cash .barcode {
  display: block;
  clear: both;
  width: 100%;
  margin: 25px auto;
}

.store-cash .barcode p.barcode-label {
  margin: 25px 0 0;
}

span.barcode-ref {
  background: #e9e8ec;
  border: 1px solid #bbbbbb;
  border-radius: 5px;
  color: #000000;
  font-weight: 700;
  letter-spacing: 10px;
  display: block;
  padding: 10px;
  width: fit-content;
  margin: 0 auto;
}

.store-instrucciones {
  text-align: left;
  background: #e9e8ec;
  padding: 25px;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #3f00ba solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
  100% {
    transform: rotate(360deg);
  }
}

.is-hide {
  display: none;
}

.button-underline {
  display: block;
  margin-top: 15px;
}

.flow-title {
  color: #3f00ba !important;
  font-weight: 800;
  text-align: center;
}

.title-center {
  text-align: center;
}

.subtitle {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  text-align: center;

  color: #333740;
}

.subtitle-segmento {
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
}

input[aria-invalid="true"] {
  border: 2px solid #fb2424 !important;
}

.error.help-block {
  display: block;
  color: #fb2424 !important;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

input.imei-error,
input.didi-code-error {
  border: 2px solid #fb2424 !important;
}

span.imei-error,
span.didi-code-error {
  color: #fb2424;
  display: none;
  font-size: 14px;
}

.payment-selector-container,
.shipping-selector-container {
  margin: 20px 0;
  /* payment */
}

.payment-selector-container button[type="button"],
.shipping-selector-container button[type="button"] {
  padding: 10px 15px;
  margin: 10px -15px;
  background: #ffffff;
  color: #333740;
  display: block;
  box-shadow: none;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  text-align: left;
  width: 330px;
}

.payment-selector p,
.shipping-selector p {
  max-width: 70%;
}

.payment-selector img,
.shipping-selector img {
  display: inline-block !important;
  max-width: 40% !important;
  margin: 10px 0 0 15px !important;
}

.payment-selector-container button span.light,
.shipping-selector-container button span.light {
  color: rgba(0, 0, 0, 0.6);
}

.payment-selector-container button[type="button"].active,
.payment-selector-container button[type="button"]:hover,
.shipping-selector-container button[type="button"].active,
.shipping-selector-container button[type="button"]:hover {
  color: #333740;
  border: 1px solid #3f00ba;
  box-shadow: 0px 0px 4px rgba(160, 160, 210, 0.09);
  background: rgba(63, 0, 186, 0.1);
}

#register_form fieldset,
#rechargin_form fieldset {
  border: none;
  margin-top: 25px;
}

hr.igou-divider {
  border: 1px solid #dbdbdb;
  margin: 35px auto;
  width: 90%;
}

#register_form input {
  width: 100%;
}

#register_form legend {
  padding: 20px 0;
  border-bottom: 1px solid #888;
}

#register_form label.required:after {
  content: "*";
  color: red;
}

.btn:hover {
  color: white !important;
  background: #fff;
  box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.15);
}

.center {
  text-align: center;
  padding: 80px;
}

.linea {
  text-align: center;
}

.linea > div {
  display: inline-block;
  margin: 10px;
  padding: 20px 5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #5438c3;
  text-align: center;
  cursor: pointer;
  color: white;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
  color: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.38);
  box-sizing: border-box;
  border-radius: 8px;
  min-height: 45px;
  padding: 5px 14px;
  width: 300px;
}

.colorwhite {
  color: inherit;
}

.liketable {
  display: inline-block;
  margin-top: 55px;
  width: 100%;
}

.liketable > div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.imagen {
  display: inline-block;
  height: 200px;
  width: 100px;
  margin-bottom: 30px;
  margin: 25px;
}

.hidden {
  display: none;
}

.registerbox {
  min-height: 200px;
  position: relative;
}

.registercontent {
  margin: 0;
  position: absolute;
  top: 50%;
  display: contents;
  transform: translateY(-50%);
}

.check {
  background: #3f00ba !important;
  color: #ffffff !important;
}

.current {
  box-shadow: 0px 9px 10px #5617d2;
  border: solid 2px #ece7f7;
  font-size: 25px;
  line-height: 18px;
  font-weight: bold;
}

.plan {
  background-color: #ffffff;
  border-radius: 15px;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.36);
  text-align: left;
  color: #333740;
  font-family: "Raleway", Sans-serif;
}

.tel {
}

.plan_title {
  color: var(--offering-color-letter);
  font-size: 45px;
  line-height: 1.1;
  font-weight: 900;
  /* margin: 20px; */
  text-align: center;
  font-family: "dm sans", Sans-serif;
}

.buttonplan {
  border: none;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
  background: var(--offering-color-button);
  border-radius: 20px;
  color: var(--offering-color-button-letter);
  width: 70%;
  margin-top: 15px;
  height: 30px;
  padding: 0;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.buttonplan:hover {
  background: var(--offering-color-button-letter);
  color: var(--offering-color-button);
}

.buttonplan:after {
  content: ">";
  display: inline-block;
  margin-left: 10px;
}

.letrasplan {
  color: var(--offering-color-letter);
}

.letrasplan ul {
  list-style: none;
  /* margin: 0 15px; */
  /* padding-left: 10px; */
  /* border-left: 2px solid #fe8f48; */
  line-height: normal;
  padding: 0;
}

.offer-description {
  min-height: 70px;
}

.offer-description li {
  margin: 0;
  list-style: none;
  display: flex;
}

span.igou-list-text {
  font-size: small;
  font-weight: 400;
  margin: 0 auto;
}

span.igou-list-icon {
  color: #000000;
  font-size: 5px;
  margin-right: 10px;
  vertical-align: middle;
  display: none;
}

.summary span.igou-list-icon {
  display: none;
}

.summary .incluye ul {
  padding: 0 20px;
}

.summary .incluye li span {
  font-size: 15px;
  line-height: 15px;
}

.offer-price {
  /* margin: 35px auto 35px; */
  font-size: 40px;
  font-weight: 700;
}

.offer-price {
  color: var(--offering-color-letter);
  /* margin: 35px auto 35px; */
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  font-family: "DM sans";
  border-bottom: 1px solid var(--offering-color-letter);
  width: 50%;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 10px;
  padding-bottom: 20px;
}

.offer-price small {
  font-size: 30px;
}

.offer-covertura {
  color: #b188ff;
  font-size: 15px;
  font-weight: 500;
  font-family: "DM Sans";
  line-height: 25px;
}

.offer-base-price {
  color: #7c8087;
  font-size: 20px;
  text-decoration: line-through;
  margin: 10px auto 25px;
}

#igou-recarga .offer-base-price.letrasplan {
  visibility: hidden;
}

/* Recargas */
.igou-icon {
  color: #6ec1e4;
  font-size: 2vw;
}

.como-p {
  text-align: justify;
}

.portabilidadcontent {
  display: none;
}

.recurrente {
  display: none;
}

.recurrente input[type="checkbox"] {
  min-height: auto;
  height: 20px;
  width: 20px;
  margin: 0;
  padding: 0;
}

label[for="recurrente"] {
  line-height: 20px;
}

/* Label animation */
div.field {
  position: relative;
  margin: 5px auto;
}

.igou-section label {
  color: #7c7c7c;
  cursor: initial;
  position: relative;
  margin: 15px 0 0 0px;
  padding: 0;
}

.igou-section .active-label {
  font-weight: 700;
}

.igou-section input[type="text"]:focus {
  outline: none;
}

.igou-section .conekta-credit-card label {
  color: #3f00ba;
  cursor: inherit;
  font-weight: 500;
  position: relative;
  display: block;
  margin: 0;
  top: auto;
  left: auto;
}

/* Conekta card form */
.field.field-100 {
  float: left;
  padding: 0 5px;
  width: 100%;
}

.field.field-33 {
  float: left;
  padding: 0 5px;
  width: 33.3333%;
}

button#paymentSubmit {
  margin: 10px auto;
  border: none;
  display: block;
  width: 400px;
  border-radius: 25px;
  background: #3f00ba;
  color: #ffffff;
}

#igou-contrata input,
#igou-recarga .conekta-credit-card input {
  width: 100%;
  border-radius: 10px;
}

#igou-contrata .field.checkbox label,
#igou-contrata .field.checkbox input {
  display: inline-block;
  position: relative;
  top: auto;
  left: auto;
  margin: 0 5px 0 0;
  padding: 0;
  vertical-align: middle;
  height: auto;
  width: auto;
}

.field.checkbox {
  margin: 5px auto;
  display: flex;
  align-items: baseline;
  margin: auto;
}

span.card-errors {
  color: red;
  margin-bottom: 15px;
  display: block;
}

/* Nuevo flujo */
ul.figo-instructions {
  list-style: decimal;
  line-height: 24px;
  color: #000000;
  width: 275px;
  text-align: left;
  margin: 10px auto 25px !important;
}

/* .metodos-de-pago {
  display: none;
} */

div#valida-content {
  max-width: 550px;
  margin: 0 auto;
}

.igou-row.valida_instructions {
  text-align: left;
  margin: 15px auto;
}

.igou-row.valida_instructions h3 {
  color: #3f00ba;
  font-weight: 700;
}

.igou-row.valida_instructions p {
  color: #000000;
}

/* Mobile */
@media only screen and (max-width: 768px) {
  .igou-row.valida_instructions h3 {
    margin: 0;
  }

  #valida-content .igou-col-66.desc {
    padding-left: 15px;
  }

  .igou-row {
    margin-left: 0;
    margin-right: 0;
  }

  .igou-col-33,
  .igou-col-50,
  .igou-col-66 {
    padding: 0;
    width: 100%;
  }

  .igou-col-33.desc {
    padding: 0;
    width: 33.3333%;
  }

  .igou-col-50.desc {
    padding: 0;
    width: 50%;
  }

  .igou-col-66.desc {
    padding: 0;
    width: 66.6666%;
  }

  .igou-col-25 {
    padding: 0;
    width: 48%;
  }

  .igou-col-25:nth-child(even) {
    margin-right: 4%;
  }

  .igou-col-100 {
    padding: 0;
  }

  .step-indicator {
    margin: 10px auto;
  }

  .step {
    padding: 0 15px;
  }

  .step-number {
    display: none;
  }

  .step-number.active {
    display: block;
  }

  .step-indicator-mobile {
    display: block;
    margin-bottom: -40px;
  }

  .step-indicator-mobile p {
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
  }

  /* IMEI */
  form#imei_check,
  form#msisdn_check {
    width: auto;
    margin: auto;
  }

  .imei-form-container {
    margin-top: 5px;
  }

  .igou-info-card {
    text-align: left;
    width: auto;
  }

  button#valida_imei,
  button#valida_msisdn {
    margin: 5px auto;
    width: auto;
  }

  .subtitle {
    font-size: 14px;
  }

  .payment-selector-container button {
    margin: 10px 0;
    width: 100%;
  }

  input {
    max-width: 100%;
  }

  #register_form fieldset,
  #rechargin_form fieldset {
    padding: 0 0.5em 0;
  }

  .letrasplan ul {
    height: auto;
  }

  .button-underline {
    display: flex;
    margin-top: 15px;
    margin-bottom: 20px;
  }

  .button-underline button {
    padding: 8px 20px;
    width: 50%;
  }

  .button-underline button.prev,
  .button-underline button.prev_imei {
    margin-right: 0;
    padding: 15px 20px;
  }

  .button-underline button.next {
    padding: 15px 20px;
  }

  .payment-selector-container button[type="button"] {
    padding: 10px;
    margin: 10px auto;
    width: 295px;
  }

  div#store-imprime {
    padding: 25px 10px;
    width: auto;
  }

  span.barcode-ref {
    letter-spacing: 5px;
  }

  .store-instrucciones ul {
    padding: 0 0 0 10px;
  }

  /* Conekta credit card */

  .field.field-33 {
    float: left;
    padding: 0 5px;
    width: 50%;
  }

  button#paymentSubmit {
    width: 100%;
  }
}

div#os-imei-instructions {
  text-align: left;
  margin-top: 15px;
  display: inline-block;
}

img.ios-img,
img.android-img {
  margin-bottom: 15px;
}

#os-imei-instructions h3 {
  color: #3f00ba;
  margin: 0;
}

#os-imei-instructions p {
  color: #333740;
  font-size: 14px;
  font-family: "DM Sans";
  font-weight: 400;
  line-height: 18px;
}

span.os-title {
  color: #172430;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  font-family: "DM Sans";
  line-height: 21px;
  margin: 15px 0 25px 0;
}

.os-selector {
  display: flex;
}

.os-selector span {
  width: 50%;
  border-bottom: 1px solid #7c7c7c;
  color: #7c7c7c;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.os-selector span.active {
  border-bottom: 2px solid #3f00ba;
  color: #3f00ba;
  font-weight: 700;
}

.os-panel {
  display: none;
}

.os-panel.active {
  display: block;
}

/* OpenPay */

.openpay-credit-card .bkng-tb-cntnt * {
  color: #444;
  font-weight: 400;
}

body {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}

strong {
  font-weight: 700;
}

a {
  cursor: pointer;
  display: block;
  text-decoration: none;
}

a.button {
  border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  text-align: center;
  font-size: 21px;
  font-weight: 400;
  padding: 12px 0;
  width: 100%;
  display: table;
  background: #e51f04;
  background: -moz-linear-gradient(top, #e51f04 0%, #a60000 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #e51f04),
    color-stop(100%, #a60000)
  );
  background: -webkit-linear-gradient(top, #e51f04 0%, #a60000 100%);
  background: -o-linear-gradient(top, #e51f04 0%, #a60000 100%);
  background: -ms-linear-gradient(top, #e51f04 0%, #a60000 100%);
  background: linear-gradient(top, #e51f04 0%, #a60000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E51F04', endColorstr='#A60000', GradientType=0);
}

a.button i {
  margin-right: 10px;
}

a.button.disabled {
  background: none repeat scroll 0 0 #ccc;
  cursor: default;
}

.bkng-tb-cntnt {
  float: left;
}

.bkng-tb-cntnt a.button {
  color: #fff !important;
  float: right;
  font-size: 18px;
  font-weight: 700;
  padding: 5px 50px;
  width: auto;
}

.bkng-tb-cntnt a.button.o {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  color: #e51f04;
  border: 1px solid #e51f04;
}

.bkng-tb-cntnt a.button i {
  color: #fff;
}

.bkng-tb-cntnt a.button.o i {
  color: #e51f04;
}

.bkng-tb-cntnt a.button.right i {
  float: right;
  margin: 2px 0 0 10px;
}

.bkng-tb-cntnt a.button.left {
  float: left;
}

.bkng-tb-cntnt a.button.disabled.o {
  border-color: #ccc;
  color: #ccc;
}

.bkng-tb-cntnt a.button.disabled.o i {
  color: #ccc;
}

.pymnts {
  float: left;
}

.pymnts * {
  float: left;
}

.sctn-row {
  margin-bottom: 35px;
  width: 800px;
}

.sctn-col {
  width: 375px;
}

.sctn-col.l {
  width: 425px;
}

.sctn-col input {
  border: 1px solid #ccc;
  font-size: 18px;
  line-height: 24px;
  padding: 10px 12px;
  width: 333px;
}

.sctn-col label {
  margin-bottom: 10px;
  width: 100%;
}

.sctn-col.x3 {
  width: 300px;
}

.sctn-col.x3.last {
  width: 200px;
}

.sctn-col.x3 input {
  width: 210px;
}

.sctn-col.x3 a {
  float: right;
}

.pymnts-sctn {
  width: 800px;
}

.pymnt-itm {
  margin: 0 0 3px;
}

.pymnt-itm h2 {
  background-color: #e9e9e9;
  font-size: 24px;
  line-height: 24px;
  margin: 0;
  padding: 28px 0 28px 20px;
  width: 100%;
}

.pymnt-itm.active h2 {
  background-color: #e51f04;
  color: #fff;
  cursor: default;
}

.pymnt-itm div.pymnt-cntnt {
  display: none;
}

.pymnt-itm.active div.pymnt-cntnt {
  background-color: #f7f7f7;
  display: block;
  padding: 0 0 30px;
  width: 100%;
}

.pymnt-cntnt div.sctn-row {
  margin: 20px 0;
  padding: 0 30px;
  width: 100%;
}

.pymnt-cntnt div.sctn-row div.sctn-col {
  width: 50%;
}

.pymnt-cntnt div.sctn-row div.sctn-col.l {
  width: 50%;
}

.pymnt-cntnt div.sctn-row div.sctn-col input {
  max-width: 303px !important;
}

.pymnt-cntnt div.sctn-row div.sctn-col.half {
  width: 155px;
}

.pymnt-cntnt div.sctn-row div.sctn-col.half.l {
  float: left;
  width: 50%;
}

.pymnt-cntnt div.sctn-row div.sctn-col.half input {
  max-width: 113px !important;
}

.pymnt-cntnt div.sctn-row div.sctn-col.cvv {
  background-image: url("../img/igou/cvv.png");
  background-position: 156px center;
  background-repeat: no-repeat;
  padding-bottom: 30px;
}

.pymnt-cntnt div.sctn-row div.sctn-col.cvv div.sctn-col.half input {
  width: 110px;
}

.openpay {
  margin: 10px 20px 10px 0;
  width: auto;
  display: flex;
  float: right;
}

.openpay div.logo {
  background-image: url(../img/igou/openpay.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  border-right: 1px solid #ccc;
  font-size: 12px;
  font-weight: 400;
  height: 50px;
  padding: 0px 25px 0 0;
}

.openpay div.shield {
  background-image: url(../img/igou/security.png);
  background-position: left top;
  background-repeat: no-repeat;
  font-size: 12px;
  font-weight: 400;
  margin-left: 20px;
  padding: 0 0 0 40px;
  max-width: 245px;
}

.card-expl {
  float: left;
  height: 80px;
  margin: 20px 0 0;
}

.card-expl div {
  background-position: left 45px;
  background-repeat: no-repeat;
  height: 70px;
  padding-top: 10px;
}

.card-expl div.debit {
  background-image: url("../img/igou/cards2.png");
  margin-left: 20px;
  width: 540px;
}

.card-expl div.credit {
  background-image: url("../img/igou/cards1.png");
  margin-left: 30px;
  width: auto;
}

.card-expl h4 {
  font-weight: 400;
  margin: 0;
}

/* Mobile */
@media only screen and (max-width: 768px) {
  .pymnt-cntnt div.sctn-row div.sctn-col.l,
  .pymnt-cntnt div.sctn-row div.sctn-col {
    width: 100%;
  }

  .pymnt-cntnt div.sctn-row {
    padding: 0 10px;
  }

  .openpay {
    padding: 0 15px;
    margin: 10px 0 10px 0;
    flex-direction: column;
  }

  .openpay div.logo {
    border-right: none;
    padding: 0;
    margin-bottom: 15px;
  }

  .openpay div.shield {
    margin-left: 0;
    padding: 0 0 0 40px;
    max-width: 100%;
  }

  .bkng-tb-cntnt a.button {
    width: 100%;
  }
}

.igou-section .summary {
  width: 100% !important;
}

/* Proceso de activación */
.pannel {
  display: none;
}

.pannel.active {
  display: block;
}

.input-box {
  max-width: 200px;
  /* background: #fff; */
  border-radius: 4px;
  padding-left: 0.5rem;
  overflow: hidden;
  text-align: center;
  font-family: sans-serif;
}

.termsandConditions {
  font-size: large !important;
  line-height: normal !important;
}

.caja {
  background: #220d41 !important;
  border: 2px solid #9246e3 !important;
  color: white !important;
  font-weight: 500 !important;
}

.btn {
  height: 50px;
  border-radius: 10px;
  background-color: #9246e3 !important;
  color: white !important;
  font-size: 20px;
  font-weight: bold;
  border-color: black;
}

.input-box .prefix {
  font-weight: 300;
  font-size: 14px;
  color: #999;
}

.input-box input {
  flex-grow: 1;
  font-size: 14px;
  background: #fff;
  border: none;
  outline: none;
  padding: 0.5rem;
}

#activate {
  margin: 5px auto;
  display: block;
}

.koonol-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.koonol-email,
.koonol-label,
#sendEmail {
  margin: 10px;
  border-radius: 9px;
}

.termsandConditions {
  font-size: large !important;
  line-height: normal !important;
}

.image-button {
  display: inline-block;
  border: none;
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
}

/* Cambiar el cursor al pasar el mouse sobre el botón */
.image-button:hover {
  cursor: pointer;
}

/* Estilo para eliminar el contorno predeterminado al hacer clic en el botón */
.image-button:focus {
  outline: none;
}

/* Opcional: agregar efecto de sombra o transición */
.image-button img {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.image-button:hover img {
  transform: scale(1.1);
}

.styled-list {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

/* Estilos para los elementos de la lista */
.styled-list li {
  margin: 10px 0;
  font-size: 18px;
}

/* Estilos base */
.acordeon {
  list-style: none;
  padding: 0;
  width: 100%;
}

.boton-acordeon {
  width: 100%;
  padding: 10px;
  text-align: left;
  background-color: #f0f4f7 !important;
  border: 1px solid #fff !important;
  cursor: pointer;
  color: #20282e !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) !important;
}

.contenido-acordeon {
  display: none;
  padding: 10px;
  background-color: #f0f4f7 !important;
  border: 1px solid #ccc !important;
  border-radius: 10px !important;
}

/* Estilo activo */
.active {
  display: block;
}

#nombreVerify,
#emailVerify,
#ported_didVerify,
#nipVerify,
#iccidVerify {
  background-color: #f2f2f2 !important;
  color: #999 !important;
  border: 1px solid #ccc !important;
}

.clip-credit-card {
  display: none;
}

.plan_title_black {
  position: relative;
  padding: 35px 10px;
  margin: -25px -15px 0 -15px;
  color: #000000;
  background-image: linear-gradient(90deg, #333 0%, #000000e2 100%);
  border-radius: 20px 20px 20px 20px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  border: 1px solid #000;
}

.buttonplanblack {
  border: none;
  font-size: 19px;
  font-weight: 700;
  padding: 10px 55px !important;
  box-shadow: none;
  background: #333;
  border-radius: 10px;
  color: #ffffff;
  margin-bottom: 20px;
  width: 100%;
}

.buttonplanblack:hover {
  background: #333;
  color: #fff;
}

.button-underline .buttonBlack {
  background: #333;
  border: 3px solid white;
  margin: 5px;
  color: white;
  font-weight: 700;
  border-radius: 9px;
  padding: 9px 24px;
  box-shadow: none;
  cursor: pointer;
}

.button-underline .buttonBlack:hover {
  background: white;
  color: #333;
  border: 1px solid #333;
}

.os-selector span.black {
  width: 50%;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.os-selector span.active.black {
  border-bottom: 2px solid #3f00ba;
  color: #3f00ba;
  font-weight: 700;
}

.igou-row.valida_instructions h3 {
  color: #fff;
  font-weight: 700;
}

.igou-section label.black {
  color: #333;
  cursor: initial;
  position: relative;
  margin: 15px 0 0 0px;
  padding: 0;
}

.summary.black {
  background: #ffff;
  color: #333;
  border-radius: 8px;
  box-shadow: 0px 0px 36px #c4c4c4;
  width: 100%;
  padding: 15px;
}

.img-cenefa {
  display: none;
}

.img-cenefa.mostrar {
  display: block;
}

.mxn {
  font-size: 15px !important;
}

.imagen-promo{
  width: 70%;
  margin: 0 auto;
  display: block;
  padding-bottom: 10px;
}

.nodidi{
  display: none;
}