@import url("../fonts/NunitoSans-Black/font.css");
@import url("../fonts/NunitoSans-Bold/font.css");
@import url("../fonts/NunitoSans-ExtraLight/font.css");
@import url("../fonts/NunitoSans-Light/font.css");
.text-blue {
  color: #0E4183;
}
.gradient {
  background: linear-gradient(to left top, #3F9ADC, #0E4183);
}
.set_country .back-link {
  display: none;
}
.back-link {
  width: 132px;
  height: 45px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
.back-link span {
  line-height: 32px;
}
body {
  font-family: 'NunitoSans-ExtraLight';
  color: #1D1D1B;
}
body label,
body .text-blue {
  color: #275EA5;
}
body label,
body .bold,
body .btn,
body .accounts-template {
  font-family: 'NunitoSans-Bold';
}
body .logo-container {
  background-color: #0E4183;
}
body header h1 {
  font-size: 64px;
}
body header h3 {
  font-size: 28px;
}
body .banner-container h1 {
  font-size: 40px;
}
body .banner-container h3 {
  font-size: 16px;
}
body header,
body .banner-container {
  background: linear-gradient(to left top, #3F9ADC, #0E4183);
}
body header h1,
body .banner-container h1,
body header h3,
body .banner-container h3 {
  color: white;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 500;
}
body main {
  background-color: #F6F6F6;
  padding-bottom: 60px;
}
body main .faq-container {
  background-color: white;
  border-radius: 10px;
  padding: 25px 40px;
  max-width: 800px;
}
body main .faq-container h4 {
  color: #0E4183;
  font-size: 20px;
  margin-bottom: 27px;
  font-weight: 700;
}
body main .faq-container .question-container {
  margin-bottom: 47px;
}
body main .faq-container .question-container a.rounded-circle {
  background-color: #F6F6F6;
  display: inline-block;
  width: 35px;
  height: 35px;
  vertical-align: middle;
  text-align: center;
  line-height: 35px;
}
body main .faq-container .question-container .faq-item {
  border-bottom: #C3C3C3 solid 1px;
  padding-top: 20px;
}
body main .faq-container .question-container .faq-item .fa.fa-chevron-up {
  display: none;
}
body main .faq-container .question-container .faq-item .fa.fa-chevron-down {
  display: inline-block;
}
body main .faq-container .question-container .faq-item.showing-answer .fa.fa-chevron-up {
  display: inline-block;
}
body main .faq-container .question-container .faq-item.showing-answer .fa.fa-chevron-down {
  display: none;
}
body main .faq-container .question-container .faq-item:first-child {
  padding-top: 0;
}
body main .faq-container .question-container .faq-item:last-child {
  border: 0 none;
}
body main .faq-container .question-container .faq-title {
  height: 60px;
}
body main .faq-container .question-container .faq-title .question {
  color: #0E4183;
  font-size: 16px;
  font-weight: 500;
}
body main .faq-container .question-container .faq-title p {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}
body main .note {
  color: #0E4183;
  font-size: 20px;
  font-weight: 700;
}
body footer {
  background-color: #EBEBEB;
}
body footer div.col.footer-content {
  line-height: 95px;
}
body .faq-body {
  background-color: #F6F6F6;
}
body .faq-body .faq-container {
  background-color: white;
  border-radius: 10px;
  padding: 25px 40px;
  max-width: 800px;
}
body .faq-body .faq-container h4 {
  color: #0E4183;
  font-size: 20px;
  margin-bottom: 27px;
  font-weight: 700;
}
body .faq-body .faq-container .question-container {
  margin-bottom: 47px;
}
body .faq-body .faq-container .question-container a.rounded-circle {
  background-color: #F6F6F6;
  display: inline-block;
  width: 35px;
  height: 35px;
  vertical-align: middle;
  text-align: center;
  line-height: 35px;
}
body .faq-body .faq-container .question-container .faq-item {
  border-bottom: #C3C3C3 solid 1px;
  padding-top: 20px;
}
body .faq-body .faq-container .question-container .faq-item .fa.fa-chevron-up {
  display: none;
}
body .faq-body .faq-container .question-container .faq-item .fa.fa-chevron-down {
  display: inline-block;
}
body .faq-body .faq-container .question-container .faq-item.showing-answer .fa.fa-chevron-up {
  display: inline-block;
}
body .faq-body .faq-container .question-container .faq-item.showing-answer .fa.fa-chevron-down {
  display: none;
}
body .faq-body .faq-container .question-container .faq-item:first-child {
  padding-top: 0;
}
body .faq-body .faq-container .question-container .faq-item:last-child {
  border: 0 none;
}
body .faq-body .faq-container .question-container .faq-title {
  height: 60px;
}
body .faq-body .faq-container .question-container .faq-title .question {
  color: #0E4183;
  font-size: 16px;
  font-weight: 500;
}
body .faq-body .faq-container .question-container .faq-title p {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}
body .faq-body .note {
  color: #0E4183;
  font-size: 20px;
  font-weight: 700;
}
body .country-selector {
  background-color: white;
  border-radius: 10px;
  padding: 16px 0 16px;
  box-shadow: 5px 5px 8px #00000050;
}
body .country-selector span {
  color: #0E4183;
  font-size: 16;
  font-weight: 600;
}
body .accounts-template,
body form {
  color: #275EA5;
  text-transform: uppercase;
}
body .btn {
  text-transform: uppercase;
}
body .container {
  max-width: 900px;
}
.payment .document-container,
.payment .accounts-container {
  max-width: 950px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 5px 5px 8px #00000050;
}
.payment .document-container .container,
.payment .accounts-container .container {
  max-width: 368px;
}
.payment .accounts-container {
  max-width: 80%;
}
.payment table caption h3 {
  color: #0E4183;
  font-size: 20px;
  font-weight: 700;
}
.payment table caption h3 caption h3 {
  color: #0E4183;
  font-size: 20px;
  font-weight: 700;
}
.payment table td {
  border: 0 none;
  padding: 8px 4px;
}
.payment table thead tr td {
  color: #999999;
  font-size: 14px;
  font-weight: 600;
}
.payment table tbody tr td {
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  vertical-align: middle;
}
.payment table .amount_to_pay,
.payment table .payment_type {
  max-width: 100px;
}
.payment .accounts-note p {
  color: #333333;
  font-size: 10px;
  font-weight: 500;
}
.payment .steps {
  height: 76px;
}
.payment .steps img {
  display: inline-block;
  margin: 0 9px;
}
.payment .steps span {
  font-size: 16px;
  font-weight: 700;
}
.payment .steps span.step-name {
  color: #0E4183;
}
.payment .steps span.number {
  color: white;
  display: inline-block;
  border-radius: 16px;
  background-color: #0E4183;
  width: 27px;
  height: 27px;
  text-align: center;
}
.payment .steps .step .inactive-step {
  display: none;
}
.payment .steps .step.disable .active-step {
  display: none;
}
.payment .steps .step.disable .inactive-step {
  display: inline-block;
}
.payment .steps .step.disable .number {
  background-color: #999999;
}
.payment .steps .step.disable .step-name {
  color: #999999;
}
.btn {
  border-radius: 10px;
}
/*
  Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
  */
@media only screen and (max-width: 760px), (min-device-width: 320px) and (max-device-width: 1024px) {
  table .form-control {
    max-width: 200px;
  }
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr {
    margin: 0 0 1rem 0;
  }
  td {
    padding-top: 2.2rem !important;
    position: relative;
  }
  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    padding-top: 0.75rem;
  }
  td:nth-of-type(1):before {
    content: "Cadena";
  }
  td:nth-of-type(2):before {
    content: "Número de cuenta";
  }
  td:nth-of-type(3):before {
    content: "Saldo";
  }
  td:nth-of-type(4):before {
    content: "Tipo de pago";
  }
  td:nth-of-type(5):before {
    content: "Monto";
  }
  td:nth-of-type(6):before {
    content: "Último pago";
  }
  td:nth-of-type(7):before {
    content: "";
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  td {
    /* Behave  like a "row" */
    padding-top: 0.75rem !important;
    padding-left: 50% !important;
  }
  td:before {
    padding-left: 20px;
  }
  /*
    Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
    */
  td:nth-of-type(1):before {
    content: "Cadena";
  }
  td:nth-of-type(2):before {
    content: "Número de cuenta";
  }
  td:nth-of-type(3):before {
    content: "Saldo";
  }
  td:nth-of-type(4):before {
    content: "Tipo de pago";
  }
  td:nth-of-type(5):before {
    content: "Monto";
  }
  td:nth-of-type(6):before {
    content: "Último pago";
  }
  td:nth-of-type(7):before {
    content: "";
  }
}
.btn-primary {
  background-color: #275EA5;
  border-color: #142f53;
}
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #142f53;
  border-color: #5a91d8;
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #5a91d8;
  border-color: #275EA5;
}
.btn-primary.disabled:hover,
.btn-primary:disabled:hover {
  background-color: #142f53;
  border-color: #142f53;
}
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem rgba(237, 28, 36, 0.5);
}