/*##########################################*/
body 
* {box-sizing: border-box; }
button:hover { cursor:pointer; }
/*##########################################*/
/* header */
p.ph1sup { text-align: center; font-family: "Lato", "Arial", sans-serif; font-weight: bold; font-size:22px; color:#9db4dd; margin:5px; text-shadow:1px 1px 1px #000; }
@media screen and (min-device-width: 642px){
 p.ph2sup { margin:5px; text-align: center; font-family: "Lato", "Arial", sans-serif; font-weight: bold; font-size:16px; color:#9db4dd; text-shadow:1px 1px 1px #000; }
}
@media screen and (max-device-width: 641px) {
 p.ph2sup { margin:1px; text-align: center; font-family: "Lato", "Arial", sans-serif; font-weight: bold; font-size:16px; color:#9db4dd; text-shadow:1px 1px 1px #000; }
}
table.th1sup { width:100%; background-color:#eeeff1; border: 4px solid #9db4dd; border-radius: 13px; border-spacing: 0; }
td.th2sup { width: 20%; }
td.th3sup { width: 60%; }
td.th4sup { width: 25%; }
td.th5sup { width: 10%; }
div.dh1sup { margin: auto; }
img.ih1sup { padding: 2px; width: 80%; }
img.ih2sup { float: right; padding: 5px; width:35px; height:35px; }
input.ih3sup { display: block; margin: auto; width:40px; height:40px; }

/*##########################################*/
/* footer */
@media screen and (min-device-width: 642px){
 img.if1sup { height:85px; margin:auto; display: block; padding:5px;}
 div.df1sup { margin:auto; }
 p.pf1sup { float:right; margin:0px; font-family: "Lato", "Arial", sans-serif; font-weight: bold; font-size:12px; color:#000; }
}
@media screen and (max-device-width: 641px) {
 img.if1sup { height:70px; margin:auto; display: block; padding:5px;}
 div.df1sup { margin:auto; }
 p.pf1sup { float:right; margin:0px; font-family: "Lato", "Arial", sans-serif; font-weight: bold; font-size:12px; color:#000; }
}

table.tf1sup { width: 100%; }
td.tf2sup { width: 80%; }
td.tf3sup { width: 20%; }
table.tf4sup { width:100%; background-color:#eeeff1; border: 4px solid #9db4dd; border-radius: 13px; border-spacing: 0; }
/*##########################################*/
/* supromed0/supromed.php */
table.to1sup { width: 100%; }
tr.to2sup { width: 100%; }
td.to3sup { width: 25%; }
tr.to4sup { height:150px; }
img.i01sup { display: block; margin-left: auto; margin-right: auto; padding: 2px; height: 110px; width: 110px; vertical-align: middle; border-radius: 15px; }
@media screen and (min-width: 1100px) {
 button.b01sup { display: block; width: 50%; margin: 20px auto 20px auto; background-color: transparent; border: 0px; }
 span.s01sup { width: 100%; height: 40px; line-height:30px; display: inline-block; margin: 0px; background-color: #eeeff1; color: #9db4dd; border: 3px solid #9db4dd; border-radius: 13px; }
 span.s02sup { font-family: "Lato", "Arial", sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px #000; display: inline-block; vertical-align: middle; line-height: 35px; }
}
@media screen and (max-width: 1099px) {
 button.b01sup { display: block; width: 75%; margin: 20px auto 20px auto; background-color: transparent; border: 0px; }
 span.s01sup { width: 95%; height: 40px; line-height:30px; display: inline-block; margin: 0px; background-color: #eeeff1; color: #9db4dd; border: 3px solid #9db4dd; border-radius: 13px; }
 span.s02sup { font-family: "Lato", "Arial", sans-serif; font-size: 12px; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px #000; display: inline-block; vertical-align: middle; line-height: 35px; }
}
button.b02sup { width: 200px; height: 65px; display: block; margin: 0px auto 0px auto; background-color: transparent; border: 0px; }
/*##########################################*/
/* sup_login */
@media screen and (min-device-width: 502px) {
 table.tl1sup { margin:auto; width: 60%; }
}
@media screen and (max-device-width: 501px) {
 table.tl1sup { margin:auto; width: 80%; }
}
tr.tl2sup { height: 350px; }
tr.tl3sup { width: 100%; }
tr.tl4sup { height: 30px; }
td.tl5sup { width: 30%; }
td.tl6sup { width: 25%; }
td.tl7sup { width: 15%; }
tr.tl8sup { height: 20px; }
td.tl9sup { width: 40%; }
img.il1sup { display: block; border-radius: 13px; margin:auto; width:700px; height:350px; }
input.il2sup { display: block; margin:auto; border: 2px solid #9db4dd; background-color: #eeeff1; border-radius: 5px; }
label.la1sup { color:#000000; font-family: "Lato", "Arial", sans-serif; font-size:17px; font-weight: bold; text-align: center; margin: 8px; }
/*##########################################*/
img.i02sup { padding: 0px; width:85%; max-height:850px; max-width:1500px; }
table.t01sup { width: 100%; border: 0px; }
tr.t02sup { height: 50px; }
td.t03sup { width: 16%; }
/*##########################################*/
/* sup_metar.php */
hr.hr2 { height: 3px; background-color: #2a58d2; border: 0 none; width:80%;}
hr.hr3 { height: 4px; background-color: #ff0000; border: 0 none; width:80%;}
/*##########################################*/
/* sup_sen_et.php */
@media screen and (min-device-width: 802px) {
 table.ts1sup { width: 80%; border: 3px solid #5b9bd5; border-radius: 13px; border-spacing: 0px; }
 p.ps1sup { font-family: "Lato", "Arial", sans-serif; font-size: 17px; margin: auto; }
}
@media screen and (max-device-width: 801px) {
 table.ts1sup { width: 100%; border: 3px solid #5b9bd5; border-radius: 13px; border-spacing: 0px; }
 p.ps1sup { font-family: "Lato", "Arial", sans-serif; font-size: 14px; margin: auto; }
}
tr.ts2sup { height: 30px; }

td.ts3sup { width: 4%; text-align: center; background-color: #658dab; }
td.ts4sup { width: 12%; text-align: center; background-color: #658dab; }
td.ts5sup { width: 20%; text-align: center; background-color: #658dab; }
td.ts6sup { width: 14%; text-align: center; background-color: #658dab; }
td.ts7sup { width: 4%; text-align: center; background-color: #5a945c; }
td.ts8sup { width: 12%; text-align: center; background-color: #5a945c; }
td.ts9sup { width: 20%; text-align: center; background-color: #5a945c; }
td.ts0sup { width: 14%; text-align: center; background-color: #5a945c; }

td.tsasup { text-align: center; background-color: #83c185; }
td.tsbsup { text-align: center; background-color: #cff9fd; }
td.tscsup { text-align: center; background-color: #bff6b9; }
td.tsdsup { text-align: center; background-color: #c3e2f9; }
/*##########################################*/
/* sup_wrf_data.php */
@media screen and (min-device-width: 802px) {
 p.pd1sup { display: inline; font-family: "Lato", "Arial", sans-serif; font-size:17px; color:#000000; }
 p.pd2sup { display: inline; font-family: "Lato", "Arial", sans-serif; font-size:18px; color:#000000; font-weight: bold; }
 table.td1sup { margin:auto; width:80%; background-color: #eeeff1; color: #9db4dd; border: 3px solid #9db4dd; border-radius: 13px; }
}
@media screen and (max-device-width: 801px) {
 p.pd1sup { display: inline; font-family: "Lato", "Arial", sans-serif; font-size:15px; color:#000000; }
 p.pd2sup { display: inline; font-family: "Lato", "Arial", sans-serif; font-size:16px; color:#000000; font-weight: bold; }
 table.td1sup { margin:auto; width:100%; background-color: #eeeff1; color: #9db4dd; border: 3px solid #9db4dd; border-radius: 13px; }
}
tr.td2sup { height: 30px; }
td.td3sup { width: 50%;}
td.td4sup { width: 33%;}
td.td5sup { width: 34%;}
td.td6sup { width: 20%;}
td.td7sup { width: 33%;}
td.td8sup { width: 34%;}
td.td9sup { width: 30%;}
td.td0sup { width: 35%;}
table.tdtsup { width: 100%;}
td.tddsup { width: 100%;}
hr.hd1sup { height: 4px; background-color: #9db4dd; border: 0 none; }
div.dd1sup { height: 25px; text-align: center; }
div.dd2sup { height: 50px; text-align: center; }
div.dd3sup { color:#000000; text-align: center; }
/*##########################################*/
/* forecast.php */
table.t01for { width: 100%; background-color: #f1f8f9; border: 3px solid #5b9bd5; border-radius: 13px; }
tr.t02for { height: 40px; }
td.t03for { width: 50%; }
td.t04for { width: 100%; }
table.t05for { border: 1px solid #000000; background-color: #000000; border-spacing: 1px; width: 95%; }
tr.t06for { height: 50px; }
tr.t07for { height: 100px; }
table.t08for { width: 100%; border-spacing: 0px; }
td.t09for { width: 20%; padding: 0px; margin: auto; text-align: center; background-color: #f1f8f9; }
td.t10for { width: 20%; background-color: #f1f8f9; }
td.t11for { width: 20%; text-align: center; padding: 0px; margin: auto; background-color: #f1f8f9; }
td.t12for { width: 40%; text-align: center; padding: 0px; margin: auto; background-color: #f1f8f9; }
td.t13for { width: 40%; text-align: center; padding: 0px; margin: auto; background-color: #f1f8f9; }
tr.t14for { height: 120px; }
tr.t15for { height: 35px; }
td.t16for { width: 16%; text-align: center; padding: 0px; margin: auto; background-color: #f1f8f9; }
td.t17for { width: 17%; text-align: center; padding: 0px; margin: auto; background-color: #f1f8f9; }
table.t18for { border-spacing: 0px; width: 100%; }
div.d01for { font-weight: bold; text-align: center; }
@media screen and (min-device-width: 802px) {
 table.t05for { border: 1px solid #000000; background-color: #000000; border-spacing: 1px; width: 95%; }
 p.p01for { font-family: "Lato", "Arial", sans-serif; font-size: 15px; font-weight: bold; margin: auto; }
 p.p02for { font-family: "Lato", "Arial", sans-serif; font-size: 14px; font-weight: bold; margin: auto; }
 p.p03for { font-family: "Lato", "Arial", sans-serif; font-size: 13px; font-weight: bold; margin: auto; }
}
@media screen and (max-device-width: 801px) {
 table.t05for { border: 1px solid #000000; background-color: #000000; border-spacing: 1px; width: 100%; }
 p.p01for { font-family: "Lato", "Arial", sans-serif; font-size: 12px; font-weight: bold; margin: auto; }
 p.p02for { font-family: "Lato", "Arial", sans-serif; font-size: 10px; font-weight: bold; margin: auto; }
 p.p03for { font-family: "Lato", "Arial", sans-serif; font-size: 10px; font-weight: bold; margin: auto; }
}
img.i01for { width: 25px; vertical-align: middle; }
img.i02for { width: 80px; vertical-align: middle; }
/*##########################################*/
font.ft15 {
 font-family: "Lato", "Arial", sans-serif;
 font-size:15px;
 color:#ffffff;
}

@media screen and (min-device-width: 802px) {
 font.fnt1 { font-family: "Lato", "Arial", sans-serif; font-size:17px; color:#000000; }
 font.fnt2 { font-family: "Lato", "Arial", sans-serif; font-size:18px; color:#000000; font-weight: bold; }
 table.tbl2 { margin:auto; width:80%; }
}


@media screen and (max-device-width: 801px) {
 font.fnt1 { font-family: "Lato", "Arial", sans-serif; font-size:15px; color:#000000; }
 font.fnt2 { font-family: "Lato", "Arial", sans-serif; font-size:16px; color:#000000; font-weight: bold; }
 table.tbl2 { margin:auto; width:100%; }
}

input.inp0 {
 position: relative;
 top: 2px;
}

input.inp1 {
 float: right;
 position: relative;
 top: 2px;
}

input.inp2 {
 float: right;
 position: relative;
 top: -7px;
}

div.div1 {
 height: 25px;
 text-align: center;
}

div.div2 {
 height: 50px;
 text-align: center;
}

div.div3 {
 text-align: center;
}

hr.hr1 {
 height: 4px;
 background-color: #2a58d2;
 border: 0 none;
}
/*##########################################*/
img.img0 {
 display: block;
 margin-left: auto;
 margin-right: auto;
 padding: 0px;
 height: 110px;
 width: 110px;
 vertical-align: middle;
 border-radius: 15px;
}
/*##########################################*/
@media screen and (min-device-width: 802px) {
 table.tbl1 { width: 80%; border: 3px solid #ff8000; }
 font.fnt4 { font-family: "Lato", "Arial", sans-serif; font-size: 17px; }
}

@media screen and (max-device-width: 801px) {
 table.tbl1 { width: 100%; border: 3px solid #ff8000; }
 font.fnt4 { font-family: "Lato", "Arial", sans-serif; font-size: 14px; }
}
/*##########################################*/