form {
 font-size:100%;
 position:relative;
 margin:10px 0;
 display:inline-block;
 width:100%;
}
form span {
 padding:1em 1.4em;
 font-size:90%;
 width:calc(100% - 2.8em);
 display:inline-block;
 background-color:var(--form-input-background);
 opacity:0.8;
 border-radius:var(--radius);
}
form label {
 display:inline-block;
 margin:7px 2px 2px;
 color:inherit;
 font-size:0.92857143em;
 font-weight:300;
 text-transform:none;
 opacity:0.9;
 width:calc(100% - 6px);
}
form label > a {
 float:right;
 text-decoration:unset;
 font-size:90%;
}
form output {
 display:inline-block;
}
nav input,
form .input,
form .marker,
form .textarea,
form input,
form input[type="range"],
form output,
form select,
form textarea,
li input {
 font-family:var(--form-input-font);
 margin:0;
 outline:0;
 line-height:36px;
 padding:0 0.6em;
 font-size:1em;
 background:var(--form-input-background);
 border-width:1px;
 border-style:solid;
 border-color:var(--form-input-border);
 color:var(--form-input-text);
 border-radius:var(--radius);
 box-shadow:0 0 0 0 transparent inset;
 transition:color 0.1s ease, border-color 0.1s ease;
 width:calc(100% - 1.2em);
 vertical-align:top;
 overflow:visible;
 appearance:none;
 position:relative;
 width:calc(100% - 20px);
 opacity:0.96;
 tap-highlight-color:var(--form-input-border-focus);
 -webkit-box-shadow:0 0 0 0 transparent inset;
 -webkit-transition:color 0.1s ease, border-color 0.1s ease;
 -webkit-appearance:none;
 -moz-appearance:none;
}
form fieldset {
  outline:0;
  -webkit-appearance:none;
  padding:0 1em 1em;
  border-width:1px ;
  border-style:solid;
  color:var(--text);
  border-radius:var(--radius);
  -webkit-box-shadow:0 0 0 0 transparent inset;
  box-shadow:0 0 0 0 transparent inset;
  border-color:rgba(0,0,0,0.05);
  position:relative;
  margin:34px 0 10px;
  display:inline-block;
}
form legend {
 font-size:100%;
 left:0;
 z-index:100000;
 position:absolute;
 top:-26px;
 text-transform:uppercase;
}
form textarea {
  line-height:1.2em;
  min-height:70px;
  padding:0.6em;
  max-width:calc(100% - 1.2em);
}
nav input:focus,
form input:focus {
 border-color:var(--form-input-border-focus);
}
nav input:hover,
form input:hover {
 border-color:var(--form-input-border-hover);
}
form input[type="email"] {
 width:calc(100% - 20px) !important;
 padding-right:0.6em !important;
}
form hr {
  margin:2em 0 1em;
  background-color:var(--form-input-border-hover);
  border:none;
  height:2px;
  border-radius:var(--radius);
 }
.fx-relay-icon {
 right:0.5em !important;
}
form .note {
 margin:4px 0;
 padding:8px 10px 10px;
 border:solid 1px var(--white-20);
 border-radius:var(--radius-more);
 background-color:var(--white-60);
 font-size:12px;
 line-height:14px;
}
form .radio [type="radio"], 
form .checkbox [type="checkbox"] {
 display:none;
}
input[type="checkbox"], input[type="radio"] {
 box-sizing:border-box;
 padding:0;
}
form .radio label::before, 
form .checkbox label::before {
 background-color:var(--white-60);
 border:1px solid var(--form-input-bolder);
 -webkit-box-shadow:0 0 0 0 transparent inset;
 box-shadow:0 0 0 0 transparent inset;
 display:inline-block;
 position:absolute;
 content:'';
 width:7px;
 height:7px;
 left:0;
 top:5px;
}
form .checkbox label::before {
 padding:9px;
 border-radius:var(--radius);
}
form .checkbox label, 
form .radio label {
 font-family:inherit;
 cursor:pointer;
 font-size:14px;
 color:var(--gray-60);
 font-weight:inherit;
 position:relative;
 padding:0 0 0 34px;
 width:calc(100% - 34px);
 margin:0;
}
form .radio [type="radio"]:checked + label::after, 
form .checkbox [type="checkbox"]:checked + label::after {
 position:absolute;
 z-index:10;
}
form .checkbox [type="checkbox"]:checked + label::after {
 content:'';
 left:7px;
 z-index:10;
 width:9px;
 height:5px;
 top:12px;
 border-right:solid 2px var(--black-60);
 border-top:solid 2px var(--black-60);
 transform:rotate(135deg);
}
form .checkbox [type="checkbox"]:checked + label {
 color:var(--black-60);
}
form .checkbox input {
 width:60px;
 background-color:var(--white-60);
 line-height:26px;
 float:right;
 margin-top:4px;
 text-align:right;
 opacity:0.3;
}
form .checkbox.checked input {
 opacity:1;
}
form .radio label:hover::before, 
form .checkbox label:hover::before {
 border:1px solid var(--form-input-bolder-hover);
}
form .list, 
form .select {
 position:relative;
}
form .list::after, 
form .select::after {
 width:0;
 height:0;
 border-left:6px solid transparent;
 border-right:6px solid transparent;
 border-top:6px solid var(--form-input-border-hover);
 content:'';
 position:absolute;
 top:44px;
 right:12px;
 z-index:10;
 display:inline-block;
 pointer-events:none;
}
form .highlight {
 border-color:var(--yellow-70);
}
form .image-upload {
 position:relative;
}
form .image-upload img {
 width:100%;
 background-color:var(--form-input-background);
 height:auto;
 min-height:100px;
 border:var(--form-input-border) 1px solid;
 border-radius:var(--radius);
 background-size:cover;
 background-position:center;
}
form .image-upload input[type="file"] {
 position:absolute;
 right:0;
 top:0;
 bottom:0;
 left:0;
 opacity:0;
 cursor:pointer;
}
form .checkbox label {
 padding:0 10px 0 34px;
 width:auto;
}
form .input.overflow {
 height:165px;
 overflow-x:auto;
}
form .input.overflow label {
 width:calc(100% - 34px);
 padding:0 0 0 34px;
}
form.button-x {
 display:none;
}
form div.width-t {
 width:33%;
}
form .width-t:nth-child(2) {
 width:34%;
}
form div.width-t select,
form div.width-t input {
 width:calc(100% - 23px);
}
form .width-t:nth-child(1) input {
 margin-right:3px;
 margin-left:0;
}
form .width-t:nth-child(2) input {
 width:calc(100% - 26px);
 margin-right:3px;
 margin-left:6px;
}
form .width-t:nth-child(3) input {
 margin-right:0;
 margin-left:3px;
}
form div.width-50p select,
form div.width-50p input {
 width:calc(100% - 23px);
 margin-right:3px;
 margin-left:0px;
}
form div.width-50p:nth-child(even) select,
form div.width-50p:nth-child(even) input {
 margin-left:3px;
 margin-right:0px;
}
form .input:disabled,
form .marker:disabled,
form .textarea:disabled,
form input:disabled,
form input[type="range"]:disabled,
form output:disabled,
form select:disabled,
form textarea:disabled,
li input:disabled {
 color:var(--gray-60);
 cursor:default;
}
form input:disabled:hover {
 border-color:var(--gray-40);
}
form .switch [type="checkbox"] {
  display:none;
}
form .switch {
  width:100%;
  display:inline-block;
  position:relative;
}
form .switch label {
  padding:4px 6px 6px 0 !important;
}
form .switch.onright label {
  padding:6px;
}
form .switch [type="checkbox"]:not(:checked) + label::before, 
form .switch [type="checkbox"]:checked + label::before {
  left:0;
  top:11px;
  width:3em;
  border:2px solid var(--gray-30);
  background:var(--gray-30);
  border-radius:1.1em;
  z-index:0;
}
form .switch.onright [type="checkbox"]:not(:checked) + label::before, 
form .switch.onright [type="checkbox"]:checked + label::before {
  right:0;
  left:unset;
}
form .switch [type="checkbox"]:not(:checked) + label::before, 
form .switch [type="checkbox"]:checked + label::before, 
form .switch [type="checkbox"]:not(:checked) + label::after, 
form .switch [type="checkbox"]:checked + label::after {
  content:'';
  position:absolute;
  height:1.5em;
  transition:all .5s ease;
}
form .switch [type="checkbox"]:not(:checked) + label, 
form .switch [type="checkbox"]:checked + label {
  cursor:pointer;
}
form .switch [type="checkbox"]:not(:checked) + label::after, 
form .switch [type="checkbox"]:checked + label::after {
  left:.15em;
  top:13px;
  background-color:var(--white-60);
  border-radius:50%;
  width:21px;
  height:21px;
}
form .switch.onright [type="checkbox"]:not(:checked) + label::after, 
form .switch.onright [type="checkbox"]:checked + label::after {
  left:unset;
  right:1.65em;
}
form .switch [type="checkbox"]:checked + label::before {
  background-color:var(--green-60);
  border-color:var(--green-60);
}
form .switch [type="checkbox"]:checked + label::after {
  left:23px;
}
form .switch.onright [type="checkbox"]:checked + label::after {
  left:unset;
  right:.15em;
}
form .switch {
  width:100%;
  display:inline-block;
  position:relative;
  height:44px;
}
form .switch [type="checkbox"] {
  display:none;
}
input[type="checkbox"], input[type="radio"] {
  box-sizing:border-box;
  padding:0;
}
form .switch label {
  font-family:inherit;
  padding:6px 6px 0 30px;
  font-weight:normal;
  cursor:pointer;
  font-size:14px;
  margin-top:4px;
  font-weight:inherit;
}
form .switch {
  padding:6px 6px 6px 56px;
}
form .switch.disabled [type="checkbox"]:not(:checked) + label::after, 
form .switch.disabled [type="checkbox"]:checked + label::after {
  border-color:var(--gray-40);
  cursor:default !important;
  color:var(--disabled) !important;
	 background-color:var(--disabled-background) !important;
}
form .switch.disabled label {
  cursor:default !important;
}
form .switch [type="checkbox"]:checked + label {
  color:inherit;
}