body{margin:0px;padding:10px;list-style:none;font-size:11px;font-family:tahoma;}
input,button{font-size:11px;font-family:tahoma;outline:none;}
*{box-sizing:border-box;}
a{text-decoration:none;color:blue;}
a:hover{text-decoration:underline;color:black;}
main{margin:0px auto;max-width:650px;}
main > *{margin-bottom:10px !important;}

h1{margin:0px;font-size:11px;border-bottom:1px solid #000;text-transform:uppercase;line-height:24px;clear:both;}
h1 a{float:right;font-size:8px;}
h2{color:blue;margin:0px 0px 10px 0px;font-size:11px;text-transform:uppercase;text-align:center;}
h3{color:red;margin:0px 0px 10px 0px;font-size:11px;text-align:center;}

.logo{display:block;height:40px;margin:0px auto;}

.nav{margin:0px;padding:0px;list-style:none;}
.nav li{display:inline-block;vertical-align:top;}
.nav li a{font-weight:bold;text-decoration:underline;text-transform:uppercase;font-size:10px;}

#home{font-size:0px;padding:10px 0px;}
#home > *{display:inline-block;vertical-align:top;}

#home .list{margin:0px;padding-left:25px;font-size:11px;}
#home .list li a{display:inline-block;line-height:20px;}

#home .btn{margin:0px;list-style:none;padding:0px;font-size:0px;}
#home .btn li{width:calc(100% / 2);display:inline-block;vertical-align:top;text-align:center;padding:0px 10px;}
#home .btn li a{display:block;font-size:11px;background:#eee;border:1px solid #ddd;font-weight:bold;padding:15px 0px;}
#home .btn li a:hover{border-color:#000;background:#fff;}
#home .btn li a *{display:inline-block;}
#home .btn li a b{width:100%;margin-bottom:10px;}
#home .btn li a img{height:40px;}

#home .list{width:200px;}
#home .btn{width:calc(100% - 200px);}

#tabla{margin:0px auto;width:100%;border:1px solid #ddd;padding:10px;}
#tabla .logo{height:30px !important;margin:0px auto 10px auto !important;}
#tabla > *{margin:0px 0px 10px 0px;}
#tabla > *:last-child{margin:0px;}
#tabla .ul{padding:0px;list-style:none;border:1px solid #000;}
.som{background:#eee;xfont-size:10px !important;color:red;}
#tabla .ul .t span, #tabla .ul li span:first-child{font-weight:bold;background:#eee;font-size:9px !important;text-transform:uppercase;}
#tabla .ul li{border-bottom:1px solid #000;font-size:0px;}
#tabla .ul li:last-child{border:0px;}
#tabla .ul li > *{display:inline-block;vertical-align:top;width:calc(100% / 9);font-size:11px;text-align:center;border-right:1px solid #000;line-height:20px;height:20px;}
#tabla.agua .ul li > *{width:calc(100% / 5);}
#tabla.agua .ul.t2 li > *{width:calc(100% / 6);}
#tabla.agua .ul.t3 li > *{width:calc(100% / 4);}
#tabla .ul li span:last-child{border:0px;}
#tabla > input{width:100%;}
#tabla > span{color:red;margin-left:10px;font-weight:bold;}
#tabla > button{margin:0px !important;}
#tabla .pd{display:none;padding:0px 0px 0px 15px;}

#form{margin:0px auto;width:100%;font-size:0px;border:1px solid #aaa;padding:10px;}
#form > *{display:inline-block;vertical-align:top;width:calc(100% / 4);padding:3px;}
#form .c span{display:block;font-size:8px;padding:2px;text-transform:uppercase;font-weight:bold;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
#form .c span i{color:#ddd;font-style:normal;font-size:8px;font-weight:normal;text-transform:none;}
#form .c input{border:1px solid #ddd;padding:0px 5px;height:22px;margin:0px 2px;width:calc(100% / 2 - 4px);}
#form .c input::placeholder{color:#ddd;}
#form .c.f{width:calc(100% / 3);}
#form .c.b{width:100% !important;}
#form.agua .c.f{width:calc(100% / 4);}
#form.agua .c.ag{width:calc(100% / 5);}
#form .c.f input{width:calc(100% - 4px);margin:0px 2px;}
#form .c.f input[type=date], #form .c.f input[type=month]{padding:0px 0px 0px 5px;}
#form .c button, #tabla > button{padding:0px 10px;line-height:20px;}

@media(max-width:400px){

#home{padding:0px;}
#home > *{width:100% !important;}
#home .list{margin-bottom:10px;}

main .logo{height:30px !important;}

#home .list li a{line-height:18px;}

#tabla .ul .t span, #tabla .ul li span:first-child{font-size:8px !important;}
#tabla .ul li > *{font-size:10px;}

#form, #tabla{padding:0px 0px 10px 0px;border:0px;border-bottom:1px solid #000;}
#form .c input{font-size:10px;}
#form > *{padding:3px 0px}
#form .c input{margin:0px;width:calc(100% / 2 - 2px);}
#form .c span i{display:none;}
#form .c:not(.f) input:last-child{border-left:0px;}

#form.agua .c{width:calc(100% / 3 - 16px);}
#form.agua .c.f{width:calc(100% / 3);}
#form.agua .c.f:nth-child(4){width:45px;margin-right:2px;}

#tabla{overflow-y:auto;}
#tabla:last-child{border:0px;margin:0px !important;}

#tabla.luz .ul{width:520px;}
#tabla.agua .ul{width:340px;}

}