.off{display:none;visibility:hidden;}
.on{display:inline;visibility:visible;}
  
html{font-size:90%;font-family:arial,helvetica,sans-serif;height:100%;box-sizing:border-box;min-width:375px;}
body{height:95%;box-sizing:border-box;min-width:375px;}
h4, h5{color:teal;text-align:center;user-select:none;}

/* div{border:1px solid lightgrey;} div:hover{border:1px solid red;} */

div#d0, div#d3, div#d4, div#d5, div#d6{border:none;height:20%;min-height:200px;overflow:auto;}
div#d1, div#d2{width:calc(100% - 10px);padding:5px 0 5px 0;margin:0 0 5px 0;text-align:center;} /* calc(100%-10px) is wrong */
div#d2{width:100%;min-height:60px;padding:0;}

div#flex-container{display:flex;flex-direction:row;align-items:center;}
div#g, div#g.w, div#g2, div#g2.w{display:inline-block;margin:5px 0 5px 0;resize:none;height:auto;width:auto;min-width:200px;vertical-align:top;border:1px dotted white;}
div#g.h, div#g2.h{height:auto; width:100%; padding:2px 0 2px 0; overflow:hidden; resize:none;}
div.h1{max-width:30%;}
div.h2{}

@media (max-width:600px){div#flex-container{flex-direction:column;} div#g.h2, div#g2.h2{width:100%;}}
  
span.b1{display:inline-block;width:50%;min-width:150px;padding:0 0 0 4px;font-size:93%;}
span.b2{display:inline-block;width:25%;min-width:150px;}
span.b3{display:inline-block;width:23%;min-width:100px;padding:0 0 0 4px;font-size:93%;}
span.b1 a, span.b2 a, span.b3 a{text-decoration:none;color:teal;padding:4px;display:block;width:97%;}
span.b1 a:hover, span.b2 a:hover, span.b3 a:hover{color:black;background-image:linear-gradient(white,teal);}

textarea{display:inline-block;width:21%;min-height:50px;height:98%;margin:5px 1% 0 0;resize:none;}
textarea.a{display:block;width:99%;min-height:100px;height:98%;}
textarea#ta{border:1px solid orange;}
textarea#ta:hover{background-image:linear-gradient(white,orange);}
textarea#tb, textarea#tc, textarea#td{border:1px solid grey;}
textarea#tb:hover, textarea#tc:hover, textarea#td:hover{background-image:linear-gradient(white,lightgrey);}
.tx_str{display:block;width:100%;margin:10px 0px;}
.str_img{
 width:100%;max-width:min(70%,300px);height:auto;display:block;margin-left:auto;margin-right:auto; 
 transition-duration:1s;transition-delay:1s;object-fit:scale-down;filter:contrast(1.1);
}
  
::placeholder{color:grey;opacity: 1; /* Firefox */}

input[type="file"]{border-bottom:2px solid orange; padding:0 0 2px 0;color:black;font-family:monospace;}
input[type="file"]:hover{background-image:linear-gradient(orange,white);}
  
input[type="number"]{border:none;border-bottom:2px solid orange;}
input[type="number"]:hover{background-image:linear-gradient(orange,white);}
input[type="number"].b2{border:none;border-bottom:2px solid orange;display:inline-block;width:25%;min-width:150px;height:24px;}
input[type="number"].b4{text-align:center;font-size:120%;outline-style:dotted;outline:1px solid lightgrey;}

input[type="button"]{display:inline-block;width:auto;min-width:50px;margin:0 0 0 0;border:none;border-bottom:2px solid orange;background-color:#fff;cursor:pointer;}
input[type="button"]:hover{background-image:linear-gradient(orange,white);}
input[type="button"].b1{display:inline-block;width:50%;min-width:300px;text-align:left;height:24px;}
input[type="button"].b2{display:inline-block;width:25%;min-width:150px;text-align:left;height:24px;}
input[type="button"].b3{display:inline-block;width:23%;min-width:150px;text-align:left;height:24px;}
input[type="button"].b31{display:inline-block;width:23%;min-width:150px;text-align:left;height:24px;border-bottom:2px solid teal;padding:0 0 0 4px; margin:0;}
input[type="button"].b31:hover{background-image:linear-gradient(teal,white);}

input[type="button"].b4{width:20px;font-size:120%;outline-style:dotted;outline:1px solid lightgrey;}

input[type="checkbox"]{box-shadow:3px 3px orange;}
input[type="checkbox"].b{cursor:pointer;transition-delay:1s;transition:all 2s;}
input[type="checkbox"].b:hover{box-shadow:0px 0px 5px 5px orange;}

label{border-bottom:2px solid orange;font-size:93%;padding:2px 0 2px 0;cursor:pointer;}
label:hover{background-image:linear-gradient(orange,white);}
label.b0{display:inline-block;width:15%;min-width:150px;text-align:left;padding:0 0 0 0;border:none;}
label.b0:hover{background-image:linear-gradient(lightgrey,white);}
label.b2{display:inline-block;width:25%;min-width:150px;text-align:left;padding:0 0 0 5px;}
label.b3{display:inline-block;width:15%;min-width:100px;text-align:left;padding:0 0 0 5px;}

.select_b2{border:none;border-bottom:2px solid orange;cursor:pointer;display:inline-block;width:25%;min-width:150px;height:24px;}
.select_b2:hover{background-image:linear-gradient(orange,white);}
.select_b3{border:none; border-bottom:2px solid orange;cursor:pointer;display:inline-block;width:23%;min-width:150px;height:24px;}
.select_b3:hover{background-image:linear-gradient(orange,white);}

option:default{color:red;background-color:#f5f5f5;}

ul{line-height:22px;}
   
/* Menu */
ul.m{list-style-type:none;margin:0 0 5px 0;padding:0;display:flex;width:100%;}
ul.m li{display:inline-block;padding:5px;margin:0;text-decoration:none;width:20%;min-width:50px;text-align:center;background-image:linear-gradient(lightgrey,white);border-bottom:1px solid lightgrey;user-select:none;}
ul.m li span{cursor:pointer;text-decoration:none;display:block;color:teal;}
ul.m li:hover{background-image:linear-gradient(orange,white);border-bottom:1px solid orange;}
ul.m li.s{background-image:linear-gradient(teal,white);border-bottom:1px solid teal;}
ul.m li.s span{color:black;}
   
.w1{display:block;color:grey;font-style:italic;text-align:center;}
.bg1{background-image:linear-gradient(lightgrey,white);}
.bg2{background-image:linear-gradient(white,lightgrey);}
.bg3{background-color:#f5f5f5;}
.p1{padding:5px 0 5px 0;}
.copyright{border:none;text-align:center;color:teal;font-size:80%;}
svg{height:95%; min-height:200px;}

a.o{color:orange;font-weight:normal;text-decoration:none;}
a.o:hover{text-decoration:underline;}