/* ---- Fonts  ---------*/
@font-face {
    font-family: 'RacingSansOne-Regular';
    src: url('../fonts/RacingSansOne.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Akaya-Regular';
    src: url('../fonts/Akaya-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MYRIADPRO-BOLD';
    src: url('../fonts/MYRIADPRO-BOLD.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


/* ---------Fin Fonts -----------------------------  */

*{
    font-family: RacingSansOne-Regular;
}

html, body {
    width: 100%;
    /*font-weight: 300;*/
}

#loadimg{
    width: 60px; 
}


/*----------------------------------------------
---------- Login SSRA -----------------------
----------------------------------------------*/
.divlogoPri{
    position: relative;
    z-index: 9999;
    display: flex;
    justify-content: center;
}

.divlogoPri > img{
    width: 250px;
}


#raizForm{
    position: relative;
    z-index: 9999;
    margin-top: 100px;
    background: linear-gradient(to top, rgba(28, 29, 29, 0.43), rgba(20, 20, 20, 0.38), rgb(31, 30, 30));
    background-blend-mode: color-burn;
    width: 600px;
    padding-bottom: 20px;
    padding-top: 10px;
    border-radius: 10px;
}

.raizForm{
    background: linear-gradient(to top, rgba(10, 10, 10, 0.43), rgba(15, 15, 15, 0.38), rgb(12, 12, 12));
    background-blend-mode: color-burn;
    width: 600px;
    padding-bottom: 20px;
    margin-top: 100px;
    padding-top: 10px;
    border-radius: 80px;
    position: fixed;
    z-index: 9999;
}

.divLogoLogin{
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.divTxtLogin{
    display: flex;
    justify-content: center;
    text-align: center;
}

.divTxtLogin > p{
    font-size: 10px;
}

.logoLogin{
    width: 350px;
    height: auto;
}

.formLogin{
    display: block;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
    margin-top: 10px;
    z-index: -50;
}

.divUser{
    margin-bottom: 15px;
}

.divUser > label{
    width: 100px;
    margin-bottom: 5px;
    color: rgb(0, 0, 0);
    border-radius: 20px;
}

.divUser > input{
    border: none;
    background-color: transparent;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.43), rgba(15, 15, 15, 0.38), rgb(12, 12, 12));
    color: #ffffff;
    text-align: center;
}

.divpsw{
    margin-bottom: 15px;
}

.divpsw > label{
    width: 100px;
    margin-bottom: 5px;
    color: rgb(0, 0, 0);
    border-radius: 20px;
}

.divpsw > input{
    border: none;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.43), rgba(15, 15, 15, 0.38), rgb(12, 12, 12));
    color: #ffffff;
    text-align: center;
}

.btnLogin{
    display: flex;
    text-align: center;
    margin: 0 auto;
    width: 150px;
    justify-content: center;
    
    background: #e2486c;
    border-color: #e2486c;
}

.btnLogin:hover{
    background: rgba(162, 153, 44, 0.38);
    border-color: rgb(42, 179, 83);
}

#bodyLogin{
    background: url(../img/FondoLogin.gif) center;
    background-color: rgba(0, 0, 0, 0.63);
    background-blend-mode: color-burn;
    
}

.registrados{
    margin-top: 15px;
    background: rgba(175, 168, 168, 0.28);
}

#errorCapturaIne{
    text-align: center;
    color: red;
    justify-content: center;
}

#claveIneProspecto{
    text-transform: uppercase;
}

#errorWriteEmail{
    text-align: center;
    color: red;
    justify-content: center;
}

#politicasProspecto    {
    font-size: 14px;
}

#politicasProspecto > p > a{
    color: gray;
    font-size: 14px;
}

.divIconosRs{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.divIconosRs > div{
    font-size: 30px;
}

.IcoWebLogin{
    color: darkred;
}

.IcoWebLogin:hover,
.IcoFbLogin:hover,
.IcoTwLogin:hover,
.IcoTarLogin:hover{
    color: white;
}

.IcoFbLogin{
    margin-left: 15px;
    color: darkblue;
}

.IcoTwLogin{
    margin-left: 15px;
}

.IcoTarLogin{
    margin-left: 15px;
    color: rgb(83, 0, 58);
}


/******************************************
**** ANIMACION FONDO  ********************/

.cb-slideshow{
    list-style: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.cb-slideshow:after{
    content: '';
    background: transparent url(../img/pattern.png) repeat top left;
}

.cb-slideshow li span{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}


.cb-slideshow li:nth-child(1) span{ 
    background-image: url(../img/1.jpg)
}

.cb-slideshow li:nth-child(2) span {
    background-image: url(../img/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) span {
    background-image: url(../img/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}

.cb-slideshow li:nth-child(4) span {
    background-image: url(../img/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

.cb-slideshow li:nth-child(5) span {
    background-image: url(../img/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

.cb-slideshow li:nth-child(6) span {
    background-image: url(../img/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}

@-webkit-keyframes imageAnimation{ 
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1) translateY(-20%);
	}
	25% {
	    opacity: 0;
	    -webkit-transform: scale(1.1) translateY(-100%);
	}
	100% { opacity: 0 }
}

@-moz-keyframes imageAnimation{ 
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -moz-transform: scale(1.05);
	    -moz-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1) translateY(-20%);
	}
	25% {
	    opacity: 0;
	    -moz-transform: scale(1.1) translateY(-100%);
	}
	100% { opacity: 0 }
}

@-o-keyframes imageAnimation{ 
	0% {
	    opacity: 0;
	    -o-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -o-transform: scale(1.05);
	    -o-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -o-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1) translateY(-20%);
	}
	25% {
	    opacity: 0;
	    -o-transform: scale(1.1) translateY(-100%);
	}
	100% { opacity: 0 }
}

@-ms-keyframes imageAnimation{ 
	0% {
	    opacity: 0;
	    -ms-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -ms-transform: scale(1.05);
	    -ms-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -ms-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1) translateY(-20%);
	}
	25% {
	    opacity: 0;
	    -ms-transform: scale(1.1) translateY(-100%);
	}
	100% { opacity: 0 }
}

@keyframes imageAnimation{ 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1) translateY(-20%);
	}
	25% {
	    opacity: 0;
	    -transform: scale(1.1) translateY(-100%);
	}
	100% { opacity: 0 }
}


/* Show at least something when animations not supported */

.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

/****** FIN ANIMACION FONDO *****************************
********************************************************/

/*----------------------------------------------
---------- SECCION BLOQUEOS -----------------------
----------------------------------------------*/
#bodyregistro{
    color: white;
    text-shadow: 2px 2px #ff0000;
    background-image: url("../img/bloqueo.jpg"); 
    background-color: #000000; 
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}

/*----------------------------------------------
---------- SECCION ERRORES -----------------------
----------------------------------------------*/
#seccionError{
    text-align: center; 
}

#seccionError > h1{
    margin-top: 25px;
}

#seccionError > h2{
    margin-top: 50px;
}

#seccionError > h3{
    margin-top: 10px;
}

.img404{
    text-align: center;
}

.img404 > img{
    width: 30%;
}

/*----------------------------------------------
---------- Navbar Sistema -----------------------
----------------------------------------------*/
#navbar1{
    background-color: rgba(190, 173, 173, 0.74);
    color: black;
    height: 50px;
    border-color: green;
}

.menuNav{
    margin-right: 5px;
}

.menuNav > a{
    color: darkred;
    font-size: 20px;
}

.menuNav > a:hover{
    color: orangered;
}

#logo{
    padding: 5px;
    margin-bottom: 15px;
    width: 50px;
    margin-top: 15px;
}

#navbarToggler{
    height: 50px;
}

/*----------------------------------------------
---------- FOOTER  -----------------------
----------------------------------------------*/
#footerCsiqi{
    text-align: center;
    color: blue;
    margin-top: 50px;
}

/*----------------------------------------------
---------- MENSAJES DE ALERTA -----------------------
----------------------------------------------*/
#msjAlertGeneral{
    text-align: center;
}

#closeAlert{
    color: green;
}

#closeAlert:hover{
    color: red;
}

#errorCapturaIne{
    text-align: center;
}

#msjAlertCaptura{
    display: flex;
    text-align: center;
    display: none;
    justify-content: center;
}
/**********************************
///////// FIN MENSAJES DE ALERTA ///////*/


/***************************************************
*********** SECCION WELCOME ***********************
****************************************************/
.divTitWelcomw{
    text-align: center;
    margin-top: 10px;
    color: black;
}

#ContMenuWelcome{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.seccionMenu1{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*----------------------
---- ESTILOS MENUS ---*/
.menuWelcome{
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.menuWelcome > li{
    font-size: 20px;
    margin-top: 15px;
    margin-right: 10px;
    background: white;
    color: black;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 2px 3px lightgreen;
    border: 1px solid gray;
    border-radius: 20px;
}

.menuWelcome > li:hover{
    background: red;
    color: white;
    cursor: pointer;
}

.menuWelcome > li > a{
    color: inherit;
    text-decoration: none;
    position: relative;
    display: block;
    overflow: hidden;
    padding: 5px;
}

.menuWelcome > li > a > span{
    transition: transform 0.2s ease-out;
}

.menuWelcome > li > a > span:first-child{
    display: inline-block;
    padding: 10px;
}

.menuWelcome > li > a > span:last-child{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
}

#iconWel{
    font-size: 40px;
}

.menuWelcome > li > a:hover span:first-child {
    transform: translateY(100%);
}

.menuWelcome > li > a:hover span:last-child,
.menuWelcome[data-animation] > li > a:hover span:last-child {
    transform: none;
}

/*LINEA DEGRADADA */
.menuWelcome > li > a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #087231, #ffffff, rgba(245, 0, 0, 0.9));
    z-index: 1;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease-in-out;
}

.menuWelcome >li > a:hover::before {
    transform: scaleX(1);
}

/*--ANIMATION ---*/
.menuWelcome[data-animation="center"] > li > a::before {
    transform-origin: center;
}

/**********************************
///////// FIN SECCION WELCOME ///////*/

/***************************************************
*********** SECCION CAPTURA ***********************
****************************************************/
.headClaveCaptura{
    text-align: center;
    margin-top: 10px;
}

.headClaveCaptura > div > input{
    width: 250px;
    text-align: center;
}

.contenformCaptura{
    margin-top: 20px;
    background: #c9cbd0;
    padding-left: 2px;
    padding-right: 2px;
}

#claveINE{
    text-transform: uppercase;
}

.divFolioEstatal{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: white;
    align-items: center;
}

.divFolioEstatal > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divFolioEstatal > div > div > input{
    text-align: center;
    width: 50%;
    text-transform: uppercase;
}

/*----------------------
--- DATOS GENERALES --*/
#TitDatosGen{
    text-align:center; 
    background: #165739; 
    color: white;
}

.divNomApellCaptura{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.divNomApellCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divNomApellCaptura > div > div > input{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
     
}

.divCveSecEmiCaptura{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.divCveSecEmiCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divCveSecEmiCaptura > div > div > input{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
}

.divOcrNacimientoCaptura{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.divOcrNacimientoCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divOcrNacimientoCaptura > div > div > input{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
}

.divOcrNacimientoCaptura > div > div > select{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
}

.divAreaMznaCpCaptura{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.divAreaMznaCpCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divAreaMznaCpCaptura > div > div > input{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
}

.divColoniaMuniEdoCaptura{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.divColoniaMuniEdoCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divColoniaMuniEdoCaptura > div > div > input{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
}

.divColoniaMuniEdoCaptura > div > div > select{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
    
}

.divDiscTelCelCaptura{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.divDiscTelCelCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divDiscTelCelCaptura > div > div > input{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
}

.divDiscapacidad{
    display: flex;
}

.divDiscapacidad > div > input{
    text-align: center;
    width: 95% !important;
    text-transform: uppercase;
}

.divDiscapacidad > div > select{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
}

/*---------------------------------
---- DATOS PARTIDISTAS -----------*/
#TitPartidistas{
    text-align:center; 
    background: #be0811; 
    color: white;
}

.divAfiliaOrgCargoCaptura{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.divAfiliaOrgCargoCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divAfiliaOrgCargoCaptura > div > div > input{
    text-align: center;
    width: 99%;
    text-transform: uppercase;
}

.divIniTermCargoCaptura{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.divIniTermCargoCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divIniTermCargoCaptura > div > div > input{
    text-align: center;
    width: 50%;
    text-transform: uppercase;
}

/*---------------------------------
---- REDES SOCIALES -----------*/
#TitRedesSociales{
    text-align:center; 
    background: blue; 
    color: white;
}

.divWhatsCorreoCaptura{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.divWhatsCorreoCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divWhatsCorreoCaptura > div > div > input{
    text-align: center;
    width: 99%;
}

.divIconRsWA{
    display: flex;
    align-items: center;
}

.divIconRsWA > input{
    text-align: center;
    width: 99%;
}

#IconRsWA{
    color: #04e304;
    font-size: 25px;
    margin-left: 5px;
    margin-right: 2px;
}

.divIconRsCorreo{
    display: flex;
    align-items: center;
}

.divIconRsCorreo > input{
    text-align: center;
    width: 99%;
}

#IconRsEmail{
    color: brown;
    font-size: 25px;
    margin-left: 5px;
    margin-right: 2px;
}

/*RS FB & TW*/
.divFbTwCaptura{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.divFbTwCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divFbTwCaptura > div > div > input{
    text-align: center;
    width: 99%;
}

.divIconRsFb{
    display: flex;
    align-items: center;
}

.divIconRsFb > input{
    text-align: center;
    width: 99%;
}

#IconRsFb{
    color: blue;
    font-size: 25px;
    margin-left: 5px;
    margin-right: 2px;
}

.divFbTwCaptura{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.divFbTwCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divFbTwCaptura > div > div > input{
    text-align: center;
    width: 99%;
}

.divIconRsTw{
    display: flex;
    align-items: center;
}

.divIconRsTw > input{
    text-align: center;
    width: 99%;
}

#IconRsTw{
    color: #00b5ff;
    font-size: 25px;
    margin-left: 5px;
    margin-right: 2px;
}

/*---------------------------------
---- INFO USO INTERNO -----------*/
#TitUsoInterno{
    text-align:center; 
    background: #165739; 
    color: white;
}

.divNivEstuLuAfiCaptura{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.divNivEstuLuAfiCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divNivEstuLuAfiCaptura > div > div > input{
    text-align: center;
    width: 50%;
    text-transform: uppercase;
}

#subTitCausas{
    text-align:center; 
    background: #c9cbd0; 
    color: black;
}

.divCausasCaptura{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.divCausasCaptura > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.divCausasCaptura > div > div > input{
    text-align: center;
    text-transform: uppercase;
}

/*------------------------------
--- BOTON CARGA DE FORMATO ----*/
.divCargaFormato{
    text-align: center;
    margin-top: 15px;
    border-top: 5px double #be0811;
}

.divCargaFormato > h5{
    margin-top: 10px;
}

#CargaFormato{
     width: 0.1px;
     height: 0.1px;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     z-index: -1;
}

.labelCargaFormato{
    font-size: 60px;
    color: #165739;
    background: #c9cbd0;
    cursor: pointer;
    /*width: fit-content;*/
    width: 100px;
    text-align: center;
    border-radius: 20px;
    margin: 0 auto;
    transition: all .5s;
}

.labelCargaFormato:hover{
    background: #be0811;
    color: white;
}

.labelCargaFormato > label,
.labelCargaFormato > label > i{
    cursor: pointer;
}

.divShowMsjCarga{
    text-align: center;
}

.btnAddCaptura{
    margin-top: 50px;
    text-align: center;
}

#btnAddCaptura:hover{
    background: #be0811;
}

.footerForm{
    height: 15px;
    background: #c9cbd0;
}

/**********************************
///////// FIN SECCION CAPTURA ///////*/


/***************************************************
*********** SECCION REVISION ***********************
****************************************************/
.contenRevision{
    display: flex;
    flex-wrap: wrap;
}

.divpdfRevision{
    margin-top: 85px;
}

.divValidabtn{
    text-align: center;
}

.btnRevision{
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;

}

#btnNoRevision{
    margin-right: 15px;
}

#btnNoRevision:hover{
    background: rgba(190, 8, 17, 0.54);
}

#btnSiRevision:hover{
    background: rgba(22, 87, 57, 0.6);
}


/**********************************
///////// FIN SECCION REVISION ///////*/


/***************************************************
*********** SECCION BUSQUEDA ***********************
****************************************************/
.contBusqueda{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
}

#nombreBusqueda,
#patBusqueda,
#matBusqueda,
#claveBusqueda{
    text-transform: uppercase;
}

/*## FORM SEARCH BY NAME ##*/
.formSearchName{
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-top: 10px;
    z-index: -50;
}

.divNombreBusqueda{
    margin-bottom: 15px;
}

.divNombreBusqueda > label{
    background: rgba(22, 87, 57, 0.37);
    width: 100px;
    margin-bottom: 5px;
    color: black;
    border-radius: 10px;
}

.divNombreBusqueda > input{
    border-radius: 10px;
    text-align: center;
}

.divPatBusqueda{
    margin-bottom: 15px;
}

.divPatBusqueda > label{
    background: rgba(22, 87, 57, 0.37);
    width: 100px;
    margin-bottom: 5px;
    color: black;
    border-radius: 10px;
}

.divPatBusqueda > input{
    border-radius: 10px;
    text-align: center;
}

.divMatBusqueda{
    margin-bottom: 15px;
}

.divMatBusqueda > label{
    background: rgba(22, 87, 57, 0.37);
    width: 100px;
    margin-bottom: 5px;
    color: black;
    border-radius: 10px;
}

.divMatBusqueda > input{
    border-radius: 10px;
    text-align: center;
}

.divEdoBusqueda{
    margin-bottom: 15px;
}

.divEdoBusqueda > label{
    background: rgba(22, 87, 57, 0.37);
    width: 100px;
    margin-bottom: 5px;
    color: black;
    border-radius: 10px;
}

.divEdoBusqueda > select{
    border-radius: 5px;
    text-align: center;
    width: 100%;
    text-align: center;
    border: 1px solid #c9cbd0;
    height: 35px;
}

#btnSearchName{
    display: flex;
    text-align: center;
    margin: 0 auto;
    width: 150px;
    justify-content: center;
    border-radius: 50px 50px 50px 50px;
    background: #165739;
    border-color: gold;
}

#btnSearchName:hover{
    background: rgba(162, 153, 44, 0.38);
    border-color: green;
    color: green;
}

/*## FORM SEARCH BY CLAVE ##*/
.formSearchClave{
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-top: 10px;
    z-index: -50;
}

.divClaveBusqueda{
    margin-bottom: 15px;
}

.divClaveBusqueda > label{
    background: #c9cbd0;
    width: 100px;
    margin-bottom: 5px;
    color: black;
    border-radius: 10px;
}

.divClaveBusqueda > input{
    border-radius: 10px;
    text-align: center;
}

#btnSearchClave{
    display: flex;
    text-align: center;
    margin: 0 auto;
    width: 150px;
    justify-content: center;
    border-radius: 50px 50px 50px 50px;
    background: #be0811;
    border-color: gold;
}

#btnSearchClave:hover{
    background: rgba(162, 153, 44, 0.38);
    border-color: green;
    color: green;
}

/**********************************
///////// FIN SECCION BUSQUEDA ///////*/

/***************************************************
*********** SECCION VER MILITANTES ***********************
****************************************************/
.contenVerMilitantes{
    display: flex;
    flex-wrap: wrap;
}

.divUniclave > div{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    align-items: center;
}

.divUniclave > div > input{
    text-align: center;
    width: 80% !important;
    text-transform: uppercase;
}

/*#########################
### AREA BOTONES #########*/
.divSeparaBtn{
    margin-bottom: 15px;    
}

.divBtnVerMili{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: center;
}

.divBtnVerMili > a{
    text-decoration: none;
    color: #be0811;
}

.divBtnVerMili > a:hover{
    color: white;
}

.menuVerDatos{		
	position: relative;	
    padding: 23px 20px;
	font-size: 20px;
	color: var(--inv);
	letter-spacing: 2px;
	text-transform: uppercase;
	-webkit-transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);	
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    /*background: rgba(86, 229, 163, 0.37);*/
    border-radius: 15px;
    border-bottom: 1px solid red;
    border-top: 1px solid green;
}

.menuVerDatos:before,
.menuVerDatos:after{
	content: '';
	position: absolute;	
	-webkit-transition: inherit;	
	transition: inherit;
	z-index: -1;
}

.menuVerDatos:hover{
	color: var(--def);
	-webkit-transition-delay: .5s;
	        transition-delay: .5s;
}

.menuVerDatos:hover:before{
	-webkit-transition-delay: 0s;
	        transition-delay: 0s;
}

.menuVerDatos:hover:after{
	background: var(--inv);
	-webkit-transition-delay: .35s;
	        transition-delay: .35s;
}

/* From Top */
.from-top:before, 
.from-top:after {
	left: 0;
	height: 0;
	width: 100%;
    background: gold;
    border-radius: 15px;
}

.from-top:before {
	bottom: 0;	
	border: 1px solid var(--inv);
	border-top: 0;
	border-bottom: 0;
    background: black;
    border-radius: 15px;
}

.from-top:after{
	top: 0;
	height: 0;
}

.from-top:hover:before,
.from-top:hover:after {
	height: 100%;
}


/**********************************
///////// FIN SECCION VER MILITANTES ///////*/


/***************************************************
*********** SECCION PARTIDISTAS ***********************
****************************************************/
.divSelectCat > select{
    width: 30%;
    height: 30px;
}


/**********************************
///////// FIN SECCION PARTIDISTAS ///////*/


/***************************************************
*********** SECCION RESOLUCIONES ***********************
****************************************************/
.formBaja{

}

#contFormBaja{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#contFormBaja > div > div{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.divClaveBaja{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.divClaveBaja > div > label{
    background: #c9cbd0;
    width: 100px;
    margin-bottom: 5px;
    color: black;
    border-radius: 10px;
}

.divClaveBaja > div > input{
    border-radius: 10px;
    text-align: center;
    width: 50%;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.divOficioExped{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.divOficioExped > div{
    margin-right: 15px;
}

.divOficioExped > div > label{
    background: #c9cbd0;
    margin-bottom: 5px;
    color: black;
    border-radius: 10px;
}

.divOficioExped > div > input{
    border-radius: 10px;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
}


.divSolTipBaja{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
    align-items: center;
}

.divSolTipBaja > div{
    margin-right: 15px;
}

.divSolTipBaja > div > label{
    background: #c9cbd0;
    margin-bottom: 5px;
    color: black;
    border-radius: 10px;
}

.divSolTipBaja > div > input{
    border-radius: 10px;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.divSolTipBaja > div > select{
    border-radius: 10px;
    text-align: center;
    text-transform: uppercase;
}

/*VENTANA MODAL VER INFO BAJA  EN BUSQUEDA*/
.divFbajaFoficio{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

.divNumExpRealBaja{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

.divSolYreaBaja{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

/**********************************
///////// FIN SECCION RESOLUCIONES ///////*/

/***************************************************
*********** SECCION CERTIFICADO ***********************
****************************************************/
#btnReGenCertifica{
    border-radius: 50px;
    background: #165739;
    color: white;
}

#btnEditGenCertifica{
    border-radius: 50px;
    background: white;
    color: black;
    margin-top: 10px;
    width: 150px;
}

#btnEditGenCertifica > a{
    color: black;
}

/**********************************
///////// FIN SECCION CERTIFICADO ///////*/


/***************************************************
*********** SECCION USUARIOS ***********************
****************************************************/
#ContUsuarios{
    width: 100%;
}

#titUsuarios{
    text-align: center; 
    margin-top: 20px;
}

.theadPerso{
    background: #c9cbd0;
    color: #165739;
}

.busqUsuarios{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap-reverse;
    align-items: center;
}

.btnNewUsuarios{
    width: 50px;
    height: 50px;
    background: #165739;
    margin-bottom: 10px;
    float: right;
}

.btnNewUsuarios:hover{
    background: white;
    color: black;
    border: solid .5 black;
}


.datosUsuarios{
    margin-top: 10px;
}

.pagUsuarios{
    text-align: center;
}

#editUsuarios{
    font-size: 20px;
    color: brown;
}

#editUsuarios:hover{
    color: sandybrown;
}

#delUsuarios{
    font-size: 20px;
    color: red;
}

#delUsuarios:hover{
    color: orange;
}


.paginacionUsuarios > nav > ul > li > a{
    color: black;
}

.paginacionUsuarios > nav > ul > li > a:hover{
    color: rgb(106, 9, 9);
}

/*--------------------------------------------------
---------- VENTANA STATUS USER --------------------*/
.btnStatusUser{
    cursor: pointer;
}

#contStatusUser{
    display: flex;
    justify-content: space-between;
}

#btnActivaStatus{
    margin-right: 30px;
}

#ventStatusUser{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    animation-delay: 5000s;
}

/*--------------------------------------------------
---------- ADD USUARIOS --------------------*/
#claveUsuarios{
    text-transform: uppercase;
}

.divUserPswUser{
    display: flex;
    flex-wrap: wrap;
}

.divUserPswUser > div > input{
    width: 98%;
    /*text-transform: uppercase;*/
}

.divNomUser{
    display: flex;
    flex-wrap: wrap;
}

.divNomUser > div > input{
    width: 98%;
    text-transform: uppercase;
}

.divTelEmailUser{
    display: flex;
    flex-wrap: wrap;
}

#telefonoUsuarios{
    width: 98%;
    text-transform: uppercase;
}

#correoUsuarios{
    width: 98%;
}

.divEdoMunicipioUser{
    display: flex;
    flex-wrap: wrap;
}

.divEdoMunicipioUser > div > select{
    width: 98%;
}

.divEdoMunicipioUser > div > input{
    width: 98%;
    text-transform: uppercase;
}

.divUserPswUser{
    display: flex;
    flex-wrap: wrap;
}

.divUserPswUser > div > input{
    width: 98%;
}


#helpTxt{
    color: orange;
}

#helpTxt:hover{
    cursor: help;
}

/*--------------------------------------------------
---------- VENTANA EDITAR USUARIOS --------------------*/
#ventEditUsuarios{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    animation-delay: 5000s;
}

#marcoVenEditUser{
    width: 100%;
    margin-top: 60px;
}


/*--------------------------------------------------
---------- VENTANA ELIMINAR USUARIOS --------------------*/
#ventDelUsuarios{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    animation-delay: 5000s;
}


/**********************************
///////// FIN SECCION USUARIOS ///////*/

/***************************************************
*********** SECCION CERTIFICADO ***********************
****************************************************/
#headPrint{
    background: blue;
    text-align: center;
}

#headGeneral{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    align-content: center;
}

.certifca1{
    margin-top: 20px;    
}

.divcer1{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.divcer1 > div > input{
    text-align: center;
}

.labelVerde{
    background: #165739;
    color: white;
    width: 190px;
}

.labelBlanco{
    width: 190px;
}

.labelRojo{
    background: #be0811;
    color: white;
    width: 190px;
}

/*SEGUNDA AREA HEAD*/
.certifca2{
    margin-top: 20px;    
}

.divcer2{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.divcer2 > div > input{
    text-align: center;
}

.certifca3{
    margin-top: 20px;    
}

.divcer3{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.divcer3 > div > input{
    text-align: center;
}

/*AREA DE FOTO*/
.headInfoDer{
    
}

.certifca4{
    margin-top: 20px;    
}

.divcer4{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.divcer4 > div > input{
    text-align: center;
    width: 100%;
    border: none;
}

/*----------------------------
---- DATOS GEN CERTIFICA ---*/
#TitGenCertifica{
    text-align:center; 
    background: #165739; 
    color: white;
}

.genCertifica1{
    margin-top: 20px;    
}

.divgencer1{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.divgencer1 > div > input{
    text-align: center;
    width: 98%;
}

.labelGenVerde{
    background: #165739;
    color: white;
    width: 98%;
}

.labelGenBlanco{
    width: 98%;
}

.labelGenRojo{
    background: #be0811;
    color: white;
    width: 98%;
}

.genCertifica2{
    margin-top: 20px;    
}

.divgencer2{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.divgencer2 > div > input{
    text-align: center;
    width: 98%;
}

.genCertifica3{
    margin-top: 20px;    
}

.divgencer3{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.divgencer3 > div > input{
    text-align: center;
    width: 98%;
}

.genCertifica4{
    margin-top: 20px;    
}

.divgencer4{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.divgencer4 > div > input{
    text-align: center;
    width: 98%;
}

/*--------------------
-- AREA DE FIRMA ---*/
.firmCertifica{
    margin-top: 100px;
    text-align: center;
}

.firmCertifica > h3{
    border-top: 1px solid black;
    width: 50%;
    margin: 0 auto;
}

.clausulaCertifica{
    margin-top: 10px;
    text-align: center;
}

.clausulaCertifica > p{
    width: 50%;
    text-align: justify;
    margin: 0 auto;
}

.footerCertifica{
    text-align: center;
    margin-top: 15px;
    margin-bottom: 25px;
    
}

/**********************************
///////// FIN SECCION CERTIFICADO ///////*/


/***************************************************
*********** SECCION CREDENCIAL ***********************
****************************************************/
#btnCredenClave{
    display: flex;
    text-align: center;
    margin: 0 auto;
    width: 150px;
    justify-content: center;
    border-radius: 50px 50px 50px 50px;
    background: #be0811;
    border-color: gold;
    margin-top: 25px;
}

#btnCredenClave:hover{
    background: rgba(162, 153, 44, 0.38);
    border-color: green;
    color: green;
}

#iconTomaFoto{
    font-size: 80px;
    color: green;
}

#iconTomaFoto:hover{
    font-size: 80px;
    color: red;
}

#claveCapturaFoto{
    text-transform: uppercase;
}

/*////////////////////////
/// OCULTAR BOTON CAMARA /////*/
@media all and (max-width: 769px) {
    #contCapWebCam{
        background: red;
        display: none;
    }
}

/*///// TOMAR CAPTURA DE FOTO /////*/
#contCapturaFoto{
    width: 100%;
    margin-top: 50px;    
}

#areaCaptuGen{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/*//////////////////////////////////////
//// AREA TOMAR FOTO ////////////////*/
#contTomaFoto{
    width: 500px;
    height: 450px;
    margin: 0 auto;
}

.fotografia{
    width: 500px;
    height: 377px;
    border: 5px solid rgb(0, 0, 0);
    background: #eee;
    border-radius: 10px;
    position: absolute;
   /* margin-top: 50px;
    margin-bottom: 50px;*/
}

#contTomaFoto .fotografia #video{
    position: relative;
    width: 490px;
    height: 451px;
    bottom: 42px;
    border-radius: 10px;
    
}

#Take:hover{cursor: pointer}
    #Take {
	background: transparent ; outline: none;
	position: relative;
	border: 2px solid #111;
    background:rgb(255, 255, 255);
	padding: 15px 50px;
	overflow: hidden;
	top: 390px;
	left: 150px;
    border-radius: 5px;
    }

    /*#Take:before (attr data-hover)*/
#Take:hover:before{opacity: 1; -webkit-transform: translate(0,0); transform: translate(0,0);}
#Take:before{
    content: attr(data-hover);
    position: absolute;
    top: 0; left: 0;
   /* border: 2px solid rgb(238, 4, 4);*/
    background: linear-gradient(0deg, rgba(171,0,0,1) 0%, rgba(255,255,255,1) 54%, rgba(0,152,5,1) 100%);
    padding: 15px;
    width: 200px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 800;
    font-size: 1em;
    opacity: 0;
    -webkit-transform: translate(-100%,0);
            transform: translate(-100%,0);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
    /*#Take div (#Take text before hover)*/
    #Take:hover div{opacity: 0; -webkit-transform: translate(100%,0); transform: translate(100%,0)}
    #Take div{
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 800;
    font-size: 1em;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    }


/*/// FIN AREA TOMAR FOTO ///////*/

/*///// AREA VISTA PREVIA ////////////////*/
#contPreview{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    margin-top: 50px;
    align-items: center;
    text-align: center;
}

#prew{
    width: 301px;
    height: 301px;
    border: 2px solid rgb(0, 0, 0);
    background: #eee;
    border-radius: 50%;
    text-align: center;
}


.divtxtAvatar{
    margin-top: -50px;
}

#avatarCapFoto{
    border-radius: 50%;
}

#avatarCapFotoTmp{
    width: 410px;
    border-radius: 50px;
}

#btnGeneraFoto{
    margin-top: 25px;
    width: 200px;
    border-radius: 5px;
}

#btnGeneraFoto:hover{
    background: red;
}

/*----------------------------- mostrar estado de envio----------------*/
#estado {
    text-align: center;
}

/*/// FIN AREA TOMAR FOTO ///////*/


/**********************************
///////// FIN SECCION CREDENCIAL ///////*/

/***************************************************
*********** SECCION VALIDADOS ***********************
****************************************************/
.headValidados{
    text-align: center;
    margin-top: 10px;
}

.TituloValidados{
    text-align: center;
}

#contValidos{
    margin-top: 15px;
    text-align: center;
}

#btnValidar{
    width: 250px;
    border-radius: 20px;
    background: red;
}

#btnValidar:hover{
    background: green;
}


/**********************************
///////// FIN SECCION VALIDADOS ///////*/


/***************************************************
*********** SECCION SOLICITUDES ***********************
****************************************************/
#ContSolicitudes{
    width: 100%;
}

#titSolicitudes{
    text-align: center; 
    margin-top: 20px;
}

.busqSolicitudes{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


.datosSolicitudes{
    margin-top: 20px;
}

.pagSolicitudes{
    text-align: center;
}

#verSolicitudes{
    font-size: 20px;
    color: brown;
}

#verSolicitudes:hover{
    color: sandybrown;
}

#delSolicitudes{
    font-size: 20px;
    color: red;
}

#delSolicitudes:hover{
    color: orange;
}


.paginacionSolicitudes > nav > ul > li > a{
    color: black;
}

.paginacionSolicitudes > nav > ul > li > a:hover{
    color: rgb(106, 9, 9);
}

/*------------------------------------------
------- VER SOLICITUDES INE //////////////*/
#ContVerSolicitud{
    width: 100%;
}

#titVerSolicitud{
    text-align: center; 
    margin-top: 20px;
}

.datosVerSolicitud{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#marcoIne{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.divImgIneFrente > img{
    width: 350px;
    margin-bottom: 30px;
}

.divImgIneDetras > img{
    width: 350px;
}

.divImgFormato > img{
    width: 450px;
}

.btnValidarIne{
    display: flex;
    margin-top: 5px;
    flex-wrap: wrap;
    justify-content: center;
}


.divRechazarINE{
    margin-right: 30px;
}

/*--------------------------------------------------
---------- VENTANA RECHAZAR SOLICITUD  --------------------*/
#ventRechazoSolicitud{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    animation-delay: 5000s;
}

#razonRechazos{
    width: 100%;
}

.formRechazos{
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-top: 10px;
}


/*--------------------------------------------------
---------- VENTANA ELIMINAR SOLICITUDES --------------------*/
#ventDelSoliciutud{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    animation-delay: 5000s;
}

/*------------------------------------------
------- CAPTURA DE DATOS //////////////*/
#ContCaptura{
    width: 100%;
}

#titCaptura{
    text-align: center; 
    margin-top: 20px;
}

.SeccionesCaptura{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.showINECaptura > img{
    width: 450px;
}

.divCapturaDatos{
    flex-wrap: wrap;
}

.divNomRegistrados{
    display: flex;
    flex-wrap: wrap;
}

.divCalleRegistrados{
    display: flex;
    flex-wrap: wrap;
}

.divMunicipioRegistrados{
    display: flex;
    flex-wrap: wrap;
}

.divCurpRegistrados{
    display: flex;
    flex-wrap: wrap;
}

.divBtnCaptura{
    text-align: center;
    
}

#btnCaptura{
    border-radius: 30px;
}

/*--------------------------------------------------
---------- VENTANA DESBLOQUEO SOLICITUD --------------------*/
.btnStatusSolicitud{
    cursor: pointer;
}

#contStatusSolicitud{
    display: flex;
    justify-content: center;
}

#btnActivaStatus{
    margin-right: 30px;
}

#ventStatusSolicitud{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 10px; /* Location of the box */
    left: 0;
    top: 0;
    animation-delay: 5000s;
}

/**********************************
///////// FIN SECCION SOLICITUDES ///////*/


/***************************************************
*********** SECCION CONSULTAS ***********************
****************************************************/
#ContConsultas{
    width: 100%;
}

#contSecConsultas{
    display: flex;
    flex-wrap: wrap;
}


/*/////////////////////////////////
//// SECCION 1 //////////////////*/

/*----PARTE 1 SECCION 1 -----*/
.par1Sec1Consultas{
    margin-top: 5px;
}

.sec1Consultas{
    background: ;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.divImgBusqIne{
    margin-bottom: 5px; 
}

.busqIneConsultas{
    margin-top: 5px;
    margin-bottom: 5px;
}

#buscarIneConsultas{
    width: 100%;
    text-align: center;
}

#btnBuscarIneConsultas{
    width: 50%;

}


/*----PARTE 2 SECCION 1 -----*/
.par2Sec1Consultas{

}

.divImg2BusqStorage{
    margin-bottom: 5px; 
}

.busqStorage{
    margin-top: 5px;
}

#buscarStorage{
    width: 100%;
    text-align: center;
}

.divBtnBusqStorage{
    display: flex;
    margin-top: 5px;
    justify-content: center;
}

#btnBuscarStorage{
    width: 30%;

}

#btnAddStorage{
    margin-left: 20px;
    width: 30%;
}


/*/////////////////////////////////
//// SECCION 2 //////////////////*/
.sec2Consultas{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 20px;
}

#contBtnsConsultas{
    display: flex;
    flex-wrap: wrap;
}

.area1BtnsConsultas{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.area1BtnsConsultas > a,
.area1BtnsConsultas > a > button{
    background-color: darkcyan;
    width: 90%;
    height: 90%;
    border: 0px;
    border-radius: 30px;
    color: white;
}

.area1BtnsConsultas > a:hover,
.area1BtnsConsultas > a > button:hover{
    background-color: cyan;
    color: darkcyan;
}


.area2BtnsConsultas{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.area2BtnsConsultas > a,
.area2BtnsConsultas > a > button{
    background-color: green;
    width: 90%;
    height: 90%;
    border: 0px;
    border-radius: 30px;
    color: white;
}

.area2BtnsConsultas > a:hover,
.area2BtnsConsultas > a > button:hover{
    background-color: lightgreen;
    color: green;
}

#cont2BtnsConsultas{
    display: flex;
    flex-wrap: wrap;
}

.area3BtnsConsultas{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.area3BtnsConsultas > a,
.area3BtnsConsultas > a > button{
    background-color: firebrick;
    width: 90%;
    height: 90%;
    border: 0px;
    border-radius: 30px;
    color: white;
}

.area3BtnsConsultas > a:hover,
.area3BtnsConsultas > a > button:hover{
    background-color: lightcoral;
    color: darkred;
}


.area4BtnsConsultas{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.area4BtnsConsultas > button{
    background-color: red;
    width: 90%;
    height: 90%;
    border: 0px;
    border-radius: 30px;
    color: white;
}

.area4BtnsConsultas > button:hover{
    background-color: orange;
    color: red;
}


/**********************************
///////// FIN SECCION CONSULTAS ///////*/


/***************************************************
*********** SECCION VER INE CONSULTAS ***********************
****************************************************/
#ContVerIneConsultas{
    width: 100%;
}

#titVerIneConsultas{
    text-align: center; 
    margin-top: 20px;
}

#marcoVerIne{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

.Sec1VerIneConsultas{
    flex-wrap: wrap;
}

.Sec1VerIneConsultas > div > div > input{
    text-align: center;
}

.divUniclaveSec1VerIne{
    display: flex;
    flex-wrap: wrap;
}

.divNomSec1VerIne{
    display: flex;
    flex-wrap: wrap;
}

.divNomSec1VerIne > div > input{
    border: none;
}


.divCalleSec1VerIne{
    display: flex;
    flex-wrap: wrap;
}

.divMunicipioSec1VerIne{
    display: flex;
    flex-wrap: wrap;
}


.divCurpSec1VerIne{
    display: flex;
    flex-wrap: wrap;
}

.divAdherenteSec1VerIne{
    display: flex;
    flex-wrap: wrap;
}


/*---- SECCION 2 VER INE CONSULTAS ----*/
.infoDatosVerIneConsultas{
    text-align: left;
}

.datosSec2VerIne{
    margin-top: 20px;
}

.divBtnVerDocINe{
    justify-content: space-between;
    flex-wrap: wrap;
}

.divBtnVerDocINe > button{
    width: 150px;
    margin-top: 5px;
    align-content: center;
}

#btnAltasVerIne{
    width: 150px;
    margin-top: 5px;
    align-content: center;
}

#btnAltasVerIne:hover{
    background: darkgreen;
}


/*//// BOTONES LINK BAJA ////*/
#linkFormaMilBaja{
    color: darkblue;
}

#linkFormaMilBaja:hover{
    color: darkred;
}

#linkFormaBaja{
    color: darkred;
}

#linkFormaBaja:hover{
    color: orange;
}

/**********************************
///////// FIN SECCION VER INE CONSULTAS ///////*/


/***************************************************
*********** SECCION RECHAZADOS ***********************
****************************************************/
#ContRechazados{
    width: 100%;
}

#titRechazados{
    text-align: center; 
    margin-top: 20px;
}

.busqRechazados{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


.datosRechazados{
    margin-top: 20px;
}

.pagRechazados{
    text-align: center;
}

#verRechazados{
    font-size: 20px;
    color: brown;
}

#verRechazados:hover{
    color: sandybrown;
}

#delRechazados{
    font-size: 20px;
    color: red;
}

#delRechazados:hover{
    color: orange;
}


.paginacionRechazados > nav > ul > li > a{
    color: black;
}

.paginacionRechazados > nav > ul > li > a:hover{
    color: rgb(106, 9, 9);
}

.divGenReporte > form > button{
    width: 100px;
    border-radius: 10px;
}

/*------------------------------------------
------- VENTANA MOTIVO RECHAZO //////////////*/
#infoRechazo > a{
    color: blue;

}

#infoRechazo > a:hover{
    color: darkblue;
    cursor: pointer;
}

/*--------------------------------------------------
---------- VENTANA ELIMINAR RECHAZADOS --------------------*/
#ventDelRechazados{
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    animation-delay: 5000s;
}

/*--------------------------------------------------
---------- REPORTE RECHAZADOS --------------------*/
.divExportRechazos{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.divExportRechazos > a{
    font-size: 45px;
    color: green;
}

.divExportRechazos > a:hover{
    color: lightgreen;
}

/**********************************
///////// FIN SECCION RECHAZADOS ///////*/


/***************************************************
*********** SECCION EDITAR MILITANTES ***********************
****************************************************/
#ContEditarMilitantes{
    width: 100%;
}

#titEditarMilitantes{
    text-align: center; 
    margin-top: 20px;
}

#marcoEditarMilitantes{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

.SecEditarMilitantes{
    flex-wrap: wrap;
}

.SecEditarMilitantes > div > div > input{
    text-align: center;
}

.divUniclaveEditarMilitantes{
    display: flex;
    flex-wrap: wrap;
}

.divNomEditarMilitantes{
    display: flex;
    flex-wrap: wrap;
}

.divNomEditarMilitantes > div > input{
    border: none;
}


.divCalleEditarMilitantes{
    display: flex;
    flex-wrap: wrap;
}

.divMunicipioEditarMilitantes{
    display: flex;
    flex-wrap: wrap;
}


.divCurpEditarMilitantes{
    display: flex;
    flex-wrap: wrap;
}

.divAdherenteEditarMilitantes{
    display: flex;
    flex-wrap: wrap;
}
.divBtnEditarMilitantes{
    justify-content: space-between;
    flex-wrap: wrap;
}

.divBtnEditarMilitantes > button{
    width: 150px;
    margin-top: 5px;
    align-content: center;
}

#btnUpdateMil{
    width: 150px;
    margin-top: 5px;
    align-content: center;
}

#btnUpdateMil:hover{
    background: darkgreen;
}

.divLiberarRchazo{
    margin-top: 10px;
}

#btnLibRechazo{
    width: 150px;
    margin-top: 5px;
    align-content: center;
}


/*--- MODAL PARA VER DOCUMENTOS ----*/
#VentVerDocu{
    margin-bottom: 10px;
}

.areaVerDocu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.TitVentVerDocu{
    text-align: center;
    margin-bottom: 15px;
}

.divbtnVerDocu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.divBtnVerIne > form > button{
    width: 100px;
    border-radius: 10px;
}

.divBtnVerFormato > form > button{
    width: 100px;
    border-radius: 10px;
}


/*--- MODAL CARGA DE DOCUMENTOS ----*/
#VentcargaDocu{
    margin-bottom: 10px;    
}

.areaCargaDocu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.TitVentCargaDocu{
    text-align: center;
    margin-bottom: 15px;
}

.divbtnCargaDocu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.divBtnCargaIne > form > button{
    width: 100px;
    border-radius: 10px;
}

.divBtnCargaFormato > form > button{
    width: 100px;
    border-radius: 10px;
}

/*--- MODAL GENERAR DOCUMENTO ----*/
.areaGengaDocu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.TitVentGenDocu{
    text-align: center;
    margin-bottom: 15px;
}

.divbtnGenDocu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}


.divBtnGenIne > form > button{
    width: 100px;
    border-radius: 10px;
}

.divBtnGenFormato > form > button{
    width: 100px;
    border-radius: 10px;
}



/*###### VER INE #######*/
.ContVerIne{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.divImgVerIne{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.divImgVerIne > img{
    width: 350px; 
    margin-top: 15px;
    margin-left: 15px;
}

.divImgVerFormato{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.divImgVerFormato > img{
    width: 550px; 
}

/*/////////////////////////////////////
/////// CARGAR INE FRENTE///////////**/


/*----------------------------------------------
---------- SECCION 1 VERIFICACION -----------------------
----------------------------------------------*/
.headSeccion1{
    text-align: center;
}

#titSeccion1 > h3{
    margin-top: 30px;
}

.Instrucciones{
    text-align: center;
    margin-top: 30px;
}

.contenidoSeccion1{
    text-align: center;
    margin-top: 20px;
}

/*BOTON CARGA INE FRENTE*/
#ineFrente{
     width: 0.1px;
     height: 0.1px;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     z-index: -1;
}

.labelIneFrente{
    font-size: 60px;
    color: white;
    background: black;
    cursor: pointer;
    width: fit-content;
    text-align: center;
    border-radius: 20px;
    margin: 0 auto;
    transition: all .5s;
}

.labelIneFrente:hover{
    background: blue;
}

.btnSeccion1{
    margin-top: 50px;
}

/*----------------------------------------------
---------- SECCION 2 PREVIEW -----------------------
----------------------------------------------*/
.headSeccion2{
    text-align: center;
}

#titSeccion2{
    margin-top: 30px;
}

#titSeccion2 > h2{
    margin-top: 30px;
}

.Instrucciones2{
    text-align: center;
    margin-top: 30px;
}

.contenidoSeccion2{
    text-align: center;
    margin-top: 20px;
}

.capturaSeccion2{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 20PX;
}

.pasosIneFrontal{
    color: red;
}

.HowCut{
    font-size: 18px;
    color: blue;
}

.HowCut:hover{
    background: black;
    cursor: pointer;
    color: white;
    padding: 10px;
    border-radius: 20px;
}

#previIneFrontal{
    text-align: center;
}

#TitCutIneFrontal{
    text-align: center;
    justify-content: center;
}

#previCutIneFrontal{
    text-align: center;
    justify-content: center;
}

#cutIneFrontal{
    width: 350px;
}

.btnSeccion2No{
    margin-right: 30px;
}

/*----------------------------------------------
---------- SECCION 3 VERIFICACION -----------------------
----------------------------------------------*/
.headSeccion3{
    text-align: center;
    margin-top: 30px;
}

#titSeccion3 > h3{
    margin-top: 30px;
}

.Instrucciones3{
    text-align: center;
    margin-top: 30px;
}

.contenidoSeccion3{
    text-align: center;
    margin-top: 20px;
}

/*BOTON CARGA INE FRENTE*/
#ineDetras{
     width: 0.1px;
     height: 0.1px;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     z-index: -1;
}

.labelIneDetras{
    font-size: 60px;
    color: white;
    background: black;
    cursor: pointer;
    width: fit-content;
    text-align: center;
    border-radius: 20px;
    margin: 0 auto;
    transition: all .5s;
}

.labelIneDetras:hover{
    background: blue;
}


.btnSeccion3{
    margin-top: 50px;
}

/*----------------------------------------------
---------- SECCION 3 PREVIEW -----------------------
----------------------------------------------*/
.headSeccion3{
    text-align: center;
}

#titSeccion3{
    margin-top: 30px;
}

#titSeccion3 > h2{
    margin-top: 30px;
}

.Instrucciones3{
    text-align: center;
    margin-top: 30px;
}

.contenidoSeccion3{
    text-align: center;
    margin-top: 20px; 
}

.capturaSeccion3{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

#previIneDetras{
    text-align: center;
}


/*CUT INE DETRAS*/
#TitCutIneDetras{
    text-align: center;
    justify-content: center;
}

#previCutIneDetras{
    text-align: center;
    justify-content: center;
}

#cutIneDetras{
    width: 350px;
}

.btnSeccion3No{
    margin-right: 30px;
}

/*----------------------------------------------
---------- SECCION FORMATO -----------------------
----------------------------------------------*/
.headFormato{
    text-align: center;
}

#titFormato > h3{
    margin-top: 30px;
}

.InstruccionesFormato{
    text-align: center;
    margin-top: 30px;
}

.contenidoFormato{
    text-align: center;
    margin-top: 20px;
}

/*BOTON CARGA INE FRENTE*/
#formato{
     width: 0.1px;
     height: 0.1px;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     z-index: -1;
}

.labelFormato{
    font-size: 60px;
    color: white;
    background: black;
    cursor: pointer;
    width: fit-content;
    text-align: center;
    border-radius: 20px;
    margin: 0 auto;
    transition: all .5s;
}

.labelFormato:hover{
    background: blue;
}

.btnFormato{
    margin-top: 50px;
}


/**********************************************
///////// FIN SECCION FORMATO ///////*/




/*****************************************************
---------- MACHOTE -----------------------
*****************************************************/

/**********************************
///////// FIN MACHOTE ///////*/




/*****************************************************
---------- SECCION CERRAR SESION -----------------------
*****************************************************/
#bodyCerrar{
    background: url(../img/) fixed;
}

#ContCerrarSesion{
    width: 100%;
    display: flex;
}

#titCerrarSesion{
    text-align: center; 
    margin-top: 20px;
}

.divimgCerrar{
    display: flex;
    justify-content: space-around;
}

.divimgCerrar > img{
    width: 20%;
}

/**********************************
///////// FIN SECCION CERRAR SESION ///////*/



/*----------------------------------------------
---------- boceto -----------------------
----------------------------------------------*/

/**********************************
///////// FIN boceto ///////*/



/*----------------------------------------------
---------- Media Query -----------------------
----------------------------------------------*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
}