@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");

* {

  box-sizing: border-box; }



body {
  /*background: url("../img/bg-home.jpg") no-repeat left top fixed;
  background-size: cover;*/
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  min-height: 100vh;
  overflow-x: hidden; }



.switch {

  position: relative;

  display: inline-block;

  width: 40px;

  height: 19px;

  padding: 0;

  margin: 0; }

  .switch input {

    display: none; }



/** Bootstrap 4 Replacement**/

.list-group-item {

  position: relative;

  display: block;

  padding: .1rem 1.25rem;

  margin-bottom: -1px;

  background-color: #eae6e6;

  border: 1px solid #eae6e6;

  border-radius: 1rem; }

  .list-group-item:first-child, .list-group-item:last-child {

    border-radius: 1rem; }



.btn-primary.disabled, .btn-primary:disabled {

  background-color: #b5b5b5;

  color: #000;

  border: 0 none; }

  .btn-primary.disabled:hover, .btn-primary:disabled:hover {

    background-color: #b5b5b5;

    color: #000;

    box-shadow: inherit;

    border: 0 none; }



.list-labels {

  width: 100%;

  }

  .list-labels label {

    cursor: pointer;

    font-weight: bold;

    font-size: 1.3rem; }

    .list-labels label:hover {

      background-color: #e2dede; }



/* Hide default HTML checkbox */

/* The slider */

.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

  border-radius: 22px; }

  .slider:before {

    position: absolute;

    content: "";

    height: 23px;

    width: 23px;

    left: 0;

    bottom: -2px;

    background-color: white;

    -webkit-transition: .4s;

    transition: .4s;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

    border-radius: 50%;

    border: 1px solid #f2d51c; }



input:checked + .slider {

  background-color: #f2d51c; }

input:focus + .slider {

  box-shadow: 0 0 1px #f2d51c; }

input:checked + .slider:before {

  -webkit-transform: translateX(18px);

  -ms-transform: translateX(18px);

  transform: translateX(18px); }



/* Rounded sliders */

.slider.round {

  border-radius: 34px; }

  .slider.round:before {

    border-radius: 50%; }



header {

  background-color: #06205c;

  color: #fff;

  padding: 10px 0;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

  z-index: 1;

  position: relative; }

  header h1 {

    background: url("../img/logo-socofin.png") no-repeat left top;

    text-indent: -9999px;

    background-size: 100%;

    width: 160px;

    height: 40px;

    margin: 0; }

  header p {

    margin: 0 0 0 20px;

    font-size: 14px;

    position: relative; }

    header p:before {

      content: "";

      border-left: 1px #fff solid;

      height: 40px;

      position: absolute;

      left: -15px;

      top: 50%;

      transform: translateY(-50%); }

  header .tools {

    padding: 0;

    margin: 0;

    width: 100%;

    justify-content: flex-end; }

    header .tools li {

      list-style: none;

      padding: 0;

      margin: 0; }

      header .tools li a {

        display: block;

        color: #fff;

        font-size: 14px;

        padding: 0 15px; }

      header .tools li.logout {

        margin-top: 1px; }

        header .tools li.logout a {

          font-size: 0.9em;

          color: #f2d51c; }

          header .tools li.logout a i.icon.icon-logout {

            width: 17px;

            vertical-align: sub;

            height: 17px; }



section .alert {

  margin: 0 auto;

  max-width: 700px;

  width: 100%;

  padding: 20px; }

section.normal {

  padding: 15px 0 40px; }

  section.normal h2 {

    font-size: 26px;

    font-weight: 600;

    color: #000000; }



main {

  height: calc(100vh - 200px);

  overflow: auto; }

  main.pay-summary {

    padding-bottom: 250px;

    height: auto; }

    main.pay-summary .data-deuda {

      background: #f4f4f4;

      padding: 20px 10%; }

      main.pay-summary .data-deuda .subtable-wrap {

        padding: 25px 0 0; }

      main.pay-summary .data-deuda .img-cert {

        max-width: 240px;

        /*display: block;*/
        opacity: .6; }

    main.pay-summary .head-b {

      background: #fff;

      padding-bottom: 20px; }

    main.pay-summary.end-sumary {

      padding-bottom: 0; }

      main.pay-summary.end-sumary .cont {

        padding-bottom: 5px !important; }



.final-summary {

  background: #dedee1;

  margin-bottom: 5px; }

  .final-summary ul {

    display: flex;

    list-style: none;

    padding: 0; }

    .final-summary ul li {

      font-size: 12px;

      flex-grow: 1;

      flex-basis: 0; }

      .final-summary ul li span {

        display: block; }

      .final-summary ul li a {

        color: #b69c0d; }

        .final-summary ul li a:hover {

          color: #86730a; }



.footer-summary-end {

  /*position: fixed;

  width: 100%;

  left: 0;

  bottom: 0;*/ }

  .footer-summary-end .final-summary li:first-child {

    /*font-size: 13px;*/

    width: auto; }

    .footer-summary-end .final-summary li:first-child input[type=email] {

      border-radius: 3px;

      background-color: #ffffff;

      border: solid 1px #cfcfd2;

      font-style: italic;

      padding: 4px 12px;

      /*min-width: 320px;*/ }

    .footer-summary-end .final-summary li:first-child span {

      display: inline; }

  .footer-summary-end .final-summary li:last-child {

    text-align: right;

    width: auto; }

    .footer-summary-end .final-summary li:last-child a {

      display: inline-block; }



footer {

  padding: 30px 0;

  background: #06205c;

  color: #fff;

  bottom: 0;

  position: fixed;

  left: 0;

  width: 100%;

  max-height: 180px; }

  footer ul.steps li {

    font-size: 13px; }

    footer ul.steps li span.num {

      display: inline-block;

      border-radius: 50%;

      border: 1px solid #f2d51c;

      width: 24px;

      height: 24px;

      line-height: 20px;

      text-align: center;

      font-weight: 600;

      color: #f2d51c; }

    footer ul.steps li.selected span.num {

      background: #f2d51c;

      color: #06205c; }

    footer ul.steps li.checked span.num {

      background: url("../img/icon-check.png") no-repeat center center #06205c;

      text-indent: -9999px; }

  footer ul.fees {

    margin-bottom: 30px; }

    footer ul.fees li {

      font-size: 16px;

      font-weight: 300;

      position: relative;

      padding-right: 20px;

      line-height: 1em; }

      footer ul.fees li strong {

        font-size: 24px;

        vertical-align: sub;

        font-weight: 600; }

      footer ul.fees li:before {

        content: '';

        height: 29px;

        width: 1px;

        background: #979797;

        position: absolute;

        right: 0;

        top: 50%;

        transform: translateY(-50%); }

      footer ul.fees li:last-child {

        padding-right: 0; }

        footer ul.fees li:last-child:before {

          display: none; }

  footer .btn.btn-primary {

    transition: all 0.3s;

    color: #000;

    font-size: 12px;

    font-weight: bold;

    line-height: 1.8em;

    padding: 0.6em 2em; }

    footer .btn.btn-primary:hover, footer .btn.btn-primary:focus, footer .btn.btn-primary:active {

      background: #f5de4c;

      transform: translateY(-2px);

      color: #000;

      border-color: #f2d51c; }

  footer .gray-footer {

    background: #f8f8f8;

    position: relative;

    z-index: 2;

    color: #333;

    padding: 0.7rem 0; }

    footer .gray-footer h4 {

      font-size: 13px;

      color: #333;

      font-weight: bold; }

    footer .gray-footer p {

      font-size: 12px; }

    footer .gray-footer .pay-method-wrap {

      /*max-width: 500px;*/

      margin: auto;

      text-align: center; }

      footer .gray-footer .pay-method-wrap h4 {

        font-size: 1.4rem;

        font-weight: normal; }

      footer .gray-footer .pay-method-wrap .pay-method {

        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);

        width: 100%;

        height: 80px;

        background-color: #fff;

        background-repeat: no-repeat;

        background-position: center center;

        display: block;

        border-radius: 3px;

        transition: all 0.3s; }

        footer .gray-footer .pay-method-wrap .pay-method.banco-chile {

          background-image: url("../img/banco-chile.png"); }

        footer .gray-footer .pay-method-wrap .pay-method.banco-estado {

          background-size: 120px auto;

          background-image: url("../img/banco-estado-chile.png"); }

        footer .gray-footer .pay-method-wrap .pay-method.servipag {

          background-size: 100px auto;

          background-image: url("../img/servipag.png"); }
          
          footer .gray-footer .pay-method-wrap .pay-method.servipag2 {

          background-size: 100px auto;

          background-image: url("../img/Servipag2.png"); }
         
         footer .gray-footer .pay-method-wrap .pay-method.webpay {

          background-size: 120px auto;

          background-image: url("../img/Webpay.png"); }

        footer .gray-footer .pay-method-wrap .pay-method:hover {

          transform: translateY(-3px); }

  footer.pay-sumary {

    max-height: 320px;

    padding: 10px 0; }

    footer.pay-sumary .gray-footer {

      padding: 2rem 0 4rem;

      width: 100%;

      margin: 0; }

  footer.compact ul {

    margin-bottom: 10px !important; }

    footer.compact ul.fees li {

      font-size: 13px; }

      footer.compact ul.fees li strong {

        font-size: 13px;

        vertical-align: inherit; }



.login-box {

  background-color: #fff;

  max-width: 430px;

  width: 100%;

  margin: 5vh auto 0;

  padding: 20px 35px 35px;

  border-top: 10px #06205c solid;

  position: relative; }

  .login-box h2 {

    text-transform: uppercase;

    font-size: 20px;

    font-weight: 700;

    color: #000; }

  .login-box h3 {

    font-size: 18px;

    font-weight: 600;

    color: #000;

    text-align: center;

    padding: 0; }

    .login-box h3 .icon {

      width: 72px;

      height: 72px;

      display: block;

      margin: 0 auto 30px; }

  .login-box.error-box .response-box {

    opacity: 1;

    visibility: visible;

    transform: scale(0.9); }



.inner-loader {

  width: 100%;

  background-color: rgba(255, 255, 255, 0.7);

  position: absolute;

  top: 0;

  left: 0;

  padding: 30px;

  height: 100%;

  transform: scale(1);

  transition: all .5s;

  z-index: 5;

  display: flex;

  opacity: 0;

  visibility: hidden;

  flex-direction: column;

  justify-content: center;

  align-items: center; }

  .inner-loader.show {

    opacity: 1;

    visibility: visible; }



.response-box {

  background-color: #fff;

  position: absolute;

  top: 0;

  left: 0;

  padding: 30px;

  height: 100%;

  opacity: 0;

  visibility: hidden;

  transform: scale(1);

  transition: all .5s;

  width: 100%; }



.pay-summary .response-box {

  opacity: 1;

  visibility: visible;

  position: static;

  max-width: 660px;

  text-align: center;

  margin: 0 auto; }

  .pay-summary .response-box h3 .icon {

    display: block;

    width: 80px;

    height: 80px;

    margin: 0 auto 20px; }

  .pay-summary .response-box .btn {

    max-width: 300px;

    margin: 0 auto; }



.main {

  position: relative;

  z-index: 2; }



.bg-body {

  background: url("../img/bg-login.jpg") no-repeat center top;

  background-size: cover;

  min-height: 100vh;

  overflow: hidden;

  position: relative; }

  .bg-body:after {

    content: "";

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    position: absolute;

    left: 0;

    top: 0;

    z-index: 0; }



.wrap {

  max-width: 1024px;

  width: 100%;

  margin: auto; }



/* ICONS */

.icon {

  width: 15px;

  height: 15px;

  display: inline-block;

  background-repeat: no-repeat;

  background-position: left top;

  background-size: 100%; }

  .icon.icon-address {

    background-image: url("../img/icon-address.png"); }

  .icon.icon-phone {

    background-image: url("../img/icon-phone.png"); }

  .icon.icon-alert {

    background-image: url("../img/icon-alert.png"); }

  .icon.icon-warning {

    background-image: url("../img/icon-warning.png"); }

  .icon.icon-logout {

    background-image: url("../img/icon-logout.png"); }

  .icon.icon-back {

    background-image: url("../img/icon-back.png"); }

  .icon.icon-alert-red {

    background-image: url("../img/icon-alert-red.png"); }

  .icon.icon-error {

    background-image: url("../img/icon-error.png"); }

  .icon.icon-accordion {

    background-image: url("../img/bullet-accordion.png"); }

  .icon.icon-download {

    background-image: url("../img/icon-download.png"); }



/* CUSTOM COMPONENT */

a:hover {

  color: #06205c; }



/* ALERTS */

.alert-warning {

  background-color: #e2b80a;

  border-color: #e2b80a;

  color: #fff; }

  .alert-warning .icon {

    width: 28px;

    min-width: 28px;

    height: 28px;

    margin-right: 20px; }

  .alert-warning.w-icon {

    display: flex;

    flex-direction: row;

    align-items: center; }



.alert-danger {

  background-color: #d65858;

  border-color: #d65858;

  color: #fff; }

  .alert-danger .icon {

    vertical-align: middle;

    width: 28px;

    min-width: 28px;

    height: 28px;

    margin-right: 20px; }

  .alert-danger.w-icon {

    display: flex;

    flex-direction: row;

    align-items: center; }



input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  margin: 0; }



.btn-middle {

  width: 90%;

  margin: auto; }



/* FORMS */

.form-check {

  padding-left: 1.5rem; }



.styled-checkbox {

  position: absolute;

  opacity: 0; }

  .styled-checkbox + label {

    position: relative;

    cursor: pointer;

    padding: 0;

    font-size: 12px; }

    .styled-checkbox + label:before {

      content: '';

      margin-right: 10px;

      display: inline-block;

      vertical-align: text-top;

      width: 20px;

      height: 20px;

      border-radius: 4px;

      background: white;

      border: 2px #f2d51c solid;

      position: absolute;

      left: -25px;

      top: 0;

      transition: all .2s; }

  .styled-checkbox:hover + label:before {

    background: #f2d51c; }

  .styled-checkbox:focus + label:before {

    box-shadow: 0 0 0 3px rgba(242, 213, 28, 0.12); }

  .styled-checkbox:checked + label:before {

    background: #f2d51c; }

  .styled-checkbox:disabled + label {

    color: #b8b8b8;

    cursor: auto; }

    .styled-checkbox:disabled + label:before {

      box-shadow: none;

      background: #ddd; }

  .styled-checkbox:checked + label:after {

    content: '';

    position: absolute;

    left: -20px;

    top: 9px;

    background: white;

    width: 2px;

    height: 2px;

    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;

    transform: rotate(45deg); }



label {

  color: #333;

  font-size: 14px;

  font-weight: 600; }

  label a {

    color: #c5a806;

    text-decoration: underline;

    font-size: 12px;

    position: relative; }

    label a:hover span {

      opacity: 1;

      visibility: visible;

      transition: all .5s;

      left: 170px; }

    label a span {

      position: absolute;

      top: -120px;

      left: 180px;

      width: 100%;

      min-width: 260px;

      background-color: #eeebeb;

      padding: 10px;

      border-radius: 5px;

      opacity: 0;

      visibility: hidden;

      cursor: default;

      transition: all 0s; }

      label a span.close-sample {

        position: static;

        display: none; }

      label a span:before {

        content: "";

        width: 0;

        height: 0;

        border-top: 10px solid transparent;

        border-right: 20px solid #eeebeb;

        border-bottom: 10px solid transparent;

        position: absolute;

        left: -20px;

        top: 35%; }

      label a span img {

        display: block;

        width: 100%; }



.btn-secondary.go-home {

  padding: 2px 10px; }

  .btn-secondary.go-home .icon.icon-back {

    width: 7px;

    height: 12px;

    vertical-align: middle;

    margin-right: 5px; }



.total-to-pay {

  text-align: right;

  text-transform: uppercase;

  font-size: 1.5em;

  margin: 0 !important; }

  .total-to-pay strong {

    color: #06205c; }



.form-control {

  background-color: #eae6e6;

  border-color: #eae6e6;

  border-radius: 20px;

  font-size: 14px;

  font-weight: 400;

  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }

  .form-control:focus {

    color: #06205c;

    background-color: #fff;

    border-color: #f2d51c;

    outline: 0;

    box-shadow: 0 0 0 0.2rem rgba(242, 213, 28, 0.25); }



.custom-select.is-invalid, .custom-select:invalid {

  border-color: #ebbfbe;

  background-color: #efd1d1; }



.form-control.is-invalid, .form-control:invalid {

  border-color: #ebbfbe;

  background-color: #efd1d1; }



.was-validated .custom-select.is-invalid, .was-validated .custom-select:invalid {

  border-color: #ebbfbe;

  background-color: #efd1d1; }

.was-validated .form-control.is-invalid, .was-validated .form-control:invalid {

  border-color: #ebbfbe;

  background-color: #efd1d1; }



/* BUTTONS */

.btn {

  border-radius: 20px; }



.btn-link {

  color: #cab01d;

  font-size: 14px;

  font-weight: 600;

  text-decoration: underline; }



.btn-primary {

  background-color: #f2d51c;

  border-color: #f2d51c;

  color: #000;

  text-transform: uppercase;

  font-weight: 600;

  font-size: 14px; }

  .btn-primary:hover, .btn-primary:focus {

    background-color: #06205c;

    border-color: #06205c;

    color: #fff;

    outline: 0;

    box-shadow: 0 0 0 0.2rem rgba(6, 32, 92, 0.25); }

  .btn-primary.btn-shadow {

    box-shadow: 0 2px 4px 0 rgba(127, 127, 127, 0.5); }



.data-deuda > table.table {

  border-collapse: unset;

  border-spacing: 0 4px; }

  .data-deuda > table.table > thead.thead-dark th {

    background: #06205c;

    font-size: 11px;

    font-weight: 400;

    color: #ffffff;

    border: 0 none;

    text-transform: uppercase;

    vertical-align: middle;

    position: relative; }

    .data-deuda > table.table > thead.thead-dark th label {

      color: #ffffff;

      font-size: 11px;

      font-weight: 400; }

    .data-deuda > table.table > thead.thead-dark th:last-child {

      background: #002578; }

    .data-deuda > table.table > thead.thead-dark th:after {

      content: '';

      height: 100%;

      position: absolute;

      width: 1px;

      background: #fff;

      top: 0;

      right: 0; }

  .data-deuda > table.table > tbody > tr {

    background: #fff;

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);

    cursor: pointer; }

    .data-deuda > table.table > tbody > tr > td {

      border: 0 none;

      font-size: 13px;

      color: #333;

      vertical-align: middle;

      position: relative; }

      .data-deuda > table.table > tbody > tr > td:after {

        content: '';

        height: 70%;

        position: absolute;

        width: 1px;

        background: #ebebeb;

        top: 50%;

        right: 0;

        transform: translate(0, -50%); }

      .data-deuda > table.table > tbody > tr > td:last-child:after {

        display: none; }

    .data-deuda > table.table > tbody > tr.info {

      padding: 0;

      margin: 0;

      box-shadow: none;

      border: 0 none;

      background: #e0e0e0; }

      .data-deuda > table.table > tbody > tr.info > td {

        padding: 0;

        margin: 0; }

      .data-deuda > table.table > tbody > tr.info .accordion {

        position: relative;

        cursor: default; }

        .data-deuda > table.table > tbody > tr.info .accordion:after {

          content: '';

          width: 100%;

          position: absolute;

          height: 30px;

          background: #E0E0E0;

          top: -4px;

          left: 0;

          box-shadow: 0 6px 5px rgba(0, 0, 0, 0.1) inset; }

    .data-deuda > table.table > tbody > tr .icon.icon-accordion {

      width: 29px;

      height: 26px;

      display: block;

      background-size: 100%;

      font-size: 0;

      border-radius: 100%;

      box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.2);

      margin: 0;

      padding: 0;

      background-color: #f2d51c;

      transform: rotate(180deg);

      transition: all 0.3s; }

    .data-deuda > table.table > tbody > tr.collapsed {

      background: #f4f4f4; }

      .data-deuda > table.table > tbody > tr.collapsed .icon.icon-accordion {

        transform: rotate(0);

        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); }

      .data-deuda > table.table > tbody > tr.collapsed:hover:not(.info) {

        background: #f7f7f7; }

      .data-deuda > table.table > tbody > tr.collapsed > td:after {

        background: #d0cdcd; }

.data-deuda .subtable-wrap {

  padding: 25px 52px; }

  .data-deuda .subtable-wrap table.no-checkbox thead tr th:first-child {

    background: #002578; }

  .data-deuda .subtable-wrap table.no-checkbox tbody tr td:first-child {

    text-align: left;

    background: #fff;

    position: relative; }

  .data-deuda .subtable-wrap table thead tr {

    background: #002578; }

    .data-deuda .subtable-wrap table thead tr th {

      border: 0;

      color: #fff;

      font-size: 13px;

      font-weight: 600; 
      background: #002578; }

      .data-deuda .subtable-wrap table thead tr th:first-child {

        background: #06205c; }

      .data-deuda .subtable-wrap table thead tr th label {

        color: #ffffff;

        font-size: 11px;

        font-weight: 400;

        display: inline; }

      .data-deuda .subtable-wrap table thead tr th .styled-checkbox + label:before {

        position: relative;

        left: 0;

        width: 17px;

        height: 17px; }

      .data-deuda .subtable-wrap table thead tr th .styled-checkbox:checked + label:after {

        position: absolute;

        left: 3px;

        top: 8px;

        background: #000;

        box-shadow: 2px 0 0 #000, 4px 0 0 #000, 4px -2px 0 #000, 4px -4px 0 #000, 4px -6px 0 #000, 4px -8px 0 #000; }

  .data-deuda .subtable-wrap table tbody tr {

    border-bottom: 4px solid #e0e0e0;

    background: #fff; }

    .data-deuda .subtable-wrap table tbody tr td {

      border: 0; }

      .data-deuda .subtable-wrap table tbody tr td:first-child {

        text-align: center;

        background: #f4f4f4;

        position: relative; }

      .data-deuda .subtable-wrap table tbody tr td .fee-error {

        background: #d65858;

        border-radius: 5px;

        padding: 2px 8px;

        width: 90%;

        max-width: 140px;

        color: #fff;

        top: -30px;

        left: 50%;

        font-size: 11px;

        position: absolute;

        z-index: 1;

        transform: translateX(-50%);

        display: none; }

        .data-deuda .subtable-wrap table tbody tr td .fee-error:before {

          content: '';

          width: 0;

          height: 0;

          border-left: 5px solid transparent;

          border-right: 5px solid transparent;

          border-top: 5px solid #d65858;

          font-size: 0;

          line-height: 0;

          position: absolute;

          left: 50%;

          transform: translateX(-50%);

          bottom: -5px; }

  .data-deuda .subtable-wrap table .num {

    text-align: right; }



.btn-secondary {

  border-radius: 21.5px;

  box-shadow: 0 2px 4px 0 rgba(127, 127, 127, 0.5);

  background-color: #ffffff;

  border: solid 1px #c3c3c3;

  display: inline-block;

  color: #000;

  text-transform: uppercase;

  font-size: 13px;

  font-weight: bold;

  font-style: normal;

  font-stretch: normal;

  transition: all 0.3s; }

  .btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):active {

    border: solid 1px #c3c3c3;

    color: #000;

    background-color: #f3f3f3;

    transform: translateY(-2px); }



.icon-info {

  background-color: #fff;

  border-radius: 100%;

  display: inline-block;

  color: #06205c;

  position: relative;

  width: 15px;

  height: 15px;

  text-align: center;

  line-height: 15px; }

  .icon-info:hover .th-tooltip {

    opacity: 1;

    visibility: visible; }



.th-tooltip {

  position: absolute;

  border-radius: 10px;

  background-color: #fff;

  width: 260px;

  padding: 10px;

  text-align: left;

  font-size: 11px;

  top: 140%;

  left: 50%;

  transform: translateX(-50%);

  opacity: 0;

  visibility: hidden;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  transition: all .5s; }

  .th-tooltip:after {

    content: "";

    width: 0;

    height: 0;

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-bottom: 10px solid #fff;

    position: absolute;

    top: -10px;

    left: 50%;

    transform: translateX(-50%); }



form {

  /* Customize the label (the container) */

  /* Hide the browser's default radio button */

  /* Create a custom radio button */

  /* On mouse-over, add a grey background color */

  /* When the radio button is checked, add a blue background */

  /* Create the indicator (the dot/circle - hidden when not checked) */

  /* Show the indicator (dot/circle) when checked */

  /* Style the indicator (dot/circle) */ }

  form .container-radiomark {

    display: block;

    position: relative;

    padding-left: 35px;

    cursor: pointer;

    font-size: 22px;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none; }

  form .container-radiomark input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0; }

  form .radiomark {

    position: absolute;

    top: 50%;

    left: 0;

    height: 25px;

    width: 25px;

    transform: translateY(-50%);

    background-color: #fff;

    border-radius: 50%;

    border: 1px solid #06205c; }

  form .container-radiomark input:checked ~ .radiomark {

    background-color: #06205c; }

  form .radiomark:after {

    content: "";

    position: absolute;

    display: none; }

  form .container-radiomark input:checked ~ .radiomark:after {

    display: block; }

  form .container-radiomark .radiomark:after {

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: white; }



.text-align-center {

  text-align: center; }



.next-numbers {

  font-size: 22px;

  font-weight: bold;

  padding: 10px; }

  .next-numbers input.num-phone {

    border: 1px solid #06205c;

    border-radius: 8px;

    text-align: center;

    outline: 0 none;

    font-weight: bold;

    width: 25px;

    padding-left: 0;

    padding-right: 0; }

    .next-numbers input.num-phone:focus {

      border-color: #ab9a11;

      background: #fdf9dd; }

    .next-numbers input.num-phone.is-invalid {

      border-color: #ebbfbe;

      background-color: #efd1d1; }



.security-section .no-select-number, .security-section .alert-invalid {

  display: none; }



/* INICIO DEUDA DIRECTA/INDIRECTA */
.list-labels.full-width-label {
  width: 100%;
  padding: 30px 0; }

.container-radiomark.flex-division {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .container-radiomark.flex-division span.type {
    background-color: #fff;
    color: #445885;
    border-radius: 20px;
    display: inline-block;
    font-size: 12px;
    padding: 1px 10px;
    line-height: normal;
    font-weight: 400;
    text-align: center;
    width: 72px; }
    .container-radiomark.flex-division span.type.ind {
      background-color: #bebebe;
      color: #fff; }

/* FIN INICIO DEUDA DIRECTA/INDIRECTA */
@media (min-width: 1200px) {

  .container {

    max-width: 1200px; } }

@media (max-width: 625px) {

  .final-summary {

    padding-left: 0 !important; }

    .final-summary ul {

      padding: 0;

      flex-wrap: wrap; }

      .final-summary ul li {

        margin-bottom: 10px;

        width: 33%;

        flex-grow: initial;

        flex-basis: auto; }



  label a:hover span {

    opacity: 0;

    visibility: hidden;

    left: 50%; }

  label a.open span {

    opacity: 1;

    visibility: visible;

    transform: translate(-50%, -50%) scale(1); }

  label a span {

    position: fixed;

    left: 50%;

    top: 50%;

    width: 90%;

    transform: translate(-50%, -50%) scale(0.8);

    z-index: 5;

    box-shadow: 0 0 550px #000; }

    label a span.close-sample {

      position: static;

      display: block;

      box-shadow: none;

      transform: none;

      text-align: right;

      padding: 0;

      text-decoration: underline;

      margin-bottom: 20px;

      color: #c5a806; }

    label a span:before {

      display: none; }



  .bg-body {

    background-image: none; }

    .bg-body:after {

      display: none; }



  .login-box {

    border: none;

    margin-top: 10px;

    padding: 20px; }



  section .alert {

    max-width: 330px; } }

@media (max-width: 425px) {

  header p {

    position: absolute;

    left: 40px;

    top: 30px;

    font-size: 11px; }

    header p:before {

      display: none; }

  header .tools {

    display: block !important;

    margin-top: 20px; }

    header .tools li a {

      font-size: 12px;

      padding: 0; }



  section .alert {

    max-width: 90%; } }

@media (max-width: 767px) 
{
  .data-deuda{ min-height:500px;}
  body {
        overflow-x: hidden;
        position: relative; 
    }
  main {
    height: auto;
    overflow: inherit;
    padding-bottom: 159px; }
    main.pay-summary {
      height: auto;
      padding-bottom: 250px; }
      main.pay-summary .data-deuda {
        padding: 15px;          
        min-height:500px;
        }

      main.pay-summary .border-bottom-brand {

        border-bottom: 0 none; }

      main.pay-summary .head-b {

        padding-bottom: 0; }

      main.pay-summary .total-to-pay {

        text-align: left;

        margin-bottom: 10px !important; }



  header .tools li.logout {

    position: absolute;

    top: -30px;

    right: 20px; }

    header .tools li.logout a {

      font-size: 1.3em; }

      header .tools li.logout a i.icon.icon-logout {

        width: 20px;

        height: 21px;

        margin-right: 5px; }



  .xs-strong {

    font-weight: bold; }



  .border-bottom-brand {

    border-bottom: 2px solid #06205c; }



  section.normal {

    padding-bottom: 0; }

    section.normal h2 {

      font-size: 1.5em; }



  .xs-order-0 {

    order: 0; }



  .xs-order-1 {

    order: 1; }



  .xs-order-2 {

    order: 2; }



  .xs-order-3 {

    order: 3; }



  .xs-order-4 {

    order: 4; }



  .xs-order-5 {

    order: 5; }



  .xs-order-6 {

    order: 6; }



  .xs-order-7 {

    order: 7; }



  .xs-order-8 {

    order: 8; }



  .xs-order-9 {

    order: 9; }



  .xs-order-10 {

    order: 10; }



  .data-deuda > table.table {

    display: block; }

    .data-deuda > table.table > thead {

      display: none; }

    .data-deuda > table.table > tbody {

      display: block;

      background: #e0e0e0; }

      .data-deuda > table.table > tbody > tr {

        position: relative;

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        align-content: stretch;

        margin-bottom: 12px;

        padding: 1rem 0; }

        .data-deuda > table.table > tbody > tr.info .accordion {

          margin-top: -12px; }

        .data-deuda > table.table > tbody > tr > td {

          padding: 0 .75rem;

          display: block;

          width: 100%;

          color: #333; }

          .data-deuda > table.table > tbody > tr > td.xs-strong {

            font-size: 1.2em; }

            .data-deuda > table.table > tbody > tr > td.xs-strong .font-weight-normal {

              font-size: 0.8em; }

          .data-deuda > table.table > tbody > tr > td.xs-title-td {

            font-size: 1.2em; }

          .data-deuda > table.table > tbody > tr > td.xs-fee-number {

            line-height: 0.8em;

            margin-bottom: 0.6em; }

          .data-deuda > table.table > tbody > tr > td.last-pay-wrap {

            margin-bottom: 0.4rem; }

            .data-deuda > table.table > tbody > tr > td.last-pay-wrap .last-pay {

              color: #777; }

          .data-deuda > table.table > tbody > tr > td.icon-accordion {

            display: block;

            position: absolute;

            right: 20px;

            top: 1em;

            width: auto; 
            z-index:1000;
            }

          .data-deuda > table.table > tbody > tr > td.selected-fees, .data-deuda > table.table > tbody > tr > td.total-fees {

            width: 49%;

            text-align: right; }

        .data-deuda > table.table > tbody > tr .accordion {

          width: 100%; }

  .data-deuda .subtable-wrap {

    padding: 1em !important; }

    .data-deuda .subtable-wrap table.subtable {

      display: block; }

      .data-deuda .subtable-wrap table.subtable > thead {

        display: block; }

        .data-deuda .subtable-wrap table.subtable > thead tr {

          display: block; }

          .data-deuda .subtable-wrap table.subtable > thead tr th:first-child {

            display: block;

            width: 100%;

            text-align: right; }

      .data-deuda .subtable-wrap table.subtable > tbody {

        font-size: 0.9em;

        display: block; }

        .data-deuda .subtable-wrap table.subtable > tbody tr {

          display: flex;

          flex-direction: row;

          background: #fff;

          flex-wrap: wrap;

          align-content: stretch;

          padding: 1rem 0;

          position: relative;

          border-radius: 3px;

          margin-bottom: 7px;

          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

          border-bottom: 0 none; }

          .data-deuda .subtable-wrap table.subtable > tbody tr td {

            display: block;

            width: 65%;

            padding: 0 .75rem .3rem; }

            .data-deuda .subtable-wrap table.subtable > tbody tr td.switch-wrap {

              background: none;

              position: absolute;

              top: 1rem;

              right: 0;

              width: auto; }

            .data-deuda .subtable-wrap table.subtable > tbody tr td .same-width {

              display: inline-block;

              width: 66%;

              color: #777; }

            .data-deuda .subtable-wrap table.subtable > tbody tr td.num {

              text-align: inherit; }

            .data-deuda .subtable-wrap table.subtable > tbody tr td.total-data-value {

              position: absolute;

              right: 0;

              top: 3rem;

              width: 41%;

              text-align: right; }

              .data-deuda .subtable-wrap table.subtable > tbody tr td.total-data-value span {

                font-size: 1.1em;

                font-weight: 300; }

              .data-deuda .subtable-wrap table.subtable > tbody tr td.total-data-value strong {

                font-size: 1.6em; }

            .data-deuda .subtable-wrap table.subtable > tbody tr td .fee-error {

              left: -360%;

              right: 0;

              bottom: -15vh;

              max-width: 280px;

              transform: none;

              top: initial;

              font-size: 14px;

              padding: 10px 8px;

              width: 280px !important; }

              .data-deuda .subtable-wrap table.subtable > tbody tr td .fee-error:before {

                display: none; }

    .data-deuda .subtable-wrap.compact {

      padding: 0 !important; }

      .data-deuda .subtable-wrap.compact table.subtable {

        font-size: 13px;

        padding: 0 !important; }

        .data-deuda .subtable-wrap.compact table.subtable .total-data-value {

          top: 14px !important; }

          .data-deuda .subtable-wrap.compact table.subtable .total-data-value strong {

            font-size: 1.1em !important; }

  .data-deuda > table.table > tbody > tr > td:after, .data-deuda > table.table > tbody > tr.info .accordion:after {

    display: none; }



  /* ORIGINAL */

  /*.data-deuda .subtable-wrap table.subtable > tbody tr td .fee-error {

    left: initial;

    right: 0;

    bottom: -15vh;

    max-width: inherit;

    transform: none;

    top: initial;

    font-size: 14px;

    padding: 10px 8px; }*/

  footer {

    position: absolute;

    bottom: -100%;

    left: 0;

    width: 100%;

    padding: 10px;

    height: auto;

    max-height: 1000px;

    /*height: 159px;*/

    transition: all .5s; }

    footer.fixed {

      position: fixed;

      bottom: 0; }

    footer ul.fees {

      width: 100%;

      margin-bottom: 10px; }

      footer ul.fees li {

        font-size: 12px;

        text-align: right;

        width: calc(50% - 1rem); }

        footer ul.fees li strong {

          padding-top: 1rem;

          display: block; }

    footer .data-footer {
      text-align: center; }
      footer .data-footer a.float-right {
        float: none !important; }
    footer .gray-footer .pay-method-wrap .pay-method {

      background-size: 86% !important; } }

@media (max-width: 350px) {
  .list-labels {
    width: 100%; }



  .btn-security-finish {
    font-size: 12px; }



  .next-numbers input.num-phone {
    width: 30px; } }


.captcha-google
{
    display:block;
    margin: 10px 0px 10px 0px;    
}