html, body {margin: 0; padding: 0; min-width: 100%; min-height: 100%; height: 100%;}
body {text-align: center; margin: 0 auto;  font-family: arial; font-size: 13px; background: #4285F4; color: #000;}
a {text-decoration: none; color: #4267B2;}
a:hover {text-decoration: none;}
a img {border-width: 0;}
input, select, textarea {border: 1px solid #C6DBFF; vertical-align: middle; }
input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"] {width: 280px; height: 34px; line-height: 34px; padding: 0 10px;}
select {min-width: 140px; height: 40px; line-height: 40px; padding: 0 10px;}
textarea  {width: 450px; height: 40px; padding: 10px; }
input:focus, select:focus, textarea:focus {border: 1px solid #4285F4;
box-shadow: 0 0 5px #C6DBFF;
    -webkit-box-shadow: 0 0 5px #C6DBFF;
    -moz-box-shadow: 0 0 5px #C6DBFF;
}
input[type="submit"] {background: #4285F4; color: #fff; font-weight: bold; padding: 0px 10px; height: 34px; line-height: 34px; border-width: 0; cursor: pointer;}
button, .button {font-size: 22px; height: 40px; line-height: 40px; background: #8CBF26; display: inline-block; border-width: 0; color: #FFF; font-weight: bolder; cursor: pointer; border-radius: 5px; }
button:hover, .button:hover {background-color: #4285F4}
button i span {font-size: 11px; }
input.small {width: 90px;}
input.mediano {width: 160px;}
input.light, button.light {color: #4285F4; background: transparent; border-width: 0; padding: 0;}
.button {padding: 6px 8px;}
input[readonly] {background: #DDEAFF;}

input:disabled, select:disabled, textarea:disabled {background: #BBBBBB;}
.error {color: #A30000;}
.exito {color: #4285F4;}
.input_error {border: 1px solid red !important;}
.fecha{padding-right: 40px; background: url(img/calendar.png) no-repeat right center; cursor: pointer;}
.right {text-align: right}
.left {text-align: left;}
.center {text-align: center;}
.clear {clear: both;}
.footer {color: #FFF;}
.subtitulo {background-color: #E9E9E9;}
.subtitulo span {font-size: 12px;}
.green {color: #8CBF26; }
.yellow {color: #8CBF26 !important;}
.blue {color: #4285F4 !important;}
.gray {color: gray !important; text-shadow: 2px 2px 0px #FFF; }
.white {color: #FFF !important;}
.bold {font-weight: bold;}
h1, h2, h3, h4 {color: #4285F4; font-weight: 100; padding: 6px 10px; margin: 2px 0;}
.big {font-size: 18px;}
.bigger {font-size: 22px;}
.small:not(input) {font-size: 11px;}
.hidden {display: none;}
.link {cursor: pointer; display: inline-block;}
.bgray {background: #E9E9E9;}
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.table-result {border-collapse: collapse; }
.table-result th, .table-result td{padding: 10px !important; border-bottom: 1px solid #CCCCCC; }
.table-result th {border-bottom: 3px solid #666666 !important; text-align: left !important;}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.scroll {position: fixed; bottom: 5px; right: 10px; display: none;}
.scroll > i {background: #4267B2; color: #FFF; height: 32px; line-height: 32px; width: 32px; text-align: center; border-radius: 50%;}

.bg-descanso {background: rgba(76, 40, 130, 0.2);}

#contenedor {text-align: center; margin: 0 auto; padding: 0; background: #fff; min-height: 90%; }
#contenedor > div {}

#contenido {/*overflow-x: hidden;*/
padding: 0 2%;
display: inline-block;
max-width: 96%;
min-width: 96%;
}
#menu { background: #4285F4;}
#menu ul {margin: 0; padding: 0; display: inline-block; }
#menu ul li {float: left; padding: 0 10px; height: 40px; line-height: 40px; list-style: none;}
#menu ul li i {font-size: 18px;}
#menu a:not(.error) {color: #FFF;}
#menu a:hover, #menu a.activo, #menu a.logout {color: #8CBF26;}
#menu a.logout:hover {color: #A30000;}
#menu a img {max-height: 32px; vertical-align: middle;}

#menu2 {background: #D6D6D6; text-align: right;}
#menu2 a, #menu2 span {height: 28px; line-height: 28px; display: inline-block; margin-right: 20px; font-weight: 100 }
#menuI, #menuI li {padding: 0; margin: 0; }
#menuI {margin: 0 auto; font-size: 0; width: 90%; min-width: 280px; max-width: 700px; vertical-align: middle;}
#menuI li {display: inline-block; list-style: none; width: 22%; min-width: 110px; margin: 0 auto; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
#menuI li a {display: block; height: 110px; width: 110px; border-radius: 50%; margin: 0 auto 40px auto; background: #8CBF26; font-size: 13px; letter-spacing: -1px;}
#menuI li a i {color: #FFF; font-size: 40px; line-height: 110px; margin-bottom: 5px; display: block;}
#menuI li a i:hover {color: #4267B2; transform: scale(1.2); 
       -webkit-transition: transform 0.5s; /* Safari */ 
       transition: transform 0.5s ease-in-out;
}

#menuImg, #menuI li {padding: 0; margin: 0; }
#menuImg {margin: 0 auto; font-size: 0; width: 90%; min-width: 280px; max-width: 700px; vertical-align: middle;}
#menuImg li {display: inline-block; list-style: none; width: 22%; min-width: 110px; margin: 0 auto; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; text-align: center; margin-bottom: 20px; }
#menuImg li a {display: block; height: 110px; width: 110px; border-radius: 50%; margin: 0 auto; background: #8CBF26; font-size: 13px; letter-spacing: -1px;}
#menuImg li a img {color: #FFF; font-size: 40px; line-height: 110px; display: inline-block; width: 110px; height: 110px;}
#menuImg li a img:hover {color: #4267B2; transform: scale(1.2); 
       -webkit-transition: transform 0.5s; /* Safari */ 
       transition: transform 0.5s ease-in-out;
}

#submenu {display: block;}
#submenu li{display: inline-block; list-style: none;}
#submenu a {display: block; height: 22px; line-height: 22px; padding: 0 10px; font-weight: bold;}

.menu_list {font-size: 0}
.menu_list ul, .menu_list > li {margin: 0; padding: 0;}
.menu_list > li {list-style: none; line-height: 40px; display: inline-block; width: 31%; margin: 1%; font-size: 12px; background-color: #8CBF26; border-radius: 5px;}
.menu_list li a {color: #FFF;}
.menu_list li a:hover {color: #4267B2; font-weight: bold;}
#titulo {text-align: right; margin-right: 0;  font-weight: bold; color: gray}

.form {text-align: center; margin: 0 auto;}
.form th {text-align: right; margin-right: 0;}
.form td {text-align: left; margin-left: 0; padding: 6px 0;}
.form tr:nth-child(odd) {background: #E9E9E9; }

#contenedor .form2 {}
#contenedor .form2 input, #contenedor .form2 button, #contenedor .form2 select {padding: 0; margin: 0; background: transparent; height: auto; line-height: initial; color: #FFF; border-width: 0; min-width: 10px; max-width: 70px; width: auto;} 
#contenedor .form2 button {margin: 0; padding: 0; font-size: 12px;}
#contenedor .form3 input, #contenedor .form3 select {max-width: 110px;} 
.list {text-align: center; /*margin-left: 0; */ margin:auto; border-spacing: 0; border-collapse: collapse; font-size: 12px; }
.list > tbody > tr > th {background: #4285F4; color: #fff; padding: 4px 6px;}
.list > tbody > tr > th a {color: #FFF;}
.list > tbody > tr > td {text-align: left; margin-left: 0; border-bottom: 1px solid #DDD; padding: 6px;}
.list td a{display: block;}
.list a img {height: 18px;}
.list .sub a{font-style: italic; color: gray;}
.list > tbody > tr:nth-child(odd) {background: #E9E9E9} 
.list tr.gray td  {color: gray;}
.list tr.borrado td {text-decoration: line-through; color: gray;}
.list2 th, .list2 td {border-left: 1px solid #FFF;}
table.list tr:hover, table.list2 tr:hover {background-color: #CFD8DD;}

#list2 {text-align: center; margin: 0 auto;}
#list2 th {background: #4285F4; color: #fff; }
#list2 td {text-align: left; margin-left: 0; border-bottom: 1px dashed #C6DBFF; font-size: 10px; color: #514A4A;}

#footer{text-align: right; margin: 0 auto;  width: 95%; min-width: 900px; font-size: 10px; color: #fff;}

.tooltip {position: relative; display: inline-block; cursor: pointer; width: 24px; height: 24px; background: url(img/help.png) no-repeat center center;}
.tooltip span {position: absolute; top: 20px; left: 20px; display: none; background: #fff; border: 1px solid #4285F4; padding: 6px; width: 240px; z-index: 99;}
.tooltip:hover > span {display: block;}

#login {min-height: 90%;}
#login input{padding: 0; margin: 0;}
#login > div {background: #FFF; padding: 3% 2%; margin-top: 4%; display: inline-block; color: #4267B2; width: 90%; max-width: 300px; min-width: 200px;}
#login > div {}
#login input {height: 50px; line-height: 50px; border-width: 0; margin-bottom: 10px; padding: 0; display: inline-block; color: #000;}
#login input[type="text"], #login input[type="password"] {background: #E8E8E8; width: 90%; padding: 0 5%;}
#login button {padding: 0; background: #8CBF26; color: #FFF; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; width: 100%; border-width: 0; }
#login .mensaje_login {line-height: 32px;}
#login button:hover {background-color: #4267B2;}
#login button {width: 100%; height: 50px; line-height: 40px; }

#form {position: fixed; top: 0; left: 0; min-width: 100%; height: 100%; background: rgba(0,42,139,0.4); overflow: auto; }
#form > div {border: 3px solid #4285F4; display: inline-block; position: relative; margin-top: 2%; box-shadow: 1px 1px 2px #FFF; background: #FFF; width: 92%; padding: 20px 2%; font-size: 15px;
animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;
}
#form > div .cerrar {height: 26px; line-height: 26px; width: 26px; border-radius: 50%; text-align: center; display: inline-block; color: #4285F4; background: #8CBF26; border: 2px solid #4285F4; font-weight: 100; position: absolute; top: -10px; right: -10px;}
#form .form {}
@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

.formselect select option {color: #222222; }
#contenedor .form2 select.active {color: #8CBF26}

.v480 {display: none }

@media screen and (max-width: 1200px) {
    .h1200 {display: none !important;}
}
@media screen and (max-width: 1024px) {
    .form4, .form4 table {width: 100%; }
    .form4 table tr td {width: 20% !important; display: inline-block;}
    .form4 table tr td *:not(input) {max-width: 100% !important; min-width: 100% !important}
    .form4 table tr td input {max-width: 90% !important; min-width: 90% !important}
}

@media screen and (max-width: 980px) {
    .h980 {display: none !important;}
    .list tr th, .list tr td {display: table-cell; }
    
    #contenedor .listf td {padding: 1%;}
    #contenedor .listf tr th, #contenedor .listf tr td {float: left; width: 98%; text-align: left;}
}
@media screen and (max-width: 768px) {
    .h768 {display: none !important;}
    .list tr th, .list tr td {display: table-cell; }
}    
@media screen and (max-width: 640px) {
    .form4 table tr td {width: 33.33% !important; }
    #menuI li {width: 33.33%;}
    
    .h640 {display: none !important;}
    .list tr th, .list tr td {display: table-cell; }
    
    #contenedor .form td {padding: 1%;}
    #contenedor .form tr th, #contenedor .form tr td {float: left; width: 98%; text-align: left;}
}
@media screen and (max-width: 480px) {
    #menu {height: 50px; cursor: pointer; line-height: 45px;}
    #menu:before{content: "\00a0\00a0\f0c9"; font-family:'FontAwesome'; font-size: 32px; color: #FFF;}
    #menu > ul {display: none; position: absolute; top: 40px; left: 0; z-index: 999; width: 100%; background: #1D51A7; }
    #menu ul li {border-bottom: 1px solid #204074;}
    #menu ul li a {display: block;}
    #menu ul li, #menu ul li.right {float: none;}
    #menu:hover > ul {display: block;}
    #menu a:hover, #menu a.activo {background: #204074;}
/*   
    #menu2 {height: 40px; cursor: pointer;}
    #menu2:before{content: "\f0c9\00a0\00a0"; font-family:'FontAwesome'; font-size: 32px; color: #FFF;}
    #menu2 > ul {display: none; position: absolute; top: 40px; left: 0; z-index: 999; width: 100%; background: #FFE200; }
    #menu2 ul li {border-bottom: 1px solid #E5CB00; float: none; text-align: center;}
    #menu2 ul li a {display: block; margin-right: 0px; }
    #menu2:hover > ul {display: block;}
    #menu2 a:hover {background: #E5CB00; }
    */
   
    #contenedor .form td {padding: 1%;}
    #contenedor .form tr th, #contenedor .form tr td {float: left; width: 98%; text-align: left;}
    input, select, textarea  {max-width: 310px !important; float: left;}
   
   #menuI li {width: 48%;}
   
    .h480 {display: none !important;}
    .v480 {display: block; }
    
    .list {font-size: 10px;}
    .list th {font-size: 8px;}
    .list > tbody > tr > th {padding: 4px 0px;}
    .list > tbody > tr > td .fa{ font-size: 12px;}
}
@media screen and (max-width: 360px) {
   input, select, textarea  {max-width: 280px !important;}
   .form4 table tr td {width: 50% !important; }
}
@media screen and (max-width: 320px) {
   input, select, textarea  {max-width: 240px !important;}
   
}