@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:wght@700&display=swap');
    /*******Inicio de sesion ********/
    .backIngreso{
      position:relative;
      height:100vh;
      background: url("../img/background.jpg") no-repeat center fixed ; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width: 100% ;
      text-align: center;
    }

    .inputEstilo{
      padding-left: 50px;
      border-bottom-left-radius: 8px;
      border-top-left-radius: 8px;
    }
    .estilos-centrar{
      text-align: center;
    }

    .estilos-izquierda{
      text-align: left;
    }
    
    form.formIngreso{
      position:absolute;
      border-radius:8px;
      box-shadow:0px 0px 10px #001;
      width:400px;
      height:auto;
      left:50%;
      top:30%;
      margin-left:-200px;
      margin-top:-115px;
      background:rgba(126, 121, 121, 0.2);
      padding:0px 20px 10px 20px;
    }
    
    form h1.tituloFormIngreso{
      display:block;
      width:100%;
      text-align:center;
      font-size: 20px;
      line-height:50px;
      background:#333;
      color:white;
    }
    
    form input.formIngreso{
      margin:10px auto;
    }

    .backIngreso .lema, .backIngreso .derechos{
      color:#fff;
    }

    .backIngreso .lema{
      font-size: 28px;
    }

    .backIngreso .botonSesion{
      width: 50%;
      line-height: 25px;
      border-radius: 8px;
      border: 1px solid #fff;
      background: rgba(7, 127, 197, 1);
      color: #fff;
    }



    .inputWhitIcon,.lada{
      position:relative;
    }

    .inputWhitIcon i{
      position: absolute;
      left: 0px;
      top: 0px;
      font-size: 30px;
      transition:.6s;
      color:#999;
    }

    .lada span{
      position: absolute;
      left: 12px;
      top: 7px;
      font-size: 14px;
      color:#000;
    }

    .ladaSangria{
      padding-left: 35px;
    }

    .numeroExteriorSangria{
      padding-left: 70px;
    }

    .inputWhitIcon.inputIconBg i{
      background:rgb(110, 103, 103);
      color: #fff;
      padding:2px 10px;
      border-bottom-left-radius: 8px;
      border-top-left-radius: 8px;
    }

    .inputWhitIcon.inputIconBg.inputIconBg2 i{
      padding:2px 11px;
    }

    

    .inputWhitIcon.inputIconBg input[type=text]:focus + i, .inputWhitIcon.inputIconBg input[type=password]:focus + i{
      background: rgba(7, 127, 197, 1);
      color:#FFF;
      box-shadow:0 0 12px 2px #fff;
    }

    .inputWhitIcon.inputIconBg input[type=text]:focus, .inputWhitIcon.inputIconBg input[type=password]:focus{
      box-shadow:0 0 12px 2px rgba(255, 255, 255, 0.7);
    }

    .inputWhitIcon span{
      position:absolute;
      right: 8px;
      top: 2px;
      font-size: 28px;
      transition:.6s;
      color: rgba(126, 121, 121, 0.8);
      cursor: pointer;
    }

    .verPass{
      display: none;
    }
   /**************************************Generales**************************************************/  
.divCalendario{
  border: 1px solid rgba(230, 224, 224, 0.904);
  padding-bottom: 20px;
}
   .textoMay{
    text-transform: uppercase;
  }

  .miestilo{
    background: #333;
    padding-top: 120px;
    width: 80px;
  }

  .encabezadoDato{
    font-size: 16px;
    font-weight:bold;
  }

  .encabezadoSeccion{
    background: #096F8A;
    color: #fff;
    line-height: 24px;
    font-size: 16px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid #000;
    width: 100%;
  }

  .encabezadoSeccion2{
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .espacioLateral{
    margin-right: 20px;
  }

  .bigIcon{
    font-size: 22px;
  }

  .contenedorUsuario{
    width: 100%;
    margin: 0;
    }
   
    .first-div {
    /*width: calc(100% -140px);*/
   width: 80%;
    margin: 0;
    float: left;
    }
   
    .second-div {
    /*width: 140px;*/
    width: 20%;
    margin: 0;
    float: left;
    } 

    .first-div-mini {
      width: 70%;
      margin: 0;
      float: left;
    }

    .second-div-mini {
      width: 30%;
      margin: 0;
      float: left;
    } 

    .limpiardiv{
      clear: both;
    }

    .botonImagen{
      padding: 5px;
      border: 2px solid #999;
      border-radius:5px;
      background:#005F8D;
      color:#E1e9FA;
      -webkit-transition-duration: 0.6s; /* Safari */
      transition-duration: 0.6s;
      position: relative;
      margin-left: calc(50% - 70px);
      width: 140px;
  }

    .botonOcultar{
      width: 80px;
      position:absolute;
      opacity: 0;
      background:#005F8D;
      margin-left: -7px;
      margin-top: -1px;
      }

    .botonImagen:hover{
      background:#fff;
      border: 2px solid #333;
      color: #232931;
  }

  .estilosTelefono2{
    text-align: center;
    width: 30px;
    height: 32px;
  }

  .estilosTelefono4{
    text-align: center;
    width: 40px;
    height: 32px;
  }


  .icono-encabezado,.icono-encabezado-green,.icono-encabezado-yellow,.icono-encabezado-red{
    background: rgb(14, 124, 155);
    color:white;
    border: 1px solid #E1e9FA;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,.8);
    border-radius: 8px;
    padding: 10px;
    font-size: 30px;
    margin-left: 10px;
    opacity: .90;
    text-align: center;
    width:56.6px;
  }

  .icono-encabezado2{
    background: rgb(14, 124, 155);
    color:white;
    margin-left: 10px;
    padding: 10px;
    border: 1px solid #E1e9FA;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,.8);
    border-radius: 8px;
    font-size: 25px;
    opacity: .90;
    text-align: center;
    width:56.6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icono-encabezado-green{
    background: rgb(37, 100, 8);
  }

  .icono-encabezado-yellow{
    background: #f39c12;
  }

  .icono-encabezado-red{
    background: #dd341a;
  }


  .max1000{
    max-width: 1000px;
    margin: auto;
    padding-bottom: 15px;
  }

  .max800{
    max-width: 800px;
    margin: auto;
    padding-bottom: 15px;
  }

  .max600{
    max-width: 600px;
    margin: auto;
    padding-bottom: 15px;
  }

  .alineacionCentralFlexBox{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .imagenSesion{
    z-index: 5;
    height: 110px;
    width: 110px;
    border: 3px solid;
    border-color: transparent;
    border-color: rgba(255,255,255,0.2);
    border-radius: 50%;
  }

  .textoSesion{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
  }

  .redondear img{
    border-radius: 50%;
    
    -webkit-box-shadow: rgba(0,0,0,0.8) 0 0px 20px,rgba(0,0,0,0.65) 0 0 10px 1px,inset rgba(255,255,255,0.15) 0 1px 0,inset rgba(0,0,0,0.25) 0 -1px 0;
    -moz-box-shadow: rgba(0,0,0,0.8) 0 0px 20px,rgba(0,0,0,0.65) 0 0 10px 1px,inset rgba(255,255,255,0.15) 0 1px 0,inset rgba(0,0,0,0.25) 0 -1px 0;
    box-shadow: rgba(0,0,0,0.8) 0 0px 20px,rgba(0,0,0,0.65) 0 0 10px 1px,inset rgba(255,255,255,0.15) 0 1px 0,inset rgba(0,0,0,0.25) 0 -1px 0;
  }

.b{
  border: 1px solid rgb(238, 224, 224);
  margin-bottom: 15px;
  margin-top: -15px;
  padding-left: 15px;
  padding-top: 10px;
}

  .bloquear-textarea{
    resize: vertical;
    overflow: auto;
  }

.texto-marcador{
  font-size: 18px;
  font-weight:bold;
}

.sangriaPermisos{
  margin-left: 30px;
}

.info-box-icon-mini{
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 40px;
  width: 40px;
  text-align: center;
  font-size: 25px;
  line-height: 40px;
  background: rgba(0,0,0,0.2);
}

.info-box-mini {
  display: block;
  min-height: 40px;
  background: #fff;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  border-radius: 2px;
  margin-bottom: 15px;
}

.info-box-content-mini{
  padding: 5px 10px;
  margin-left: 50px;
}


.menuNotificaciones li{
  max-height: 200px;
  margin: 5px 0 3px -20px;
  padding: 0;
  list-style: none;
  overflow-x: hidden;
}

.menuNotificaciones li a{
 color: #000;
}

.menuNotificaciones li a i{
  padding-right: 10px;
 }

 
 .textAreaImportante{
  background-color: rgba(10, 143, 65, 0.07);
  border-color: #00733e;
  border-left: 8px solid #00733e;
  border-radius: 6px;
 }

 .marcadoresExtra{
  height: 110px;
  line-height: 110px;
 }

 .titulo-color {
   width:100%;
   color: #fff;
   padding: 2px;
   padding-left: 8px;
   margin-bottom: -3px;
 }

/************************Select personalizados*********************************/
.select-style {
  border: 1px solid #ccc;
  padding: 0 10px;
  height: 42px;
  border-radius: 3px;
  overflow: hidden;
  max-width: 200px;
  border-bottom: 2px solid #00A65A !important;
  /*box-shadow: 0 0 1px 1px rgba(0,0,0,.5) inset;*/
  /*background: #fafafa url("img/icon-select.png") no-repeat 90% 50%;*/
}

.select-style select {
  padding: 5px 8px;
  /*width: 120%;*/
  border: none;
  box-shadow: none;
  /*background-image: none;*/
  -webkit-appearance: none;
}

.select-style select:focus {
  outline: none;
}

.miSelect{
  height: 26px;
  border:2px solid #00A65A;
  padding: 0 10px;
}

/*********************************************mostar registros Usuarios******************************************************/

.spanOcultarTextoEliminar2,
.spanOcultarTextoMostrar2,
.spanOcultarTextoContrasena2
{/*Cambio la palabra eliminar por el icono X*/
  display: none;
}

.barraBuscador{
  margin-bottom: 15px;
}

.barraBuscador-izquierda{
  width: 50%;
  text-align: left;
}

.barraBuscador-derecha{
  width: 50%;
  text-align: right;
}

.administrar-usuarios .renglonEncabezado,.administrar-usuarios .renglon0,.administrar-usuarios .renglon1,.administrar-usuarios .barraBuscador{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-usuarios .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-usuarios .renglon0{
  background: #fff;
  color:#000;
}

.administrar-usuarios .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-usuarios .renglon0:hover,.administrar-usuarios .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-usuarios .campoId,
.administrar-usuarios .campoIdEncabezado,
.administrar-usuarios .campoNombre,
.administrar-usuarios .campoNombreEncabezado,
.administrar-usuarios .campoSucursal,
.administrar-usuarios .campoSucursalEncabezado,
.administrar-usuarios .campoAcceso,
.administrar-usuarios .campoAccesoEncabezado,
.administrar-usuarios .campoOpciones1,
.administrar-usuarios .campoOpciones2,
.administrar-usuarios .campoOpciones3,
.administrar-usuarios .campoOpcionesEncabezado{
  width: 25%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  /*align-content: center;*/
  align-items: center;
  padding: 3px 5px;
}

.administrar-usuarios .campoNombre{
  justify-content: left;

}

.administrar-usuarios .campoAcceso,
.administrar-usuarios .campoAccesoEncabezado{
  width: 19%;
}
.administrar-usuarios .campoId,
.administrar-usuarios .campoIdEncabezado{
 width: 4%;
}


.administrar-usuarios .campoOpcionesEncabezado{
  width: 27%;
  padding: 5px;
}

.administrar-usuarios .campoOpciones1,
.administrar-usuarios .campoOpciones2,
.administrar-usuarios .campoOpciones3{
  width: 9%;
}

.barraBuscador .buscador{
  width: 200px;
  height: 35px;
  padding: 5px;
}


/*.max-min,.spanOcultoTelefono{ ya fueroin definidos
  margin-right: 10px;
  display: none;
}*/

@media screen and (max-width: 1200px) {

  /*.max-min{
    display: block;
    cursor: pointer;
  }

  .spanOcultoTelefono{
    display: block;
  }*/
 
  .administrar-usuarios .campoId,
  .administrar-usuarios .campoIdEncabezado
  {
    width: 80px;
  }

  .administrar-usuarios .campoNombre,
  .administrar-usuarios .campoNombreEncabezado
  {
    width: 50%;
  }

  .administrar-usuarios .campoSucursal,
  .administrar-usuarios .campoSucursalEncabezado{
    width: calc(50% - 80px);
  }

  .administrar-usuarios .campoOpcionesEncabezado,
  .administrar-usuarios .campoAccesoEncabezado
  {
    display: none;
  }
 
  .administrar-usuarios .campoAcceso
  {
    width: calc(100% - 315px);
    display: none;
    border: 1px dashed rgba(238, 19, 19, 0.438);
    background: rgba(15, 158, 224, 0.151);
    text-align:center;
    margin: 0 auto;
  }

  .administrar-usuarios .campoOpciones1,
  .administrar-usuarios .campoOpciones2,
  .administrar-usuarios .campoOpciones3{
    width: 105px;
    display: none;
    text-align:center;
    margin: 0 auto;
    background: rgba(15, 158, 224, 0.151);
    
  }
}


@media screen and (max-width: 720px) {

  .spanOcultarTextoEliminar2,
  .spanOcultarTextoMostrar2,
  .spanOcultarTextoContrasena2{
    display: block;
  }

  .spanOcultarTextoEliminar,
  .spanOcultarTextoMostrar,
  .spanOcultarTextoContrasena{
    display: none;
  }

  .administrar-usuarios .campoAcceso
  {
    width: calc(100% - 165px);
    display: none;
    border: 1px dashed rgba(238, 19, 19, 0.438);
    background: rgba(15, 158, 224, 0.151);
  }

  .administrar-usuarios .campoOpciones1,
  .administrar-usuarios .campoOpciones2,
  .administrar-usuarios .campoOpciones3{
    width: 55px;
    display: none;
    background: rgba(15, 158, 224, 0.151);
    
  }

}
/*********************************************mostar registros Equipos******************************************************/
.administrar-equipos .renglonEncabezado,.administrar-equipos .renglon0,.administrar-equipos .renglon1,.administrar-equipos .barraBuscador{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-equipos .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-equipos .renglon0{
  background: #fff;
  color:#000;
}

.administrar-equipos .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-equipos .renglon0:hover,.administrar-equipos .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-equipos .campoId,
.administrar-equipos .campoIdEncabezado,
.administrar-equipos .campoNombre,
.administrar-equipos .campoNombreEncabezado,
.administrar-equipos .campoSucursal,
.administrar-equipos .campoSucursalEncabezado,
.administrar-equipos .campoOpciones1,
.administrar-equipos .campoOpciones2,
.administrar-equipos .campoOpcionesEncabezado{
  width: 25%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  /*align-content: center;*/
  align-items: center;
  padding: 3px 5px;
}

.administrar-equipos .campoNombre{
  justify-content: left;
  width: 41%;
}
.administrar-equipos .campoNombreEncabezado{
  width: 41%;
}

.administrar-equipos .campoId,
.administrar-equipos .campoIdEncabezado{
 width: 4%;
}

.administrar-equipos .campoOpcionesEncabezado{
  width: 30%;
  padding: 5px;
}

.administrar-equipos .campoOpciones1,
.administrar-equipos .campoOpciones2{
  width: 15%;
}


/*.max-min,.spanOcultoTelefono{ ya fueroin definidos
  margin-right: 10px;
  display: none;
}*/

@media screen and (max-width: 1200px) {

  /*.max-min{
    display: block;
    cursor: pointer;
  }

  .spanOcultoTelefono{
    display: block;
  }*/
 
  .administrar-equipos .campoId,
  .administrar-equipos .campoIdEncabezado
  {
    width: 80px;
  }

  .administrar-equipos .campoNombre,
  .administrar-equipos .campoNombreEncabezado
  {
    width: 50%;
  }

  .administrar-equipos .campoSucursal,
  .administrar-equipos .campoSucursalEncabezado{
    width: calc(50% - 80px);
  }

  .administrar-equipos .campoOpcionesEncabezado
  {
    display: none;
  }
 
  .administrar-equipos .campoAcceso
  {
    width: calc(100% - 200px);
  }

  .administrar-equipos .campoOpciones1,
  .administrar-equipos .campoOpciones2{
    width: 100px;
    display: none;
    text-align:center;
    margin: 0 auto;
    border: 1px dashed rgba(238, 19, 19, 0.438);
    background: rgba(15, 158, 224, 0.151);
    
  }
}
/*********************************************mostar permisos todos los usuarios******************************************************/
.administrar-solicitudes .renglonEncabezado,.administrar-solicitudes .renglon0,.administrar-solicitudes .renglon1,.administrar-solicitudes .barraBuscador{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-solicitudes .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-solicitudes .renglon0{
  background: #fff;
  color:#000;
}

.administrar-solicitudes .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-solicitudes .renglon0:hover,.administrar-solicitudes .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-solicitudes .campoId,
.administrar-solicitudes .campoIdEncabezado,
.administrar-solicitudes .campoNombre,
.administrar-solicitudes .campoNombreEncabezado,
.administrar-solicitudes .campoSucursal,
.administrar-solicitudes .campoSucursalEncabezado,
.administrar-solicitudes .campoAcceso,
.administrar-solicitudes .campoAccesoEncabezado,
.administrar-solicitudes .campoOpciones1,
.administrar-solicitudes .campoJefe,
.administrar-solicitudes .campoJefeEncabezado,
.administrar-solicitudes .campoRH,
.administrar-solicitudes .campoRHEncabezado,
.administrar-solicitudes .campoOpcionesEncabezado,
.administrar-solicitudes .campoFecha,
.administrar-solicitudes .campoFechaEncabezado{
  width: 23%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-solicitudes .campoNombre,
.administrar-solicitudes .campoAcceso{
  justify-content: left;
}

.administrar-solicitudes .campoNombreEncabezado,
.administrar-solicitudes .campoNombre{
  width: calc(35% - 80px);
}

.administrar-solicitudes .campoAcceso,
.administrar-solicitudes .campoAccesoEncabezado{
  width: 18%;
}


.administrar-solicitudes .campoId,
.administrar-solicitudes .campoIdEncabezado,
.administrar-solicitudes .campoJefe,
.administrar-solicitudes .campoJefeEncabezado,
.administrar-solicitudes .campoRH,
.administrar-solicitudes .campoRHEncabezado{
 width: 5%;
}


.administrar-solicitudes .campoOpcionesEncabezado{
  width: 80px;
  padding: 5px;
}

.administrar-solicitudes .campoFecha,
.administrar-solicitudes .campoFechaEncabezado{
  width: 9%;
}

.administrar-solicitudes .campoOpciones1{
  width: 80px;
}



@media screen and (max-width: 1200px) {
  
  .administrar-solicitudes .campoId,
  .administrar-solicitudes .campoIdEncabezado{
     width: 80px;
  }  

  .administrar-solicitudes .campoNombreEncabezado,
  .administrar-solicitudes .campoNombre{
    width: calc(40% - 80px);
  }

  .administrar-solicitudes .campoOpcionesEncabezado{
    display: none;
  }

  .administrar-solicitudes .campoOpciones1
  {
    width: 100%;
    display: none;
    border: 1px dashed rgba(238, 19, 19, 0.438);
    background: rgba(15, 158, 224, 0.151);
  }

}
/*********************************************mostar permisos (cada usuario)******************************************************/
.administrar-solicitudes-individual .renglonEncabezado,.administrar-solicitudes-individual .renglon0,.administrar-solicitudes-individual .renglon1,.administrar-solicitudes-individual .barraBuscador{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-solicitudes-individual .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-solicitudes-individual .renglon0{
  background: #fff;
  color:#000;
}

.administrar-solicitudes-individual .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-solicitudes-individual .renglon0:hover,.administrar-solicitudes-individual .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-solicitudes-individual .campoId,
.administrar-solicitudes-individual .campoIdEncabezado,
.administrar-solicitudes-individual .campoNombre,
.administrar-solicitudes-individual .campoNombreEncabezado,

.administrar-solicitudes-individual .campoReferencia,
.administrar-solicitudes-individual .campoReferenciaEncabezado,


.administrar-solicitudes-individual .campoOpciones1,
.administrar-solicitudes-individual .campoJefe,
.administrar-solicitudes-individual .campoJefeEncabezado,
.administrar-solicitudes-individual .campoRH,
.administrar-solicitudes-individual .campoRHEncabezado,
.administrar-solicitudes-individual .campoOpcionesEncabezado,
.administrar-solicitudes-individual .campoFecha,
.administrar-solicitudes-individual .campoFechaEncabezado{
  width: 23%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  /*align-content: center;*/
  align-items: center;
  padding: 3px 5px;
}

.administrar-solicitudes-individual .campoNombre,
.administrar-solicitudes-individual .campoNombreEncabezado{
  width: 49%;
}

.administrar-solicitudes-individual .campoNombre{
  justify-content: left;
}


.administrar-solicitudes-individual .campoId,
.administrar-solicitudes-individual .campoIdEncabezado,
.administrar-solicitudes-individual .campoJefe,
.administrar-solicitudes-individual .campoJefeEncabezado,
.administrar-solicitudes-individual .campoRH,
.administrar-solicitudes-individual .campoRHEncabezado{
 width: 5%;
}

.administrar-solicitudes-individual .campoReferencia,
.administrar-solicitudes-individual .campoReferenciaEncabezado,
.administrar-solicitudes-individual .campoFecha,
.administrar-solicitudes-individual .campoFechaEncabezado{
  width: 12%;
}


.administrar-solicitudes-individual .campoOpcionesEncabezado{
  width: 12%;
  padding: 5px;
}

.administrar-solicitudes-individual .campoOpciones1{
  width: 12%;
}


/*****************/
@media screen and (max-width: 1200px) {

  .administrar-solicitudes-individual .campoId,
  .administrar-solicitudes-individual .campoIdEncabezado{
     width: 80px;
  }  

  .administrar-solicitudes-individual .campoNombre,
  .administrar-solicitudes-individual .campoNombreEncabezado{
    width: calc(66% - 80px);
  }

  .administrar-solicitudes-individual .campoOpcionesEncabezado{
    display: none;
  }

  .administrar-solicitudes-individual .campoOpciones1
  {
    width: 100%;
    display: none;
    border: 1px dashed rgba(238, 19, 19, 0.438);
    background: rgba(15, 158, 224, 0.151);
  }

}

/*********************************************mostar registros Sucursales******************************************************/
.administrar-sucursales .renglonEncabezado,.administrar-sucursales .renglon0,.administrar-sucursales .renglon1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-sucursales .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-sucursales .renglon0{
  background: #fff;
  color:#000;
}

.administrar-sucursales .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-sucursales .renglon0:hover,.administrar-sucursales .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-sucursales .campoId,
.administrar-sucursales .campoIdEncabezado,
.administrar-sucursales .campoSucursal,
.administrar-sucursales .campoSucursalEncabezado,
.administrar-sucursales .campoDireccion,
.administrar-sucursales .campoDireccionEncabezado,
.administrar-sucursales .campoTelefono,
.administrar-sucursales .campoTelefonoEncabezado,
.administrar-sucursales .campoOpciones1,
.administrar-sucursales .campoOpciones2,
.administrar-sucursales .campoOpciones3,
.administrar-sucursales .campoOpcionesEncabezado
{
  width: 15%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-sucursales .campoSucursal,.administrar-sucursales .campoTelefono {
  justify-content: left;
}

.administrar-sucursales .campoDireccion,
.administrar-sucursales .campoDireccionEncabezado{
  width: 30%;
  justify-content: left;
}

.administrar-sucursales .campoTelefono,
.administrar-sucursales .campoTelefonoEncabezado{
  width: 20%;
 }

.administrar-sucursales .campoId,
.administrar-sucursales .campoIdEncabezado{
 width: 5%;
}

.administrar-sucursales .campoOpcionesEncabezado{
 width: 30%;
}

.administrar-sucursales .campoOpciones1,
.administrar-sucursales .campoOpciones2,
.administrar-sucursales .campoOpciones3{
  width: 10%;
}


.max-min,.spanOcultoTelefono{
  margin-right: 10px;
  display: none;
}

@media screen and (max-width: 1200px) {

  .max-min{
    display: block;
    cursor: pointer;
  }

  .spanOcultoTelefono{
    display: block;
  }
 
  .administrar-sucursales .campoId,
  .administrar-sucursales .campoIdEncabezado
  {
    width: 80px;
  }

  
  .administrar-sucursales .campoDireccion,
  .administrar-sucursales .campoDireccionEncabezado
  {
    width: 50%;
  }

  .administrar-sucursales .campoSucursal,
  .administrar-sucursales .campoSucursalEncabezado{
    width: calc(50% - 80px);
  }


  .administrar-sucursales .campoOpcionesEncabezado,
  .administrar-sucursales .campoTelefonoEncabezado
  {
    display: none;
  }
 
  .administrar-sucursales .campoTelefono
  {
    width: calc(100% - 315px);
    display: none;
    border: 1px dashed rgba(238, 19, 19, 0.438);
    background: rgba(15, 158, 224, 0.151);
  }

  .administrar-sucursales .campoOpciones1,
  .administrar-sucursales .campoOpciones2,
  .administrar-sucursales .campoOpciones3{
    width: 105px;
    display: none;
    background: rgba(15, 158, 224, 0.151);
    
  }
}

/*********************************************mostar registros Paquetes internos******************************************************/
.administrar-paquetesInternos .renglonEncabezado,.administrar-paquetesInternos .renglon0,.administrar-paquetesInternos .renglon1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-paquetesInternos .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-paquetesInternos .renglon0{
  background: #fff;
  color:#000;
}

.administrar-paquetesInternos .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-paquetesInternos .renglon0:hover,.administrar-paquetesInternos .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-paquetesInternos .campoIdEncabezado,
.administrar-paquetesInternos .campoId,
.administrar-paquetesInternos .campoDestinatarioEncabezado,
.administrar-paquetesInternos .campoDestinatario,

.administrar-paquetesInternos .campoFechaEncabezado,
.administrar-paquetesInternos .campoFecha,
.administrar-paquetesInternos .campoSituacionEncabezado,
.administrar-paquetesInternos .campoSituacion,
.administrar-paquetesInternos .campoTipoEncabezado,
.administrar-paquetesInternos .campoTipo,

.administrar-paquetesInternos .campoDetalleEncabezado,
.administrar-paquetesInternos .campoDetalle{
  width: 15%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-paquetesInternos .campoId,
.administrar-paquetesInternos .campoIdEncabezado{
 width: 8%;
}


.administrar-paquetesInternos .campoDestinatario{
  justify-content: left;
  width: 37%;
}
.administrar-paquetesInternos .campoDestinatarioEncabezado{
  width: 37%;
}

.administrar-paquetesInternos .campoDetalleEncabezado,
.administrar-paquetesInternos .campoDetalle{
  width: 10%;
}


@media screen and (max-width: 1200px) {

  .administrar-paquetesInternos .campoId,
  .administrar-paquetesInternos .campoIdEncabezado{
    width: 80px;
  }

  .administrar-paquetesInternos .campoDestinatario,
  .administrar-paquetesInternos .campoDestinatarioEncabezado{
    width: calc(50% - 80px);
  }

  .administrar-paquetesInternos .campoSituacionEncabezado,
  .administrar-paquetesInternos .campoSituacion,
  .administrar-paquetesInternos .campoTipoEncabezado,
  .administrar-paquetesInternos .campoTipo{
    width: 25%;
  }


  .administrar-paquetesInternos .campoDetalleEncabezado,
  .administrar-paquetesInternos .campoFechaEncabezado{
    display: none;
  }
 
  .administrar-paquetesInternos .campoDetalle,
  .administrar-paquetesInternos .campoFecha{
    width: 50%;
    display: none;
    text-align:left;
    margin: 0 auto;
    border: 1px dashed rgba(238, 19, 19, 0.438);
    background: rgba(15, 158, 224, 0.151);
    
  }
}

@media screen and (max-width: 840px) {
  .administrar-paquetesInternos .campoDestinatario,
  .administrar-paquetesInternos .campoDestinatarioEncabezado{
    width: calc(100% - 222px);
  }

  .administrar-paquetesInternos .campoSituacionEncabezado,
  .administrar-paquetesInternos .campoSituacion{
    width: 142px;
  }


  .administrar-paquetesInternos .campoTipoEncabezado,
  .administrar-paquetesInternos .campoTipo{
    display: none;
  }
 
}

/*********************************************mostar registros Paquetes externos******************************************************/
.administrar-paquetesExternos .renglonEncabezado,.administrar-paquetesExternos .renglon0,.administrar-paquetesExternos .renglon1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-paquetesExternos .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-paquetesExternos .renglon0{
  background: #fff;
  color:#000;
}

.administrar-paquetesExternos .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-paquetesExternos .renglon0:hover,.administrar-paquetesExternos .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-paquetesExternos .campoIdEncabezado,
.administrar-paquetesExternos .campoId,
.administrar-paquetesExternos .campoDestinatarioEncabezado,
.administrar-paquetesExternos .campoDestinatario,

.administrar-paquetesExternos .campoFechaEncabezado,
.administrar-paquetesExternos .campoFecha,
.administrar-paquetesExternos .campoSituacionEncabezado,
.administrar-paquetesExternos .campoSituacion,
.administrar-paquetesExternos .campoTipoEncabezado,
.administrar-paquetesExternos .campoTipo,

.administrar-paquetesExternos .campoDetalleEncabezado,
.administrar-paquetesExternos .campoDetalle{
  width: 15%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-paquetesExternos .campoId,
.administrar-paquetesExternos .campoIdEncabezado{
 width: 8%;
}

.administrar-paquetesExternos .campoDestinatario,
.administrar-paquetesExternos .campoFecha{
  justify-content: left;
  width: 26%;
}
.administrar-paquetesExternos .campoDestinatarioEncabezado,
.administrar-paquetesExternos .campoFechaEncabezado{
  width: 26%;
}

.administrar-paquetesExternos .campoDetalleEncabezado,
.administrar-paquetesExternos .campoDetalle{
  width: 10%;
}


@media screen and (max-width: 1200px) {

  .administrar-paquetesExternos .campoId,
  .administrar-paquetesExternos .campoIdEncabezado
  {
    width: 80px;
  }

  .administrar-paquetesExternos .campoDestinatarioEncabezado,
  .administrar-paquetesExternos .campoDestinatario
  {
    width: calc(35% - 80px);
  }

  .administrar-paquetesExternos .campoFechaEncabezado,
  .administrar-paquetesExternos .campoFecha{
    width: 35%;
  }

  .administrar-paquetesExternos .campoSituacionEncabezado,
  .administrar-paquetesExternos .campoSituacion,
  .administrar-paquetesExternos .campoTipoEncabezado,
  .administrar-paquetesExternos .campoTipo{
    width: 15%;
  }

  .administrar-paquetesExternos .campoDetalleEncabezado
  {
    display: none;
  }
 
  .administrar-paquetesExternos .campoDetalle{
    width: 100%;
    display: none;
    text-align:left;
    margin: 0 auto;
    border: 1px dashed rgba(238, 19, 19, 0.438);
    background: rgba(15, 158, 224, 0.151);
    
  }
}




/*********************************************mostar registros Tickets******************************************************/
.administrar-tickets .renglonEncabezado,.administrar-tickets .renglon0,.administrar-tickets .renglon1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-tickets .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-tickets .renglon0{
  background: #fff;
  color:#000;
}

.administrar-tickets .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-tickets .renglon0:hover,.administrar-tickets .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-tickets .campoIdTicketEncabezado,
.administrar-tickets .campoIdTicket,
.administrar-tickets .campoNombreTicketEncabezado,
.administrar-tickets .campoNombreTicket,
.administrar-tickets .campoAsuntoEncabezado,
.administrar-tickets .campoAsunto,
.administrar-tickets .campoSituacionEncabezado,
.administrar-tickets .campoSituacion,
.administrar-tickets .campoDetalleEncabezado,
.administrar-tickets .campoDetalle{
  width: 50%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  /*flex-wrap: nowrap;*/
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-tickets .campoNombreTicketEncabezado,
.administrar-tickets .campoNombreTicket{
  width: calc(50% - 260px);
  justify-content: left;
}

.administrar-tickets .campoNombreTicket{
  flex-direction: column;
}

.administrar-tickets .campoAsuntoEncabezado,
.administrar-tickets .campoAsunto{
  justify-content: left;
}

.administrar-tickets .campoIdTicketEncabezado,
.administrar-tickets .campoIdTicket,
.administrar-tickets .campoSituacionEncabezado,
.administrar-tickets .campoSituacion{
  width: 80px;
}

.administrar-tickets .campoDetalleEncabezado,
.administrar-tickets .campoDetalle{
  width: 100px;
}

/*.administrar-paquetesExternos .campoId,
.administrar-paquetesExternos .campoIdEncabezado{
 width: 8%;
}

.administrar-paquetesExternos .campoDestinatario,
.administrar-paquetesExternos .campoFecha{
  justify-content: left;
  width: 26%;
}
.administrar-paquetesExternos .campoDestinatarioEncabezado,
.administrar-paquetesExternos .campoFechaEncabezado{
  width: 26%;
}

.administrar-paquetesExternos .campoDetalleEncabezado,
.administrar-paquetesExternos .campoDetalle{
  width: 10%;
}*/




/*********************************************mostar registros Tickets Finalizados******************************************************/
.administrar-tickets-finalizados .renglonEncabezado,.administrar-tickets-finalizados .renglon0,.administrar-tickets-finalizados .renglon1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-tickets-finalizados .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-tickets-finalizados .renglon0{
  background: #fff;
  color:#000;
}

.administrar-tickets-finalizados .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-tickets-finalizados .renglon0:hover,.administrar-tickets-finalizados .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-tickets-finalizados .campoIdTicketEncabezado,
.administrar-tickets-finalizados .campoIdTicket,
.administrar-tickets-finalizados .campoNombreTicketEncabezado,
.administrar-tickets-finalizados .campoNombreTicket,
.administrar-tickets-finalizados .campoAsuntoEncabezado,
.administrar-tickets-finalizados .campoAsunto,
.administrar-tickets-finalizados .campoSituacionEncabezado,
.administrar-tickets-finalizados .campoSituacion,
.administrar-tickets-finalizados .campoCierreEncabezado,
.administrar-tickets-finalizados .campoCierre,
.administrar-tickets-finalizados .campoDetalleEncabezado,
.administrar-tickets-finalizados .campoDetalle{
  width: 40%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  /*flex-wrap: nowrap;*/
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-tickets-finalizados .campoNombreTicketEncabezado,
.administrar-tickets-finalizados .campoNombreTicket{
  width: calc(60% - 360px);
  justify-content: left;
}

.administrar-tickets-finalizados .campoNombreTicket{
  flex-direction: column;
}

.administrar-tickets-finalizados .campoAsuntoEncabezado,
.administrar-tickets-finalizados .campoAsunto{
  justify-content: left;
}

.administrar-tickets-finalizados .campoIdTicketEncabezado,
.administrar-tickets-finalizados .campoIdTicket,
.administrar-tickets-finalizados .campoSituacionEncabezado,
.administrar-tickets-finalizados .campoSituacion{
  width: 80px;
}

.administrar-tickets-finalizados .campoCierreEncabezado,
.administrar-tickets-finalizados .campoCierre{
  width: 100px;
}

.administrar-tickets-finalizados .campoDetalleEncabezado,
.administrar-tickets-finalizados .campoDetalle{
  width: 100px;
}

/*.administrar-paquetesExternos .campoId,
.administrar-paquetesExternos .campoIdEncabezado{
 width: 8%;
}

.administrar-paquetesExternos .campoDestinatario,
.administrar-paquetesExternos .campoFecha{
  justify-content: left;
  width: 26%;
}
.administrar-paquetesExternos .campoDestinatarioEncabezado,
.administrar-paquetesExternos .campoFechaEncabezado{
  width: 26%;
}

.administrar-paquetesExternos .campoDetalleEncabezado,
.administrar-paquetesExternos .campoDetalle{
  width: 10%;
}*/

/*********************************************mostar registros Tickets Historial******************************************************/
.administrar-tickets-historial .renglonEncabezado,.administrar-tickets-historial .renglon0,.administrar-tickets-historial .renglon1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-tickets-historial .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-tickets-historial .renglon0{
  background: #fff;
  color:#000;
}

.administrar-tickets-historial .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-tickets-historial .renglon0:hover,.administrar-tickets-historial .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-tickets-historial .campoIdTicketEncabezado,
.administrar-tickets-historial .campoIdTicket,
.administrar-tickets-historial .campoNombreTicketEncabezado,
.administrar-tickets-historial .campoNombreTicket,
.administrar-tickets-historial .campoAsuntoEncabezado,
.administrar-tickets-historial .campoAsunto,
.administrar-tickets-historial .campoSituacionEncabezado,
.administrar-tickets-historial .campoSituacion,
.administrar-tickets-historial .campoCierreEncabezado,
.administrar-tickets-historial .campoCierre,
.administrar-tickets-historial .campoDetalleEncabezado,
.administrar-tickets-historial .campoDetalle{
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-tickets-historial .campoNombreTicketEncabezado,
.administrar-tickets-historial .campoNombreTicket{
  width: calc(100% - 480px);
  justify-content: left;
}

.administrar-tickets-historial .campoIdTicketEncabezado,
.administrar-tickets-historial .campoIdTicket{
  width: 80px;
}

.administrar-tickets-historial .campoCierreEncabezado,
.administrar-tickets-historial .campoCierre,
.administrar-tickets-historial .campoSituacionEncabezado,
.administrar-tickets-historial .campoSituacion,
.administrar-tickets-historial .campoDetalleEncabezado,
.administrar-tickets-historial .campoDetalle,
.administrar-tickets-historial .campoAsuntoEncabezado,
.administrar-tickets-historial .campoAsunto{
  width: 100px;
  text-align:center;
}


/*********************************************Nominas******************************************************/
.administrar-nominas .renglonEncabezado,.administrar-nominas .renglon0,.administrar-nominas .renglon1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-nominas .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-nominas .renglon0{
  background: #fff;
  color:#000;
}

.administrar-nominas .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-nominas .renglon0:hover,.administrar-nominas .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}


.administrar-nominas .campoFolioEncabezado,
.administrar-nominas .campoFolio,
.administrar-nominas .campoNominasEncabezado,
.administrar-nominas .campoNominas,
.administrar-nominas .campoFinanzasEncabezado,
.administrar-nominas .campoFinanzas,
.administrar-nominas .campoTesoreriaEncabezado,
.administrar-nominas .campoTesoreria,
.administrar-nominas .campoTipoEncabezado,
.administrar-nominas .campoTipo,
.administrar-nominas .campoFechaEncabezado,
.administrar-nominas .campoFecha,
.administrar-nominas .campoOpcionesEncabezado,
.administrar-nominas .campoOpciones,
.administrar-nominas .campoArchivos{
  width: calc(33.3333% - 140px);
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-nominas .campoNominasEmpresa{
  width: calc(66.6666% - 400px);
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-nominas .campoFolio{
  justify-content: flex-end;
}

.administrar-nominas .campoArchivos{
  width: 80px;
}

.administrar-nominas .campoOpcionesEncabezado,
.administrar-nominas .campoOpciones{
  width: 130px;
}


.administrar-nominas .campoFolioEncabezado,
.administrar-nominas .campoFolio{
  width: 110px;
}

.administrar-nominas .campoFechaEncabezado,
.administrar-nominas .campoFecha{
  width: 100px;
}

.administrar-nominas .campoTipoEncabezado,
.administrar-nominas .campoTipo{
  width: 120px;
}

.administrar-nominas .campoFolioEncabezado2,
.administrar-nominas .campoFolio2,
.administrar-nominas .campoNominasEncabezado2,
.administrar-nominas .campoNominas2,
.administrar-nominas .campoFinanzasEncabezado2,
.administrar-nominas .campoFinanzas2,
.administrar-nominas .campoTesoreriaEncabezado2,
.administrar-nominas .campoTesoreria2,
.administrar-nominas .campoClienteEncabezado,
.administrar-nominas .campoCliente,
.administrar-nominas .campoSucursalEncabezado,
.administrar-nominas .campoSucursal,
.administrar-nominas .campoOpcionesEncabezado2,
.administrar-nominas .campoOpciones2{
  width: calc(50% - 225px);
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-nominas .campoFolioEncabezado2,
.administrar-nominas .campoFolio2,
.administrar-nominas .campoOpcionesEncabezado2,
.administrar-nominas .campoOpciones2,
.administrar-nominas .campoNominasEncabezado2,
.administrar-nominas .campoNominas2,
.administrar-nominas .campoFinanzasEncabezado2,
.administrar-nominas .campoFinanzas2,
.administrar-nominas .campoTesoreriaEncabezado2,
.administrar-nominas .campoTesoreria2{
  width: 90px;
}


/************************Checkbox personalizados switch*********************************/
.toggle-btn {
  width: 60px;
  height: 18px;
  margin: 0px;
  border-radius: 50px;
  position: relative;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAmUlEQVQ4T6WT0RWDMAhFeZs4ipu0mawZpaO4yevBc6hUIWLNd+4NeQDk5sE/PMkZwFvZywKSTxF5iUgH0C4JHGyF97IggFVSqyCFga0CvQSg70Mdwd8QSSr4sGBMcgavAgdvwQCtApvA2uKr1x7Pu++06ItrF5LXPB/CP4M0kKTwYRIDyRAOR9lJTuF0F0hOAJbKopVHOZN9ACS0UgowIx8ZAAAAAElFTkSuQmCC") no-repeat 10px center #2ecc71;
  cursor: pointer;
  -webkit-transition: background-color .40s ease-in-out;
  -moz-transition: background-color .40s ease-in-out;
  -o-transition: background-color .40s ease-in-out;
  transition: background-color .40s ease-in-out;
  cursor: pointer;
}

.miCheck{
  width: 60px;
  height: 18px;
  /*border: 2px solid #000;*/
  display: inline-block;
  margin-right: 10px;
}

.toggle-btn.active {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyklEQVQ4T42TaxHCQAyENw5wAhLACVUAUkABOCkSwEkdhNmbpHNckzv689L98toIAKjqGcAFwElEFr5ln6ruAMwA7iLyFBM/TPDuQSrxwf6fCKBoX2UMIYGYkg8BLOnVg2RiAEexGaQQq4w9e9klcxGLLAUwgDAcihlYAR1IvZA1sz/+AAaQjXhTQQVoe2Yo3E7UQiT2ijeQdojRtClOfVKvMVyVpU594kZK9zzySWTlcNqZY9tjCsUds00+A57z1e35xzlzJjee8xf0HYp+cOZQUQAAAABJRU5ErkJggg==") no-repeat 36px center #e74c3c;
}


.toggle-btn.active .round-btn {
  left: 0px;
}

.toggle-btn .round-btn {
  width: 20px;
  height: 20px;
  background-color: rgb(250, 245, 245);
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 40px;
  top: 50%;
  margin-top: -10px;
  -webkit-transition: all .30s ease-in-out;
  -moz-transition: all .30s ease-in-out;
  -o-transition: all .30s ease-in-out;
  transition: all .30s ease-in-out;
  -webkit-box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.35);
box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.35);
}

.toggle-btn .cb-value {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 9;
  cursor: pointer;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}



/********************mejores************************/

.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 20px;
}

.switch input { 
opacity: 0;
width: 0;
height: 0;
}

input[disabled] + .slider,input[disabled]:checked + .slider{
  background-color: gray;
  cursor: not-allowed;
}

input[disabled] + .slider2{
  background-color: rgb(230, 29, 29);
  cursor: not-allowed;
}

input[disabled]:checked + .slider2{
  background-color: #00a65a;
  cursor: not-allowed;
}

.slider {
background-image: url('../img/textCheked.png');
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(230, 29, 29);
/*-webkit-box-shadow: inset -1px 0px 26px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset -1px 0px 26px 0px rgba(0,0,0,0.75);
box-shadow: inset -1px 0px 26px 0px rgba(0,0,0,0.75);*/
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: -1px;
bottom: -2px;
-webkit-box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.35);
box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.35);
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}


input:checked + .slider {
background-color: #00a65a;
/*-webkit-box-shadow: inset -1px 0px 26px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset -1px 0px 26px 0px rgba(0,0,0,0.75);
box-shadow: inset -1px 0px 26px 0px rgba(0,0,0,0.75);*/
}

input:focus + .slider {
box-shadow: 0 0 1px #000;
/*-webkit-box-shadow: inset -1px 0px 26px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset -1px 0px 26px 0px rgba(0,0,0,0.75);
box-shadow: inset -1px 0px 26px 0px rgba(0,0,0,0.75);*/
}

input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

/*radios personalizados******************************/

@import url(../font-awesome/css/font-awesome.css);
/*
input[type=radio].with-font,
input[type=checkbox].with-font {
    border: 1;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
   
}
  
input[type=radio].with-font ~ label:before,
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f096";
    letter-spacing: 10px;
    font-size: 2.2em;
    color: #535353;
    width: 1.4em;
}

input[type=radio].with-font:checked ~ label:before,
input[type=checkbox].with-font:checked ~ label:before  {
    content: "\f046";
    font-size: 2.2em;
    color: darkgreen;
    letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {        
    content: "\f096";
}
input[type=checkbox].with-font:checked ~ label:before {
    content: "\f046";        
    color: darkgreen;
}
input[type=radio].with-font:focus ~ label:before,
input[type=checkbox].with-font:focus ~ label:before,
input[type=radio].with-font:focus ~ label,
input[type=checkbox].with-font:focus ~ label
{                
    color: green;
}*/

.with-font {
   display: none;
}

.with-font + label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f096";
    font-size: 14px;
    color: #535353;
    width: 20px;
    margin-left: 10px;
}

.with-font:checked + label:before {
    content: "\f046";
    font-size: 14px;
    color: #000000;
}

.with-font:checked + label {
  color: rgb(43, 153, 43);
}

.with-font:hover + label{
  cursor: pointer;
}


.sexoUsuario{
  color: rgb(46, 42, 42);
}
/************************************Label Agregar equipo**************************************************************************/
.hola{
  color: rgba(126, 121, 121, 0.6);
}

/************************************sucursal Nueva*********************************************************************************/
.rem{
  margin-left: 5px;
  margin-top: 1px;
  background-color: red;
  color: white;
  border: 1px solid white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
}

.agregarDepartamentos{
  background: rgb(241, 237, 237);
  border: 1px dashed gray;
  min-height: 100px;
  margin: auto;
}

/*********************************************mostar registros Correos******************************************************/
.administrar-correos .renglonEncabezado,.administrar-correos .renglon0,.administrar-correos .renglon1,.administrar-correos .barraBuscador {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-correos .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-correos .renglon0{
  background: #fff;
  color:#000;
}

.administrar-correos .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-correos .renglon0:hover,.administrar-correos .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-correos .campoId,
.administrar-correos .campoIdEncabezado,
.administrar-correos .campoNombre,
.administrar-correos .campoNombreEncabezado,
.administrar-correos .campoSucursal,
.administrar-correos .campoSucursalEncabezado,
.administrar-correos .campoDireccion,
.administrar-correos .campoDireccionEncabezado
{
  width: 31%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-correos .campoSucursal, .administrar-correos .campoNombre {
  justify-content: flex-start;
}

.administrar-correos .campoSucursal, .administrar-correos .campoSucursalEncabezado {
  width: calc(62% - 80px);
}
.administrar-correos .campoDireccion, .administrar-correos .campoDireccionEncabezado {
  width: 80px;
}

.administrar-correos .campoId,
.administrar-correos .campoIdEncabezado{
 width: 7%;
}


@media screen and (max-width: 1200px) {
 
  .administrar-correos .campoId,
  .administrar-correos .campoIdEncabezado
  {
    width: 80px;
  }

  .administrar-correos .campoDireccionEncabezado{
    display: none;
  
  }
  

  .administrar-correos .campoSucursal,
  .administrar-correos .campoSucursalEncabezado{
    width: calc(60% - 80px);
  }

  .administrar-correos .campoNombre,
  .administrar-correos .campoNombreEncabezado{
    width: 40%;
  }

  .administrar-correos .campoDireccion{
    width: 100%;
    display: none;
    border: 1px dashed rgba(238, 19, 19, 0.438);
    background: rgba(15, 158, 224, 0.151);
  }
}



@media screen and (max-width: 920px) {

  .administrar-correos .campoSucursalEncabezado,
  .administrar-correos .campoSucursal{
    display: none;
  
  }
  
  .administrar-correos .campoNombre,
  .administrar-correos .campoNombreEncabezado{
    width: calc(100% - 80px);
  }

}


@media screen and (max-width: 460px) {

  .barraBuscador .buscador{
    width: 200px;
    height: 35px;
    padding: 5px;
    margin-left: -40px;
  }

  .second-div-mini {
    margin-left: -22px;
  } 

}

/*****************************************************************nutrifitnes***********************************************************************/

.administrar-correos2 .renglonEncabezado,.administrar-correos2 .renglonEncabezado2,.administrar-correos2 .renglon0,.administrar-correos2 .renglon1,.administrar-correos2 .barraBuscador {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-correos2 .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-correos2 .renglon0{
  background: #fff;
  color:#000;
}

.administrar-correos2 .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-correos2 .renglon0:hover,.administrar-correos2 .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-correos2 .campoId,
.administrar-correos2 .campoIdEncabezado,
.administrar-correos2 .campoNombre,
.administrar-correos2 .campoNombreEncabezado,
.administrar-correos2 .campoSucursal,
.administrar-correos2 .campoSucursalEncabezado,
.administrar-correos2 .campoDireccion,
.administrar-correos2 .campoDireccionEncabezado,
.administrar-correos2 .campoVisto,
.administrar-correos2 .campoVistoEncabezado
{
  width: 31%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-correos2 .campoSucursal, .administrar-correos2 .campoNombre {
  justify-content: flex-start;
}

.administrar-correos2 .campoSucursal, .administrar-correos2 .campoSucursalEncabezado {
  width: calc(62% - 130px);
}
.administrar-correos2 .campoDireccion, .administrar-correos2 .campoDireccionEncabezado {
  width: 80px;
}

.administrar-correos2 .campoVisto, .administrar-correos2 .campoVistoEncabezado {
  width: 50px;
}

.administrar-correos2 .campoId,
.administrar-correos2 .campoIdEncabezado{
 width: 7%;
}





/*****************************************************************EVALUACIONES GIRO***********************************************************************/

.administrar-evaluaciones .renglonEncabezado,.administrar-evaluaciones .renglonEncabezado2,.administrar-evaluaciones .renglon0,.administrar-evaluaciones .renglon1,.administrar-evaluaciones .barraBuscador {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-evaluaciones .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-evaluaciones .renglon0{
  background: #fff;
  color:#000;
}

.administrar-evaluaciones .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-evaluaciones .renglon0:hover,.administrar-evaluaciones .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-evaluaciones .campoId,
.administrar-evaluaciones .campoIdEncabezado,
.administrar-evaluaciones .campoNombre,
.administrar-evaluaciones .campoNombreEncabezado,
.administrar-evaluaciones .campoEncuesta,
.administrar-evaluaciones .campoEncuestaEncabezado,
.administrar-evaluaciones .campoEvaluacion,
.administrar-evaluaciones .campoEvaluacionEncabezado,
.administrar-evaluaciones .campoOpciones,
.administrar-evaluaciones .campoOpcionesEncabezado
{
  width: 31%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-evaluaciones .campoNombre, .administrar-evaluaciones .campoNombreEncabezado {
  justify-content: flex-start;
  width: calc(100% - 360px);
}

.administrar-evaluaciones .campoEncuesta, .administrar-evaluaciones .campoEncuestaEncabezado, .administrar-evaluaciones .campoEvaluacion,.administrar-evaluaciones .campoEvaluacionEncabezado{
  width: 80px;
}

.administrar-evaluaciones .campoOpciones, .administrar-evaluaciones .campoOpcionesEncabezado{
  width: 120px;
}

.administrar-evaluaciones .campoId,
.administrar-evaluaciones .campoIdEncabezado{
 width: 80px;
}

/*****************************************************************empresas GIRO***********************************************************************/

.administrar-empresas .renglonEncabezado,.administrar-empresas .renglonEncabezado2,.administrar-empresas .renglon0,.administrar-empresas .renglon1,.administrar-empresas .barraBuscador {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-empresas .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-empresas .renglon0{
  background: #fff;
  color:#000;
}

.administrar-empresas .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-empresas .renglon0:hover,.administrar-empresas .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-empresas .campoId,
.administrar-empresas .campoIdEncabezado,
.administrar-empresas .campoNombre,

.administrar-empresas .campoProveedor,
.administrar-empresas .campoProveedorEncabezado,

.administrar-empresas .campoNombreEncabezado,
.administrar-empresas .campoFactura,
.administrar-empresas .campoFacturaEncabezado,
.administrar-empresas .campoImss,
.administrar-empresas .campoImssEncabezado,
.administrar-empresas .campoAsimilados,
.administrar-empresas .campoAsimiladosEncabezado,
.administrar-empresas .campoOpciones,
.administrar-empresas .campoOpcionesEncabezado
{
  width: 31%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-empresas .campoNombre, .administrar-empresas .campoNombreEncabezado {
  justify-content: flex-start;
  width: calc(100% - 660px);
}

.administrar-empresas .campoProveedor,
.administrar-empresas .campoProveedorEncabezado{
  width: 140px;
}

.administrar-empresas .campoFactura, .administrar-empresas .campoFacturaEncabezado, 
.administrar-empresas .campoImss,.administrar-empresas .campoImssEncabezado,
.administrar-empresas .campoAsimilados,.administrar-empresas .campoAsimiladosEncabezado{
  width: 80px;
}

.administrar-empresas .campoOpciones, .administrar-empresas .campoOpcionesEncabezado{
  width: 200px;
}

.administrar-empresas .campoId,
.administrar-empresas .campoIdEncabezado{
 width: 80px;
}

/*********************************************eliminar departamentos******************************************************/
.administrar-departamentos .renglonEncabezado,.administrar-departamentos .renglon0,.administrar-departamentos .renglon1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.administrar-departamentos .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.administrar-departamentos .renglon0{
  background: #fff;
  color:#000;
}

.administrar-departamentos .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.administrar-departamentos .renglon0:hover,.administrar-departamentos .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.administrar-departamentos .campoId,
.administrar-departamentos .campoIdEncabezado,
.administrar-departamentos .campoDepartamento,
.administrar-departamentos .campoDepartamentoEncabezado,
.administrar-departamentos .campoOpciones,
.administrar-departamentos .campoOpcionesEncabezado
{
  width: 46%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.administrar-departamentos .campoDepartamento {
  justify-content: left;
}

.administrar-departamentos .campoId,
.administrar-departamentos .campoIdEncabezado{
 width: 8%;
}

/*********************************************************************Sección videos*************************************************************************/

.videoTutoriales{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  max-width: 1200px;
}

.videoTutoriales .sub-videos{
  width: 30%;
  margin: 15px;
}

.videoTutoriales .sub-videos img:hover, .videoTutoriales .sub-videos2 img:hover{
  border-radius: 0;
  outline: 5px solid #fff;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  cursor: pointer;
  opacity: .8
}

.videoTutoriales .sub-videos img, .videoTutoriales .sub-videos2 img
{
  vertical-align: top;
  width: 100%;
  box-shadow: 0 2px 15px 2px #000;
  -webkit-box-shadow: 0 2px 15px 2px #000;
  border-top: 4px solid #005F8D;
  border-bottom: 4px solid #005F8D;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 12px;
}

.videoTutoriales .sub-videos2{
  width: 30%;
  margin: 15px;
  position: relative;
}

.videoTutoriales .sub-videos2 .titulo-video{
  position:absolute; 
  font-size: 2vw;
  left: calc( 46% - 2vw );
  top:8%;
  z-index:500;
}

.videoTutoriales .sub-videos2 .nombre-video{
  position:absolute; 
  font-size: 1.2vw;
  left: 9%;
  bottom:6%;
  color:#fff;
  z-index:500;
  overflow: hidden;
  min-width: 300px;
}




/******************************************  SECCION VIVE MEJOR **********************************/
.inner {
  margin: 0 auto;
  width: 75rem;
  max-width: calc(100% - 6rem); }
  @media screen and (max-width: 480px) {
    .inner {
      max-width: calc(100% - 3rem); 
    } 
  }

  #banner {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  background-color: #111111;
  color: rgba(255, 255, 255, 0.5);
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  background-image: url("../img/bannerNutri.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 0;
  display: -ms-flexbox;
  height: 35rem !important;
  min-height: 35rem;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%; 
}

video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; 
}

#banner video {
  -moz-transform: translateX(50%) translateY(50%);
  -webkit-transform: translateX(50%) translateY(50%);
  -ms-transform: translateX(50%) translateY(50%);
  transform: translateX(50%) translateY(50%);
  bottom: 50%;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  right: 50%;
  width: auto; 
}

#banner > .inner {
  -moz-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  -ms-transform: scale(1.0);
  transform: scale(1.0);
  -moz-transition: opacity 1s ease, -moz-transform 1s ease;
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
  -ms-transition: opacity 1s ease, -ms-transform 1s ease;
  transition: opacity 1s ease, transform 1s ease;
  opacity: 1;
  position: relative;
  z-index: 3; 
}

#banner > .inner > :last-child {
  margin-bottom: 0; 
}

#banner:after {
  background: linear-gradient(135deg, #ce1b28 0%, #111111 74%);
  content: ' ';
  display: block;
  height: 100%;
  left: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  webkit-linear-gradientidth: 100%;
  width: 100%;
  z-index: 1; 
}


/**********************************************CONTADOR*****************************************************/
#holder {
  position: relative;
  top: 10px; 
  left: 0px; 
  width: 270px;
  height: 60px;
  border: none;
  margin: 0px auto;
}

#title, #note {
  color: lime;	      /* this determines the color of the DAYS, HRS, MIN, 
         SEC labels under the timer and the color of the 
         note that displays after reaching the target date
         and time; if using the blue digital images,
         change to #52C6FF; for the red images,
         change to #FF6666; for the white images,
         change to #BBBBBB; for the yellow images,
         change to #FFFF00 */
}

#note {
  position: relative;
  top: 6px;
  height: 20px;
  width: 260px;
  margin: 0 auto;
  padding: 0px;
  text-align: center; 
  font-family: Arial; 
  font-size: 18px;
  font-weight: bold;    /* options are normal, bold, bolder, lighter */
  font-style: normal;   /* options are normal or italic */
  z-index: 1;
}

.title {
  border: none;
  padding: 0px;
  margin: 0px;
  width: 30px;
  text-align: center;
  font-family: Arial;
  font-size: 10px;
  font-weight: normal;    /* options are normal, bold, bolder, lighter */
  background-color: transparent; 
}

#timer {
  position: relative; 
  top: 0px; 
  left: 0px; 
  margin: 5px auto; 
  text-align: center; 
  width: 240px;
  height: 26px;
  border: none;
  padding: 10px 5px 20px 5px; 
  background: #000000;        	/* may change to another color, or to 
             "transparent" */ 
  border-radius: 20px;
  box-shadow: 0 0 10px #000000;   /* change to "none" if you don't want a 
             shadow */
}


/************************************* ICONOS ILUMINADOS *************************************/
/*.inputIconBg input[type=text]:focus + i{
  background:#009900;
  color:#FFF;
  }*/

/******************************************  SECCION VIVE MEJOR **********************************/
/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 8px;
  top: 4px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.grupo-enlace{
  cursor: pointer;
}

.input-nutrifitness,
.input-nutrifitness-laboratorio,
.input-nutrifitness-composicion,
.input-nutrifitness-fisico-evaluacion,
.input-nutrifitness-fisico-plan{
  border:none;
  border-bottom:1px solid;
  text-align:right;
}

.input-nutrifitness2,
.input-nutrifitness2-laboratorio,
.input-nutrifitness2-composicion,
.input-nutrifitness2-fisico-evaluacion,
.input-nutrifitness2-fisico-plan{
  border:none;
  border-bottom:2px dotted #00733e;
  text-align:right;
  background: rgb(247, 244, 244);
}

.input-nutrifitness-fisico-plan,
.input-nutrifitness2-fisico-plan{
  text-align:center;
}

.respuestaNutrifitness{
  margin-left: 20px;
  border: 2px solid rgb(117, 107, 107);
  border-bottom-left-radius: 8px;
   border-top-left-radius: 8px;
  background: #eee; 
  border-left: 8px solid rgb(117, 107, 107);
  padding: 8px;
}

.detalleUsuarioEspecial{
  background:#eee;
  border:2px solid;
  min-height:100px;
  padding:10px;
  resize:vertical;
}

.detalleUsuarioEspecial2{
  background:#fff;
  min-height:100px;
  padding:10px;
  resize:vertical;
  border: 2px dotted;
}

.contenidoFlexbox
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.rowColorGray{
  background:#F6EAEA;
  margin-left:2px;
  margin-right:2px;
  padding-bottom:5px;
  border:1px solid rgb(167, 161, 161);
}

.rowColorGray:hover,.rowColorWhite:hover{
  background:#5b6972;
  color:#fff;
  margin-left:2px;
  margin-right:2px;
  padding-bottom:5px;
}

.rowColorGray:hover{
  border:1px solid rgb(167, 161, 161);
}

.rowColorWhite{
  background:#FFF;
  margin-left:2px;
  margin-right:2px;
  padding-bottom:5px;
}

.iluminarIconoInput:focus{
    box-shadow:0 0 12px 2px rgba(0, 0, 0, 0.548);
}

.info,.informativo,.informativo-a,.informativo2,.informativo2-a{
  cursor: pointer;
  color:#fff;
  background: #0e7c9b!important;
}

.informativo2,.informativo2-a{
  background: #00a65a!important;
}

.callout.callout-gray{
      background-color: #f7f4f0 !important;
}
/*
Full screen Modal 
*/
.fullscreen-modal .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .fullscreen-modal .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .fullscreen-modal .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .fullscreen-modal .modal-dialog {
     width: 1170px;
  }
}

.form-controlCustome {
 /* display: block;
  width: 100%;*/
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.form-controlCustome[disabled] {
  background-color: #eee;
  opacity: 1;
  cursor: not-allowed;
}

.form-controlCustome{
  border-radius: 0;
  box-shadow: none;
  border-color: #d2d6de;
}

.loadDocuments h2{
  padding: 30px;
  color: #999;
  text-align: center;
  background: url('../img/pattern.jpg');
  margin-bottom: 0;
  margin-top: 0;
}

.loadDocuments{
  border: 2px dashed #999;
  /*margin-bottom: 10px;*/
  padding: 0px 0px;
  min-height: 100px;
}

.close2 {
  float: right;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #000;
  opacity: .5;
  cursor: pointer;
}


.inner2{
  max-width: calc(100% - 110px);
  padding: 20px;
  padding-top: 10px;
  min-height: 125px;
}


/*****************************************************modulo valores ****************************************************************************/

.seccionValores .renglonEncabezado,.seccionValores .renglon0,.seccionValores .renglon1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.seccionValores .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.seccionValores .renglon0{
  background: #fff;
  color:#000;
}

.seccionValores .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.seccionValores .renglon0:hover,.seccionValores .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.seccionValores .campoId,
.seccionValores .campoIdEncabezado,
.seccionValores .campoNombre,
.seccionValores .campoNombreEncabezado,
.seccionValores .campoSucursal,
.seccionValores .campoSucursalEncabezado
{
  width: 50%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.seccionValores .campoSucursal,
.seccionValores .campoSucursalEncabezado {
  width: calc(50% - 100px);
}

.seccionValores .campoId,
.seccionValores .campoIdEncabezado{
 width: 100px;
}


/*****************************************************Seccion permisos del modulo de nóminas ****************************************************************************/

.seccionPermisosx .renglonEncabezado,.seccionPermisosx .renglon0,.seccionPermisosx .renglon1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.seccionPermisosx .renglonEncabezado{
  background: #3489df;
  color: #fff;
}

.seccionPermisosx .renglon0{
  background: #fff;
  color:#000;
}

.seccionPermisosx .renglon1{
  background: rgb(219, 212, 212);
  color:#000;
}

.seccionPermisosx .renglon0:hover,.seccionPermisosx .renglon1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.seccionPermisosx .campoId,
.seccionPermisosx .campoIdEncabezado,
.seccionPermisosx .campoNombre,
.seccionPermisosx .campoNombreEncabezado,
.seccionPermisosx .campoSucursal,
.seccionPermisosx .campoSucursalEncabezado,
.seccionPermisosx .campoPuesto,
.seccionPermisosx .campoPuestoEncabezado
{
  width: 33%;
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
}

.seccionPermisosx .campoPuesto,
.seccionPermisosx .campoPuestoEncabezado {
  width: calc(33% - 80px);
}

.seccionPermisosx .campoId,
.seccionPermisosx .campoIdEncabezado{
 width: 80px;
}




.small-box .icon2 {
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 0;
  font-size: 90px;
  color: rgba(0,0,0,0.15);
}


.small-box:hover .icon2 {
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  position: absolute;
  top: -5px;
}

.btn-secondary{
  background:#545B62;
  color:#fff;
  -webkit-transition: all .6s linear;
  -o-transition: all .6s linear;
  transition: all .6s linear;
}

.btn-secondary:hover{
  -webkit-transition: all .6s linear;
  -o-transition: all .6s linear;
  transition: all .6s linear;
  background:#ddd;
  color:#444;
}


.lineaPar{
  background: rgb(219, 212, 212);
  color:#000;
}

.lineaImpar{
  background: #fff;
  color:#000;
}

.lineaPar:hover,.lineaImpar:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}






/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: rgba(236, 22, 22, 0.616);
  
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: rgba(223, 20, 20, 0.719);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: rgb(226, 28, 28);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.container2 input:checked ~ .checkmark {
  background-color: #008d4c;
}

.checkmark2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color:rgba(30, 132, 73 ,0.616)
}

.container2:hover input ~ .checkmark {
  background-color: #008d4c;
}



.containerx {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.containerx input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmarkx {
  position: absolute;
  /*top: 0;
  left: 0;*/
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
  border: 1px solid;
}

/* On mouse-over, add a grey background color */
.containerx:hover input ~ .checkmarkx {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containerx input:checked ~ .checkmarkx {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkx:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerx input:checked ~ .checkmarkx:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.containerx .checkmarkx:after {
 	top: 8px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.campo-read-only{
  background:#fff !important;
  border-top:0;
  border-right:0;
  border-bottom:0;
}









/* Customize the label (the container) */
.container_ {
  /*display: block;*/
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #E57E10;
}

/* Hide the browser's default checkbox */
.container_ input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark_ {
  position: absolute;
  top: 0;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: #E57E10;
}

/* On mouse-over, add a grey background color */
.container_:hover input ~ .checkmark_ {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container_ input:checked ~ .checkmark_ {
  background-color: #E57E10;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark_:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container_ input:checked ~ .checkmark_:after {
  display: block;
}

/* Style the checkmark/indicator */
.container_ .checkmark_:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



/********************************************************/
/*.renglon-encabezado,.renglon-0,.renglon-1{
  display: flex;
  align-items: stretch;
}*/
.renglon-encabezado{
  background: #3489df;
  color: #fff;
}
.renglon-1{
  background: #fff;
  color:#000;
}
.renglon-0{
  background: rgb(219, 212, 212);
  color:#000;
}
.renglon-0:hover,.renglon-1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}
.columna-div{
  border: 1px solid rgb(245, 223, 223);
  display: flex;
  align-items: center;
}
.columna-div-centrar{
  justify-content: center;
}
.contenedor-div{
  padding-left: 15px;
  padding-right: 15px;
}
.encabezado-min{
  min-width:80px;
  background:#3489df;
  color:#fff;
  margin-left:-15px;
  padding:4px;
  margin-right:10px;
  text-align: right;
}


@media (min-width: 768px) {
  .renglon-encabezado,.renglon-0,.renglon-1{
    display: flex;
    align-items: stretch;
  }
  .ocultar768{
    display: none;
  }
  .columna-div-centrar768{
    justify-content: center;
  }

}
@media (max-width: 768px) {
  .mostrar768{
    display: none;
  }
  .color768{
    background: #3489df;
    color: #fff; 
  }
  .columna-div-centrar768{
    justify-content: flex-start;
  }

  .img-normal{
    width: 110px;
    height: 110px;
  }
}
/********************************************************/
/**********************JQuery ui INICIO********************************/

#caja_ordenado:hover{
  background-color: #CEF6CE;
  color: rgb(39, 165, 77);
}
#caja_desordenado:hover{
  /*background-color: #F5ECCE;D3D3D3*/
  background-color: #D3D3D3;
  color: #FF0040;
}
.content-sortable{
  background-color:#FFF0F5;
  border-style: dashed;
  color: #BDBDBD;
}
#caja_ordenado li, #caja_desordenado li:hover{
  background-color:#F8F8FF;
  color: #000000;
  margin-right: 12px;
  width: 70%;
  border-radius: 10px;
  border-left: 5px solid rgb(17, 17, 17);
}

#encabezado {
   /*border-style: dashed ;*/
   border-style:solid;
   border-radius: 10px;
  width: 70%;
  color: #BDBDBD;
}
#caja_ordenado, #caja_desordenado{
  border-style: none dashed  dashed ;
  /**/
  color: #BDBDBD;
  width: 70%;
  min-height: 100PX;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}
#caja_ordenado li, #caja_desordenado li {
  border-radius: 10px;
  padding: 5px;
  font-size: 0.8em;
  width: 90%;
  border: 1px solid #020202;
  margin:10px;
  color: rgb(15, 15, 15);
  background-color: white;
}

/**********************JQuery ui FIN*********************************/

.loadData{
  z-index:9000;
  width:100%;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.9);
}

.modal-custome-center{
  text-align: center;
  padding: 0!important;
}

.modal-custome-center:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog-center {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}


.renglonTable0{
  background: #fff;
  color:#000;
}

.renglonTable1{
  background: rgb(219, 212, 212);
  color:#000;
}

.renglonTable0:hover,.renglonTable1:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}


/* Prelaoder */

#preloaderMain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: rgba(2, 2, 2,0.95);
}

#preloaderMain:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f3efef;
  border-top: 6px solid #0e7cb9;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/******* li inicializar conteo ************/

#configurar-interfaz ol {
  margin:0;padding:0;
  list-style-type: none;
  counter-reset: lis 1; 
}

#configurar-interfaz li {
  counter-increment: lis
}

#configurar-interfaz #tab_1 li:before {
	content: counter(lis)"";
}


.colores_estatus_tesoreria{
font-size: larger;
}

.users-list.ticket{
  display: flex;
  align-items: center;
  justify-content: center;
}

.users-list.ticket>li{
  width:60%;
  padding:10px;
  text-align:center;
}
.users-list.ticket>li img{
  border-radius:50%;
  max-width:100%;
  height:auto
}

.users-list.ticket>li>a:hover,.users-list.ticket>li>a:hover .users-list-name.ticket{
  color:#999
}

.users-list-name.ticket,.users-list-date.ticket{
  display:block
}

.users-list-name.ticket{
  font-weight:600;
  color:#444;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.users-list-date.ticket{
  color:#999;
  font-size:12px
}

.tickets-list-empty{
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-ellipsis{
  color:#444;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}


.tickets-991{
  border-bottom: 1px solid #f1f1f1;
  margin-bottom:10px;
}


.icon-tap{
  display:none;
}



@media (min-width: 720px) {
  .seccion-data-ticket{
    display:flex;
    align-items:center;
  }

}

@media (max-width: 991px) {
  .tickets-991{
    -webkit-box-shadow: -2px 5px 12px 4px rgba(0,0,0,0.25); 
    box-shadow: -2px 5px 12px 4px rgba(0,0,0,0.25); 
    margin-bottom:20px;
  }

  .text-tap{
    display:none;
  }
  
  .icon-tap{
    display:block;
  }
  
}

.fc-today.alert.alert-info{
  background:#F4F4F4!important;
}

.alert-secondary-crow{
  background: #545B62;
  color: #FFF;
}

.row-custome-crow > div{
  height:40px;
}

.row-custome-crow.renglon-1{
  background: #fff;
  color:#000;
}

.row-custome-crow.renglon-0{
  background: rgb(219, 212, 212);
  color:#000;
}

.row-custome-crow.renglon-1:hover,.row-custome-crow.renglon-0:hover{
  background: rgb(83, 77, 77);
  color: #fff;
}

.d-crow-none{
  display:none;
}

.text-truncate-crow{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  padding-top: 10px;
}

.pre-formatted {
  white-space: pre-line;
}

.btn-main-up,.btn-main-up2{
  display:none;
  position: fixed;
  bottom: 30px;
  right: 50px;
  padding: 10px;
  background: #005F8D;
  color: #fff;
  border-radius: 50%;
  font-size: 25px; 
  cursor: pointer;
  box-shadow: 7px 3px 16px 0px rgba(0,0,0,0.52);
  -webkit-box-shadow: 7px 3px 16px 0px rgba(0,0,0,0.52);
  -moz-box-shadow: 7px 3px 16px 0px rgba(0,0,0,0.52);
  z-index:3;
}

.btn-main-up2{
  z-index: 999999999;
}


.over-row-close:hover{
  background: #444;
  color:#fff;
  cursor: pointer;
}


.gastos-checkbox{
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 20px;
  left: 20px;
}

.row-title::before{
  position: absolute;
  content: 'Agregar';
  top: -10px;
  background: #fff;
  padding: 0 15px;
  left: calc(100% / 2 - 45px);
  font-size: 20px;
}

.inputs-edit-dbclick:hover input[type=text]:active{
  color:#fff;
} 
.inputs-edit-dbclick:hover input[type=text]:disabled{
  color:#fff;
} 

.inputs-edit-dbclick input[type=text]{
  color:#000;
} 

/* {
  display: flex
  align-items: stretch;
} */

/* .input-edit-dbclick:enabled{
  color:#000;
} */

/* .input-edit-dbclick:enabled{
  color:#000;
} */

.select-readonly {
    pointer-events: none;  /* evita abrir/cambiar opciones */
    background-color: #e9ecef; /* estilo visual opcional */
    user-select: text; /* permite seleccionar texto */
}