body { background: #f8f8f8; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; font-size: 1em; width: 96%; height: 100%; float: left }

/* form */
#form { width: 88%; margin: 2%; padding: 2%; background: #fff; position: absolute; height: 93% }
#form #logo { width: 100%; text-align: center; margin: 5% 0% }
#form h1 { width: 100%; text-align: center; margin: 10% 0% 3%; font-size: 1.5em }
#form .campo { color:#525252!important; float: left; margin: 1% 0%; padding: 0% 2%; width: 96%; }
#form .campo input[type="text"], #form .campo input[type="number"], #form textarea { float: left; padding: 5% 2%; width:96%; border: 1px solid #ccc; border-radius: 5px; font-family: "Work Sans", sans-serif, sans-serif !important; text-align: center; font-size: 20px}
#form input[type="button"] { padding: 3%; width:40%; border: none; border-radius: 5px; background: #82b440; color: #fff; margin:3% 30% 0%; -webkit-appearance: none; font-size: 20px }
#form input[type="file"]{ padding: 5px 0%; width: 100%; }

/* buscador */
#buscador { width: 94%; margin: 1%; padding: 2%; background: #fff; float: left; height: 93% }
#buscador #logo { width: 30%; text-align: center; margin: 5% 0%; float: left }
#buscador #logo img { width: 100%; text-align: center; margin: 0% }
#buscador h1 { width: 70%; text-align: center; margin: 5% 0%; float: left; font-size: 1.5em; line-height: 45px }
#buscador form { width: 100%; float: left }
#buscador .campo { color:#525252!important; float: left; margin: 1% 0%; padding: 0% 2%; width: 96%; }
#buscador .campo input[type="text"], #buscador .campo input[type="number"], #buscador textarea { float: left; padding: 5% 2%; width:96%; border: 1px solid #ccc; border-radius: 5px; font-family: "Work Sans", sans-serif, sans-serif !important; text-align: center; font-size: 20px}
#buscador input[type="button"] { padding: 3%; width:30%; border: none; border-radius: 5px; background: #82b440; color: #fff; margin:1% 35% 0%; -webkit-appearance: none; font-size: 20px }
#buscador input[type="file"]{ padding: 5px 0%; width: 100%; }

#buscador #suggestions { box-shadow: 2px 2px 8px 0 rgb(0 0 0 / 20%); height: auto; position: absolute; z-index: 9999; width: 86%; margin: 39% 2% 0%; background: #fff }
#buscador #suggestions div { float: left; width: 100%; padding: 2% 0%; border-bottom: 1px dashed #669b19 }
#buscador #suggestions div a { display: block; width: 92%; padding: 2% 4%; color: #669b19; text-decoration: none; text-transform: uppercase; font-size: 0.8em }

#cliente { width: 94%; margin: 0% 1%; padding: 2% 2% 1%; background: #fff; float: left }
#cliente .item { float: left; width: 100%; margin-bottom: 1% }
#cliente .item .nombre { width: 28%; margin: 0% 1%; padding: 2%; background: #fff; float: left; text-transform: uppercase; color:#0078b2; font-weight: bold; font-size: 0.8em }
#cliente .item .dato { width: 60%; margin: 0% 1%; padding: 2%; background: #fff; float: left; text-transform: uppercase; font-size: 0.8em }

#aforo { width: 94%; margin: 0% 1%; padding: 0% 2% 2%; background: #fff; float: left }
#aforo h2 { width: 90%; text-align: center; padding: 1% 5%; float: left; font-size: 1.2em; line-height: 45px; background: #f8f8f8; margin: 1% 0% }
#aforo .item { float: left; width: 100%; margin-bottom: 1% }
#aforo .item .nombrecampo { width: 28%; margin: 0% 1%; padding: 2%; background: #fff; float: left; text-transform: uppercase; color:#0078b2; font-weight: bold; font-size: 0.8em }
#aforo .item .campo { width: 60%; margin: 0% 1%; padding: 2%; background: #fff; float: left; text-transform: uppercase; font-size: 0.8em; -webkit-appearance: none; overflow: hidden }
#aforo .item .campo70 { width: 70%; margin: 0% 1%; padding: 1% 2%; background: #fff; float: left; text-transform: uppercase; font-size: 0.8em; -webkit-appearance: none; overflow: hidden }
#aforo .item .campo30 { width: 14%; margin: 0% 1%; padding: 1% 2%; background: #fff; float: left; text-transform: uppercase; font-size: 0.8em; -webkit-appearance: none; overflow: hidden }
#aforo input[type="button"] { padding: 3%; width:30%; border: none; border-radius: 5px; background: #82b440; color: #fff; margin:1% 35% 2%; -webkit-appearance: none; font-size: 20px }
#aforo .item .campo input[type="text"], #aforo .item .campo input[type="text"], #aforo .item  .campo input[type="number"], #aforo .item  textarea { float: left; padding: 2%; width:96%; border: 1px solid #ccc; border-radius: 5px; font-family: "Work Sans", sans-serif, sans-serif !important; font-size: 1em; -webkit-appearance: none }
#aforo .item  .campo30 input[type="number"] { float: left; padding: 6%; width:84%; border: 1px solid #ccc; border-radius: 5px; font-family: "Work Sans", sans-serif, sans-serif !important; font-size: 1em; -webkit-appearance: none }
#aforo input[type="file"]{ padding: 5px 0%; width: 100%; -webkit-appearance: none }
#aforo select { background-size: 7% }
#aforo textarea { width: 88% !important; padding: 2% 2.5% !important; margin: 2% 3% !important }
#aforo .item .campo30 select { background-size: 17%; background-position: 90% center; padding: 4% 10%; }
#aforo .item .foto { float: left; padding: 6%; width:84%; border: 1px solid #ccc; border-radius: 5px; font-family: "Work Sans", sans-serif, sans-serif !important; font-size: 1em; -webkit-appearance: none }

select { width: 100%; padding: 2%; background-image: url(../img/arrow-down-select.png); background-repeat: no-repeat; background-position: 98% center; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; }
select::-ms-expand { display: none }

.mensajes { float: left; width: 96%; padding: 2%; background: #26701D; text-align: center; color: #fff; font-weight: bold }

#logout { position: absolute; bottom: 10px; left: 10px; color:#000 }