
body{
    background: url(../img/fondo.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      margin: 0;
     padding: 0;
     outline: none;
     border: none;
  }
  .container {
   margin: 0 auto;
   padding: 0;
}

  input, select{
    padding: 10px;
    margin: 2px;
  }
  .miboton{
     background-color: rgba(67, 151, 12, 0.808);
     color: #fff;
  }
  textarea{
   padding: 10px;
   width: 100%;
  }
  .divcab{
     float: left;
  }
  #numtarj{
     width: 44%;
     vertical-align: middle;
     padding: 5px;
     text-align: center;
  }
  #vrabono{
   padding: 2px;
   margin: 0px;
   width: 80px;
  }
  #caja{
    width: 300px;
  }
  .divtarj{
     width: 35%;
     height: auto;
     background-color: rgba(255, 255, 255, 0.75);
     padding: 10px;
     margin: 10px;
     float: left;
  }
  #global {
	height: 220px;
	width: 100%;
	border: 1px solid #ddd;
	background: #f1f1f1;
	overflow-y: scroll;
}
.datos{
   float: left;
   height: 90px;
   width: 150px;
   background-color: rgba(219, 20, 20, 0.918);
   color: #fff;
   margin: 5px;
   padding: 5px;
   text-align: center;
   vertical-align: center;
}
#abonos {
	height: auto;
}
#infotarj_{
   color: crimson;
}
tbody{
   background-color: rgba(255, 255, 255, 0.55);
}
.divdatos{
   width: 60%;
   height: auto;
   background-color: rgba(255, 255, 255, 0.75);
   padding: 10px;
   margin: 10px;
   float: left;
}
.divbalance{
   width: 46%;
   height: auto;
   background-color: rgba(255, 255, 255, 0.75);
   padding: 10px;
   margin: 0 auto;
   
}
  .login{
     width: 50%;
     height: auto;
     background-color: rgba(219, 219, 219, 0.5);
     margin: 0 auto;
     padding-bottom: 10px;
  }
  .btninicio{
   position: absolute;
   width: 50px;
   height: 50px;
   top: 60px;
   right: 50px;
  }
  .titulologin{
     height: auto;
     background-color: rgba(33, 25, 150, 0.5);
     padding: 10px;
     color: #fff;
  }
  #datoscliente b{
      color: rgb(21, 9, 134);
      background-color: rgba(143, 164, 255, 0.418);
      padding-right: 3px;
      padding-left: 3px;
  }
  #numtarj b{
     color: rgb(255, 255, 255);
     padding: 5px;
     background-color: rgb(243, 14, 14);
     margin-top: 5px;

  }
  .divcal{
   color: rgb(255, 255, 255);
   padding: 5px;
   background-color: rgb(243, 14, 14);
   margin-top: 5px;
  }
  .vencida{
   color: rgb(0, 0, 0);
   padding: 5px;
   background-color: rgb(255, 230, 1);
   margin-top: 5px;
   text-align: center;
   font-weight: bold;
  }
  
  th{
     color: #fff;
     text-align: center;
     background-color: rgba(219, 20, 20, 0.918);
   }
  td{
     vertical-align: auto;
  }
  .titulos{
   height: auto;
   background-color: rgba(219, 20, 20, 0.918);
   padding: 10px;
   color: #fff;
  }

  .boton{
    background: #0636eb;
    color: #fff;
    padding: 5px;
    font-style: bold;
    height: 50px;
  }
  .popup {
  position: fixed;
   visibility: hidden;
   opacity: 0;
   margin-top: -300px;
}
.popup h2 {
   font-size: 24px;
}

.popup:target {
   visibility:visible;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   -webkit-transition:all 1s;
   -moz-transition:all 1s;
   transition:all 1s;
}
.popup-contenedor {
   position: relative;
   margin:7% auto;
   padding:30px 50px;
   background-color: #fafafa;
   color:#333;
   border-radius: 3px;
   width:50%;
}

footer{
   position:  fixed;
   bottom: 0px;
   width: 100%;
   height: 60px;
   background-color: rgb(29, 29, 29);
}
footer p{
   padding: 10px;
   color: #fff;
   text-align: center;
   font-size: 14px;
}
header{
   top: 0px;
   width: 100%;
   height: 100px;
   padding: 10px;
}
header p{
   padding: 5px;
   color: #fff;
   text-align: center;
   font-size: 14px;
}
.clearfix {
   clear: both;
 }
 
 @media (max-width: 800px) {
   .divdatos{
      width: 95%;
      display: inline-block;
   }
   .divtarj{
      width: 95%;
      display: inline-block;
      font-size: 13px;
   }
   #numtarj{
      width: 38%;
      font-size: 12px;
   }
   .btninicio{
      position: absolute;
      width: 30px;
      height: 30px;
      top: 60px;
      right: 20px;
     }
   .btninicio img{
      height: 40px;
   }
   .divcab{
      width: 30%;
   }
   .login{
      width: 90%;
      height: auto;
      background-color: rgba(219, 219, 219, 0.5);
      margin: 0 auto;
      padding-bottom: 10px;
   }

 }