*,*::before,*::after{
   margin:0;
   padding:0;
   box-sizing:border-box;
   outline:none;
   border:none;
   user-select:none;
   font-family:"Verdana";
   text-decoration: none;
   list-style: none;
}
.href-back{
  color: #b20202;
  display: block;
  padding: 20px;
  margin: auto;
  text-align: center;
}
.uppercase::first-letter{
  text-transform: uppercase;
}
.center-out{
  position: unset !important;
  transform:none !important;
}
/*configuracion global*/
button, a, .pointer{
  cursor:pointer;
}
.display-block{
  display: block;
}
.padding-10{
  padding:10px;
}
.padding-0{
  padding:0 !important;
}
.btn-p{
  padding: 15px 60px;
  display: block;
  background: #b20202;
  color: white;
  box-shadow: 2px 2px 5px -1px #000000a1;
}
.section-h{
  height: 100vh;
  display:none;
}
.section-h .sec-tabla{
  width: 80%;
  margin: 10% auto 0;
  position: relative;
}
.sec-tabla-95{
  width: 95% !important;
}
.en-proceso{
  background: #ff5722;
  color: white;
  padding: 5px;
  border-radius: 5px;
}
.finalizado{
  background: #4caf50;
  color: white;
  padding: 5px;
  border-radius: 5px;
}
.aprobado{
  background: #4caf50;
  color: white;
  padding: 5px;
  border-radius: 5px;
}
.cancelado{
  background: #e42121;
  color: white;
  padding: 5px;
  border-radius: 5px;
}
.add-btn{
  background: #b20202;
  padding: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 30px;
  color:white;
  box-shadow: 2px 2px 5px 3px #00000052;
}
.margin-25px{
  margin:25px !important;
}
.margin-center-15px{
  margin-top:15px !important;
  margin-left: auto;
  margin-right: auto;
}


.table-th-td-31 th,.table-th-td-31 td{
  width: 31% !important;
}
.table-th-td-25 th,.table-th-td-25 td{
  width: 25% !important;
}
.table-th-td-30 th,.table-th-td-30 td{
  width: 30% !important;
}

.table-th-15 th{
  width: 15% !important;
}
.table-td-1 td{
  width: 1% !important;
}
.table-th-17 th{
  width: 17% !important;
}
.table-td-8 td{
  width: 8% !important;
}

.table-th-18 th{
  width: 18% !important;
}
.table-td-18 td{
  width: 18% !important;
}
.margin-0{
  margin:0 !important;
}
.margin-auto{
  margin: auto !important;
}
.bg-none-c-white{
  background: none;
  color:white;
}
.hover-tr:hover{
  background: #efefef;
}
.p-15{
  padding:15px !important;
}
.width-61{
  width: 57% !important;
}
.width-100{
  width: 100% !important;
}
.center-divs-form{
  display:flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin: auto !important;
}
.divs-margin div{
  margin:15px !important;
}


/*--nav--*/
.nav{
  font-size: 14px;
}
.nav ul{
  display: flex;
  justify-content: space-between;
}
.nav ul li{
  padding:10px;
}
.nav ul li a{
  color:#b20202;
}
.nav ul li a:hover{
  text-decoration: underline;
}
.btn-cs{
  background:#b20202;
  border-radius: 3px;
}
.btn-cs a{
  color:white !important;
}


/*----class form-control -----*/
.form-control{
  width: 30%;
  position: absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:5px;
}
.form-margin-20{
  margin-top:15%;
}
.form-margin-30{
  margin-top:30%;
}
.form-margin-50{
  margin-top:50%;
}
.form-margin-75{
  margin-top:75%;
}
.form-margin-80{
  margin-top:625px;
}
.title{
  font-weight: lighter;
  display: block;
  margin:5pc 0 0 0;
  color:#b20202;
  text-align: center;
  padding: 35px;
}
.form-control form{
  padding:15px;
  display: block;
}

.form-control form div{
  margin:15px 0;
}
.form-control form div label{
  display: block;
  color:#b20202;
  margin:10px 0;
  font-size: 14px;
}
.form-control form div input,.select{
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border-bottom: solid 1px #b20202;
}
.form-control form button{
  padding:10px 30px;
  font-size:15px;
  display: block;
  margin:50px auto 0;
  background: #b20202;
  color:white;
  border:none;
}
.form-control form button:hover{
  background:white;
  color:#b20202;
}

/*---class form-search---*/
.form-search{
  width: 100%;
  display:flex;
}
.form-search input{
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border-bottom: solid 1px #b20202;
}
.form-search .select{
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border-bottom: solid 1px #b20202;
}

.form-search button{
  padding: 10px !important;
  font-size: 15px;
  background: #b20202;
  color:white;
  margin: 0 !important;
}

/*--class tabla--*/
.tabla{
  margin-top: 25px;
}
.tabla-p{
  width: 98.4%;
}
.tabla-s{
  overflow-y: scroll;
  height:400px;
}
.table{
  width: 100%;
  text-align: left;
  font-size: 13px;
  border-collapse: collapse;
}
.table a{
  color:#b20202;
}
.table td, .table th{
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  width: 20%;
}
.table th{
  border:none;
}
.table .t-header{
  background: #ffffff;
  color: #b20202;
}

/*---clientes---*/
.clientes{
  width: 80%;
  margin:5pc auto 0;
}

.add-svg{
  background: #b20202;
  width: 75px;
  padding: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 30px;
  border-radius: 50%;
  box-shadow: 2px 2px 5px 3px #00000052;
}
.add-svg svg{
  fill:white;
}
.add-svg-small{
  width: 55px;
  padding:16px;
}

/*--perfil--*/
.perfil-cliente .datos{
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 5%;

}

.perfil-cliente .datos .personales,.cuenta{
  box-shadow: 2px 2px 5px 3px #0000001c;
  position: relative;
}

.perfil-cliente .datos .personales{
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.perfil-cliente .datos .personales .dright{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.perfil-cliente .datos .personales .dright small{
  color:#b20202;
}
.perfil-cliente .datos .personales .dright div{
  margin: 20px;
  padding: 5px;

}
.perfil-cliente .datos .personales .dright .email{
  width: 100%;
}
.perfil-cliente .datos .personales .dright div small,label{
  display: block;
}

.perfil-cliente .datos .cuenta{
  width: 25%;
}

.perfil-cliente .datos .personales .titulo{
  font-size: 20px;
  display: block;
  text-align: center;
  padding: 20px;
  width: 100%;
  background: #b20202;
  color: white;
}

.perfil-cliente .datos .personales svg{
  width: 25px;
  margin: 20px;
  position: absolute;
  top: 0;
  left: 0;
  fill: white;
}

.perfil-cliente .datos .cuenta label{
  padding: 20px;
  text-align: center;
}
.perfil-cliente .datos .cuenta .estado{
  background: #e42121;/*#4caf50 verde*/

  color: white;
}
.perfil-cliente .datos .cuenta .deuda{
  color: #e42121;
  margin:20px;
  display: block;
}
.perfil-cliente .datos .cuenta .monto{
  font-size: 20px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.perfil-cliente .datos .cuenta .monto b{
  color: #e42121;
  padding: 5px;
  border-radius: 5px;
  font-size:30px;
}

/*--trabajos-realizados*/



/*--modificar cliente--*/

.options-table{
  display: flex;
  padding: 30px;
  justify-content: center;
  align-items: center;
}
.options-table button{
  margin:10px 15px !important;
}

.options-table-w-30-h-75px{
  width: 30% !important;
  height: 75px;
}

.alert{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000000a1;
  z-index: 1000;
  display: none;
}

.alert div{
  background: white;
}

.section-movimientos{
  width: 100%;
  display: flex;
  height: 100vh;
  justify-content: center;
}
.section-movimientos .main{
  width: 500px;
  display: flex;
  height: 100vh;
  overflow-y: scroll;
  justify-content: center;
  flex-wrap: wrap;
}
.section-movimientos .main .alert-movimiento{
  margin: 35px 0;
  background: #b20202ba;
  padding: 15px;
  color: white;
  height: 130px;
}
.section-movimientos .main .alert-movimiento div{
  margin-top:20px;
}
.alert-background{
  display: none;
  position: fixed;
  width: 100%;
  height:100vh;
  background:#000000b0;
  top:0;
}
.alert-background .alert-pop{
  position:fixed;
  top:40%;
  background:white;
  padding:20px;
  width:100%;
}
@keyframes alarma{
  0%{
    background: #f11717;
    box-shadow: 0px 0px 8px 0 rgba(228, 15, 15, 0.82), 0px 0px 20px 0 rgba(222, 15, 15, 0.78);
    color: white;
  }
  50%{
    background: none;
    box-shadow: none;
    color:black;
  }
  100%{
    background: #f11717;
    box-shadow: 0px 0px 8px 0 rgba(228, 15, 15, 0.82), 0px 0px 20px 0 rgba(222, 15, 15, 0.78);
    color: white;
  }
}

.alarma-show{
  animation-name :alarma;
  animation-duration:0.50s;
  animation-iteration-count: infinite;
}

.yellow{
  background: #f6f652;
}
.label-show-days{
  padding:10px;
  border:solid 1px #000000;
  display: block;
  background: yellow;
  color:#000000;
  box-shadow: 2px 2px 5px -1px #000000a1;
}

.table-width-16px th{
  width: 16px !important;
}






.btn-loader{
  background: transparent !important;
  position: relative;
  color: transparent !important;
  border:none !important;
  box-shadow: none !important;
}
.btn-loader::before{
  content: '';
  position: absolute;
  width: 4%;
  height: 15%;
  background: #b20202;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  animation: tictac 0.5s infinite;
}

@keyframes tictac {
  0%{
    width: 4%;
    border-radius: 50%;
  }
  50%{
    width: 35%;
    border-radius: 2px;
  }
  100%{
    width: 4%;
    border-radius: 50%;
  }
}

.loader-screen{
  display:none;
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #dadadab0;
  top: 0;
  z-index: 1000;
}

.loader-screen .btn-loader{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  background: transparent;
  padding: 20px;
  width: 45%;
}