* { box-sizing: border-box;}
body {margin:0;background-color:#777777;font-family:arial;font-size: 12px;}
hr {background-color: #AA9999; height: 1px; border: 0;}
/*MENU PRINCIPAL*/
.icon-bar {width: 100%;background-color: #555;overflow: auto;}
.icon-bar a {float: left;width: 20%;text-align: center;padding: 8px 0;transition: all 1.6s ease;color: white;font-size: 36px;}
.icon-bar a:hover {background-color: #FF0000;}
.activo {background-color: #FF0000;}
/*.ttt { font-size:12px;font-family:arial;color:#DDDDDD;padding: 4px 0;}*/


/* Container holding the image and the text */
.contenedor {position: relative;}
.imgtext {color: white;background-color: #000000CC;padding: 4px; text-align: left;}
.bottom-left {position: absolute;bottom: 8px;left: 16px;}
.top-left {position: absolute;top: 8px;left: 16px;}
.top-right {position: absolute;top: 8px;right: 16px;}
.bottom-right {position: absolute;bottom: 8px;right: 16px;}
.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.titulo {font-size:32px;color:#FFFFFF;font-family:'Lucida Sans'; text-align: left;}
.pie {font-size:13px;color:#cccccc;font-family:'Lucida Sans';font-style: normal; text-align: center;}
.pie a {color:#FFFFFF;}
.pie a:hover {color:#aaFFFF;}
.ttt { font-size:12px;font-family:arial;padding: 6px 2px;color:#cccccc;}
.ttt2 { font-size:14px;font-family:arial;color:#33333;padding: 2px 0;}
.user { font-size:12px;font-family:arial;padding: 6px 2px;color:#3333DD;text-align:right;}
.on {color:#9999dd;font-size:18px;font-weight: bold;}
.off {color:#FFbbbb;font-size:12px;}
input[type=text], select, textarea {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;resize: vertical;}
input[type=password], select, textarea {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;resize: vertical;}
label {padding: 12px 12px 12px 0;display: inline-block;}
input[type=submit] {background-color: #FF3333;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;float: right;}
input[type=submit]:hover {background-color: #CC0000;}
.container {width: 50%;border-radius: 5px;background-color: #f2f2f2;padding: 20px;text-align:left;}
.col-25 {float: left;width: 15%;margin-top: 6px;text-align:left;}
.col-75 {float: left;width: 50%;margin-top: 6px;text-align:left;}
.row:after {content: "";display: table;clear: both;}/* Clear floats after the columns */
.error {color:red;text-align:right;}
@media screen and (max-width: 1366px) {.col-25, .col-75, input[type=submit], .container {width: 100%;margin-top: 0;}}

th {color:white; background-color:#777777;text-align:center;font-size: 10px;padding:2px;}
td {color:#666666;font-size: 14px;}
ul {list-style-type: none;margin: 0;padding: 0; overflow: hidden;background-color: #444444;}
li {float: center;}
li a, .dropbtn {display: inline-block;color: white;text-align: center;padding: 8px 8px;text-decoration: none;}
li a:hover, .dropdown:hover .dropbtn {background-color: red;transition: all 0.9s ease;}
li.dropdown { display: inline-block;font-family:arial;font-size: 18px;}
.dropdown-content {font-size:22px;display: none;position: absolute;background-color: #CCCCCC;min-width: 160px;box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);z-index: 1;}
.dropdown-content a { transition: all 0.8s ease;color: black;padding: 8px 8px;text-decoration: none;display: block;text-align: left;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {display: block;}

.accordion {background-color: #eee;color: #444;cursor: pointer;padding: 12px;width: 100%;border: none;text-align: left;outline: none;font-size: 22px;transition: 1.2s;}
.active, .accordion:hover {background-color: #FF0000;color:white;}
.accordion:after {content: '\002B';color: #777;font-weight: bold;float: right;margin-left: 5px;}
.active:after {content: '\2212';}
.panel {color:black;padding: 0 2px;background-color: white;max-height: 0;overflow: hidden;transition: max-height 0.6s ease-out;}
.panel2 {color:black;padding: 0 2px;background-color: white;}


.fondoclaro {background-color: #ffffff;color: #444;padding: 08px;width: 100%;border: none;text-align: left;outline: none;font-size: 12px;}