/* ---------------------------------------------------------------------
*  Estilos Generales para Coraabo en linea
*  @author : Algenis Mosquea
*  @Copyright : Todos los derechos quedan exclusivamente reservados 
                para la plataforma de http://www.coraaboenlinea.com
*/
/* Estilos generales */

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

a {
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
}
li {
  list-style: none;
  color: #ffffff;
}
.pago {
  color: rgba(0, 195, 0, 0.86);
}
.no-pago {
  color: rgba(220, 20, 60, 0.86);
}
blockquote {
  border-left: 3px solid #2980b9;
  padding: .5em 1em;
  background-color: #ededed;
  *font-weight: bold;
  text-align: left;
  color: #00a5ba;
}
.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.row {
  margin-left: -15px;
  *margin-right: -15px;
}
.lead {
  margin-bottom: 1em;
}
.dropdown {
  display: none;
}
.loading-box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#loading-disabled {
  display: none;
}
#status-info {
  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;
  font-weight: bold;
}
#status-info img {
  padding-bottom: .5em;
  margin-right: 1em;
}
.input-disable {
  color: #2980b9 !important;
}
.loading {
  background-image: url(https://6bc4be.claudeassets.com/20190129010247im_/https://caasdenlinea.com/caasdenlinea/Assets/images/loader3.gif);
  width: 280px;
  height: 225px;
  margin: 0 auto;
  border-radius: 20px;
  -webkit-box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
          box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  border: 1px solid #2198b9;
  display: none;
}
.loading h4 {
  margin-top: 1.5em;
  font-size: 2em;
  color: #ffffff;
  text-align: center;
}
/* TOOLTIPS */
.tooltip {
  position: relative;
  display: inline-block;
  *border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/* Animacion para el background */
@-webkit-keyframes bgAnimate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes bgAnimate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  width: 100%;
  *max-width: 1280px;
  margin: 0 auto;
  background: url('https://5e7436.claudeassets.com/20190129010247im_/https://caasdenlinea.com/caasdenlinea/Assets/images/water-faucet.jpg') no-repeat;
  background-position: top center;
  background-color: #2980b9;
  color: #2c3e50;
  *background: -webkit-gradient(linear, right top, left top, from(#45b1f7), to(#08619b));
  *background: linear-gradient(270deg, #45b1f7, #08619b);
  *background-size: 400% 400%;
  *-webkit-animation: bgAnimate 12s ease infinite;
  *animation: bgAnimate 12s ease infinite;
}
.btn {
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: white;
  margin: .5em 0;
  padding: 12px 25px;
  outline: none;
  border-radius: 2px;
  -webkit-transition: 1s;
  transition: 1s;
  display: inline-block;
  text-align: center;
  -webkit-appearance: none !important;
}
.btn:active {
  -webkit-transform: scale(0.99);
          transform: scale(0.99);
}
.btn-reg {
  *margin-right: 10px;
  *background-color: #00bcd4;
  -webkit-box-shadow: 0 3px 0 #00a5bb;
          box-shadow: 0 3px 0 #00a5bb;
  background: #00bcd4;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #00bcd4 0%, #00bcd4 55%, #0099b5 98%, #0099b5 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00bcd4', endColorstr='#0099b5', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.btn-reg:hover {
  *background-color: #00a5bb;
  background: #0099b5;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #0099b5 0%, #0099b5 2%, #00bcd4 45%, #00bcd4 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099b5', endColorstr='#00bcd4', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.btn-login {
  *background-color: #2980b9;
  -webkit-box-shadow: 0 3px 0 #20638f;
          box-shadow: 0 3px 0 #20638f;
  background: #2980b9;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #2980b9 39%, #2853af 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2980b9', endColorstr='#2853af', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.btn-login:hover {
  *background-color: #20638f;
  background: #2853af;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #2853af 0%, #2980b9 61%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2853af', endColorstr='#2980b9', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.rotate {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.form-group {
  margin: .5em 0;
}
.form-icon {
  width: 85%;
  background-color: #e8e8e8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.form-icon input {
  padding: 6px 0 !important;
  outline: none;
  background-color: transparent;
  margin-left: 5px;
  color: #4f4f4f;
}
.form-icon span {
  *min-height: 100%;
  *background-color: #2980b9;
  padding: 14px;
  color: #ffffff;
  vertical-align: middle;
  background: #2980b9;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #2980b9 39%, #2853af 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2980b9', endColorstr='#2853af', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.container-fact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: 100vh;
  position: relative;
}
.alert {
  padding: 0 1em;
  width: 80%;
  margin-top: 1em;
  color: white;
}
.alert-success {
  background-color: rgba(0, 195, 0, 0.86);
}
.alert-danger {
  background-color: rgba(220, 20, 60, 0.86);
}
/*
*    Estilos para el menu de la plataforma
*/
.menu-icon {
  font-size: 3em;
  color: white;
  position: absolute;
  top: 15px;
  *left: 25px;
  display: none;
}
.menu-icon span {
  cursor: pointer;
  *background-color: rgba(255, 255, 255, 0.5);
  *border-radius: 50%;
  padding: 0;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
}
.cont-menu {
  display: block;
  width: 25%;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;

  margin-left: -10%;
}
.menu {
  width: 100%;
  min-height: 100%;
  *background-color: rgba(41, 128, 185, 0.45);
  background-color: #00bcd4;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
.menu .menu-body > ul {
  margin: 0;
  padding: 0;
}
.menu .menu-body > ul > li {
  width: 100%;
  *background-color: rgba(0, 188, 212, 0.75);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  overflow: hidden;
}
.menu .menu-body > ul > li a {
  display: block;
  *width: 100%;
  height: 100%;
  padding: 1em;
  padding-left: 2em;
}
.menu .menu-body > ul > li a:hover {
  background-color: #00a5bb;
  font-size: 1.02em;
}
.menu .menu-body .perfil > a {
  position: relative;
}
.menu .menu-body .perfil > a:before {
  content: '+';
  position: absolute;
  right: 10px;
  font-size: 1.2em;
  font-weight: bold;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.menu .menu-body .perfil ul {
  padding-left: 0;
}
.menu .menu-body .perfil ul li {
  background-color: #ffffff;
  /*darken(@blue2, 10%);*/
  border-left: 8px solid rgba(0, 188, 212, 0.75);
  border-bottom: 1px solid rgba(0, 188, 212, 0.75);
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}
.menu .menu-body .perfil ul li a {
  color: #00bcd4;
}
.menu .menu-body .perfil ul li a:hover {
  background-color: #008fa1;
  color: #ffffff;
}
.menu .top-msj {
  color: white;
  text-align: center;
  *font-size: 1.1em;
  font-weight: bold;
  padding: 2em 5px;
}
/* 
*    Seccion principal de la portada 
*/
.no-menu {
  width: 100%;
  *margin: 0 auto;
  margin-right: -12.5px;
  padding: 0 15px;
  -webkit-box-shadow: -8px -2px 10px rgba(0, 0, 0, 0.2);
          box-shadow: -8px -2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
}
.btn-show-hide-menu {
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  background-color: #2980b9;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 5;
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
.btn-show-hide-menu:hover {
  padding: 5px 15px;
}
.main {
  width: 100%;
  min-height: 500px;
  max-width: 750px;
  margin: 0 auto;
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  /*    Estilos para el login */
}
.main .logo {
  *width: 40%;
  margin: 0 auto;
}
.main .logo img {
  *width: 50%;
  margin: 3em auto;
  *margin-top: 3em;
  display: block;
}
.main .title {
  position: relative;
}
.main .title h1 {
  margin: 0;
  margin-bottom: .5em;
  text-align: center;
  color: #ffffff;
  font-size: 4em;
}
.main .title h1 span {
  font-size: 2em;
}
.main .title:after {
  content: "Zona Este / Norte";
  background-color: #00bcd4;
  padding: 5px 8px;
  color: #ffffff;
  font-size: .8em;
  border-radius: 10px 0 10px 0;
  position: absolute;
  bottom: -5%;
  right: 35%;
}
.main #title-reg {
  margin-bottom: 2em;
}
.main #title-reg h1 {
  text-align: left;
  font-size: 2.5em;
}
.main #title-reg:after {
  left: 5%;
  right: inherit;
  bottom: -15%;
}
.main form {
  width: 90%;
  margin: 2em 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;
}
.main form .link {
  padding: .5em 0;
  color: #00bcd4;
  -ms-flex-item-align: end;
      align-self: flex-end;
  font-size: .8em;
  *margin-right: -2em;
}
.main .form-reg h4 {
  margin: 5px 0;
  text-align: left;
  display: block;
  width: 80%;
}
.main .form-reg input {
  height: 100%;
  width: 100%;
}
#main-2 {
  width: 80%;
  margin: 0 auto;
}
#main-3 {
  width: 60%;
}
.login-box {
  width: 50%;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #ffffff;
  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;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 15px 0 #2980b9;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 15px 0 #2980b9;
}
.login-box input {
  padding: 10px;
  border: none;
  width: 100%;
}
.login-box .btn-box {
  width: 85%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.login-box .btn-box button,
.login-box .btn-box a {
  display: block;
  *width: 40%;
}
.reg-info {
  width: 90%;
  text-align: justify;
  margin: 0 auto;
}
.reg-info:nth-child(2) {
  padding-bottom: 1.5em;
}
.reg-info h1 {
  text-align: left;
}
#reg-box {
  width: 100%;
}
#reg-box form {
  margin: 0 auto;
  width: 90%;
}
#reg-box form .form-icon {
  border-radius: 5px;
  *background-color: rgba(255, 255, 255, 0.95);
}
#reg-box form .form-icon input {
  font-weight: 500;
}
#reg-box .box-container table {
  width: 95%;
  margin: 2em auto;
  border: 1px solid #ebebeb;
  border-collapse: none;
}
#reg-box .box-container table tbody tr td,
#reg-box .box-container table tbody tr th {
  padding: 10px;
  text-align: center;
  width: 14.285%;
}
#reg-box .box-container table tbody tr th {
  background-color: #00bcd4;
  color: white;
}
#reg-box .box-container table tbody tr:nth-child(2n+1) {
  background-color: #ebebeb;
}
#reg-box .box-container table tbody tr:hover {
  background-color: #f6f6f6;
}
#reg-box a {
  color: #00a5ba;
}
.historial-movil {
  display: none;
}
.box-container {
  width: 100%;
}
.login-header {
  *-ms-flex-item-align: start;
  *    align-self: flex-start;
  *padding-left: 1em;
  font-weight: 600;
  width: 100%;
  *background-color: #2980b9;
  color: #ffffff;
  border-radius: 5px 5px 0 0;
  background: #2980b9;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #2980b9 39%, #2853af 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2980b9', endColorstr='#2853af', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.login-header h3 {
  padding-left: 1em;
}
.aviso-pago {
  background-color: white;
  border-radius: 5px;
}
.aviso-pago ul {
  padding: 1em 1.5em;
  *padding-bottom: 1em;
  *padding-left: 1.5em;
}
.aviso-pago ul li {
  color: #2980b9;
  list-style: disc;
  margin-left: 1.5em;
  margin-bottom: 5px;
}
/*
*    Footer de la plataforma
*/
footer {
  width: 60%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 5em;
  font-size: .9em;
  text-align: center;
}
footer p {
  color: #ffffff;
}
footer .copyright a {
  text-decoration: underline;
}
footer .copyright .normal {
  display: block;
}
footer .copyright .responsive {
  display: none;
}
footer .opciones ul {
  padding: 0;
}
footer .opciones li {
  display: inline-block;
}
footer .opciones li a {
  text-decoration: underline;
}
/*
*    Seccion de estilos para los reportes
*/
.report-body {
  width: 100%;
  min-height: 500px;
  background-color: white;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
          box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
  *border: 1px solid #939393;
}
.resum-header {
  border-bottom: 1px solid #939393;
  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;
}
.resum-header h2 {
  margin: 0;
  padding: .5em 1em;
}
.resum-body {
  border-bottom: 1px solid #939393;
  padding-bottom: 1em;
}
.resum-body table {
  width: 90%;
  margin: 0 auto;
}
.resum-body table tr td {
  text-align: center;
}
.resum-body table tr:first-child td {
  padding-top: 1em;
  font-size: 1.5em;
  position: relative;
}
.resum-body table tr:first-child td .nombreCliente {
  font-weight: bold;
  font-size: 1em;
}
.resum-body table tr:first-child td span {
  font-size: .5em;
}
.resum-body table tr:nth-child(2) td {
  padding-bottom: 1em;
}
.resum-body table tr:nth-child(3),
.resum-body table tr:nth-child(4) {
  font-size: .8em;
}
.resum-body table tr:nth-child(3) td,
.resum-body table tr:nth-child(4) td {
  text-align: left;
}
.resum-body table tr:nth-child(3) td:last-child,
.resum-body table tr:nth-child(4) td:last-child,
.resum-body table tr:nth-child(3) td:nth-child(2),
.resum-body table tr:nth-child(4) td:nth-child(2) {
  text-align: center;
}
.fact-body {
  text-align: center;
}
.fact-body > p {
  margin: 1.5em 0;
  font-size: 2em;
}
.fact-body .vencimiento {
  width: 50%;
  float: left;
}
.fact-body .vencimiento p {
  font-size: 1em;
  margin: 0;
  font-weight: bold;
}
.fact-body .btn-pay {
  width: 49%;
  float: right;
}
.fact-body .btn-pay .btn-reg {
  margin: 0;
  width: 60%;
}
.btn-history {
  width: 50%;
  margin: 0 auto;
  margin-top: 5em;
}
.btn-history a {
  display: block;
}
.vnet-img {
  width: 40%;
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.vnet-img img {
  width: 65%;
  float: right;
}
.historial-movil ul {
  padding-left: 0;
}
.historial-movil ul li {
  color: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px;
  line-height: 20px;
}
.historial-movil ul li:nth-child(2n - 1) {
  background-color: #e8e8e8;
}
.historial-movil ul .fecha {
  font-size: 18px;
}
.historial-movil ul .historial-monto {
  font-weight: bold;
}
.active:after {
  content: "\25CF";
  position: absolute;
  font-size: 1.8em;
  bottom: 10px;
  color: springgreen;
}
.disabled:after {
  content: "\25CF";
  position: absolute;
  font-size: 1.8em;
  bottom: 10px;
  color: crimson;
}
#main-4 {
  max-width: 850px;
}
/* 
* Estilos para la vista del detalle de los pagos  
*/
#box-payment h2 {
  text-align: center;
}
#box-payment .reg-info a {
  color: #00bcd4;
}
#box-payment .payment-info {
  margin: 1em 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
#box-payment .payment-info img {
  width: 80%;
}
#reg-box-2 {
  width: 100%;
  background-color: #ffffff;
}
/*-------------------------------------------------------------------
*                        ESTILOS RESPONSIVE
*/
/* Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */
@media screen and (min-width: 800px) {
  .cont-menu {
    width: 25%;
    margin-left: -5%;
  }

}

@media screen and (min-width: 1024px) {

  .main {
    width: 90% !important;
  }
  .login-box {
    width: 70%;
  }
  form .link {
    margin-right: 0 !important;
  }

  .cont-menu {
    width: 25%;
    margin-left: -5%;
  }

  .menu {
    width: 100%;
  }
}

@media screen and (min-width: 1152px) {
  .cont-menu {
    width: 25%;
    margin-left: -11%;
  }

}

@media screen and (min-width: 1280px) {
  .cont-menu {
    width: 25%;
    margin-left: -6%;
  }

}

@media screen and (min-width: 1360px) {
  .cont-menu {
    width: 25%;
    margin-left: -10%;
  }

}

@media screen and (min-width: 1366px) {
  .cont-menu {
    width: 25%;
    margin-left: -10%;
  }

}

@media screen and (min-width: 1440px) {
  .cont-menu {
    width: 25%;
    margin-left: -13%;
  }

}


@media screen and (min-width: 1600px) {

  .cont-menu {
    margin-left: -20%;
  }

}
/* Móviles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .main {
    width: 75%;
    max-width: 100%;
  }
  .main .title {
    font-size: 1.5em;
  }
  .main .title h1 {
    margin: 0;
    margin-bottom: .5em;
    text-align: center;
    color: #ffffff;
    font-size: 2.5em;
  }
  .main .title h1 span {
    font-size: 2.5em;
  }
  .main .title:after {
    bottom: -5%;
    right: 20%;
  }
  .main .logo {
    *display: none;
  }
  .main .logo img {
    width: 25%;
  }
  .main #title-reg {
    margin-bottom: 2em;
  }
  .main #title-reg h1 {
    text-align: center;
    font-size: 2.5em;
  }
  .main #title-reg:after {
    left: 35%;
    right: inherit;
    bottom: -10%;
  }
  .main form .link {
    margin-top: 1em;
    color: #ffffff;
  }
  .main .form-reg h4 {
    text-align: center;
  }
  #main-4 {
    width: 100%;
  }
  .login-box {
    width: 100% !important;
    *border-radius: 5px;
    -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
            box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
    background-color: rgba(41, 128, 185, 0.54);
  }
  .login-box .btn {
    padding: 12px 0;
    border-radius: 2px;
  }
  .login-box .btn-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .login-box .btn-box button,
  .login-box .btn-box a {
    width: 100%;
  }
  .login-header {
    *-ms-flex-item-align: start;
    *    align-self: flex-start;
    width: 100%;
    background-color: transparent;
    background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(transparent));
    background: linear-gradient(0deg, transparent, transparent);
    color: #ffffff;
  }
  .login-header h3 {
    padding-left: 0;
    text-align: center;
    font-size: 1.5em;
  }
  #reg-box {
    width: 100% !important;
    background-color: #ffffff;
  }
  #reg-box .login-header {
    background-color: #2980b9;
  }
  #reg-box .form-icon {
    background-color: #e8e8e8;
  }
  .cont-menu {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 100;
    display: none;
  }
  .menu {
    width: 50%;
    background-color: #2980b9;
    -webkit-box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.3);
            box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.3);
    margin-left: -100%;
  }
  .menu-icon {
    display: block;
    z-index: 101;
  }
  .no-menu {
    margin-right: 0;
    padding: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .btn-show-hide-menu {
    display: none;
  }
  .form-icon {
    background-color: #ffffff;
  }
  .form-icon span {
    padding: 14px;
  }
  footer {
    width: 100%;
  }
  footer .copyright .normal {
    display: none;
  }
  footer .copyright .responsive {
    display: block;
  }
  #payment-header {
    display: none;
  }
  #box-payment {
    margin-top: 1em;
  }
  #box-payment .payment-info {
    margin: 1em 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  #box-payment .payment-info img {
    width: 50%;
  }
  #box-payment h1 {
    text-align: center;
  }
  #box-payment p {
    text-align: center;
  }
  #box-payment .btn-pay {
    width: 50%;
    margin: 0 auto;
  }
  #box-payment .btn-pay a {
    display: block;
  }
  #reg-box-2 {
    width: 100%;
    background-color: #ffffff;
  }

  .cont-menu {
    margin-left: -10%;
  }
}
/* Móviles en vertical
   ------------------------------------------------------------------------- */

@media screen and (max-width: 360px) {
  .menu {
   margin-left: 15px;
  }
}
@media screen and (max-width: 480px) {
  .main {
    width: 100%;
  }
  .main .title {
    margin-bottom: 2.5em;
    *margin-top: 1em;
  }
  .main .title:after {
    right: 20%;
  }
  #historial-table {
    display: none;
  }
  .historial-movil {
    display: block;
  }
  form .link {
    *margin-right: -1em !important;
  }
  .form-icon {
    width: 100%;
  }
  .login-box {
    width: 100% !important;
  }
  .login-box .btn {
    width: 100%;
    max-width: 100%;
  }
  .login-box .btn-box {
    width: 100%;
  }
  #main-2,
  #main-3 {
    width: 100%;
    font-size: .8em;
  }
  .menu {
    width: 70%;
  }
  .menu-icon {
    top: 5px;
    left: 0px;
    font-size: 2.5em;
  }
  .report-body {
    min-height: 450px;
  }
  .fact-body .btn-pay,
  .fact-body .vencimiento {
    width: 100%;
    float: none;
  }
  .fact-body .vencimiento {
    margin-bottom: 1em;
  }
  .vnet-img {
    display: none;
  }

  .cont-menu {
    margin-left: -10%;
  }
}

/*
     FILE ARCHIVED ON 10:48:30 Feb 13, 2019 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 07:56:51 Aug 20, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.419
  exclusion.robots: 0.064
  exclusion.robots.policy: 0.054
  esindex: 0.006
  cdx.remote: 5.487
  LoadShardBlock: 109.468 (3)
  PetaboxLoader3.datanode: 106.485 (4)
  PetaboxLoader3.resolve: 44.965 (2)
  load_resource: 44.606
*/