/*!
(C)2010-2021 by Don Stamey, MacWisdom Systems, http://www.macwisdom.com. All rights reserved.
This module may not be copied, modified, or used without written permission of the above owner.
*/

.u_Form {
	min-width: 300px;
	min-height: 60px;
	max-width: 90%;
	margin: 12px auto;
	border-radius: 4px;
	font-family: Arial,Verdana,sans-serif;
	font-size: 1rem;
	overflow: auto;
	background-color: #fff;
}
.u_Form * {
	box-sizing: border-box;
}
.u_Form [id="user-comments"] {
	display: none;
}

.u_Form_table {
	margin: 0 auto;
	border-collapse: collapse;
	border-spacing: 4px;
}
.u_Form_table td {
	padding: 4px 2px;
	vertical-align: middle;
}
.u_Form_table td:first-child {
	padding: 0 4px;
	text-align: right;
}
.u_Form_table td:nth-child(2) {
	text-align: left;
}
.u_Form_table td:nth-child(2) > input[type="checkbox"] {
	margin-left: 2px;
}

.u_Form ._rowNote_ {
	margin: 6px auto; /*NOTE: margin will have no effect on a table cell*/
	border: 1px dotted #999;
	padding: 2px .3em;
	font-size: 80%;
	font-style: italic;
	color: #000;
	background-color: #def;
}
/* common to both formats */
.u_Form_formErr { /*might be used outside of form*/
	margin: 12px;
	border: 1px solid #888;
	border-radius: 6px;
	padding: .5em 1em;
	text-align: center;
	background-color: #ff4;
	color: #f00;	
}
.u_Form ._err_ {
	/* display: inline-block; */
	margin: 2px 0 6px 0;
	border: 1px dotted #bbb;
	border-radius: 6px;
	padding: 2px .4em;
	text-align: left;
	font-size: 90%;
	background-color: #ff4;
	color: #f22;
}
.u_Form ._err_:empty {
	display: none;
}
.u_Form [data-fldErr="Y"] {
	border-color: #f00;
	/* background-color: #faebe7; */
}
.u_Form input[type="text"],
.u_Form input[type="tel"],
.u_Form input[type="email"],
.u_Form textarea,
.u_Form select,
.u_Form ._fldText_,
.u_Form ._fldDisp_ {
	max-width: 98%;
	max-width: 85vw;
	min-height: 1.5em;
	min-width: 2em;
	padding: .3em;
	border: 1px solid #aaa;
	border-radius: 4px;
	font-family: inherit;
	font-size: inherit;
}
.u_Form ._fldDisp_ {
	vertical-align: middle;
}
.u_Form input[type="number"] {
	padding: .2em;
	font-size: inherit;
}
.u_Form textarea {
	min-height: 1.8em;
	resize: both;
	font-size: 90%;
}
.u_Form ._fldDisp_ {
	display: inline-block;
	margin: 0 1px;
	padding-right: 12px; /* make room for resize handle on right */
	resize: none;
	overflow: hidden;
}
.u_Form select {
	font-size: 90%;
}
.u_Form ._fldBtn_ {
	border: 2px solid #555;
	border-radius: 7px;
	padding: 3px 8px;
	font-size: 90%;
	font-weight: bold;
	color: #000;
	background-color: #def;
}
.u_Form ._fldBtn_:active {
	color: #fff;
	background-color: #00e;
}
.u_Form ._fieldset_ {
	display: inline-block;
	border: 1px dotted #888;
	padding: .35em .5em .3em .4em;
	line-height: 140%;
	vertical-align: middle;
	background-color: #f4f4f4;
}
.u_Form ._fieldset_ span {
	margin-left: .25em;
	font-size: 90%;
}
.u_Form input[type="checkbox"],
.u_Form input[type="radio"] {
	font-size: inherit;
	width: 1em;
	height: 1em;
}
.u_Form input[type="range"] + div,
.u_Form input[type="color"] + div {
	border: 1px dotted #888;
	padding: 1px 3px;
	font-size: 90%;
}
.u_Form input[type="file"] + button {
	margin-left: 4px;
	padding: 1px 2px;
	font-size: 10px;
}
.u_Form select[disabled],
.u_Form select[readonly],
.u_Form textarea[disabled],
.u_Form textarea[readonly],
.u_Form input[disabled],
.u_Form input[readonly],
.u_Form ._fldDisp_ {
	border: 1px dashed #777;
	color: #555;
	background-color: #eee;
}
.u_Form ._reqSymNote_ {
	font-size: 85%;
}
.u_Form ._reqSym_ {
	margin-right: 3px;
	color: #b40; /* gold #f80; black:#555 */
	font-size: 85%;
	page-break-after: avoid;
	break-after: avoid;
}
.u_Form ._section_ {
	margin: .75em 0;
	border: 1px solid #777;
	padding: 4px 6px;
	text-align: center;
	background-color: #cdf;
}
.u_Form .u_Form_searchCmds {
	margin-left: .3em;
	margin-right: .3em;
	font-size: 12px;
}
.u_Form ._formBtn_ {
	margin: .5em .75em;
	border: 2px solid #777;
	border-radius: .5em;
	padding: .35em .75em;
	font-family: inherit;
	font-size: .95rem;
	font-weight: bold;
	color: #000;
	background-color: #def;
}
.u_Form ._formBtn_:hover {
	background-color: #cde;
}

/*for file upload fields*/
.u_Form [data-cn="fldFile"] {
	border: 1px dotted #777;
	padding: 1px 4px;
}
.u_Form [data-cn="fldFile"] td {
	vertical-align: middle;
}
.u_Form [data-cn="fldFile"] td:nth-child(2) {
	max-width: 20em;
	padding-left: 12px;
	padding-right: 12px;
	text-align: right;
	line-height: 110%;
	font-size: 11px;
}
.u_Form [data-cn="fldFile"] td:last-child {
	max-width: 120px;
	max-height: 100px;
	text-align: center;
	font-size: 80%;
}
.u_Form [data-cn="fldFile"] td:last-child img {
	max-height: 100px;
}
.u_Form [data-cn="fldFileBtn"] {
	display: inline-block;
	border: 1px solid #777;
	border-radius: 6px;
	padding: 2px 4px !important;
	font-weight: normal !important;
	color: #000;
	background-color: #eee;
	font-size: 12px;
}
.u_Form [data-cn="fldFileBtn"]:active {
	color: #fff;
	background-color: #008;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	.u_Form {
		margin: 0 auto;
		border: none;
		padding: 0;
		max-width: 100%;
	}
	.u_Form label {
		margin-top: 2px;
	}
	.u_Form ._err_ > div {
		margin-bottom: 2px;
	}
	.u_Form input[type="submit"] {
		width: 98%;
		margin-top: 0;
	}

	.u_Form ._fieldset_ {
		line-height: 200%;
	}

	/* when using table format */
	.u_Form_table th,
	.u_Form_table td {
		display: inline-block;
	}
	.u_Form_table td:first-child {
		padding-top: .5em;
	}
	.u_Form_table td:last-child {
		padding-bottom: .5em;
	}
	.u_Form_table td:first-child {
		text-align: left;
	}
	.u_Form_table td:first-child,
	.u_Form_table td:nth-child(2) {
		width: 100%;
		margin-top: 0;
	}
}