@import url(//fonts.googleapis.com/css?family=Gochi+Hand);

	*{ outline:none;}
	
	:root{
	  --amarillo: #f9ef00;
	  --negro: #222222;
	  --azul: #0527A4;
	  --azul_claro: #2480e5;
	  --azul_marin : #124996;
	  --naranja : #ff510d;
	  --naranja2: #c13905
	}
	html{ font-family: Arial, Helvetica, sans-serif; width:100%; height:100%;  background: var(--azul_claro) ;}
	body{ margin:0; width:100%; height:100%; font-size:0.8em; background:url(../imgs/fondos/fondo_uch.jpg) no-repeat center;  background-attachment:fixed; background-size:100% 100%;}
	
	a{ text-decoration:none}
	b{ color: red; margin-right:3px}
	b img{ vertical-align:middle; margin-right:5px;}

	a img{ vertical-align:middle; margin-right:5px;}
	
	h1,h2,h3,h4,h5,h6{ font-family: 'Varela', sans-serif;}
	
	h1{ color:#0527A4; text-transform:uppercase; letter-spacing:1px; margin:0;}
	h2{ font-family: 'Gochi Hand', cursive; font-size: 3rem; line-height: 52px; font-weight: normal; text-shadow: 1px 2px 1px rgba(0,0,0,0.3); margin: 0; padding: 7px 0 0 0; text-rendering: optimizeSpeed;}
	h2 label{ color:#888}
	h3 img{ width:25px; height:auto; margin-right:10px; vertical-align:middle;}
	h4{  text-transform:uppercase; color:#FF510D; box-sizing:border-box; font-size:16px; clear:both;}
	
	h5 > img{ vertical-align:middle; width:20px; height:20px; margin:5px 0}
	
	span{ display:block;  margin-top:10px; color:#222; font-weight:600;}
	
	.fieldset{ box-sizing:border-box; border-radius:5px; box-shadow: none !important; }
	.legend{ text-transform:uppercase; font-weight:bolder;  font-size:1.2em; width:100%; color:#124996; padding:10px; border-radius:5px 5px 0 0;box-sizing:border-box; background:white;}
	.legend img{ height:15px; width:auto; margin-right:5px; vertical-align:middle}
	.contenido{ padding:10px}
	
	/* ===== SECCIONES DE LA PAGINA ========*/
	#login{ position:fixed; width:100%; top:0%; height:100%; z-index:2; left:0%; opacity:1; transition:all 1.5s ease-in}
	
	#login .input{ display: flex; width:80%}
	#login .input i{  padding: 12px 10px; background:#124996; color:var(--amarillo); min-width: 50px; text-align: center; border-radius:40px 0 0 40px; font-size:2.5rem}
	#login .input input{width: 100%; background:#124996; border:1px solid #124996; color:#D9EF00; padding: 10px; outline: none; border-radius: 0 40px 40px 0; font-size:2rem; text-align:left} 
	#login button{ padding:10px; font-size:2em; margin:0 !important; border-radius:50%; background:var(--amarillo);  color:#2480e5}
	
	#log-in > div{ width:40%; position:fixed; }
	
	#div_logo{ height:20%; top:15%; left:30%; transition:all 1s linear}
	#div_bien{ height:5%; top:35%; left:30%; transition:all 1s linear;}
	#div_user{ height:15%; top:40%; left:30%; transition:all 1.2s linear}
	#div_pass{ height:15%; top:55%; right:30%; transition:all 1.4s linear}
	#div_button{ height:15%; bottom:10%; left:30%; transition:all 1.6s linear} 
	
	#div_logo > img{ height:auto; width:70%; }
	#login .circular{ background: none;}
	
	#logo{ width:15%; text-align:center; height: 100%;}
	#logo img{width:90%; height:auto; vertical-align: middle;}
	#sesion{ width:65%; text-align:center}
	#salir{ width:20%; text-align:center}
	
	header{ width:100%; height:10%;}
	#logo a{ display:block; width:100%; height:100%;}
	
	#data_user{ width:100%}
	#data_user2{ width:100%; display:none}
	#sesion h5{ margin:0; cursor:pointer; color:white}
	#sesion h5 label{ color:#f9ef00; margin:0 5px; vertical-align:middle}
	#sesion h5 i{ vertical-align: middle;}
	
	nav{ width:50%; display:flex; justify-content:flex-end}
	nav > div{ width:25%; height:100%; }
	
	#principal{  width:98%; margin:1%; height:86%; overflow:auto; background:url(../imgs/fondos/fondo_mides_int.jpg) #FFF no-repeat right; background-size:contain; box-sizing:border-box;  box-shadow:0 0 5px rgba(0,0,0,0.5)}
	#sidebar{ height: 90% !important; }
	
	#fondo{ width:100%; height:100%; top:0; left:0; position: fixed; background: rgba(0,0,0,0.5);z-index: 19;}
	#fondo:hover{ cursor:pointer;}
	
	#modal, #modal2{ width: 90%; left: 5%; top: 5%; max-height: 90%; overflow: auto; z-index: 1003; position:fixed; background:#333; border-radius:10px;}
	#modal:before, #modal:after, #modal2:before, #modal2:after{ content: ''; position: absolute; z-index: -2; }
	#modal .contenido, #modal2 .contenido{ background: #FFF no-repeat right;background-size:cover;}
	
	#infos{ position:fixed; top:10px; right:10px; border-radius:50%; z-index:2}
	#infos img{ width:100px; height:100px; background:var(--naranja); cursor:pointer; box-shadow: 0 0 10px #ff510d;}
	.soporte{ height:80%; width:auto }
	
	#banner_a{ display: flex; align-items: center; justify-content: center;}
	
	/*============== CLASES =================== */
	.ten a{text-decoration:none;}
	.ten label{ color:#222;  font-family: 'Gochi Hand', cursive; text-transform:uppercase; letter-spacing:2px; display:block; margin:5px 0;}
	
	.letter_c{ font-family: 'Gochi Hand', cursive;  letter-spacing:2px;}
	
	.box h3{ text-align:center; color:#ED960E; position:relative; top:40%}
	.box { width:60%; height:100px; background:rgba(250,250,250,1); margin:40px auto;}
	
	.effect2{position: relative;}
	.effect2:before, .effect2:after{ z-index: -1; position: absolute; content: ''; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; box-shadow: 0 15px 10px #777; transform: rotate(-3deg);}
	.effect2:after{transform: rotate(3deg); right: 10px;left: auto;}
	
	img[class=denominacion]{height:25px; width:auto;}
	
	.foco2{ color:#FF510D !important; border:1px solid #FF510D !important}
	.imagen_item{ padding:3px; border-radius:40px; background:white; vertical-align:middle; object-fit: contain;}
	.estado_cuenta{ cursor:pointer; font-weight:bold}
	
	.date{ background:#C0F0FF}
	.date h5{margin:0; color:black; color:#444; font-weight:normal}
	.date h3{ font-weight:bolder; font-size:1.6em; margin:10px; color:#444}
	
	.asunto h5,.asunto2 h5{ font-weight:bolder; font-size:1.2em; margin:0; color:#666}
	.asunto h5 label, .asunto2 h5 label{ color:#222; }
	
	.read_message{ cursor:pointer}
	.contenido_mensaje{ background:#C9F1F1 !important; box-shadow:inset 0px 0px 10px rgba(0,0,0,0.2);}
	.contenido_mensaje td{padding:20px !important; }
	
	.total_registros{ text-align:left; margin-top:10px; font-weight:bolder; color:#999}
	.total_registros label{ color:#FFA33D}
	
	.curso{ background:#FEBF01; color:white; margin-bottom:10px; padding:10px; box-sizing:border-box; border-radius:5px; box-shadow:0 5px 3px rgba(0,0,0,0.5)}
	
	.panel_foco{ background:rgba(0,0,0,0.5); border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,0.2)}
	.panel_foco label{ color:#E0C34A !important}
	
	.label2{ padding:5px 10px; background:#D7FFB0; font-weight:bolder; font-size:14px; border-radius:3px}
	.nota{ color:red;}
	
	/*============== INPUTS =================== */
	.input > i{ background: #2480E5;}
	input{ color:#124996}
	input:focus{ border:1px solid #2480E5}
	button{ color:white; background: linear-gradient(to bottom, #2480E5 0%,#124996 100%); border-radius:5px; border:none !important}
	button:hover{  background:linear-gradient(to bottom, var(--naranja) 0%, var(--naranja2) 100%) !important; color:white !important }
	
	button{margin-top:17px;}
	button img{vertical-align:middle; width:auto; height:15px !important; margin-right:5px}
	button[class=agregar]{ margin:0; color:#222 !important; padding:5px 20px; background: linear-gradient(to bottom,  rgba(0,250,0,1) 0%,rgba(0,200,0,1) 50%,rgba(0,200,0,1) 51%,rgba(0,200,0,1) 100%);}
	button[class=autorizar_insc]{ margin:0; color:#FEFEFE; background: linear-gradient(to bottom,  rgba(0,250,0,1) 0%,rgba(0,200,0,1) 50%,rgba(0,200,0,1) 51%,rgba(0,200,0,1) 100%);}
	
	.modifica_campo{ border:none !important; background:none; width:100%; box-sizing:border-box; }
	.modifica_campo:hover{background:rgba(255,255,153, 0.9); }
	
	input[class=modifica_campo]{ border-bottom:1px solid #DDD !important}
	input[type=image]{ border:none !important; width:20px; height:20px; padding:0;}
	input[type=number]{ box-sizing:border-box; text-align:center;}
	input[type=checkbox]{ width:auto; float:left; vertical-align:middle; margin-right:5px;}
	input[readonly=readonly]{color:#666666;}
	
	input[type=radio]{ width:auto;}
	input[type=radio]{ display:inline !important; float:left; vertical-align:middle}
	input[type=radio] { display:none !important; margin:10px;}
	input[type=radio] + label {  display:inline-block; padding: 5px 0px; box-sizing:border-box;background: linear-gradient(to bottom, #DDD 0%,#AAA 100%); text-align:center; font-size:0.9em; width:100%; color:#444; border:1px outset rgba(140,140,140,0.5); cursor:pointer; font-weight:bold}
	input[type=radio] + label img { vertical-align:middle; width:auto; height:25px; margin-right:5px;}
	input[type=radio]:checked + label { background: linear-gradient(to bottom, #BAE07E 0%, #8DCA2E 100%);  }
	
	.inputWithIcon input{ padding-left:35px;}
	.inputWithIcon{ position:relative; }
	.inputWithIcon.inputIconBg input:focus + i{ color:#222; background-color:#E0C34A;}  
	.inputWithIcon input:focus + i{ color:#E0C34A;}
	.inputWithIcon i{ position:absolute; left:0; top:5px; padding:8px; color:#222; transition:.3s;}
	.inputWithIcon.inputIconBg i{ background-color:#aaa; color:#fff; padding:9px 4px; border-radius:4px 0 0 4px;}
	
	#login .inputWithIcon i{ top:10px;}
	
	
	
	/*============== ESTILOS DEL BOTON DE DESCARGA EXCEL =================== */
	#table_upper td{ text-transform: uppercase;}
	
	/*============== ESTILOS DE LA PAGINACION =================== */
	.paginate_button{ padding:5px; border:1px solid #0F79B5; color:#0F79B5; margin:2px; cursor:pointer; background:#EFEFEF }
	.dataTables_paginate{ padding:10px; text-align:center}
	.dataTables_paginate span{ display:inline !important; }
	
	.tabla_dinamica tr td:first-child, .id{ text-align:center; font-weight:bolder; color:#680909}
	.paginacion input{ }
	
	/*============== ESTILOS DE LAS LISTAS AUTOCOMPLETE =================== */
	.listas_autocomplete{ margin:0; padding:0; position:relative; box-shadow:0px 10px 10px rgba(0,0,0,0.2); z-index:3; width:95%;  border-radius: 0 0 10px 10px}
	.listas_autocomplete li{ overflow:hidden; color:black; background:white; padding:5px 10px; list-style:none; cursor:pointer; font-size:10px; border-bottom:1px solid #DDD; font-weight:bolder;}
	.listas_autocomplete li:last-child{border-bottom:none; border-radius: 0 0 10px 10px}
	.listas_autocomplete li:nth-child(odd){background:white}
	.listas_autocomplete li:nth-child(even){background:#F3F3F3}
	.listas_autocomplete li:hover{ color:white; background:#FF484B !important; box-shadow:inset 0 0 5px rgba(0,0,0,0.5);}
	.listas_autocomplete strong{float:right; color:#00C}
	
	
	#resumen_ce > div{  box-sizing:border-box; padding:5px 10px; width: 100%; box-shadow:0 3px 8px rgba(0,0,0,0.45); border-radius:10px;}
	#resumen_ce img{ width:90%; height:auto}
	#resumen_ce h1{ color:white; font-weight:bolder; font-size:3em; margin:0}
	#resumen_ce h3{ color:white; text-transform:uppercase; }
	#resumen_ce > div:nth-child(1){ background:#F7BA00;}
	#resumen_ce > div:nth-child(2){ background:#FD5CFC;}
	#resumen_ce > div:nth-child(3){ background:#7496E5;}
	#resumen_ce > div:nth-child(4){ background:#78E058;}
	
	#accesos_areas{ width:100%;}
	#accesos_areas > div{ width:100%; box-sizing:border-box;}
	#accesos_areas a{  box-sizing:border-box; padding:20px; text-decoration:none; box-shadow:0 3px 8px rgba(0,0,0,0.45);  border-radius:10px}
	#accesos_areas img{ width:auto; height:100px}
	
	#accesos_areas a:nth-child(1){ background:#24AD1E;}
	#accesos_areas a:nth-child(2){ background:#FFB90A;}
	#accesos_areas a:nth-child(3){ background:#4C38FF;}
	#accesos_areas a:nth-child(4){ background:#04a370;}
	#accesos_areas a:nth-child(5){ background:#333;}
	#accesos_areas h1{ color:white; text-transform:uppercase; font-size:2rem}
	
	
	.menu_form a{ display:inline-block; text-decoration:none; font-weight: bolder;; padding:10px; text-align:right; color:#333; border:1px solid #333; border-radius:10px; margin-left: 5px;}
	
	footer{ position:fixed; width:100%; bottom:0; text-align:center; color:white; padding:20px 0; opacity:0; transition:all 1s ease-in}
	
	div.avatar { height: 150px; width: 150px; background-repeat: no-repeat; background-position: 50%; border-radius: 50%; background-size: 100% auto;}
	
	#hijos { width:70%; margin-left:15%; }
	#hijos > div{ box-sizing:border-box; margin:15px 0; background:#333; width:100%; padding:5px 15px; color:#FFF;}
	#hijos h1{ color:white; justify-content:flex-end;}
	#hijos a { color:white;}
	#hijos a img{  vertical-align:middle; width:10px; height:10px;}
	#hijos .imagen_curso{ width:75px; height:75px;}
	#hijos .cursos { background:#EEE; padding:10px;}
	#hijos .cursos >div{ box-sizing:border-box; margin:10px; padding:10px; box-shadow:-2px 2px 4px rgba(0,0,0,0.5)}
	
	#hijos .button_h{ display: block; margin: 10px 0; background:#666; font-size:1.3rem; border-radius:6px; padding:10px; box-sizing:border-box; text-align:center}

	#cursos_alumno{ display: grid; grid-template-columns: repeat(2,1fr); gap:20px}
	#cursos_alumno > div{ width:100%; box-sizing:border-box; background:#ED9B00; display:inline-block; padding:10px 15px; color:#FFF; transition: all 0.3s ease-in; border-radius:10px }
	#cursos_alumno > div:hover{ transform: scale(1.05); transition: all 0.4s ease-out; box-shadow: 0 5px 5px rgba(0,0,0,0.5);}
	#cursos_alumno h1{ color:white; justify-content:flex-end}
	#cursos_alumno h2{ color:white; font-size:1.8em; line-height:25px;}
	#cursos_alumno h2 img{ vertical-align:middle; width:80px; height:80px; margin-right:10px}
	#cursos_alumno h3 img{ height:60px; width:auto}
	#cursos_alumno h5{ margin:10px 0}
	#cursos_alumno a { color:white;}
	#cursos_alumno a img{  vertical-align:middle; width:10px; height:10px;}
	#cursos_alumno .imagen_curso{ width:75px; height:75px;}
	
	.cont_noticia{margin:10px 0; padding:10px; }
	.cont_noticia h3{ text-transform:uppercase; text-align:left}
	.cont_noticia h5{ margin:0; color:#222;}
	
	ul.lista{ padding:0;}
	ul.lista li{ background:#FFBA27; margin-bottom:5px; padding:10px 5px;}
	.btn-custom{ margin-top: 0px;}
	
	.adjustSize{ width:100%; height:460px;}
	
	#comentarios_foros > div{ background:rgba(228,247,255,0.2);  border-bottom:1px solid rgba(0,0,0,0.3); padding:10px; width:100%; box-sizing:boder-box}
	.mt-10{margin-top: 10px !important;}
	.padding-none{padding: 0px !important;}
	
	.monto_pago, .monto_pago:hover{ text-align:center; text-transform:uppercase; font-weight:600; font-size:36px; padding:5px 10px 5px 20px; transition:all 0.3s linear;}
	.monto_pago:focus{  color:#409C00; transition:all 0.3s linear;}
		
	.smallh2{ font-size:2em !important; padding:0; margin:0; text-shadow:none}
	.calificaciones{  font-size:2em; font-weight:bolder; text-align:center; width:100px; border:none; background:none}
	.totales{ font-weight:bold;  background:#86CA43;  white-space: nowrap; text-align:right}
	.color-brown{ color: #482626;}
	.precios{ font-weight:bold; border:1px solid #060; color:#060;  white-space:nowrap; text-align:right}
	
	.pdf { background-image: linear-gradient(to bottom, #ff0000, #d10b32); border-radius: 28px;font-family: Arial;color: #ffffff !important;font-size: 12px;padding: 10px 20px 10px 20px; text-decoration: none;}
	.pdf:hover { box-shadow:0 5px 3px rgba(0,0,0,0.5); }
	
	.tooltipMenu{ border: 1px solid #444; background:#FFFDE0; box-shadow:-5px 5px 5px rgba(0,0,0,0.3); padding:5px; border-radius:5px}
	.tooltipMenu a { display:block}
	.tooltipMenu a img{ width:25px; height:25px}
	.tooltipMenu ul{ padding:0; list-style:none;}
	.tooltipMenu ul li a{ text-decoration:none;}
	
	.tooltipMenu ul li:hover{ background:#333;}
	.tooltipMenu ul li:hover a{ color:#DEDEDE; }
	.close_submenu{ position:absolute; right:-10px; top:-10px;}
	
	.precios{ background:#D2FFD7 !important;}
	.deposito{ background:#FDFFC0 !important; color:#CB4A17; cursor:pointer}
	
	#menu_reportes{ border-radius:10px; display:flex; padding:5px; background:rgba(50,50,50,0.8)}
	#menu_reportes div{ margin:0 2px; text-align:center !important; padding:2px 20px; background:white; border-radius:5px;}
	#menu_reportes input{ width:50px; height:50px !important;}
	#menu_reportes h5{ text-align:center !important; margin:2px;}
	.menu_focus{ background:#FFBA27 !important}
	.menu_focus h5{ color:black !important}
	
	#cuentas_pagar tr{ border-bottom: 1px solid rgba(20,20,20,0.4) !important; }
	#cuentas_pagar i{ font-weight:bolder;}
	#cuentas_pagar .cabecera_prov{ border:1px solid #039 !important;  color:#DFDFDF; background:#444 !important; padding:10px;}
	#cuentas_pagar .cabecera_prov:hover{ background:#444 !important;}
	#cuentas_pagar .cabecera_datos td{ font-weight:bolder; background:#CCC;}
	#cuentas_pagar .precios{ border:none !important; font-weight:bolder;}
	#cuentas_pagar .por_pagar{ border:none !important; font-weight:bolder; background-image: linear-gradient(to bottom, #ff0000, #d10b32); color:white; font-size:1.2em; padding:10px; text-align:right}
	#cuentas_pagar .pendientes{ color:red; font-weight:bold; text-align:right}
	#cuentas_pagar h4{ margin:0}
	
	
	.img_adjuntar{ width: 30px; height: 30px; vertical-align: middle;}
	
	
	#menu_pedido, #totales{ background:#F9FFB5; border-radius:0 0 10px 10px; z-index:29000; width:20%; top:17%; right:0%; position:fixed; padding:0 1% 1% 1%; box-shadow:0 0 10px rgba(0,0,0,0.5); display:block}
	#pie_tabla{ background:none !important; border:none !important}
	#pie_tabla td[class=precios]{ text-align:right; color:#090; font-size:1.2em; border:1px solid #090; border-top:none; white-space:nowrap; padding:5px 10px;}
	#pie_tabla:hover{box-shadow:none !important; background:none !important;}
	
	.nota,
	.m_red,
	.m_blue,
	.m_yellow,
	.m_green{
		padding:5px 10px;color:#333;}
		
	.nota, .m_red{ background:#FFB6B6; border:1px solid #A00;}
	.m_blue{ background:#B6DFFF; border:1px solid #84A4FF;}
	.m_yellow{ background:#FFFDCF; border:1px solid #F9DD23;}
	.m_green{ background:#A0FFB9; border:1px solid #63DA82;}
	
	
	.tareas{}
	.tareas .div_row{ margin:20px 0;}
	.tareas h2{ font-size:2em; text-shadow:none}
	.tareas .titulo{ display:flex; justify-content:space-between; align-items:baseline}
	.tareas .mensaje{ background:#feffd3; font-size:1.5em; padding:20px; box-shadow:inset 0px 0px 5px rgba(0,0,0,0.4); border-radius:10px}
	
	.calendar{ font-size:1.5rem;}
	.calendar tr{ background:none !important}
	.calendar tr td{ border: 1px solid #ddd;}
	.calendar .calendar-day-head{ background:var(--naranja); color:white; text-align:center; border:1px solid #ddd; height:50px}
	
	.calendar-day{
		padding: 5px;
		text-align:center;
		height:50px;
	}
	.calendar-day-head{
		background: #ddd;
	}
	.actual{ background:#ffffd6;}
	.ver_tareas{ cursor:pointer}

	.celdas tr{ background: none !important}
	.celdas tr{ border:1px solid rgba(100,100,100,0.3);}
	
	#detalle_curso_panel > figure{ width:100%; display:inline-block; margin:2% 0.5%; box-sizing:border-box;  background:var(--azul_marin);  box-shadow: 0 2px 3px rgba(0,0,0,0.7);  padding:10px; border-radius:10px;}
	#detalle_curso_panel > figure > a{ width:100%; color:#FFF}
	#detalle_curso_panel > figure > a > div{ width:100%;}
	#detalle_curso_panel h3{ text-align:left; text-transform:uppercase; color:var(--amarillo); font-size:1.5em; margin:0 0 10px 0}
	
	
	#detalle_curso_panel2 > figure{ margin:10px; box-sizing:border-box; background:url(../imgs/fondos/fondo_2.jpg); background-size:cover; padding:10px; border-radius:5px}
	#detalle_curso_panel2 > figure > a{ width:100%; color:#FFF}
	#detalle_curso_panel2 > figure > a > div{ width:100%;}
	#detalle_curso_panel2 h3{ text-align:left; text-transform:uppercase; color:#e7b718; font-size:1.5em; margin:0 0 10px 0}
	
	.etiqueta{ width:100%; display:flex; padding:10px;  box-sizing:border-box; color:#333;}
	.w10{ width:10%}
	.w20{ width:20%}
	.w30{ width:30%}
	.w40{ width:40%}
	.w50{ width:50%}
	.w60{ width:60%}
	.w70{ width:70%;}
	.w80{ width:80%;}
	.w90{ width:90%}
	.w100{ width:100%}
	
	.w30 img{ height:80px; width:auto}
	.rounder{ background:var(--naranja)}
	
	i img{ vertical-align:middle; margin-right:10px}
	
	.img_banner{ background:#e9e9e9; text-align:center;}
	.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
	.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
	.percent { position:absolute; display:inline-block; top:3px; left:48%; }
	
	 .cabecera{ text-align:left; display:inline-block; background:#444; color:#FFF; padding:5px 20px; border-radius:5px 5px 0 0; margin:0; margin-top:10px}
	
	#ramas{ height:100%; width:100%;}
	#ramas div{ text-align:center; float:left; width:48%; margin:0.5% 1%; height:22%;}
	#ramas a{ height:100%; width:100%; background:#333; vertical-align:middle }
	#ramas span{ margin:0; color:#EEE; font-size:2.5em; text-transform:uppercase}
	
	
	.table_grid td{ border:1px solid rgba(0,0,0,0.4) !important;}
	
	#menu_formatos{}
	#menu_formatos > div{ margin:60px 0}
	#menu_formatos a{ background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%); padding: 50px 20px; box-sizing: border-box; border-radius:10px}
	#menu_formatos a:hover{ box-shadow:0 0 10px rgba(0,0,0,0.5)}
	#menu_formatos i{ font-size: 3em; color:#222;}
	#menu_formatos h1{ color:#222;}
	
	.eye{ border-radius: 0 5px 5px 0}

	.lista_materias{ padding:0}
	.lista_materias li{ margin:10px 0; border-radius:10px; font-weight:bold; padding:5px; box-sizing:border-box}
	.lista_materias img{ vertical-align:middle; width:50px; height:50px }
	
	.div_curso{ border-radius:10px; box-shadow:0 6px 10px rgba(0,0,0,0.4); padding:10px; box-sizing:border-box; background:url(../imgs/fondos/fondo.png); background-position: right; background-size:cover; transition:all 0.3s linear;}
	.div_curso:hover{ transition:all 0.3s linear}

	.ver_mides{height:25px; width:25px; margin:0}

	input[type=color]{ padding:0}

	.label__checkbox { display: none;}
	.label__check {
	  border-radius: 50%;
	  border: 5px solid rgba(0,0,0,0.1);
	  background: white;
	  vertical-align: middle;
	  width: 2em;
	  height: 2em;
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  transition: border .3s ease;
	  
	  i.icon {
		opacity: 0.2;
		font-size: ~'calc(1rem + 1vw)';
		color: transparent;
		transition: opacity .3s .1s ease;
		-webkit-text-stroke: 3px rgba(0,0,0,.5);
	  }
	  
	  &:hover {border: 5px solid rgba(0,0,0,0.2);}
	}
	
	.label span{ margin-top:0;}
	.label__checkbox:checked + .label__text .label__check {
	  animation: check .5s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards;
	  .icon {
		opacity: 1;
		transform: scale(0);
		color: white;
		-webkit-text-stroke: 0;
		animation: icon .3s cubic-bezier(1.000, 0.008, 0.565, 1.650) .1s 1 forwards;
	  }
	}
	
	@keyframes icon {
	  from { opacity: 0; transform: scale(0.3);}
	  to { opacity: 1; transform: scale(1)}
	}
	
	@keyframes check {
	  0% {}
	  10% { opacity: 0.1; background: rgba(0,0,0,0.2);}
	  12% { opacity: 0.4; background: rgba(0,0,0,0.1);}
	  50% { background: #00d478; opacity: 0.6; border: 5px solid #00d478;}
	  100% { background: #00d478; opacity: 1;border: 5px solid #00d478;}
	}