:root {
    --color-0: #faf9f9;
    --color-1: #efefef;
    --color-2: #e5e5e5;
    --color-3: #CBCBCB;
    --color-4: #7f7f7f;
    --color-5: #333333;
    --color-6: #2AB6F4;
    --color-7: #2BA0E2;
    --color-8: #0F8DD3;
    --color-9: #217FBF;
    --color-10: #033b61;
  }
  
  * {	font-family: 'Open Sans', sans-serif;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

@media print {
   @page {
     margin-left: 0.8in;
     margin-right: 0.8in;
     margin-top: 0;
     margin-bottom: 0;
   }
}

/* --------------------- LOGIN ------------------*/

.dark-bg {
    background-color: var(--color-5);
    font-size: 13px;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}
.dark-bg h1, .dark-bg h2, .dark-bg h3 { margin: 0; }
.dark-bg h2 { font-size: 1.6em; }
.dark-bg h3 {
	color: var(--color-4);
	font-size: 1.4em;
}
.dark-bg ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
} 
.dark-bg a:hover { text-decoration: none; }
.centec-content-widget {
	border-radius: 10px;
	padding: 30px;	
	position: relative;
	margin: 10px;

 	box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);
    width:60%;
}
.centec-content-widget.no-padding {	padding: 0; }
.fa-times {
	border-radius: 15px;
  	color: var(--color-0);
  	cursor: pointer;
	padding: 4px 5px;
  	position: absolute;
  	top: 15px;
  	right: 15px;
  	z-index: 100;
  	transition: all 0.3s ease;
}

.centec-login-widget { 
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px;
}
.centec-login-widget .square {
	width: 18px;
	height: 18px;
}
.centec-login-widget header { margin-bottom: 40px; }
.centec-login-widget h1 {
	display: inline-block;
	font-size: 1.8em;
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
}

.white-bg {	background-color: var(--color-0); }
.white-bg .fa-times { background-color: var(--color-1); }
.white-bg .fa-times:hover {	background: var(var(--color-6)); }

.logo-color img{
	width: 220px;
	display: inline-block;
	vertical-align: middle;
}
@media screen and (max-width: 767px) {
    .centec-content-widget { padding: 15px;	}

}

.centec-login-form .form-group { margin-bottom: 20px;}
.centec-login-form .form-group:last-child {	margin-bottom: 0; }
.input-group-addon { background: none; }
.centec-search-form .input-group {
    width: 100%;
    position: relative;
}
.centec-search-form .input-group .form-control {
	background-color: #18191b;
	border: none;
	border-radius: 10px;
	color: var(--color-2);
	padding-left: 30px;
}
.input-group-addon { background: none; }


.form-control:focus {
    border-color: var(--color-7);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(19,137,95,.075),0 0 8px rgba(15, 141, 211, 0.6);
  }
  .form-control.highlight {
      background-color: var(--color-6);
      color: var(--color-0);
  }
  .form-control.highlight::-webkit-input-placeholder { /* WebKit browsers */
      color:    var(--color-2);
  }
  .form-control.highlight:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
     color:    var(--color-2);
     opacity:  1;
  }
  .form-control.highlight::-moz-placeholder { /* Mozilla Firefox 19+ */
     color:    var(--color-2);
     opacity:  1;
  }
  .form-control.highlight:-ms-input-placeholder { /* Internet Explorer 10+ */
     color:    var(--color-2);
  }

/* input[type="checkbox"] {  display:none; }
input[type="checkbox"] + label span {
    display:inline-block;
    width:26px;
    height:25px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(../images/checkbox-radio-sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(../images/checkbox-radio-sheet.png) -26px top no-repeat;
}

tr input[type="checkbox"] { 
    display:none;
    /*display:inline-block;*/
   /*margin-right:2em;
    z-index:100;
} */



#olvide{
    width:100%;
    text-align:center;
    cursor:pointer;
    margin-bottom:1em;
    margin-top:-0.5em;
}

.email-display {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color-10);
    text-align: center;
    margin-top:-1em;
    margin-bottom:2em;
}

.email-display p{
    font-weight:normal;
    font-size:0.9em;
}
#form-olvide{
    width:90%;
    height:65%;
    border-radius:5px;
    background-color:var(--color-0);
    -webkit-box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.75);

    z-index:10;
    position:absolute;
    top:8em;
    margin-left:-0.5em;
    padding:3em;

}

.boton{
    background-color:var(--color-7);
    color:var(--color-1);
    border-radius:5px;
    border:none;
    padding:0.5em 1em;
    margin:0.5em;
    cursor:pointer;
    transition:background-color 0.3s;
    
}

.boton:hover{
    background-color:var(--color-8);
    color:var(--color-0);
}

#cont-btn-confirmar-pass, #volver-a-login{
    width:60%;
    /*border:solid red 1px;*/
    justify-self:center;
    padding:0;
    text-align:center;
}

#volver-a-login{
    margin-top:1em;
}

#confirmar-contrasena{
    width:100%;
    margin:0;
}

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

#cancelar-olvide{
    width:100%;
    text-align:center;
    cursor:pointer;
    margin-top:1em;
    /*border:solid red 1px;*/

}



.centec-blue-button {
	border-radius: 2px;
	padding: 10px 30px;
	text-transform: uppercase;
	transition: all 0.3s ease;
    background-color: var(--color-7);
	border: none;	
	color: var(--color-0);	
}
.centec-blue-button:hover {	background-color: var(--color-6); }
.width-100 { width: 100%; }
.centec-content-widget {
	border-radius: 10px;
	padding: 30px;	
	position: relative;
	margin: 10px;
 	box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);
}
.centec-register-widget {
	max-width: 450px;
	padding: 15px;
	text-align: center;
}
.centec-register-widget p {	margin-bottom: 0; }
.white-bg {	background-color: var(--color-0); }
.white-bg .fa-times { background-color: var(--color-2); }
.white-bg .fa-times:hover {	background: var(--color-6); }

@media (max-width: 550px) {
    .centec-content-widget .logo-color img {
      max-width: 100%; /* Evita que sobrepase el contenedor */
      height: auto;    /* Mantiene las proporciones */
      display: block;  /* Evita espacios extra (opcional) */
    }
  }
  

  @media (max-width: 400px) {
        
    #redirigir-recuperar{
        font-size:1.2vh;
    }
    #explico-olvide{

        font-size:1.2vh;
    }
    #mostrar-contrasena{
        display:none;
    }


  }
  
  
   

  #cont-pass{
    position:relative;
  }

  #mostrar-contrasena{
    position:absolute;
    right:0.5em;
    z-index:100;
    font-size:1.5em;
    margin-top:0.5em;
    cursor:pointer;
  }

  #mostrar-contrasena:hover{
    color:var(--color-6);
  }