*{ box-sizing: border-box; }
html{ font-size: 0.625em; }
a{ text-decoration: none; color: #67AD21; }

body{ font: normal 1em/1em Verdana; padding-bottom: 20px; margin: 0; padding: 0; }
main, header{ padding: 5px 20px; }

header{ background: #333; position: fixed; top: 0; left: 0; width: 100%; padding: 1em; z-index: 2; }
header h1{ font: bold italic 3em/1em Georgia; margin: 0; padding: 0; color: #69C; }
header p{ text-align: right; padding: 0 5px 0 0; margin: 0; color: white; font: 1.2em/1em Verdana; }
header > *{ display: inline-block; width: 50%;}

table{ border-collapse: collapse; background: white; width: 70%; border: 2px solid #000;  }
table td, table th{ padding: 3px 9px; border-bottom-color:black; border-bottom: 1px solid #999; }
table td{ background: #FFF; }
table tr:nth-child(odd) td{ background:#CCC; }
table tr.highlight td{ background: #d5fcbb; }
table tr:last-child td{ border-bottom-color: #000; }
table th{ background:#164668; border-color: #000; border-bottom: 2px solid #000; color: white; }
ul{ list-style: none; margin: 0; padding: 0; }

nav{ position: fixed; left: 0; top: 4em; width: 20em; background: #0769AD; height: calc( 100vh - 4em); }
nav ul{ padding: 40px 0px; display: block; }
nav ul li a{ display: block; padding: 2em 0.2em 2em 6em; font: 1em/1em Verdana; color: white; border-top: 1px solid #0769AD; border-bottom: 1px solid #0769AD; background-position: 0.5em center; background-repeat: no-repeat; background-size: 4em; }
nav ul li a.active{ box-shadow: -4px 0px 3px black; background-color: white; border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; color: #333; }

nav+main{ margin-left: 20em; }
main{ font: normal 1.1em/1.5em Verdana; margin-top: calc( 4em + 32px ); }
main h2{ color: #336816; font: bold 2em/1.1em "Trebuchet MS", Arial, Helvetica, sans-serif; border-bottom: 1px solid #FFF; margin: 0 0 20px 0;}
main h2 small{ display: inline-block; font-size: 0.5em; line-height: 1em; margin: 0 0 0 20px; padding: 0; font-style: italic; color: #819775}

main h3{ margin: 0; padding: 0; }
form h3, h3.grey{	
	background: #828282;
	border-bottom: 1px solid #AAA;
	color: white;
	font: bold 1.4em "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 1.4em;
	padding: .4em;
	position: relative;
	width: 90%;
}

form .fecha{
	transition: all 0.3s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	background:#F5F5F5;
	border: 1px solid #CCC;
	height: 200px;
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	padding: .8em;
	width: 90%;
}

form .fecha label{ display: inline-block; vertical-align: middle; margin-left: 4px; font-size: 10px; padding: 1px 16px 1px 0; background: url(icon/checkbox.jpg) right top no-repeat; background-size: 12px 24px; line-height: 1em; color: #666;  }
form .fecha input:checked + label{ background-position: right bottom; color: #900; font-weight: bold; }
form .fecha input[type=checkbox]{ display: none; }
form .fecha input[type=text]{ display: inline-block; width: calc( 80% - 90px ); margin-bottom: 0px;  }
#final{ width: 90%; }

form h3 a{
	background: url(icon/expand-collapse.png) -27px -3px no-repeat;
	border-radius: 3px;
	color: lime;
	height: 22px;
	overflow: hidden;
	position: absolute;
	right: .4em;
	text-indent: -100px;
	top: 4px;
	width: 22px;
}
form h3 a.collapsed{
	background-position: -3px  -3px;
}
form .fecha input,
form .fecha textarea{
	width: 80%;
}

form .notice{ width:90% }

#cronograma_editar{ width: 70% }

main > form, 
section{ padding: 10px 20px; background: #eaeaea; border-radius: 4px; margin: 0px 4%; position: relative;  overflow: auto; min-height: 40vh;}
form div{ margin-bottom: 4px; padding: 4px 0; }
form div span{ display: inline-block; width: 100px; }

form input, form select, form textarea{
	border: 1px solid #999;
	padding: 1px 3px;
	border-radius: 2px;
}

form textarea{ resize: none; width: 70%; height: 10em;}
form input[type=submit],
form input[type=button]{
	margin-top: .7em;
	padding: .5em 2em;
}
	
form.left span, 
form.left label, 
form.left input, 
form.left select, 
form.left textarea{
	display: block;
	width: 100%;
}

form.left input[type=checkbox], 
form.left input[type=radio]{
	display: inline-block;
	width: auto;	
}
form.left div{
	margin-bottom: 0.3em;
}


main ul li a{ display: block; padding: 6px 3px; border-bottom: 1px dashed #CCC; }
main ul li:last-child a{ border-bottom: none; }

main #paginador{ margin-top: 10px; text-align: center; width: 70%; }
main #paginador li{ display: inline-block; margin: 0 3px; }
main #paginador li a{ display: inline-block; border: none; padding: 5px 9px; background: #36C; color: white; border-radius: 4px; }
main #paginador li a#current_page{ background: #33C; color: orange; cursor:default; }
main #paginador li a#no_arrow{ background: #666; color: silver; cursor:default; }

#btn_placeholder{ margin-top: -10px; margin-bottom: 20px; }
#btn_placeholder:empty{ display: none; margin-top: -10px; }

.current{ background: #FFC}

.left{ float: right; width: 30%; padding-left: 15px; box-sizing: border-box; }
.left div{ margin: 0; padding: 0;}

div.left form { margin-bottom: 15px; }
div.left form select{
	width: 100px;
	margin-right: 5px;
}
div.left form select option{
	padding: 5px 8px;	
}
div.left form input[type=date]{
	padding: 8px;
	width: 100px;
	margin-right: 5px;
}

.cursadas.active{ background-image: url(icon/materias.png); }
.entregas.active{ background-image: url(icon/entregas.png); }
.encuestas.active{ background-image: url(icon/encuestas.png); }
.feriados.active{ background-image: url(icon/feriados.png); }
.cronograma.active{ background-image: url(icon/cronograma.png); }
.subir{ background-image: url(icon/subir_w.png); }
.subir.active{ background-image: url(icon/subir.png); }
.historial.active{ background-image: url(icon/materias.png); }
.importar.active{ background-image: url(icon/useradd.png); }
.alumnos.active{ background-image: url(icon/grupos.png); }
.password.active{ background-image: url(icon/password.png); }
.cursadas{ background-image: url(icon/materias_w.png); }
.encuestas{ background-image: url(icon/encuestas_w.png); }
.entregas{ background-image: url(icon/entregas_w.png); }
.feriados{ background-image: url(icon/feriados_w.png); }
.cronograma{ background-image: url(icon/cronograma_w.png); }
.subir{ background-image: url(icon/subir_w.png); }
.historial{ background-image: url(icon/materias_w.png); }
.importar{ background-image: url(icon/useradd_w.png); }
.alumnos{ background-image: url(icon/grupos_w.png); }
.password{ background-image: url(icon/password_w.png); }

.error{ color: darkred; background: #d8cacf url(icon/ui_error.png) 0.5em 0.6em no-repeat;}
.ok{ color: darkgreen; background: #d5fcbb url(icon/ui_ok.png) 0.5em 0.6em no-repeat; }
.warning{ color: darkorange; background: #FFFED7 url(icon/ui_warning.png) 0.5em 0.6em no-repeat; }
.notice{ color: navy; background: #B7E0FF url(icon/ui_notice.png) 0.5em 0.6em no-repeat; }

.error,
.ok,
.warning,
.notice{
	font: bold 1.2rem/1.4em "Consolas", monospace; 
	padding: 0.75em 3em; 
	background-size: 2.1em; 
	width: 70%; 
}

.error strong,
.ok strong,
.warning strong,
.notice strong{
	display: inline-block;
	font-size: 1.8rem;
	text-transform: uppercase;
}

.e_NO{ background: #FFE6E6; color: darkred; padding: 0 6px; }
.e_SI{ background: #E9FDE3; color: darkgreen; padding: 0 6px; }

.horizontal_menu{ list-style: none; position: absolute; top: 1px; right: 20px; }
.horizontal_menu li{ display: inline-block; margin: 2px 0px 2px 5px; }
.horizontal_menu li a{ display: block; padding: 6px 25px 6px 40px; border-radius: 6px; border: none; background: #CCC 10px center no-repeat; color: darkred; border: 1px solid #999 !important; background-size: 24px }

#realtime{ background-image: url(icon/action_time.png); }
#add{ background-image: url(icon/action_add.png); }
.horizontal_menu li a.active{ opacity: 0.5; }

.ucase{ text-transform: uppercase }
.table_actions a{display: block; width: 24px; height: 24px; text-indent: -200px; overflow: hidden; background: url(icon/download_file.png) left bottom no-repeat; background-size: 24px 48px; }
.table_actions a:hover{ background-position: left 2px }

.top{ vertical-align: top; }
.top + *{ vertical-align: top; }

table.invisible,
table.invisible td{
	background: transparent !important;
	border: none;
}


a.delete,
a.view,
a.edit{
	display: inline-block;
	background: url(icon/cursadas_sprite.png) 0 0 no-repeat;
	background-size: 60px 40px;
	margin: 0 2px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	text-indent: -200px;
	line-height: 0px;
	vertical-align: middle;
}

a.edit{ background-position: -20px 0; }
a.delete{ background-position: -40px 0; }

a.view:hover{ background-position: 0px -20px; }
a.edit:hover{ background-position: -20px -20px; }
a.delete:hover{ background-position: -40px -20px; }

a.delete.white,
a.delete.white:hover{ background: url(icon/white_trash.png) left bottom no-repeat; background-size:16px 16px }


a.editar,
a.pdf,
a.txt,
a.doc{
	color: #666;
	background-position: left center;
	background-repeat: no-repeat;
	margin-left: 5px;
	padding-left: 20px;
}
a.editar;hover,
a.pdf:hover,
a.txt:hover,
a.doc:hover{
	color: #06C;
}

a.editar{ background-image: url(icon/editar.png); }
a.pdf{ background-image: url(icon/export-pdf.png); }
a.doc{ background-image: url(icon/export-word.png); }
a.txt{ background-image: url(icon/export-txt.gif); }

.btn_baja, .btn_image, .btn_zoom{
	background:url(icon/userdel.png) center top no-repeat;
	display: inline-block;
	line-height: 0;
	height: 16px;
	margin: 0;
	text-indent: -200px;
	color: transparent;
	overflow: hidden;
	width: 16px;
}


.btn_baja:hover, .btn_image:hover, .btn_zoom:hover{
	background-position: center bottom;

}

.btn_baja{
	display: block;
	width: 100%;	
}

.btn_image{
	background:white url(icon/userpic.png) center top no-repeat;
	background-size: 16px 32px;
}

.btn_zoom{
	border-top: 1px solid black;
	background: rgba(0,0,0,0.6) url(icon/userzoom.gif) left top no-repeat;
	background-size: 16px 32px;
	text-indent: 0;
	padding-left: 18px;
	line-height: 1em;
	display: block;
	color: white;
	font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	width: 100%;
}
.btn_zoom:hover{
	background-position: left -16px;
	background-color: black;
}



tr.baja td{ color: #666; font-style:italic; }
tr.baja div{ border-color: silver !important}
tr.baja img{ opacity: 0.35; }
td.action_td{ vertical-align: middle; width: 75px; }
td.action_td *{ vertical-align: middle;  }

#outline{ display: none; }
#outline + label{
	vertical-align: middle;
	display: inline-block; 
	padding-left: 20px; 
	margin-left: 5px;
	height: 16px; 
	background: url(icon/checkbox.jpg) left top no-repeat;
}
#outline:checked + label{
	background-position: left bottom;
}

#stats li{
	margin-bottom: 3px;
}

#stats h3{
	color: navy;
	border-bottom: 1px solid #AAA;
	padding-bottom: 2px;
	margin-bottom: 5px;
	text-transform: uppercase;
}
#stats ul{
	margin-left: 3px;
	margin-bottom: 20px;
}

#stats ul ul{
	margin: 0.3em;
}

#stats a{
	display: block;
	padding: 5px 20px;
	margin-bottom: 2px;
}

#clase_a_clase{
	width: 70%;
}
#clase_a_clase h3 {
	border-bottom: 2px solid #AAA;
	padding: 2px 7px 2px 14px;
}

#clase_a_clase article.feriado {
	background: #FDD;
	padding: 3px 0;
}
#clase_a_clase article.feriado h3 {
	color: darkred;
	border: none;
}
#clase_a_clase article.feriado h3 span{
	color: darkred;
}

#clase_a_clase article{
	margin-bottom: 20px;
}

#clase_a_clase article p{
	margin: 0 0 0 5px;
	background: white;
	border: 1px solid #CCC;
	border-top: none;
	border-left: 3px solid #AAA;
	padding: 10px 15px;
	line-height: 1.3em;
}

#clase_a_clase article p em{
	color: #999;
}

#clase_a_clase h3 span{
	font-family: Consolas, Monospace;
	font-size: 1.2em;
	display: inline-block;
	text-transform: uppercase;
	color: #039;
	width: 150px;
}

#clase_a_clase h3 em{
	font-weight: normal;
	font-style: normal;
	
}

#tooltip{
	position: absolute;
	width: 200px;
	background: #FFFFD2;
	box-shadow: 0 3px 4px black;
	color: #F60;
	font: italic 12px/14px  "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 5px 10px;
	top: 20px;
	left: 1px;
	z-index: 20;
}

#tooltip p{
	margin: 0;
}
#datos div *{
	vertical-align: middle;
}
#datos [type=email],
#datos [type=password]{
	width: 300px;
}
input[readonly]{
	background: #EBEBE4;
	color: #545454;
	border-color: #999999;
}
#alumnos_toolbar{ position: absolute; top: -13px; right: 30px;  }
#alumnos_qtty{ padding: 20px 0 0 0; font: bold italic 18px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; background-size: 24px 24px; margin: 0; opacity: 0.95; color: #640964; display: inline-block; }
#get_drive{ text-indent: -200px; display: inline-block; width: 16px; height: 16px; background: url(icon/icon_drive.png) left top no-repeat; overflow:hidden; margin-left: 4px }
#get_drive:hover{ background-position: left bottom; }
#get_array{ text-indent: -200px; display: inline-block; width: 16px; height: 16px; background: url(icon/icon_array.png) left top no-repeat; overflow:hidden; margin-left: 4px; }
#get_array:hover{ background-position: left bottom; }

#get_jeopardy{ text-indent: -200px; display: inline-block; width: 16px; height: 16px; background: url(icon/icon_json.png) left 1px no-repeat; overflow:hidden; margin-left: 4px }
#get_jeopardy:hover{ background-position: left -14px; }

a.delete.white,
#get_drive,
#get_array,
#get_jeopardy{ vertical-align:bottom; }

#alumnos_qtty a{ width: 24px; height: 24px; display: inline-block; overflow: hidden; text-indent: -200px; background: url(icon/add_user.png) left bottom no-repeat; background-size: 24px 24px; margin-left: 6px }

#buscador{ position: absolute; top: 18px; right: 5px; padding: 0; margin: 0; width: auto; }
#buscador input{
	width: 0px;
	font: normal 13px/16px;
	padding: 4px 24px 4px 0;
	transition: width 0.3s;
	background: white url(icon/buscar_sprite.png) right -1px no-repeat;
}
#buscador input:focus{
	width: 250px;
	padding-right: 30px;
	padding-left: 10px;
	background-position: right bottom;
}
.result{ margin: 5px; padding: 4px; vertical-align: top; border:1px solid #ccc; background: white; display: inline-block; overflow: auto; width: 322px; }
.result img + div{ margin-left: 110px; } 
.result h3{ margin-bottom: 10px; font-size: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #069; }
.result h4{ margin: 5px 0 2px 0 }
.result h3 span{ text-transform: uppercase; }
.materias_cursando li { font-size: 0.8em; }
.materias_cursando li + li:not( .orange ){ margin-top: 3px; border-top: 1px solid #ededed; padding-top: 3px;}
#closeme{ display: none; }

#entregas_ya{ margin-bottom: 40px; }
#prox_h3{ background-image: url(icon/cronograma_w.png); padding-left: 40px; }
#now_h3{ background-image: url(icon/cronograma_r.png); padding-left: 40px; }
.date_h3{ font: bold 20px/22px "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 5px 0 5px 35px; background-position: left center; background-repeat: no-repeat; background-size: 29px 29px; margin: 0 0 10px 0;  }
.date_h3 span{ color: red; }
#prox_entregas li, #entregas_ya li{ margin: 0 0 5px 0; padding: 5px; background: #FFF; border: 1px solid #DDD; }

#prox_entregas li:nth-child(even){ background: #FFC; }
#prox_entregas li h4, #entregas_ya li h4{ font: bold 14px/18px Verdana, Geneva, sans-serif; margin: 0 0 5px 0; }
#prox_entregas li p, #entregas_ya li p{ font: 10px/16px Verdana, Geneva, sans-serif; margin: 0; padding: 4px 0 4px 10px; border-left: 3px solid #CCC; }
#prox_entregas li span, , #entregas_ya li span{ font-weight:bold; font-size: 11px;}

tr.change td{ border-top: 4px double #000; }

#download_all{
	background: #CCC url(icon/download_all.png) 5px top no-repeat;
	background-size: 24px 49px;
	padding: 6px 10px 6px 40px; 
	font-size: 12px;
	line-height: 12px;
	border-radius: 3px; 
	border: 1px solid #AAA; 
	display: block; 
	margin-top: 6px;
}

#download_all:hover{
	background-color: #95EF7E;
	color: darkgreen;
	background-position: 5px bottom;
}

#select_go{
	width: 25%;
	padding: 6px 0;
	margin: 0;
}


/* INPUTS RADIO */
#d_drink { margin-top: 20px; border-top: 1px solid white; padding-top:10px;} 
#d_drink span{ vertical-align: middle; display: inline-block; padding-bottom: 1px; }
#d_drink label{ padding-top: 50px; background-position: center top; background-repeat: no-repeat; display: inline-block; margin: 0 30px 0 5px; min-width: 75px; text-align: center;  }
#d_drink input{ display:none; }

#drink_c{ background-image: url(icon/cafeteria_disabled_cafe.png); }
#drink_h{ background-image: url(icon/cafeteria_disabled_cortado.png); }
#drink_l{ background-image: url(icon/cafeteria_disabled_conleche.png); }
#drink_t{ background-image: url(icon/cafeteria_disabled_te.png); }
#drink_m{ background-image: url(icon/cafeteria_disabled_chocolate.png); }


#i_cafe:checked + #drink_c{ background-image: url(icon/cafeteria_cafe.png); }
#i_cortado:checked + #drink_h{ background-image: url(icon/cafeteria_cortado.png); }
#i_leche:checked + #drink_l{ background-image: url(icon/cafeteria_conleche.png); }
#i_te:checked + #drink_t{ background-image: url(icon/cafeteria_te.png); }
#i_choco:checked + #drink_m{ background-image: url(icon/cafeteria_chocolate.png); }

.left h3{ color: #06C; font-size: 14px; border-bottom: 1px solid #069; padding-left: 6px; }
/* ENTREGAS - SELECT VS MENU */
#responsivemenu{ display: none; }
#noresponsivemenu{ display: block; }
#noresponsivemenu h4{ margin: 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
#noresponsivemenu > li { margin: 0; padding: 9px 10px; }
#noresponsivemenu > li:nth-child(odd){ background: #E0E0E0; border: 1px solid #F0F0F0; }
#noresponsivemenu ul li { position: relative; }
#noresponsivemenu ul li a{ margin: 0; padding: 3px 0; color: #063; border: none;  }
#noresponsivemenu ul li + li a{ border-top: 2px solid #CCC; }
#noresponsivemenu ul li a:hover{ color:#093; text-decoration: underline; }
#noresponsivemenu ul li a#current_tp{ color:#06C; font-style: italic; font-weight: bold; }
#noresponsivemenu ul li span a{ position: absolute; width: 10px; height: 10px; right: 0; top: 5px; text-indent: -200px; overflow: hidden; background: url(icon/edit_fecha.png) -3px -3px no-repeat; display: none;}
#noresponsivemenu ul li:hover span a{ display: inline-block;  }
#modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 100; padding-top: 5%; }
#modal > div{ width: 70%; padding: 2% 5%; margin: 0 auto; background: white; border-radius: 10px; box-shadow: 0 0 20px black; }
#modal > div span{ display: inline-block; width: 160px; font-size: 20px; }
#modal > div label{ display: inline-block; font-size: 15px; }

#modal > div div{ margin-bottom: 6px; }
#modal h2{ font: bold 35px/38px "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 5px 0; color: #06F;}
#modal h3{ width: 100%; margin: 0; }
#modal input{ padding: 7px 15px; display: inline-block; font-size: 16px;  }
#modal input[type=file]{ width: 60%; border: 1px solid #CCC; padding: 5px; }
#modal #profiles{ display: flex; justify-content: space-between; }
#modal #profiles li{ width: 48% }
#modal #profiles .image{ margin: 5px auto; padding: 10px; background: url(icon/fondo_perfil.gif); background-size: 13%; text-align:center }
#modal #profiles .image img{ background: white; padding: 5px; border: 1px solid #eee; }
#btn_right input[type=submit]{ width: 100%; }

.miniprofile{ width: 48px; height: 48px; overflow: hidden; position: relative; border: 2px solid red; }
.miniprofile.f0{ border-color: red; }
.miniprofile.f1{ border-color: #333; }
.miniprofile.f2{ border-color: #0C0;  }
.miniprofile img{ margin-top: -2px; margin-left: -2px;  }
.miniprofile.f0 img{ filter: sepia(1); -webkit-filter: sepia(1);  }
.miniprofile a{ position: absolute; left: 0px; bottom: -40px; transition: bottom 0.5s;  }
.miniprofile:hover a{ bottom: 0; }
/*
.miniprofile a:last-of-type{ right: -40px; transition: right 0.5s;}

.miniprofile:hover a:last-of-type{ right: 0; }
*/

#responses *{ vertical-align: middle;}
#responses input{ padding: 4px 7px; width: 67%; border-radius: 3px 0 0 3px; box-sizing: border-box; border-right: none; }
#responses a{ padding: 4px 7px; background: darkred; color: white; display: inline-block; width: 3%; box-sizing: border-box; text-align:center; border-radius: 0 3px 3px 0; border: 1px solid #333; font-size: 13px; line-height:16px }
#responses a:hover{ background: red; }

blockquote{ border-left: 4px solid #AAA; margin-left: 0; padding: 5px 0 5px 20px; }
#respuestas input[type=checkbox],
#respuestas input[type=radio]{
	display: none;
}

#respuestas input + label{
	display: block;
	width: 75%;
	color: #666;
	border-radius: 2px;
	font-size: 14px;
	line-height:14px;
	font-family: "Trebuchet MS";
	background: white;
	padding: 5px 35px;
	background-position: 5px top;
	background-repeat: no-repeat;
	background-image: url('icon/checked_cbox.gif');
}
#respuestas input:checked + label{
	background-position: 5px bottom;
	color: #0096D6;
}
/*
#respuestas input[type=checkbox] + label,
#respuestas input[type=radio] + label{
	background-image: url('icon/checked_cbox.gif');
}
/*#respuestas input[type=radio] + label{
	background-image: url('icon/checked_radio.png');
}*/

.rta_si, .rta_no{ 
	display: block;
	padding: 0 6px;
	height: 24px;
	text-align: center;
	overflow: hidden;
	text-indent: -300px;
}
.rta_si{ color: #060; background: url(icon/encuesta_si.png) center center no-repeat; }
.rta_no{ color: #900; background: url(icon/encuesta_no.png) center center no-repeat; }

#formModal{
	padding: 20px 50px;
	background: white;
	width: 70%;
	margin: 40px auto 0 auto;
	border-radius: 10px;
}
#formModal select,
#formModal input{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 5px 20px;
	font-size: 1.3em;
	display: inline-block;
	line-height: 1.1em;
}
#formModal input{
	padding: 7px 20px;	
}

#buscar ul:empty{ display: none; }
#buscar ul{
	display: block;
	margin-left: 102px;
	border: 1px solid #AAA;
	width: 400px;
	max-height: 400px;
	overflow: auto;
	background: white;
}
#buscar ul li{
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	max-height: 50px; 
	overflow: hidden; 
}
#buscar ul li:hover{
	background: lightyellow;
}
#buscar ul li:not(:last-child){
	border-bottom: 2px solid #063;
}
#buscar ul li span{ 
	flex: 1; 
	align-self: center; 
	margin-left: 4px; 
	font-size: 120%; 
}
#buscar ul li img{ 
	width: 60px;
	clip-path: circle(20px at 30px 25px); 
}

#server_status{
    padding: 5px;
    margin-bottom: 20px;
}

#server_status li{
    display: flex;
    margin-bottom: 5px;
    font-family: Arial;
}
#server_status li span{
    width: 140px;
    font-weight: bold;
}