:root {
	--inputs-font: var(--main-font);
	--button-font: var(--main-font);
	--label-font: var(--main-font);
}

.form--mdl {
	/* padding: 1em; */
}

.form--center {
	text-align: center;
}

.form--padv {
	padding: 1rem 0;
}
.form--padb {
	padding-bottom: 1rem;
}
.form--padh, .form--padsides {
	padding: 0 1rem;
}
.form--padall {
	padding: 1rem;
}
.form--nobr {
	white-space: nowrap;
}

/* .form--mdl label, .form--mdl input, .form--mdl textarea, .form--mdl button, .form--mdl select, .form--mdl .button { */

.form--mdl :is(label, input, textarea, button, select), .button {
	display: inline-block;
	vertical-align: baseline;
	
	padding: .2em .6em;
	font-size: .8rem;
	font-family: var(--inputs-font);
	background-color: var(--inputs-bg);
	border: var(--inputs-border);
	line-height: 1.5em;	
}
.form--mdl :is(label, input, textarea, select, button):focus {
	outline: 1px solid var(--inputs-outline-c);
}

.form--mdl label {
	font-family: var(--label-font);
	border: var(--label-border);
	background-color: var(--label-bg);
	padding: .2em 2em;
	text-align: right;
	border-radius: .2em 0 0 .2em;
	
}
.form--mdl label[for] {
	border-right-width: 0;
}
.form--mdl label:empty {
	border: none;
	background-color: transparent;
}

.form--mdl input, .form--mdl textarea {
	background-color: var(--inputs-bg);
	color: #080808;
	border-radius: 0 .2em .2em 0;
}

.form--mdl select {
	background-color: var(--inputs-bg);
	color: #080808;
	padding: .3em .6em;
	border-radius: 0 .2em .2em 0;
	/* border-radius: .2em; */
}
.form--mdl select optgroup {
	font: inherit;
	background-color: #ddd;
	border-bottom: var(--optgroup-border-b);
	text-align: center;
	/* line-height: 2em; */
	/* display: inline-block; */
	/* padding-left: 1.2em; */
}

.form--mdl button, .form--mdl .button  {
	background-color: var(--button-bg);
	color: var(--button-color);
	border-radius: .2em;
	padding: .2em 2em;
	font-size: 0.75rem;
	font-family: var(--button-font);
	text-align: center;
	/* vertical-align: top; */
}

.form--mdl button:hover, .form--mdl .button:hover {
	border-color: var(--button-hover-border-c);
	background-color: var(--button-hover-bg);
}

.form--mdl .form--notes {
	padding: 1em;
	background-color: var(--form-notes-bg);
}

.form--mdl button[name="search"] {
	margin-left: 2em;
}

.form--mdl input[type="radio"], .form--mdl input[type="checkbox"] {
	vertical-align: baseline;
	margin: .25em 0 0 .5em;
}

.form--mdl input[readonly], .form--mdl textarea[readonly] {
	background-color: var(--inputs-readonly-bg);
}
.form--mdl input[disabled], .form--mdl textarea[disabled] {
	background-color: var(--inputs-disabled-bg);
}

.form--mdl input:required+span:after, .form--mdl textarea:required+span:after  {
	content: '*';
	margin: 0 .3em;
	/* display: inline-block; */
	color: #d88;
}

.form--mdl input:invalid, .form--mdl textarea:invalid {
	border: 1px solid var(--inputs-invalid-border-c);
	border-width: 1px 6px;
}


.form--mdl textarea.coderows {
	line-height: 2em;
	padding: 0em .75em;
	background-color: #fff;
	background-attachment: local;
	background-position: top; 
	/* color: #fff; */
}

.form--fsw {
	margin: .5em;
}
.fsw--center {
	text-align: center;
}

.form--mdl .field-view[readonly], .form--mdl .field-view[disabled] {
	background-color: transparent;
	color: var(--inputs-viewmode-color);
}

.fsw--split {
	height: 1rem;
}

.fsw--opt {
	position: absolute;
	left: -85vw;
}


/* Specific Field Types  */

/* .itype--radio label, .itype--checkbox label { */
.itype--radio label:not(:first-of-type), .itype--checkbox label:not(:first-of-type) {
	/* border-radius: .2em; */
	border-width: 1px;
	background-color: rgba(255,255,255,0.03);
	border-radius: 0;
	border-right-width: 1px;
}
.itype--radio label:nth-of-type(2), .itype--checkbox label:nth-of-type(2) {
}

.itype--radio label:last-of-type, .itype--checkbox label:last-of-type {
	border-radius: 0 .2em .2em 0;
	border-right-width: 1px;
}
.itype--radio label:first-of-type, .itype--checkbox label:first-of-type {
	/* margin-right: .5em; */
	/* width: auto; */
	/* border-radius: .2em; */
	/* border: 5px solid red; */	
}

label.lbl--solo, label[for][data-itype="checkbox"] {
	border-radius: .2em;
}



/* Field Display & Placement */

.form--mdl .fe-soloblock {
	display: block;
	margin: 1rem 0;
}


/* Field Sizes */

.w-mini {
	width: 7ch;
}
.w-shortest {
	width: 10ch;
}
.w-shorter {
	width: 14ch;
}
.w-short {
	width: 21ch;
}
.w-meds {
	width: 28ch;
}
.w-med {
	width: 35ch;
}
.w-long {
	width: 48ch;
}
.w-longer {
	width: 64ch;
}
.w-quart {
	width: 25%;
}
.w-half {
	width: 50%;
}
.w-wide {
	width: 75%;
}
.w-max {
	width: 100%;
}

.h-mini {
	height: 4.2ex;
}
.h-short {
	height: 8.4ex;
}
.h-med {
	height: 12.6ex;
}
.h-tall {
	height: 24ex;
}
.h-taller {
	height: 32ex;
}
.h-tallest {
	height: 48ex;
}

.chk-2x {
	transform: scale(1.5);
	vertical-align: baseline;
}


/* Radio Toggle  */

.radio-toggle {
	display: flex;
	overflow: hidden;
	margin: .5em 1em;
	border-radius: .5em;
	border: 1px solid rgba(255,255,255,0.5);
	background-color: rgba(0,0,0,0.3);
	width: fit-content;
}


.rt--multiline {
	flex-wrap: wrap;
}
.rt--multiline > label {
	/* width:  */
	flex: 1 1 25%;	
}
.rt--multiline > button {
	/* width:  */
	/* line-height: 3; */
	flex: 1 2 50%;	
}
.rt--multiline label {
	text-align: center;
}

.radio-toggle input[type=radio], .radio-toggle input[type=checkbox] {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.radio-toggle label {
	/* background-color: #e4e4e4; */
	color: #eee;
	font-weight: bold;
	font-weight: 700;
	font-size: .8rem;
	padding: .2em 1.5em;
	border-radius: 0;
	/* border: 1px solid rgba(0, 0, 0, 0.2); */
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.3);
	transition: all 0.2s ease-in-out;
}

.radio-toggle label:hover {
	cursor: pointer;
}

.radio-toggle input:checked + label {
	background-color: rgba(0,160,90,0.5);
	box-shadow: none;
}

.radio-toggle input:checked[type=checkbox] + label {
	background-color: rgba(0,120,220,0.5);
	box-shadow: none;
}
.radio-toggle button {
	border: 0;
	font-size: 0.8rem;
	font-weight: bold;
	font-weight: 700;
	border-width: 1px 0 1px 0;
	/* border-radius */
	line-height: 1;
	/* cursor: crosshair; */
	/* border: 1px solid rgba(0,0,0,0.3); */
	/* border-width: 1px 0; */
	/* background-color: rgba(255,255,255,0.2); */
	border-radius: 0;
}
.radio-toggle button:hover {
	/* background-color: rgba(0,0,0,0.1); */
}

.radio-toggle input[type=text] {
	font-size: 0.8rem;
}

.radio-toggle label:first-of-type {
}

.radio-toggle label:last-of-type {
}

.rt-legend {
	font-size: .8rem;
}

/* ==== BUTTONS ==== */

button[type="submit"].btn-submit {
	background-color: var(--btn-submit-bg);
}
button[type="submit"].btn-submit:hover {
	background-color: var(--btn-submit-hover-bg);
}
button.btn-action {
	background-color: var(--btn-action-bg);
}
button.btn-action:hover {
	background-color: var(--btn-action-hover-bg);
}

button[type="reset"].btn-reset {
	background-color: var(--btn-reset-bg);
}
button[type="reset"].btn-reset:hover {
	background-color: var(--btn-reset-hover-bg);
}
.form--mdl button[type="submit"]:focus { 
	/* @note: :active is removed on click release */
	cursor: wait;
}
.form--mdl button[disabled] {
	cursor: not-allowed;
}
button.btn-narrow {
	
}


/* ==== MESSAGES ==== */

.form--msg, .login--msg {
	/* text-align: center; */
	font-size: .8rem;
	color: #fff;
	padding: .2em 3em;
	margin: 1rem;
	border-radius: .25em;
	width: fit-content;
}
.form--msg hr {
	margin: .5rem -1rem;
}

.msg--center {
	margin: 1rem auto;
	text-align: center;
}
.msg--fail {
	background-color: var(--bg-fail);
}
.msg--ok {
	background-color: var(--bg-ok);
}

/* FIELD EXTENSIONS */

.fld-note {
	font-size: .8rem;
	margin-left: 1em;
	font-style: italic;
	color: #aaa;
}

/* MISC  */

a.form-abtn {
	font-size: 0.75rem;
	position: relative;
	bottom: .2rem;
	padding: .25rem 1em;
	/* vertical-align: bottom; */
	line-height: 1;
	/* display: inline-block; */
	/* color: #cdf; */
	background-color: var(--abtn-bg);
	border: var(--abtn-border);
	/* color: inherit; */
	
	border-radius: .2rem;
}
a:hover.form-abtn {
	/* color: #ccf; */
	background-color: var(--abtn-hover-bg);
}

mark.search {
	font-style: normal;
	background-color: var(--mark-search);
	color: inherit;
	padding: .25em .5em;
	border-radius: .15em;
	/* line-height: 1; */
}

.labels-20p label {
	width: 20%;
}

.labels-20p button.btn-indent {
	margin-left: 20%;
}