.off{display:none; visibility:hidden;}
  .on{display:inline; visibility:visible;}
  
  html{font-size:90%;font-family:arial,helvetica,sans-serif;}
  
  h4{color:teal; text-align:center;}
  
  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;}
  div#d2{width:100%;min-height:60px;padding:0;}
  div#flex-container{display:flex;}
  div#g, div#g.w, div#g2, div#g2.w{display:block; height:auto; width:100%; min-width:100px;	margin:5px 0 5px 0;	resize:initial;}
  div#g.h, div#g2.h{min-heigh:100px; padding:2px 0 2px 0; overflow:hidden; resize:both;}
	div#g.h2, div#g2.h2{
		display:inline-block; width:50%;
		min-heigh:100px;
		padding:2px 0 2px 0;
		overflow:auto; /* hidden; */
		resize:both;
	}
  
  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:20%; min-width:150px; padding: 0 0 0 8px; font-size:93%;}
  span.b1 a, span.b2 a, span.b3 a {display:block; text-decoration:none; color:teal; padding:0;}
  span.b1 a:hover, span.b2 a:hover, span.b3 a:hover{color:black;background-image: linear-gradient(white,teal);}

  span.b31{display:inline-block; width:20%; min-width:150px; padding:0 0 0 4px; margin:0; font-size:93%; border-bottom:2px solid teal;}
  span.b31:hover {background-image: linear-gradient(white,teal);}
  span.b31 a{display:block; text-decoration:none;color:black;margin:0 0 0 4px;}

  textarea {display:inline-block; width:30%; min-height:50px; height:98%; margin:5px 1% 0 0;resize:none;} /* width 21% (4); 46 (2) */
  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:95%; height:95%; object-fit:contain; overflow:hidden;
		/*
    width: auto;
		max-width: min(80%,200px);
		height: 350px;
		display: block;
    margin-left: auto; margin-right: auto; 
    -webkit-transition-duration: 1s; transition-duration: 1s;
    -webkit-transition-delay: 1s; transition-delay: 1s;
    cursor: -webkit-zoom-in; cursor: zoom-in; object-fit: scale-down;
		*/
	-webkit-filter: contrast(1.1); filter: contrast(1.1);
  }
  /* .str_img:hover {height:400px;} */
  
  ::placeholder {color:grey;opacity: 1; /* Firefox */}
  ::-ms-input-placeholder { /* Edge 12-18 */ color: grey;}

  input[type="file"]{border-bottom:2px solid orange; padding:0 0 2px 0; color:red; font-family:monospace; width:50%;}
  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="button"]{display:inline-block; width:auto; min-width:50px; margin:0 2px 0 2px;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:20%; min-width:150px; text-align:left; height:24px;}
	input[type="button"].b31{display:inline-block;width:20%; 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="checkbox"]{box-shadow:3px 3px 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:100px; text-align:left; padding:0 0 0 5px; 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;}
	label.b4{display:inline-block; width:20%; 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:20%; min-width:150px; height:24px;}
  .select_b3:hover {background-image: linear-gradient(orange,white);}
  .select_b31 {border:none; border-bottom:2px solid teal; cursor:pointer; display:inline-block; width:20%; min-width:150px; height:24px;}
  .select_b31:hover {background-image: linear-gradient(teal,white);}

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



  ul {line-height:24px;}
   
  /* 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;
  }
  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;} */
	svg {width:95%; height:95%; object-fit:contain; overflow:hidden;border:1px dotted grey;}