@font-face {
	font-family: 'Poppins-bold';
	font-style: italic;
	font-weight: 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xVFteOcEg.woff2) format('woff2');
	unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }
  /* latin-ext */
  @font-face {
	font-family: 'Poppins-bold';
	font-style: italic;
	font-weight: 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xVGdeOcEg.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: 'Poppins-bold';
	font-style: italic;
	font-weight: 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xVF9eO.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
:root{
    --rotate:rotate(90deg);
    --color-plus:blue;
	--color-bg-calendar: #fff;
    --color-cell: #e3e3e3;
    --color-cell-disabled: #42464959;
}

.flex{display: flex;justify-content: center;align-items: center;}
.flex-justi-start{display: flex;justify-content: flex-start;align-items: center;}
.flex-column-align-start{display: flex;justify-content: center;align-items:flex-start;flex-direction: column;}
.flex-column{display: flex;justify-content: center;align-items: center;flex-direction: column;}
.flex-column-around{display: flex;justify-content: space-around;align-items: center;flex-direction: column;}
.flex-around{display: flex;justify-content: space-around;align-items: center;}
.flex-around-column{display: flex;justify-content: space-around;align-items: center;flex-direction: column;}
.flex-between{display: flex;justify-content: space-between;align-items: center;}
.flex-between-column{display: flex;justify-content: space-between;align-items: center;flex-direction: column;}

body {
	width: 100%;
	font-family: 'Poppins', sans-serif;
	size: 14px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
.poppins-bold{
	font-family: 'Poppins-bold', sans-serif;
}

#load{
    width:100%;
    height:100%;
	margin:0px;
    position:fixed;
    z-index:9999;
	background: rgba(0,0,0,0.25);
}

.homebut { display: none; }
.oculto{display: none;}

#loadbox { width: 100px; height:100px; margin:25% auto; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; overflow:hidden; background:url("/images/loading_apps.gif") no-repeat center center rgba(0,0,0,0.75); }

/* MODAL GENERAL */
.loadcardclass {
	width:100%;
	height:100%;
	top: 0px;
	left: 0px;
	margin:0px;
	position:fixed;
	z-index:9999;
	display:none;
	/* background: rgba(121,45,197,0.90); */
	background-color: rgba(0, 0, 0, 0.7);
}
.modalcard { position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width:1250px; height:90%; z-index:9999; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; overflow:hidden; }

.cardframe { width:100%; height:100%; overflow:hidden; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px;  }
.modalframe { clear:both; width:96%; float:left; height:95%; overflow:hidden; background-color:#FFF; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; }	

.modalframe:has(.modalchico) {
	clear:both; width:60%; height:95%; margin: 0 auto; overflow:hidden; background-color:#FFF; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px;
} 

#tarjeta { opacity: 1; transition: opacity 1s; }
#tarjeta.hide { opacity: 0; } 

/* MODAL VISOR DE IMAGEN */
.loadimgclass {
	width:100%;
	height:100%;
	top: 0px;
	left: 0px;
	margin:0px;
	position:fixed;
	z-index:9999;
	display:none;
	background: rgba(0,0,0,0.50);
}
.modalimg { position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width:850px; height:80%; z-index:9999; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; overflow:hidden; }
.imgframe { width:101%; height:100%; overflow:hidden; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px;  }
.modalimgframe { clear:both; width:96%; float:left; height:95%; overflow:hidden; background-color:#FFF; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; }	

#visorimg { opacity: 1; transition: opacity 1s; }
#visorimg.hide { opacity: 0; } 

p { margin:0px; padding:5px; font-family:Poppins; }
p.menuicon { margin:0px; padding:5px; font-family:Poppins; font-size:18px; }
h1,h2,h3,h4,h5,h6 { margin:0px; padding:20px 10px; }

a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:bold;}

a.whitelink:link{text-decoration:none; color: #FFFFFF;}
a.whitelink:visited{text-decoration:none; color: #FFFFFF;}
a.whitelink:hover{text-decoration:none; color:#FAFAFA;}

a.bluelink:link{text-decoration:none; color: #3333CC;}
a.bluelink:visited{text-decoration:none; color: #3333CC;}
a.bluelink:hover{text-decoration:underline; color:#000000;}

a.blueb:link{text-decoration:bold; color: #3333CC;}
a.blueb:visited{text-decoration:bold; color: #3333CC;}
a.blueb:hover{text-decoration: bold; color:#000000;}


/* CONTAINER PRINCIPAL QUE TIENE 1280 PX ANCHO DESKTOP Y 100% MOBILE*/
#bodygral  { max-width:100%; min-height:100vh; margin:0px; }


/* CONTAINER GENERAL DE DATOS */
.contone  { float:none; width:100%; height: 100%; margin:0px auto; background-color:#FFF; overflow:hidden; }
.conttwo  { float:none; max-width:1280px; width: 100%; min-height: 250px; margin:0px auto; background-color:#FFF; overflow:hidden; }
.cont-noti  { float:none; width:100%; min-height: 250px; margin:0px auto; background-color:#FFF; overflow:hidden; }

/*ENCABEZADO GENERAL DEL SITIO*/
#logoppal { 
	width: 250px;
	margin:25px 0px 25px 0px;
	padding:10px;
}
#logoppalin { height: 60px; margin:5px 10px; }
.userbox { margin-top:10px; }


/* ESTILOS DEL LOGIN */
#human-login-page-container { width: 100%; height: 80vh; }
#divlogin { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; overflow-x: hidden; }
.human-logo-login-wrapper { display: flex; justify-content: start; align-items: center; }
@media (min-width: 1200px) {
	.human-logo-login-wrapper { display: flex; justify-content: center; align-items: center; }
}
.human-logo-login { width: fit-content; color: #0043bc; background-color: #fff; border-radius: 24px; font-size: 30px; font-weight: 600; transition: all .3s ease-out; cursor: pointer; }
.human-logo-login:hover { scale: 1.02; }
.boton-human-login-page { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; }
.separador-blanco { position: absolute; bottom: 10px; background-color: #fff; width: 230px; height: 1px; transition: all .6s ease; }
.boton-human-login-page:hover .separador-blanco {
	translate: -120%;
}
.boton-human-login-page p { padding: 0px ;color: #fff ;text-align: center ;transition: all .2s ease; }
.boton-human-login-page:hover p {
	translate: 0% -5px;
}

.contenedor-login-link { width: 300px; }

#desplegable-crear-cuenta { position: absolute; z-index: 400; top: -500px; width: 300px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.42); border-radius: 15px; background-image: linear-gradient(to bottom, #5289d0, #0043bc); transition: all .6s ease-out; }
#desplegable-crear-cuenta .elemento { width: 100%; padding: 2rem 0rem; border-bottom: 1px solid #fff; }
#desplegable-crear-cuenta .elemento:last-child { border-bottom: none; }
#desplegable-crear-cuenta .elemento h1 { text-align: center; font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 1rem; margin-top: 0px; padding-top: 0px; }
#desplegable-crear-cuenta .boton-solicitar { padding: 3px 22px; border-radius: 20px; box-shadow: 0 6px 6px 0 rgba(36, 36, 36, 0.41); background-color: #008D5C; margin: 0 auto; color: #fff; border: none; transition: all .2s ease; }
#desplegable-crear-cuenta .boton-solicitar:hover { background-color: #008154; }
.desplegar-crear-cuenta { top: 90px !important; }

@media (min-width: 500px) {
	.desplegar-crear-cuenta { top: 10px !important; }
}

.contenedor-login-link:hover .flotante-gratis {
	scale: 1.08;
}


.boton-crear-cuenta { width: fit-content; background-color: #0093ff; padding: 8px 20px; border-radius: 15px; box-shadow: 0 5px 6px 0 rgba(36, 36, 36, 0.41); text-decoration: none; cursor: pointer; transition: all .2s ease; }
.boton-crear-cuenta:hover {
	background-color: rgb(0, 147, 255, .8);
}
.flotante-gratis { position: absolute; width: 55px; height: 55px; border-radius: 50%; background-color: #008D5C; display: flex; justify-content: center; align-items: center; color: #fff; transition: all .2s ease; }
.flotante-gratis p { font-size: 14px; }

#boton-menu-login { cursor: pointer; }

#menu-login { max-width: 340px; position: absolute; padding: 1rem; right: -445px; top: 15px; border-radius: 15px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.42); background-color: #fff; transition: all .6s ease-out; }
@media (min-width: 600px) {
	#menu-login { max-width: 430px; position: absolute; padding: 2.5rem; right: -445px; top: 15px; border-radius: 15px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.42); background-color: #fff; transition: all .6s ease-out; }
}
.opcion-menu-login { display: flex; flex-direction: column ;align-items: center; justify-content: center ;width: 90px; height: 90px; margin: 0 auto; border-radius: 10px; box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.25); background-image: linear-gradient(to bottom, #5289d0, #0043bc); text-decoration: none; cursor: pointer; }
.opcion-menu-login p { font-size: 13px; text-align: center ; color: #ffffff; padding: 0px; margin: 0px; }

.menu-abierto { right: 15px !important; }

#modal-crear-cuenta { position: absolute; top: 0; left: 0; z-index: 3000; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; background-color: rgb(190, 190, 190, .6); backdrop-filter: blur(3px);}
.wrapper-modal-crear-cuenta { max-width: 1300px; width: 95%; padding: 1.5rem .6rem; margin: 2rem auto; border-radius: 15px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.42); background-color: #fff; transition: all .6s ease-out; }
.wrapper-modal-crear-cuenta .servicios { padding: 1rem; padding-bottom: 0px; border-radius: 15px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.42); margin-top: 1.6rem;}
.modal-crear-cuenta-paciente .servicios { width: auto; }
.wrapper-modal-crear-cuenta h2 { color: #0640ab; font-size: 32px; text-align: center; width: 100%; font-weight: 600;}

@media (min-width: 576px) {
	.wrapper-modal-crear-cuenta { max-width: 1300px; width: 80%;; padding: 1.5rem 9rem; margin: 2rem auto; border-radius: 15px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.42); background-color: #fff; transition: all .6s ease-out; }

	.modal-crear-cuenta-paciente .servicios { width: 100%; margin: 0 auto; margin-top: 1rem; }
}

.crear-cuenta-input-email { width: 100%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); border-radius: 10px; }
.crear-cuenta-input-email span { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; font-size: 12px;}
.crear-cuenta-input-email input { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; }

@media (min-width: 576px) {
	.crear-cuenta-input-email { width: 75%; }
	.crear-cuenta-input-email span { font-size: 1rem; }
}

#modal-crear-cuenta .iconos-wrapper { width: 130px; height: 130px; padding: 25px 12px 28px 12px; border-radius: 24px; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3); background-color: #0640ab; }
#modal-crear-cuenta .homologado-msn-modal { position: absolute; bottom: -20px; background-color: #ffffff; border-radius: 20px; padding: 2px 6px; width: 160px; left: -15px; border: 3px solid #0640ab; }
#modal-crear-cuenta .homologado-msn-modal p { font-size: 12px; color: #0640ab; width: 100%; text-align: center; }
#modal-crear-cuenta .iconos-wrapper .icono { max-width: fit-content; margin: 0 auto; margin-bottom: .6rem; }
#modal-crear-cuenta .iconos-wrapper svg { fill: #ffffff; height: 45px; }
#modal-crear-cuenta .descripcion-icono { padding: 0px; font-family: Poppins; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.21; letter-spacing: normal; text-align: center; color: #ffffff; }
@media (min-width: 615px) {
    #modal-crear-cuenta .descripcion-icono { font-family: Poppins; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.21; letter-spacing: normal; text-align: center; color: #ffffff; }
}

#elemento-bonificacion { width: 90%; margin: 0 auto; background-color: #008D5C; padding: 4px 4px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
#elemento-bonificacion p { color: #fff; font-size: 20px; }

@media (min-width: 576px) {
	#elemento-bonificacion { width: 60%; margin: 0 auto; background-color: #008D5C; padding: 4px 4px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
}

#tabla-comparacion-cuentas {
	display: grid;
	grid-template-columns: 3fr 2fr 2fr;
	border-radius: 30px;
}

.tabla-comparacion-cuentas-grid {

}

#ver-mas-info-human { width: fit-content;; margin: 0 auto; margin-top: 4rem; padding: 2px 27px; text-align: center; color: #fff; background-color: #3082d8; border-radius: 12.5px; font-size: 15px; }

#modal-crear-cuenta .input-group-text { width: 35%; }

#modal-crear-cuenta .titulo-principal { font-size: 35px; font-weight: 600; margin-top: 2rem; color: #0640ab; text-align: center; }

#sos-paciente { display: flex; justify-content: center; align-items: center; margin-top: 3rem; width: 100%; gap: 5px; }
#sos-paciente span { font-size: 15px; }
#sos-paciente .linea { height: 2px; background-color: #707070; width: 30px; }

#boton-crear-cuenta-paciente { display: block; width: fit-content; background-color: #c4ddff; margin-top: 10px; padding: 15px; text-align: center; border-radius: 24.5px; box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.22); color: #0640ab; text-decoration: none; }

.texto-azul-human-300 { color: #0640ab }
.texto-azul-human-200 { color: #0043bc }
.texto-azul-human-100 { color: #5289d0 }

.texto-verde-human-300 { color: #008D5C; }

.texto-bold { font-weight: 600; }

#modal-crear-cuenta .footer-text { font-size: 14px; }

@media (min-width: 576px) {
	#modal-crear-cuenta .footer-text { font-size: 20px; }
}

#modal-retorno-login { position: absolute; top: 0; left: 0; z-index: 3000; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; background-color: rgb(215, 215, 215, .4); }
#modal-retorno-login .wrapper-modal-retorno { max-width: 700px; width: 95%; padding: 1.5rem .6rem; margin: 2rem auto; border-radius: 15px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.42); background-color: #fff; transition: all .6s ease-out; }

#plataforma-certificada {
	border-radius: 40px;
	border: 8px solid #008D5C;
	position: relative;
}

#plataforma-certificada h1 {
	font-size: 12px;
}

#plataforma-certificada ul {
	width: fit-content;
}

#plataforma-certificada li {
	font-size: 18px;
	font-weight: 500;
}

#plataforma-certificada small {
	display: block;
	font-size: 14px;
	width: 100%;
	text-align: center;
}

#plataforma-certificada .cartel-gratuito {
	position: absolute;
	top: 14px;
	left: -24px;
	background-color: #008D5C;
	color: #fff;
	rotate: -35deg;
	width: 118px;
	text-align: center;
	clip-path: polygon(15% 0, 85% 0, 100% 100%, 0% 100%);
}

#plataforma-certificada .cartel-gratuito p {
	font-size: 12px;
	padding: 0px;
}

.login-form { position: relative; background-image: linear-gradient(to bottom, #5289d0, #0043bc); padding: 2rem 4.2rem; margin-bottom: 10rem; border-radius: 58px; box-shadow: 0px 2px 70px 0 rgba(0, 0, 0, 0.25); }
@media (min-width: 600px) {
	.login-form { background-image: linear-gradient(to bottom, #5289d0, #0043bc); padding: 2rem 7rem; margin-bottom: 0rem; border-radius: 58px; box-shadow: 0px 2px 70px 0 rgba(0, 0, 0, 0.25); }
}

.login-form .certificado-login { position: absolute; top: -20px; right: -20px; width: 135px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.73)); }
#plataforma-certificada .certificado-login { position: absolute; bottom: -50px; right: -65px ; width: 100px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.73)); }

@media (min-width: 500px) {
	.login-form .certificado-login { position: absolute; top: -20px; right: -20px; width: 220px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.73)); }
	
	#plataforma-certificada .certificado-login { position: absolute; bottom: -25px; right: -140px ; width: 220px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.73)); }

	#plataforma-certificada {
		border-radius: 40px;
		border: 8px solid #008D5C;
		position: relative;
	}
	
	#plataforma-certificada h1 {
		font-size: 20px;
	}
	
	#plataforma-certificada li {
		font-size: 24px;
	}
	
	#plataforma-certificada small {
		display: block;
		font-size: 14px;
		width: 100%;
		text-align: center;
	}
}

.loginline { flat: left; margin: 5px auto; width: 275px; min-height: 40px; font-family:Cuprum, serif; font-size:18px; text-align:center; }
.loginfield { float: left; text-align:right; margin: 0px 2px 5px 0px; width: 200px; min-height: 30px; padding-top:5px; font-family:Cuprum, serif; font-size:24px; color:#DFDFDF; }
.logininput {  float: left; margin: 0px; width: 100%; min-height: 30px; padding-top: 5px; text-align:center;position: relative; }

.linkslogin { position: relative; z-index: 500; width: 100%; margin:0px; overflow:hidden; }
.linksimg { height: 48px; }
.linksitems { float:left; width:33%; padding: 10px 0px; min-height:75px; border-right:#999999 2px solid; cursor:pointer; text-align:center; }
.linksitemsr { float:left; width:33%; padding: 10px 0px; min-height:75px; cursor:pointer; text-align:center; }

.homelinks { float:none; width: 1024px; margin:0px auto; }
.homeitems { float:left; width:90%; padding: 15px 0px; min-height:75px; border-right:#999999 2px solid; cursor:pointer; text-align:center; }


/* ESTILOS DEL HOME DERIVADOR*/
.logohome { width:250px; margin:37.5px auto; } 
.homegrid { width:90%; max-width: 325px;height: 90px; margin:0px auto; font-weight:bold; background: rgb(49,108,198); background: radial-gradient(circle, rgba(49,108,198,1) 0%, rgba(0,67,188,1) 100%); text-align:center; font-size:14px; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; vertical-align:middle; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 	-webkit-box-shadow: 3px 4px 10px -3px rgba(0,0,0,0.75); -moz-box-shadow: 3px 4px 10px -3px rgba(0,0,0,0.75); box-shadow: 3px 4px 10px -3px rgba(0,0,0,0.75);}
.homegrid p { padding: 0; }

.marcador-no-leido {display: flex;align-items: center;justify-content: center;position: absolute;right: 15px;top: 15px;background-color: #e04040;border-radius: 100%;width: 30px;height: 30px;}


/* ESTILOS DE HC */
#hcfoto { width:96px; }
.hccontainer { width:99%; margin:10px auto; min-height:164px; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; vertical-align:middle; box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 10px; overflow:hidden; } 
.hccontainerinside { float: left; width:100%; padding:5px 0px;  background: rgb(4,72,189); background: linear-gradient(180deg, rgba(4,72,189,1) 0%, rgba(62,123,216,1) 100%); color:#FFF; }
.badge-hcver { background-color:#00c782; color:#FFF; padding:4px 10px; font-size:11px; border-radius: 25px; -ms-border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; -khtml-border-radius: 25px; }
.badge-hcadd { background-color:#792dc5; color:#FFF; padding:4px 20px; font-size:11px; border-radius: 25px; -ms-border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; -khtml-border-radius: 25px; }
.badge-hcadd:hover{color:#fff}
.filter-btn { background-color:rgba(20, 153, 0, 0.5); color:#FFF; padding:4px 10px; font-size:15px; border-radius: 25px; -ms-border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; -khtml-border-radius: 25px; }
.EVENBG { float: left; width:100%; min-height: 23px; padding: 5px 2px; font-size:15px; background-color: #ffffff; }
.UNEVENBG { float: left; width:100%; min-height: 23px; padding:5px 2px; font-size:15px; background-color:#f0f0f0; }
.iconHC { padding:2px;color:#0448bd; }
.card-list{
	width:100%; min-height: 23px; padding: 5px 2px; font-size:15px;
}
.card-list:nth-child(even){
	background-color: #ffffff;
}
.card-list:nth-child(odd){
	background-color: #f0f0f0;
}

.SEPARABG { float: left; width:100%; min-height: 23px; margin:3px 0px; padding:5px 30px; font-size:15px; background-color:#5289d0; color:#FFF; }

.normalvalue { border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; }
.overvalue { border:#F00 1px solid; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; padding:1px 3px; }
.midvalue{ border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; font-weight: 800;}

/* ESTILO DE MI USUARIO */
#photoid { position:relative; width:200px; height:200px; margin: 10px auto; } 
#userphotobar { width:100%; height:100%; }


.styleEx{
	width: 97%;
}
.btn-usuario{
	border: #792dc5 solid 3px;
	border-radius: 14px;
	font-weight: 600;
	font-size: 18px;
	margin: 10px 0px 10px 0px;
}
#preview-documentos {
	border-radius: 50px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.titulo-preview-documentos {
	padding: .5rem;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	background-color: #e9f3ff;
	font-weight: bold;
}
.titulo-preview-documentos p {
	text-align: center;
}
.caja-preview-documentos {
	display: flex;
	flex-direction: column;
	padding: 2rem;
}
.caja-preview-documentos p {
	text-align: center;
	margin-bottom: 1rem;
}
.caja-preview-documentos input {
	border-radius: 50px;
  	background-color: #0043bc;
	margin: 0 auto;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
@media (max-width: 576px) {
	.caja-preview-documentos {
		padding: 1rem;
		padding-bottom: 1.4rem;
	}

	.boton-documentos {
		font-size: 14px;
	}
}


.cruz-cerrar {
	border-radius: 50%;
	background-color: #fff;
	border: 3px solid #707070;
	padding: 4px;
}/*
.grid-cargar-imagenes .col-sm-4 {
	width: 30%;
}*/
.card-cargar-imagenes {
	border-radius: 15px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.titulo-cargar-imagenes {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	background-color: #3082d8;
}
.titulo-cargar-imagenes p {
	color: #ffffff;
  	font-size: 20px;
}
.container-cargar-imagenes {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	padding: 1rem;
	height: 100%;
	padding-bottom: 50px;
	gap: 2rem;
}
.wrapper-cargar-imagenes {
	border-radius: 58px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	padding: 1rem;
	width: 70%;
}
.wrapper-cargar-imagenes h3 {
	color: #5042b4;
	padding: 10px 5px;
}
.card-cargar-imagenes .btn-usuario {
	border-color: #5042b4;
	color: #5042b4;
}
.imagen-seleccionada {
	display: none;
	width: 40%;
	max-height: 140px;
	margin: 0 auto;
	border-radius: 5px;
	object-fit: contain;
}
.boton-eliminar-imagen-usercontwo {
	border: 1px solid #ff4447;
	border-radius: 50%;
	padding: 2px;
	color: #ff4447;
	cursor: pointer;
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 200, 'opsz' 24;
}

.eye-login{ position: absolute;right: 3px;top: 10px; }
.eye-registro{
	position: absolute;
	right: 17px;
	top: 17px;
}

/* SPINNER */
.spinner {
	margin: 100px auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;
  }
  
  .spinner > div {
	background-color: #333;
	height: 100%;
	width: 6px;
	display: inline-block;
	
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }
  
  .spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
  }
  
  .spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
  }
  
  .spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
  }
  
  .spinner .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
  }
  
  @-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
	20% { -webkit-transform: scaleY(1.0) }
  }
  
  @keyframes sk-stretchdelay {
	0%, 40%, 100% { 
	  transform: scaleY(0.4);
	  -webkit-transform: scaleY(0.4);
	}  20% { 
	  transform: scaleY(1.0);
	  -webkit-transform: scaleY(1.0);
	}
  }
  .info-relevante-icon{
	  width:17px; height: 17px;margin: 0 0 0 5px;
  }
  .punto-rojo{
	  width: 10px;height: 10px;border-radius: 15px;background-color: #f00;display: inline-block;
  }
  /* Scrollbar */
  *::-webkit-scrollbar {
	  width: 20px !important;
	  height: 20px !important;
	  background-color: #d3d2d2 !important;
  }
  
  
  *::-webkit-scrollbar-thumb {
	  background-color: #827c7e !important;
	  border-radius: 40px !important;
	  border: 4px solid #d3d2d2 !important;
  }
  
  .oblig {
	  border: none;
	  border-bottom: 2px solid red !important;
	  background:none;
  }
  .circulo-rojo-notificacion{ position: absolute; top: -9px; right:-9px;background-color:#f00;border-radius:50%;width:20px;height:20px; border:1px solid #fff; }
  .container-titulo-gradient {width:100%; border-top: #FFF 2px solid; background-image: linear-gradient(to bottom, #0640ab 24%, rgba(255, 255, 255, 0));}
  .titulo-buscadores{ text-align:center; color:#FFF; padding:10px 0px; font-size: 19px;}
  .input-buscadores{ border:#CCC solid 1px; background-color:#f0f0f0; font-size:14px;border-radius: 0.25rem;padding: 10px;outline: none;font-size: 22px;}
  .input-buscadores::placeholder{font-size: 16px;}
  .txt-error{ background-color: #f00; color: #fff;}

@media only screen and ( max-width: 1299px ) {

	.contone  { float:none; width:100%; margin:0px; min-height: 100%; background-color:#FFF; }
	.conttwo  { float:none; width:100%; margin:0px auto; min-height: 250px; background-color:#FFF; }

	/* MODAL GENERAL */
	.modalcard { width:1024px; }


}


@media only screen and ( max-width: 976px ) {

	.homebut {
	  display: block;
	  border: none;
	  color: white;
	  padding: 8px 10px;
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	  font-family:"Courier New", Courier, monospace;
	  font-size: 16px;
	  margin: 4px 2px;
	  cursor: pointer;
	  position:fixed;
	  bottom:14px;
	  right: 14px;
	  margin: 2px;
	  border-radius: 100%;
	}

	#logoppal { 
		width: 200px;
		margin:25px 0px 25px 0px; 
		padding:10px;
	}
	.userbox { margin-top:5px; }
	
	.contone  { float:left; width:100%; margin:0px; min-height: 100%; background-color:#FFF; }
	.conttwo  { float:none; width:100%; margin:0px; min-height: 250px; background-color:#FFF; }

	/* MODAL GENERAL */
	.modalcard { width:100%; height:100%; border-radius: 0px; -ms-border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px;  }
	.modalframe { clear:both; width:95%; float:none; height:93%; margin: 0px auto; background-color:#FFF; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; }	

	/* MODAL IMAGENES */
	.modalimg { width:100%; height:100%; border-radius: 0px; -ms-border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px;  }
	.modalimgframe { clear:both; width:95%; float:none; height:93%; margin: 0px auto; background-color:#FFF; border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; }	

	/* ESTILO DE MI USUARIO */
	#photoid { float:none; width:150px; height:150px; margin: 5px auto; } 


}

@media only screen and ( max-width: 767px ) {


	.bodygral  { width: 100%; }
	
	p.menuicon { font-size:14px; }

	#logoppal {
		width: 200px;
		margin:25px 0px 25px 0px; 
		padding:10px;
	}
	#logoppalin { height: 40px; margin:5px; }
	.userbox { margin-top:5px; }

	#divlogin { width: 100%; }
	.linkslogin { position:relative; width:100%; overflow:hidden; }
	
	.loginline { width: 180px; min-height: 30px; padding-top:10px; }
	.loginfield { float:left; text-align:right; margin: 3px 2px 3px 0px; width: 40%; min-height: 30px; padding-top:5px; font-family:'Raleway', serif; font-size:20px; color:#DFDFDF; }
	.logininput { float: left; margin: 6px 0px; width: 100%; min-height: 30px; padding-top:0px; }
	
	.linksimg { height: 36px; }
	.linksitems { width:100%; padding: 15px 0px 10px 25px; min-height:45px; border-right:#FFF 0px solid; border-bottom:#FFF 1px solid; text-align:left; }
	.linksitemsr { width:100%; padding: 15px 0px 10px 25px; min-height:45px; border-right:#FFF 0px solid; text-align:left; }

	.homelinks { float:none; width: 100%; margin:0px auto; }
	.homeitems { float:left; width:100%; padding: 15px 0px; min-height:75px; border-right:#999999 2px solid; cursor:pointer; text-align:center; }

	/* ESTILOS DEL HOME DERIVADOR*/
	.logohome { width:0px; display:none; } 

	/* ESTILOS DE HC */
	#hcfoto { width:96px; }
	.botonerasuccess{ float:none; width:60%; margin:5px auto; padding:5px 10px; clear:both; }
	
	.personaverleft { width:100%; border-right:#cccccc solid 0px; }
	.personaverright { width:100%; }


	/* MODAL GENERAL */
	a.botonerahc:link{ display:none;  }
	a.botonerahc:visited{ display:none; }
	a.botonerahc:hover{ display:none; }
	.botonerahcspan { display:block; margin: 12px auto; }


	.styleEx{
		width: 100%;
	}

	.firmar{
		width: 100%;
	}
	
	#mail{
		font-size: 12px;
	}
	.eye-login{ top: 5px; }

	.input-buscadores{ width: 80%;}
}

@media only screen and ( max-width: 450px ) {
	#logoppal { 
		width: 120px;
		margin: 10px 0px 10px 0px;
		padding: 4px;
	}
}

.font-italic {
	font-style: italic;
}

.lista-hc-desplegada {
	position: absolute;
	width: 96%;
}

.rotar-180 {
	transition: all .5s ease;
	transform: rotate(180deg);
}

.rotar-0 {
	transition: all .5s ease;
	transform: rotate(0deg);
}

.contenedor-60 {
	width: 60%;
	max-width: 75rem;
	margin: 0 auto;
}

.contenedor-70 {
	width: 70%;
	max-width: 75rem;
	margin: 0 auto;
}

.subrayado {
	text-decoration: underline;
}

.pregunta-frecuente {
	font-size: 18px;
	font-weight: 600;
	text-decoration: underline;
	background-color: #d9d9d9;
	margin-bottom: 15px
}

.borde-azul-home {
	color:#0640ab;
	border: 3px solid #0640ab;
	border-radius: 10px;
	-webkit-box-shadow: 3px 4px 10px -3px rgba(0,0,0,0.75);
	-moz-box-shadow: 3px 4px 10px -3px rgba(0,0,0,0.75);
	box-shadow: 3px 4px 10px -3px rgba(0,0,0,0.75);
	font-size: 16px;
}

.input-shadow-border {
	box-shadow: 0 0 10px 0 rgba(86, 86, 86, 0.52);
	border: none;
	border-radius: 10px;
}

#fecha-creacion-gestion {
	width: 100%;
}

@media (min-width: 756px) {
	#fecha-creacion-gestion {
		width: 50%;
	}	
}

.boton-eliminar-imagen-user {
	color: red;
	cursor: pointer;
}

.caracteristicaImagen {
	font-family: 'Noto Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Android Emoji', sans-serif;
}

.contenedor-titulo-volver {
	display: flex;
	flex-direction: column;
	justify-content: unset;
	align-items: start;
	padding-bottom: 14px;
}
@media (min-width: 576px) {
	.contenedor-titulo-volver {
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 5px;
	}
}

.contenedor-titulo-hc {
	display: flex;
	align-items: center;
	margin:0px;
	padding: 3px 0px 3px 15px;
}
@media (min-width: 576px) {
	.contenedor-titulo-hc {
		margin: 0px;
		padding: 3px 0px 3px 25px;
	}
}


@media (max-width: 576px) {
	.contenedor-boton-volver {
		align-self: flex-end;
	}
}
