/*========================*/
/* COLOR INSTITUCIONALES  */
/*========================*/

/*
   #ff8300 -> AMARILLO  -> rgba(255, 131,  0, 1)
   #465055 -> GRIS FRIO -> rgba( 70,  80, 85, 1)
   #FF004E -> ROJIZO    -> rgba(255,   0, 78, 1)

*/

body {
   background: #fff;
}

input[type="radio"] {
   margin-top: 15px !important;
}
#vistaGeneral {
   height: auto;
   width: auto;
   overflow: auto;
   background: #eee;
}
#header {
   background: #ff004e !important;
}
#lineaEncabezado {
   border: 1px solid #ff8300 !important;
   height: 1px;
}
/*
   =============
   PIE DE PAGINA
   =============
*/
#footer {
   background: #ff8300 !important;
}
#footer2 {
   background: #ff8300 !important;
}

#footer2 p {
   background: rgba(255, 131, 0, 1.0);
   font-size: 12px;
   letter-spacing: 0.5px;
   color: #ffffff !important;
   text-align: center !important;
   margin: 0px;
   padding: 6px 0px 0px 0px;
}
#cuerpo {
   background: #eee !important;
}

#centraVistaP {
   width: 99%;
   background: #fff !important;
   overflow: auto;
   border-radius: 20px;
   box-shadow: 0px 0px 3px 1px #ff8300;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

#centraVista {
   background: #fff !important;
   overflow: auto;
   border-radius: 20px;
   box-shadow: 0px 0px 3px 1px #ff8300;
   min-width: 370px;
   max-width: 370px;
   position: absolute;
   left: 50%;
   top: 44.5%;
   transform: translate(-50%, -50%);
   padding: 0px 20px !important;
}

#centraVistaQR {
   background: #fff !important;
   overflow: auto;
   border-radius: 8px;
   box-shadow: 0px 0px 3px 0px #465055;
   min-width: 370px;
   max-width: 370px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   padding: 10px !important;
}

#centraVistaQR_1 {
   background: #fff !important;
   overflow: auto;
   border-radius: 8px;
   box-shadow: 0px 0px 3px 0px #465055;
   min-width: 370px;
   max-width: 370px;
   position: absolute;
   left: 50%;
   top: 47%;
   transform: translate(-50%, -50%);
   padding: 10px !important;
}

#label1P {
   font-weight: 600 !important;
   font-size: 1.8rem !important;
   letter-spacing: 1px !important;
   border-radius: 10px !important;
   padding: 0px 15px !important;
   margin: 0px !important;
   box-shadow: 0px 0px 3px 1px #ff004e !important;
   border: 2px solid #fff !important;
   color: #fff !important;
   background: linear-gradient(to top, #ff004e, #ff004e 50%, #fff 100%, #000 100%) !important
}

#label2P {
   box-shadow: 0px 0px 3px 1px #ff8300 !important;
   font-weight: 600 !important;
   font-size: 1.05rem !important;
   letter-spacing: 0.5px !important;
   border-radius: 8px !important;
   padding: 2px 10px !important;
   margin: 0px !important;
   border: 2px solid #fff !important;
   color: #fff !important;
   background: linear-gradient(to top, #ff8300, #ff8300 50%, #fff 100%, #000 100%) !important
}

#flecha {
   height: 80px !important;
   width: 60px !important;
   margin-top: 5px !important;
}

.flecha {
   animation-duration: 3s !important;
   animation-name: slidein !important;
   animation-iteration-count: infinite !important;
   animation-direction: alternate !important;
}

@keyframes slidein {
   from {
      margin-bottom: 5%;
   }
   to {
      margin-top: 5%;
   }
}

#consulta {
   height: auto !important;
   box-sizing: border-box;
}

#btnCalificaciones, 
#btnCertificados {
   box-shadow: 0px 0px 0px 1px #ff004e !important;
   border: 1px solid rgba(70, 80, 85, 0.1);
   border-radius: 15px;
   color: #FF8300;
   font-weight: 700;
   font-size: 1rem !important;
   padding: 0px !important;
   margin: 0px !important;
   text-align: center !important;
   min-width: 350px !important;
   max-width: 350px !important;
   background: linear-gradient(300deg, rgba(70, 80, 85, 0.4), rgba(255, 255, 255, 1), rgba(70, 80, 85, 0.4));
   background-size: auto;
   background-size: 180% 180%;
   animation: gradient-animation 10s ease infinite;
   letter-spacing: 1px
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#btnCalificaciones:hover, 
#btnCertificados:hover {
   box-shadow: 0px 0px 0px 1px #ff8300 !important;
   background: linear-gradient(to top, rgba(255, 0, 78, 1), rgba(255, 131, 0, 0.5) 60%, #ffffff 100%, #ffffff 10%);
   color: #ffffff;
}

#imgCertif {
   width: 50px !important;
   height: 50px !important;
   margin: 10px 0px 0px 0px !important;
}

#imgCalif {
   width: 45px !important;
   height: 50px !important;
   margin: 10px 0px 0px 0px !important;
}

#btnInicio {
   /*margin: 10px !important;
   box-sizing: border-box !important;*/
}

#divHome {
   background: #ffffff;
   border: 1px solid rgba(255, 0, 78, 0.3);
   border-radius: 8px;
   /* centra DIV  */
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   overflow-y: auto;
   overflow-x: auto;
}

/*
   =============================
   ESTILO PARA PAGINA DE NIVELES
   =============================
*/

#label1Niveles {
   /*width: 100% !important;
   padding: 5px 0px !important;
   background: rgba(255, 0, 78, 1.0) !important;
   border-radius: 5px !important;
   box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 20%) !important;
   color: #ffffff !important;
   font-family: cursive !important;
   letter-spacing: 1px !important;
   text-align: center !important;
   margin-bottom: 3vh !important;
   font-size: 1.5rem !important;*/
   width: 100% !important;
  padding: 5px 0px !important;
  background: linear-gradient( 0deg, hsl(0deg 0% 100%) 0%, hsl(341deg 100% 92%) 4%, hsl(342deg 100% 83%) 9%, hsl(342deg 100% 75%) 15%, hsl(342deg 100% 67%) 22%, hsl(342deg 100% 58%) 32%, hsl(342deg 100% 50%) 45%, hsl(342deg 100% 58%) 60%, hsl(342deg 100% 67%) 72%, hsl(342deg 100% 75%) 82%, hsl(342deg 100% 83%) 89%, hsl(341deg 100% 92%) 95%, hsl(0deg 0% 100%) 100% ) !important;
  border-radius: 5px !important;
  box-shadow: 0px 0px 3px 1px rgb(255 0 78 / 100%) !important;
  color: #ffffff !important;
  font-family: cursive !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  margin-bottom: 3vh !important;
  font-size: 1.5rem !important;
}
#label2Niveles {
   color: #393939 !important;
   font-weight: 600 !important; 
   font-size: 1.5rem !important; 
   letter-spacing: 1px !important;
   border-radius: 10px !important;
   border: 1px solid rgba(255, 0, 78, 0.3) !important;
   min-width: 370px !important;
   max-width: 370px !important;
   text-align: center !important;
   background: #ffffff !important;
   box-sizing: border-box !important;
   position: absolute;
   left: 50%;
   top: 44.5%;
   transform: translate(-50%, -50%);
}

#btnNiveles {
   box-shadow: 0px 0px 3px 0px #455055 !important;
   border: 1px solid rgba(70, 80, 85, 0.7);
   border-radius: 15px;
   color: #FF8300;
   font-weight: 700;
   font-size: 1rem !important;
   padding: 5px 10px !important;
   margin: 5px 0px !important;
   text-align: center !important;
   min-width: 300px !important;
   max-width: 300px !important;
   background: linear-gradient(300deg, rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255));
   background-size: auto;
   background-size: 180% 180%;
   animation: gradient-animation 10s ease infinite;
   letter-spacing: 2px;
}

#btnNiveles:hover {
   border-top: 2px solid #ff004e;
   border-left: 2px solid #ff004e;
   border-bottom: 2px solid #ff8300;
   border-right: 2px solid #ff8300;
   /*background: linear-gradient(to top, rgba(255, 0, 78, 0.4), rgba(255, 131, 0, 0.3) 60%, #ffffff 100%, #ffffff 10%);*/
   background: rgba(70, 80, 85, 1); /*#465055*/
   
}

.btnHome {
   background-image: url('../media/images/home.png') !important;
   background-repeat: no-repeat !important;
   height: auto !important;
   width: auto !important;
   background-size: 35px 40px !important;
   background-position: right !important;
   border-radius: 8px !important;
   padding: 5px 45px 8px 10px !important;
   font-size: 17px !important;
   color: #ffffff !important;
   background-color: #dc2045 !important;
   border: 1.5px solid #df5353;
   margin-top: 3vh !important;
   letter-spacing: 0.5px !important;
}

.btnPagIni {
   background-image: url('../media/images/home.png') !important;
   background-repeat: no-repeat !important;
   height: 40px !important;
   width: 50px !important;
   background-size: 50px 40px !important;
   background-position: center !important;
   border-radius: 8px !important;
   color: #ffffff !important;
   background-color: rgba(70, 80, 85, 1) !important;
   border: auto !important;
}

.btnRegresar {
   background-image: url('../media/images/regresar.png') !important;
   background-repeat: no-repeat !important;
   height: 40px !important;
   width: 50px !important;
   background-size: 50px 40px !important;
   background-position: center !important;
   border-radius: 8px !important;
   color: #ffffff !important;
   background-color: rgba(70, 80, 85, 1) !important;
   border: auto !important;
}

/*
   =========================================
   INGRESO DE DATOS PARA GENERAR CERTIFICADO
   =========================================
*/

#label1Datos {
   width: 100% !important;
   padding: 5px 0px !important;
   background: linear-gradient( 0deg, hsl(0deg 0% 100%) 0%, hsl(341deg 100% 92%) 4%, hsl(342deg 100% 83%) 9%, hsl(342deg 100% 75%) 15%, hsl(342deg 100% 67%) 22%, hsl(342deg 100% 58%) 32%, hsl(342deg 100% 50%) 45%, hsl(342deg 100% 58%) 60%, hsl(342deg 100% 67%) 72%, hsl(342deg 100% 75%) 82%, hsl(342deg 100% 83%) 89%, hsl(341deg 100% 92%) 95%, hsl(0deg 0% 100%) 100% ) !important;
   border-radius: 5px !important;
   box-shadow: 0px 0px 2px 1px rgb(255 0 78 / 100%) !important;
   color: #ffffff !important;
   font-family: cursive !important;
   letter-spacing: 1px !important;
   text-align: center !important;
   margin-bottom: 3vh !important;
   font-size: 1.5rem !important;
   font-weight: initial !important;
}

#label1DatCer {
   background-color: #ff8300 !important;
   font-size: 17px !important;
   font-weight: 500 !important;
   letter-spacing: 1px !important;
   border-radius: 6px !important;
   padding: 2px 10px 2px 10px !important;
   color: #fff !important;
   border: 1px solid #fff !important;
}
#label1DatCerLet {
   background: linear-gradient( 0deg, hsl(0deg 0% 100%) 0%, hsl(30deg 100% 92%) 4%, hsl(31deg 100% 83%) 9%, hsl(31deg 100% 75%) 15%, hsl(31deg 100% 67%) 22%, hsl(31deg 100% 58%) 32%, hsl(31deg 100% 50%) 45%, hsl(31deg 100% 58%) 60%, hsl(31deg 100% 67%) 72%, hsl(31deg 100% 75%) 82%, hsl(31deg 100% 83%) 89%, hsl(30deg 100% 92%) 95%, hsl(0deg 0% 100%) 100% ) !important;
   border-radius: 5px !important;
   box-shadow: 0px 0px 2px 1px rgb(255 131 0 / 100%) !important;
   font-size: 16px !important;
   font-weight: 600 !important;
   letter-spacing: 1px !important;
   border-radius: 5px !important;
   padding: 3px 10px 3px 10px !important;
   color: #465055 !important;
   border: 1px solid #fff !important;
}

#label2Datos {
   color: #393939 !important;
   font-weight: 600 !important; 
   font-size: 1.5rem !important; 
   letter-spacing: 1px !important;
   border-radius: 10px !important;
   border: 1px solid rgba(255, 0, 78, 0.3) !important;
   min-width: 370px !important;
   max-width: 370px !important;
   text-align: center !important;
   padding-bottom: 3vh !important;
   background-color: #ffffff !important;
   box-sizing: border-box !important;
   position: absolute;
   left: 50%;
   top: 44.5%;
   transform: translate(-50%, -50%);
}

#lblDoc {
   margin: 3vh 0px 0px 0px !important;
   border-radius: 5px !important;
   padding: 2px 10px !important;
   background: rgba(255, 131, 0, 0.2) !important;
   color: rgb(255, 0, 78) !important;
   border: 1px solid rgba(255, 0, 78, 0.5) !important;
   font-size: 17px !important;
}

#lblCCT {
   font-size: 16px !important;
   font-weight: 600 !important;
   display: grid !important;
   text-align: left !important;
   border-bottom: 1px solid #ff8300 !important;
   border-radius: 5px !important;
   color: #000000 !important;
}

#lblCURP {
   font-size: 16px !important;
   font-weight: 600 !important;
   display: grid !important;
   text-align: left !important;
   border-bottom: 1px solid #ff8300 !important;
   border-radius: 5px !important;
   color: #000000 !important;
}

#lblMATRICULA {
   font-size: 16px !important;
   font-weight: 600 !important;
   display: grid !important;
   text-align: left !important;
   border-bottom: 1px solid #ff8300 !important;
   border-radius: 5px !important;
   color: #000000 !important;
}

#txtCCT, #txtCURP, #txtMATRICULA {
   font-size: 16px !important;
   font-weight: 600 !important;
   display: grid !important;
   text-align: center !important;
   text-decoration: none !important;
   border: none !important;
   border-bottom: 2px dotted #ff004e !important;
   background: transparent !important;
}
#txtCURP {
   text-transform: uppercase !important;
}
span {
   margin-left: 10px !important;
}

#imgLogojalisco {
   height: 100px !important;
   width: 100px !important;
}

#imgUsuario {
   height: 25px !important;
   width: 25px !important;
   padding: 0px !important;
   margin: 0px 0px 0px 10px !important;
   border-radius: 15px !important;
}

#msgError {
   color: #ea2525 !important;
   font-size: 15px !important;
   font-weight: 600 !important;
   border-radius: 8px !important;
   height: 25px !important;
   margin-top: 3vh !important;
   background-color: #ff004e !important;
   color: #ffffff !important;
}

/*
   ==============
   GENERA CAPTCHA
   ==============
*/
#lblCaptcha1, #lblCaptcha2, #lblCaptcha3, #lblCaptcha4, #lblCaptcha5, #lblCaptcha6 {
  font-size: 18px !important;
  padding: 7px 0px 0px 0px !important;
  min-width: 32px !important;
  background: #ffffff;
  border-radius: 5px !important;
  height: 45px !important;
  border: 1px solid rgba(255, 0, 78, 0.3) !important;
  width: 25px !important;
  margin: 0px 0px 0px 0px !important;
  color: #000000;
  font-weight: 600 !important;
}

#letrasCaptcha {
   font-size: 18px !important;
   color: #000000 !important;
   font-weight: 600 !important;
}

#selectNivel {
   font-size: 16px !important;
   border-radius: 40px !important;
   height: auto !important;
   border: 1px solid #fff !important;
   padding: 25px 0px !important;
   margin-top: 3vh !important;
   box-shadow: 0px 0px 2px 0px #827777 !important;
   min-width: 200px !important;
   max-width: 200px !important;
}

#titSelectNivel {
   background: #ff8300 !important;
   padding: 1px 10px 1px 10px !important;
   border: 1px solid #fff !important;
   border-radius: 10px !important;
   font-weight: 600 !important;
   color: #fff !important;
   box-shadow: 0px 0px 1px 1px #ff8300 !important;
}

#lblNiveles {
   font-weight: 600 !important;
   padding: 0px 0px 0px 10px !important;
}

#niveles {
   border-bottom: 2px solid #ff004e !important;
   box-shadow: 0px 0px 5px 0px #fff !important;
   padding: 0px 10px !important;
   border-radius: 5px !important;
   background: #fff !important;
}

#labelInformacion {
   max-height:85vh;
   min-height:auto;
   overflow: auto;
   background: #ffffff !important; 
   height: auto !important;
   font-size: 14px !important;
   font-weight: bold !important;
   color: #393939 !important;
   letter-spacing: 1px !important;
   border-radius: 20px !important;
   box-shadow: 0px 0px 3px 1px #ff8300 !important;
   border: 1px solid rgba(70, 80, 85, 0.1);
   max-width: 370px !important;
   position: absolute;
   left: 50%;
   top: 44.5%;
   transform: translate(-50%, -50%);
   padding: 10px !important;
}

#lblInfoDat {
   font-size: 15px !important;
   font-weight: 600 !important;
   text-align: left !important;
   border-radius: 5px !important;
   color: #000000 !important;
   background: rgba(255,131,0,0.5);
   padding: 2px 5px 2px 5px;
   width: 100% !important;
   box-sizing: border-box !important;
}

#lblInfoX {
   font-size: 14px !important;
   display: inherit !important;
   border-bottom: 2px solid #ff004e !important;
   border-radius: 5px !important;
   padding: 2px 5px 2px 5px !important;
   background: #ffffff !important;
   box-sizing: border-box !important;
}

.btnImprime {
   background-image: url('../media/images/impresora.png') !important;
   background-repeat: no-repeat !important;
   height: auto !important;
   width: auto !important;
   background-size: 35px 40px !important;
   background-position: right !important;
   border-radius: 8px !important;
   padding: 7px 45px 7px 10px !important;
   font-size: 17px !important;
   color: #ffffff !important;
   margin: 2vh 0vh 0vh 0vh !important;
   background-color: #ff8300;
   border: 1px solid #ffffff;
}

#captcha {
   min-width: 200px !important;
   max-width: 250px !important;
}

#marcoBoleta {
   background: #ffffff !important;
   height: auto !important;
   font-size: 14px !important;
   font-weight: bold !important;
   color: #393939 !important;
   letter-spacing: 1px !important;
   border-radius: 15px !important;
   text-align: center !important;
   border: 1px solid rgba(70, 80, 85, 0.2) !important;
   box-shadow: 0px 0px 3px 0px #465055;
}

#lblBoleta
{  
   text-align: left !important;
   display: inherit !important;
   border-bottom: 2px solid #ff8300 !important;
   border-radius: 5px !important;
   padding: 0px 10px 0px 10px !important;
   background: rgba(255, 131, 0, 0.2) !important;
   font-weight: 600 !important;
}

#lblInfoBoleta, #selectBoleta
{  
   text-align: center !important;
   display: inherit !important;
   border-bottom: 2px solid #ff004e !important;
   border-radius: 5px !important;
   padding: 0px 10px 0px 10px !important;
   background: #ffffff !important;
}

#marcoBoletaCalif {
   background: linear-gradient(#fff,70%, #ddd) !important; 
   height: auto !important;
   font-size: 14px !important;
   font-weight: bold !important;
   color: #393939 !important;
   letter-spacing: 1px !important;
   border-radius: 10px !important;
   text-align: center !important;
   border: 1px solid rgba(70, 80, 85, 0.2) !important;
   box-shadow: 0px 0px 3px 0px #465055;
}

#lblTitMat
{  
   border-bottom: 1px solid #ff8300 !important;
   border-radius: 5px 5px 0px 0px !important;
   background: rgb(255, 255, 255) !important;
}

#lblMat
{  
   text-align: left !important;
   display: inherit !important;
   border-bottom: 2px solid #ff8300 !important;
   border-radius: 5px 5px 0px 0px !important;
   background: rgba(255, 131, 0, 0.2) !important;
}

#lblCal
{  
   text-align: center !important;
   display: inherit !important;
   border-bottom: 2px solid #ff004e !important;
   border-radius: 0px 0px 5px 5px !important;
   background: rgba(255, 255, 255, 1) !important;
}

/* ==================== */
/* ESTILO DE CAMPOS QR  */
/* ==================== */

#marcoQR {
   background: linear-gradient(#fff,100%, #ddd) !important; 
   height: auto !important;
   font-size: 14px !important;
   font-weight: bold !important;
   color: #393939 !important;
   letter-spacing: 1px !important;
   text-align: center !important;
   margin-top: 3vh !important;
}

#lblQR {
   background: linear-gradient(300deg, rgba(255, 0, 78, 0.8), rgba(255, 131, 0, 0.5), rgba(255, 0, 78, 0.8));
   background-size: auto;
   background-size: 180% 180%;
   animation: gradient-animation 10s ease infinite;
   font-size: 15px !important;
   font-weight: 600 !important;
   box-shadow: 0px 0px 1px 1px #aaa !important;
   letter-spacing: 1px !important;
   border-radius: 12px !important;
   padding: 2px 15px 2px 15px !important;
   text-align: center !important;
   width: auto !important;
   color: #fff !important;
   border: 1px solid #fff !important;
}


#lblQRLetras {
   background: #ff8300;
   background-size: auto;
   background-size: 180% 180%;
   animation: gradient-animation 10s ease infinite;
   font-size: 15px !important;
   font-weight: 600 !important;
   box-shadow: 0px 0px 1px 1px #aaa !important;
   letter-spacing: 1px !important;
   border-radius: 12px !important;
   padding: 2px 15px 2px 15px !important;
   text-align: center !important;
   width: auto !important;
   color: #fff !important;
   border: 1px solid #fff !important;
}

#lblQR_1 {
   background: #ff8300 !important;
   box-shadow: 0px 0px 3px 1px #ff8300 !important;
   font-weight: 600 !important;
   font-size: 1.2rem !important;
   letter-spacing: 1px !important;
   border-radius: 10px !important;
   padding: 0px 15px !important;
   color: #fff !important;
   border: 2px solid #ffffff !important;
   text-align: center !important;
}

#lblQR_loader_1 {
   background-color: #ffffff !important;
   font-weight: 500 !important;
   border: 1px solid #ff004e !important;
   letter-spacing: 0.5px !important;
   border-radius: 8px !important;
   padding: 3px 15px 3px 15px !important;
   text-align: center !important;
   width: auto !important;
   color: #ff8300 !important;
}
#lblQR_loader_2 {
   background-color: #ffffff !important;
   font-weight: 500 !important;
   border: 1px solid #ff8300 !important;
   letter-spacing: 0.5px !important;
   border-radius: 8px !important;
   padding: 3px 15px 3px 15px !important;
   text-align: center !important;
   width: auto !important;
   color: #ff004e !important;
}

#letrasQR {
   background-color: #ffffff !important;
   font-size: 15px !important;
   font-weight: 700 !important;
   letter-spacing: 4px !important;
   color: #393939 !important;
   padding: 0px 10px !important;
   border-radius: 5px !important;
   border: 1px solid #ff004e !important;
}

/* ==================== */
/* LOADER  */
/* ==================== */

#marcoQR > .section_loader
{  
   position: fixed !important;
   left: 0% !important; 
   top: 50% !important;
   /*height: 100%      ;
   width: 100%;*/
   background-color: transparent;
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
}

.loader
{  
   position: relative;
   width: 60px;
   height: 60px;
}

.loader .loader_1
{  
   position: absolute;
   height: 100%;
   width: 100%;
   border: 4.5px solid #ff8300;
   border-left-color: transparent;
   border-bottom: none;
   border-radius: 50%;
   animation: loader_1 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.loader .loader_2
{  
   position: absolute;
   height: 40px;
   width: 40px;
   border: 4.5px solid #ff004e;
   border-top-color: transparent;
   border-right: none;
   border-radius: 50%;
   left: calc(50% - 30%);
   top: calc(50% - 30%);
   animation: loader_2 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

@keyframes loader_1
{  
   0%{
      transform: rotate(0deg);
   }
   100%{
      transform: rotate(360deg);
   }
}

@keyframes loader_2
{  
   0%{
      transform: rotate(0deg);
   }
   100%{
      transform: rotate(-360deg);
   }
}

#siged {
   background: #611232;
   height: 34px;
   border-radius: 5px;
   letter-spacing: 0.8px;
   font-weight: bold;
   font-family: Times; font-size: 17px;
   border: 3px solid #fff;
   text-align: center;
   box-shadow: 0px 0px 2px 2px #235b4e;
   color: #a57f2c !important;
   padding-top: 3px !important;
}

#siged:hover{
   background: #a57f2c !important;
   border: 2px solid #ffffff !important;
   color: #235b4e !important;
   box-shadow: 0px 0px 2px 2px #611232;
}

/*==================================*/
/* POPUP BOTONES REGRESAR E INICIO  */
/*==================================*/

button .PopUpBack, .PopUpHome {
   visibility: hidden;
   width: 90px;
   background: linear-gradient(300deg, rgba(255, 0, 78, 0.6), rgba(255, 131, 0, 0.3), rgba(255, 0, 78, 0.6));
   background-size: auto;
   background-size: 180% 180%;
   animation: gradient-animation 10s ease infinite;
   color: #514e4e;
   text-align: center;
   border-radius: 6px;
   padding: 3px 10px;
   letter-spacing: 1px;
   border: 1px solid #ff8300 !important;
}
button:hover .PopUpBack {
   visibility: visible;
   margin: 0px 0px 0px -95px;
}
button:hover .PopUpHome {
   visibility: visible;
   margin: 0px 0px 0px 45px;
}