@font-face {
	font-family: "myFont";
	src: url("font/Montserrat-Regular.otf");	
 }
  
 @font-face {
	font-family: "myFont2";
	src: url("font/Montserrat-ExtraBold.otf");	
 }
body{
    display: block;
    margin: 0px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 15px;
    overflow-y: scroll;
/*    background-color: #ebe9eb;   */
}
.formulario{
    border-radius: 10px;
    background-color: #e2edf7;
    border: 0px !important;
    outline: none !important;    
    height: 30px;
    padding: 10px;
}
a {
  color: #27b8e8;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
a:hover{    
    font-weight: bold;   
    text-decoration: none;
}
.div_nominas{
    position: relative;
}
p{
    color:#535353;
    font-family: "Open Sans", Helvetica, Arial, sans-serif
}
ol{    
    font-size: 20px; 
    color: #3366ff;
    font-weight: bold;
    font-family: "Open Sans", Helvetica, Arial, sans-serif
}
li{
 /*   color:#535353;*/
    font-size: 18px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif
}
.div_user{
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #f0f0f0;
    width: 100%;
    text-align: right;
    color: black;
}
.div_menu{
    background-color: white;
    width: 100%;
    position:absolute;
}
.div_menu2{
    background-color: white;
    width: 100%;
    position:absolute;
}
.fila_impar{
    background-color: #f0f0f0;
}
.icon1{
    width: 25px;
    height: 25px;
}
.icon2{
    width: 20px;
    height: 20px;
}
.icon2_1{
    width: 15px;
    height: 20px;
}
.icon3{
    width: 40px;
    height: 40px;
}
.icon3_1{
    width: 15px;
    height: 40px;
}
.PDF{
    width: 40px;
    height: 40px;
}
.menu{
    font-family: "myFont", "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 20px;        
    font-style: normal;    
    color: #045198;       
    text-decoration: none;
    padding: 0px 15px 0px 15px;    
}
.menu_user2{
    font-family: "myFont", "Montserrat", Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    font-style: normal;    
    color: #045198;   
    text-decoration: none;    
}

.nav{
    width: 100%;
    height: 100%;
    top: 20%;
    left: 40%;    
    position:absolute;
}
.user_menu{
    display: flex; 
}

.div_usuario{
    top: 30%;
    left: 80%;
    padding: 5px 15px 5px 15px;
    text-align: center;
    position:absolute;    
}
.div_usuario2{
    top: 30%;
    left: 85%;
    padding: 5px 15px 5px 15px;
    text-align: center;
    position:absolute;    
}
.div_nominas_login{      
    top: 450px;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.5);
    padding: 30px 5px 5px 5px;
    position: absolute;
}
.div_nuevos_usuarios {
        top: 530px;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.5);
        padding: 30px 5px 5px 5px;
        position: absolute;
}
.div_ficheros {
    top: 360px;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.5);
    padding: 30px 5px 5px 5px;
    position: absolute;
}
.div_cab_login{  
    top: 20%;    
    left: 75%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.5);     
}
.div_resultado{
    left: 50%;
    margin: 150px 200px 10px 200px;
}
.archivo{
   padding: 10px 0px 10px 8px;    
}
.archivo_par{
    padding: 10px 0px 10px 8px;    
}
.archivo_imp{
    padding: 10px 0px 10px 8px; 
    background-color: #f0f0f0;
}

.text-center{
    padding: 10px 0px 10px 8px;    
    text-align: center;
}

.sinregistros{
    text-align: center;
    padding: 10px 0px 10px 8px;
    border-top: 1px solid rgba(0,0,0,.1);
}

.cv_requerido{
    color: red;    
}
p{
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
}

h1{    
    font-family: 'myFont', 'Montserrat';
    padding-bottom: -5px;    
    font-size: 36px;
    line-height: 40px;
    font-weight: 400;
    font-style: normal;
    border-bottom-color: #045198;
    margin-top: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 5px;   
    color: #045198;    
}
h2{
    color:#54595F;
    font-size: 22px;
    line-height: 40px;
    font-weight: 400;
}
.img{
    max-width: 100%;
    max-height: 100%;
}
.logo{
    padding: 10px 0px 10px 120px;
}
.close:hover {
  background-color: #223094;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
p{
    text-align: justify; 
}
.TablaNom{        
    margin: 0 -1px 24px 0;
    text-align: left;        
    border-radius: 5px;
    width: 55%;
}
.TablaUser {    
    border: 1px solid rgba(0,0,0,.1);
    margin: 0 -1px 24px 0;
    text-align: left;    
    border-collapse: separate;
    border-radius: 5px;
    width: 100%;
}
th{
    padding: 4px 8px;
    vertical-align: middle;
}
.td_izq{
    text-align: right;
}
.td_titulo{
    text-align: center;    
}
td{
    padding: 5px 5px 5px 5px;
}
.botonPDF{
    border: none;
    color: white;   
    text-decoration: none;
    background-color: #27b8e8;    
    white-space: nowrap;
    font-size: 13px !important;
    padding: 10px 20px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
    border-radius: 10px;
}
.botonPDF:hover {
    color: white;
    background-color: #002855;
}
.modalContainer {
	display: none; 
	position: fixed; 
	z-index: 1;
	padding-top: 400px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
	overflow: auto; 
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

.modalContainer .modal-content {
	background-color: #fefefe;
    margin: auto;
	padding: 20px;
	border: 1px solid lightgray;
	border-top: 10px solid #d6e5f4;
	width: 40%;
}

.modalContainer .close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.modalContainer .close:hover,
.modalContainer .close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

/* BARRA DE CARGAR DE ARCHIVO*/
.modalContainer2 {
	display: none; 
	position: fixed; 
	z-index: 1;
	padding-top: 350px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
	overflow: auto; 
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

.modalContainer2 .modal-content2 {
	background-color: #fefefe;
    margin: auto;
	padding: 20px;
	border: 1px solid lightgray;
	border-top: 10px solid #d6e5f4;
	width: 40%;
}

.modalContainer2 .close:hover,
.modalContainer2 .close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
.envionom{    
    color: white !important; 
    text-decoration: none;
    background-color: #27b8e8; 
    height: 45px;
    font-size: 13px !important;
    padding: 10px 20px;
    font-weight: 600;    
    text-transform: uppercase;
    text-shadow: none;
    border-radius: 3px;
    box-shadow: none;
    position: relative;
    border: 0;    
}
.envionom:hover{
    background-color: #337ab7;
}
.azul{
  font-size: 17px;
  line-height: 20px;
  color: #002855;
  margin-top: 0;
  font-weight: 200px;
}
.gris{
  font-size: 14px;
  line-height: 10px;
  color: #b4b9bf;
  margin-top: 0;
  font-weight: 100;
}
.ventajas{
  color:#54595F;
  font-size: 17px;
  line-height: 20px;
  text-align:justify;
}
.ventajas2{
  color:#54595F;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;    
  text-align: center;
}
.ventajas3{
  color:#54595F;
  font-size: 17px;
  line-height: 20px;
  text-align:justify;
}
.vent1{
    padding: 100px 0px 0px 0px;
    display: flex;
    /*width: 100%;*/
}
.vent2{    
    order: 0;
    display: flex;
    /*width: 100%;*/
}
.vent3{
    padding: 0px 0px 0px 0px;
    display: flex;
    /*width: 100%;*/
}
.img_izq{
    width: 54%;   
}
.text_der{
    padding: 50px 30px 5px 50px;
    width: 50%;    
}
.img_der{        
    order: 2;
    width: 54%;    
}
.text_izq{
    order: 1;
    padding: 50px 30px 5px 30px;
    width: 50%;    
}
/*li {
  line-height: 20px;
}*/

.contenedor {
    position: relative;
    height: 25px;
    width: 25px;
    margin: 1px 1px;
    float: left;
}

.contenedor img {
  position: absolute;
  left: 0;
  transition: opacity 1.5s ease-in-out;
}

.contenedor img.top:hover {
  opacity: 0;
}
.btn-primary{
    height: 25px;
    width: 25px;
    color: white !important;
    text-decoration: none;
    background-color: #27b8e8;
    text-transform: uppercase;
    text-shadow: none;
    border-radius: 3px;
    box-shadow: none;       
    border: 0;
}
.btn-primary2{
    height: 25px;
    width: 25px;
    color: white !important;
    text-decoration: none;
    background-color: #27b8e8;
    text-transform: uppercase;
    text-shadow: none;
    border-radius: 3px;
    box-shadow: none;       
    border: 0;
}
.btn-primary3{
    height: 25px;
    width: 25px;
    color: white !important;
    text-decoration: none;
    background-color: #27b8e8;
    text-transform: uppercase;
    text-shadow: none;
    border-radius: 3px;
    box-shadow: none;       
    border: 0;
}
/* BARRA DE PROGRESO*/
ul
{
    list-style: none; 
}

.ul_menu a
{   
    padding: 15px;
    color: #045198 ;
}


.hamb
{
    cursor: pointer;
    float: right;
    padding: 40px 20px;
}


.hamb-line 
{
    background: #045198;
    display: block;
    height: 2px;
    position: relative;
    width: 24px;
    
}

.hamb-line::before,
.hamb-line::after
{
    background:  #045198;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.hamb-line::before
{
    top: 5px;
}

.hamb-line::after
{
    top: -5px;
}

.side-menu 
{
    display: none;
}

.side-menu:checked ~ nav
{
    max-height: 100%;
}

.side-menu:checked ~ .hamb .hamb-line 
{
    background: transparent;
}

.side-menu:checked ~ .hamb .hamb-line::before 
{
    transform: rotate(-45deg);
    top:0;
}

.side-menu:checked ~ .hamb .hamb-line::after 
{
    transform: rotate(45deg);
    top:0;
}
/*VISTA DE TABLET*/
/*HORIZONTAL*/
@media (max-width: 1200px){    
    .div_nominas_login {
        top: 280px;
    }
    .TablaNom {        
        width: 100%;
    }
    .logo {
       padding: 10px 0px 10px 10px;
    }
}
/*VERTICAL*/
@media (max-width: 700px){    
    .div_resultado {        
        margin: 150px 50px 10px 50px;
      }      
      .logo {        
        padding: 5px;
        float: left;
        position: relative;
      }
    .ul_menu {
        margin-top: 10px;
    }
    
    /*BARRA DE NAVEGACION*/
    .bloque{                
        display:none;    
        z-index: 14;
        top: 385px;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;        
        background: rgba(0,0,0,.6);
        transition: all .3s ease-in-out;
        position: absolute;
        pointer-events: auto;
    }
    .menu {  
        font-size: 14px;
        padding: 5px 5px 20px 5px;            
    }    
    .nav {        
        overflow: hidden;
        max-height: 0;
        position: initial;
        background-color: #f0f0f0;
    }   
        a:hover{    
        font-weight: bold;   
        text-decoration: none;
    }
    .div_usuario {
        top: 60%;
        padding: 10px 15px 5px 15px;
    }    
    .linea{
        height: 2.5px;
        background-color: #045198;
        width: 180px;
        margin-bottom: 10px;          
    }
    .vent1{
        padding: 90px 0px 0px 0px;
        display: block;        
    }
    .vent2{    
        padding: 5px 0px 0px 0px;
        display: block;     
    }
    .vent3{
        padding: 5px 0px 0px 0px;
        display: block;        
    }
    .text_der {        
        width: auto;
        padding: 50px 30px 5px 30px;
    }
    .text_izq{
        width: auto;
    }
    .img_izq {
        width: 100%;
    }
    .img_der {
        width: 100%;
    }
    .hamb
    {    
        padding: 50px 20px;
    }
    .div_nominas_login {
        top: 450px;
      }

}
/*VISTA DE MÓVIL*/
@media (max-width: 480px){    
     /*BARRA DE NAVEGACION*/
    .bloque{                
        display:none;    
        z-index: 14;
        top: 375px;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;        
        background: rgba(0,0,0,.6);
        transition: all .3s ease-in-out;
        position: absolute;
        pointer-events: auto;
    }
    .menu {  
        font-size: 14px;
        padding: 5px 5px 20px 5px;            
    }
    .ul_menu{
        margin-top: 20px;
    }   
    .nav {        
        overflow: hidden;
        max-height: 0;
        position: initial;
        background-color: #f0f0f0;
    }   
    a:hover{    
        font-weight: bold;   
        text-decoration: none;
    }
    .div_usuario {
        top: 60%;
        padding: 10px 15px 5px 15px;
    }    
    .linea{
        height: 0.5px;
        background-color: #045198;
        width: 180px;
        margin-bottom: 10px;  
    }
    .div_usuario2 {
        top: 60%;
        left: 65%;  
        padding: 10px 15px 5px 15px;
    }
    .icon3{
        width: 20px;
        height: 20px;
    }
    body{
        font-size: 16px;
    }       
    h1{
        font-size: 27px;
        line-height: 40px;
        font-weight: 400;            
    }
    h2{
        font-size: 17px;
        line-height: 40px;
        font-weight: 400;            
    }
    .azul{
        font-size: 17px;
        line-height: 20px;
        color: #598bd0;
        margin-top: 0;
        font-weight: 400;
    }
    table{
        height: auto;
        width: 100%;
    }  
    .TablaNom {    
        margin: 5px 0px 5px 0px; 
        width: 100%;
    }
    .TablaUser {    
        margin: 5px 0px 5px 0px; 
        width: 100%;
    }
    th {
        padding: 1px 1px;
        vertical-align: middle;
    }
     .div_nominas_login {
        top: 320px;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.5);
        padding: 5px 5px 5px 5px;
        position: absolute;
        width: 100%; 
    }
    .div_nuevos_usuarios {
        top: 560px;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.5);
        padding: 30px 5px 5px 5px;
        position: absolute;
    }
    .div_resultado {
        left: 50%;
        margin: 130px 15px 5px 15px;
    }
    .archivo{
        padding: 5px 5px 5px 5px;  
        word-wrap: anywhere;    
    }
    .archivo_par {
        padding: 5px 5px 5px 5px;  
        word-wrap: anywhere;      
    }
    .archivo_imp{
        padding: 5px 5px 5px 5px;  
        word-wrap: anywhere;   
    }
    
    .logo {        
        padding: 5px 5px 5px 5px;      
        float: left;
        position: relative;  
    }
    .vent1{
        padding: 90px 0px 0px 0px;
        display: block;        
    }
    .vent2{    
        padding: 5px 0px 0px 0px;
        display: block;     
    }
    .vent3{
        padding: 5px 0px 0px 0px;
        display: block;        
    }
    .img_izq{
        width: 100%;   
    }
    .text_der{
        padding: 20px 15px 0px 15px;
        width: auto;    
    }
    .img_der{    
        width: 100%;    
    }
    .text_izq{        
        padding: 20px 15px 0px 15px;
        width: auto;   
    }       
 
}
@media (min-width: 768px) {
       /*BARRA DE NAVEGACION*/
       .nav
       {
           max-height: none;           
           float: right;
           width: fit-content;
           background-color: transparent;
       }
   
       .menu
       {
           float: left;
           display: inline-block;
       }
       .linea{
            float: left;
           display: inline-block;
       }

    .hamb {
      display: none;
    }
  }