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: #6C5300 url(img/body.jpg) no-repeat center fixed; background-size: 100% 100%; color: #000;}
.logged {background: #6C5300; }
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 #6C5300 ;
box-shadow: 0 0 5px #C6DBFF;
    -webkit-box-shadow: 0 0 5px #C6DBFF;
    -moz-box-shadow: 0 0 5px #C6DBFF;
}
input[type="submit"] {background: #6C5300 ; 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: #CCCC00; display: inline-block; border-width: 0; color: #FFF; font-weight: bolder; cursor: pointer; border-radius: 5px; vertical-align: middle; }
button:hover, .button:hover {background-color: #6C5300 }
button i span {font-size: 11px; }
input.small {width: 90px;}
input.mediano {width: 160px;}
input.light, button.light {color: #6C5300 ; 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: #6C5300 ;}
.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;}
.yellow {color: #CCCC00 !important;}
.blue {color: #6C5300  !important;}
.gray {color: gray !important; /*text-shadow: 2px 2px 0px #FFF;*/ }
.green {color: green !important;}
.white {color: #FFF !important;}
.bold {font-weight: bold;}
h1, h2, h3, h4 {color: #6C5300 ; font-weight: 100; padding: 6px 10px; margin: 2px 0;}
.big {font-size: 18px;}
.bigger {font-size: 22px;}
.small {font-size: 11px;}
.hidden {display: none;}
.link {cursor: pointer; display: inline-block;}
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

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

.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;
  }
}

#contenedor {text-align: center; margin: 0 auto; padding: 0; background: #fff; min-height: 90%; }
#contenedor > div {}
#contenido {padding: 0 10px; display: inline-block; max-width: 96%; overflow-x: hidden;}
#menu { background: #6C5300;}
#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: #CCCC00;}
#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: #CCCC00; 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: #6C5300; 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 {}
.menu_list ul, .menu_list > li {margin: 0; padding: 0;}
.menu_list > li {list-style: none; line-height: 32px;}

#titulo {text-align: right; margin-right: 0;  font-weight: bold; color: gray}

.form input:invalid {
  border: 1px solid rgba(255,0,0, 0.5);  
}
.form select:invalid {
/*  box-shadow: 0px 5px 3px -3px red;  */
  border: 1px solid rgba(255,0,0, 0.5);  
}

.form input:focus:invalid {
  outline: none;
}

.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;} 
#contenedor .list.form2 select option {color:#222222}

.list {text-align: center; margin-left: 0; border-spacing: 0; border-collapse: collapse; font-size: 12px; margin: auto; }
.list > tbody > tr > th {background: #CCCC00 ; color: #fff; padding: 4px 6px; border: 1px solid; }
.list > tbody > tr > td {text-align: left; margin-left: 0; border-bottom: 1px solid #DDD; padding: 6px; border: 1px solid; border-color: #FFFFFF;}
.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;}
#list2 {text-align: center; margin: 0 auto;}
#list2 th {background: #6C5300 ; color: #fff; }
#list2 td {text-align: left; margin-left: 0; border-bottom: 1px dashed #C6DBFF; font-size: 10px; color: #514A4A;}

.list3 {text-align: center; margin-left: 0; border-spacing: 0; border-collapse: collapse; font-size: 12px; }
.list3 > tbody > tr > th {background: #CCCC00 ; color: #fff; padding: 4px 6px; border: 1px solid;}
.list3 > tbody > tr > td {text-align: left; margin-left: 0; border-bottom: 1px solid #DDD; padding: 6px; border-right: 1px solid #F5F5F5;}
.list3 td a{display: block;}
.list3 a img {height: 18px;}
.list3 .sub a{font-style: italic; color: gray;}
.list3 > tbody > tr:nth-child(odd) {background: #F5F5F5;} 
.list3 tr.gray td  {color: gray;}
.list3 tr.borrado td {text-decoration: line-through; color: gray;}

.nombre-usuarios { color: #000; text-transform: uppercase;  }

#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 #6C5300 ; padding: 6px; width: 240px; z-index: 99;}
.tooltip:hover > span {display: block;}
.htooltip {cursor: pointer; position: relative; display: inline-block}
.htooltip > span {background: #A30000; padding: 5px; color: #FFFFFF; text-shadow: none; display: none; position: absolute; top: 100%; z-index: 999;}
.htooltip:hover > span {display: block; min-width: 115px; padding-left: 15px; cursor: help; }
#login {min-height: 90%;}
#login input{padding: 0; margin: 0;}
#login > div {background: #6C5300; background: rgba(108,83,0,0.2); 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: #6C5300; 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: #CCCC00;}
#login button {width: 100%; height: 50px; line-height: 40px; }

#form {position: fixed; top: 0; left: 0; min-width: 100%; height: 100%; background: rgba(255,255,255,0.4); overflow: auto; }
#form > div {border: 3px solid #6C5300 ; display: inline-block; position: relative; margin-top: 2%; box-shadow: 1px 1px 2px #FFF; background: #FFF; padding: 20px; 
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: #6C5300 ; background: #CCCC00; border: 2px solid #6C5300 ; 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: #CCCC00}