
.form {display:inline;}
.form INPUT[type=text],.form INPUT[type=date],.form INPUT[type=datetime-local],.form INPUT[type=password],.form INPUT[type=email], .form TEXTAREA, .form SELECT{
   font-size:15px;
   vertical-align: baseline;display:inline-block;
   width:100%; padding: 8px;padding-top: 1.0em;padding-bottom: 4px;
   color:#333;background-color:#fff;
   border:none;border-bottom:1px solid #b8b8b8;
   
   box-shadow: 1px 1px 0px rgba(0,0,0,.05),inset 0px 1px 0 rgba(255,255,255,.5);
   border-radius:var(--InputRadius,0);
}
.form TEXTAREA{padding-top: 14px;}

.form INPUT,.form SELECT{height:38px;}

.form INPUT:focus-visible,
.form TEXTAREA:focus-visible{box-shadow:0 0 5px var(--ButtonBGColor);outline:none}
.form INPUT::placeholder{color:#999;opacity:1}


.form LABEL{display:block;min-height:35px;
  position:relative;
}
.form LABEL>SPAN{display:inline-block;padding-top: 11px;}
.form .mb{margin-bottom:8px;}

.form INPUT~placeholder,.form TEXTAREA~placeholder,.form SELECT~placeholder{position:absolute;left:7px;top:-3px; font-size:8px;color:#999;transition: 0.2s ease all;pointer-events: none;}
.form INPUT:placeholder-shown~placeholder,.form TEXTAREA:placeholder-shown~placeholder{left:10px;top:10px; font-size:14px;transition: 0.2s ease all;}
.form INPUT.combo:placeholder-shown~placeholder{left:35px;}
.form INPUT.combo~placeholder{left:32px;}

.form BUTTON{
  user-select: none; cursor: pointer; border: none;
  display: inline-block;vertical-align: middle;
  border-radius: var(--InputRadius);
  text-align: center;
  padding: 5px 10px;
  font-size: 20px;
  line-height: 1.2;
  min-height:38px;
  margin-top:10px;
  margin-right:10px;
  margin-bottom:13px;

  background-color: var(--ButtonBGColor);
  color: var(--ButtonTextColor);
  box-shadow: 1px 1px 0px rgba(0,0,0,.2),inset 0px 1px 0 rgba(255,255,255,.5);
}
.form BUTTON.input{padding-top:2px;padding-bottom:2px;min-height:38px;}

.form BUTTON:hover{ opacity:0.9;  }
.form BUTTON .icon{vertical-align: top;}
.form BUTTON.secondary{ background-color:#ddd;border:1px solid #ccc; color:#444; }
.form BUTTON.secondary:active{background-color:#ccc;border:1px solid #aaa;}
.form BUTTON.white{ background-color:#fff;border:1px solid #ccc; color:#444; }
.form BUTTON.white:active{background-color:#eee;border:1px solid #aaa;}
.form BUTTON:disabled { background-color: #aaa; }

.form fieldset{border:1px solid #eee;}


.form SELECT{
  appearance: none; display:inline-block;
  background-color:#fff;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAALCAMAAABFyS02AAAAWlBMVEX////8/PxfX1/4+PjT09NycnJmZmZWVlbg4ODb29vFxcXBwcG8vLyrq6unp6ecnJx0dHRsbGxiYmLt7e3f39/X19fPz8/Ly8u2traysrKhoaGSkpJcXFxZWVkV1i2DAAAAbElEQVQI102OWQ6EQAhEC+i2x9Fxm831/te0C2P0wUfxAgkgkkEuYWR6ByY3j9K9LVrhMGUXP1SoB6197dul1kCFatARhhDTLHAEz0InhD41diqja+PW8Nph+Be6vnAZ9q+nEVzkl4Tgxm3YAToPArp5gPuJAAAAAElFTkSuQmCC');
  background-position:bottom 8px right 2px ;
  background-repeat:no-repeat;
  cursor:pointer;
}


