.light {
	--form-field-bg-color: #f7f7f7;
	--form-select-bg-color: var(--background-color);
	--form-label-color: var(--dim-9-color);
	--form-alert-bg-color: #dea49e;
	--form-alert-text-color: #440a0a;
}
.dark {
	--form-field-bg-color: var(--dim-fa-color);
	--form-select-bg-color: var(--dim-fa-color);
	--form-label-color: var(--dim-9-color);
	--form-alert-bg-color: #6f2f2f;
	--form-alert-text-color: #ffd6d1;
}

.field-box { position:relative; margin-bottom:20px; padding-top:5px; width:100%; max-width:300px; display:inline-block; }
.field-box input,
.field-box textarea {
	border:1px solid var(--dim-d-color);
	width: 100%; height: 40px;
	padding: 0 15px;
	color: var(--text-color);
	background-color: var(--form-field-bg-color);
	border-radius: 4px;
	font-size:14px;
	vertical-align: top;
}
.field-box textarea {
	height: 100px;
	padding: 15px;
}
.field-box input:focus, .field-box textarea:focus { border-color:var(--hl-color); }
.field-box select {
	border: 2px solid var(--dim-d-color);
	width: 276px; height: 27px;
	padding: 0 0 0 10px;
	color: var(--text-color);
	margin-top:5px;
	background-color: var(--form-select-bg-color);
}

.field-box .toggle-pass {
	position: absolute;
	top: 6px; right: 0px;
	height: 38px;
	width:40px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-color);
	opacity: 0.3;
	font-size: 16px;
	padding: 5px;
}
.field-box .toggle-pass:focus { outline: none; }
.field-box .toggle-pass:hover { opacity: 0.6; }

.field-box .field-label {
	display: block;
	text-align: left;
	position:absolute;
	top:-1px; left:0;
	pointer-events: none;
	font-size:12px;
	white-space: nowrap;
	max-width:70%;
	overflow: hidden;
}
.field-box .field-label b { display:inline-block; width:4px; height:4px; background-color:var(--red-color); border-radius:6px; margin-left:6px; vertical-align:2px; }
.field-box .field-label i { margin-right: 5px; font-size: 0.9em; }

@supports (not (-ms-ime-align:auto)) {
	.field-box .field-label {
		color: var(--form-label-color);
		font-size:14px;
		top:14px; left:16px;
		transition: all 0.1s ease-out;
	}
	.field-box.move-label .field-label {
		color: var(--form-label-color);
		top:-15px; left:0;
		font-size:12px;
	}
	.field-box .field-label b { width:6px; height:6px; }
	.field-box.move-label .field-label b { width:4px; height:4px; }
}

.field-alert { display:none; background-color:var(--form-alert-bg-color); padding:10px 12px; border-radius: 5px; text-align: left; margin-top: 10px; color:var(--form-alert-text-color); position:relative; line-height:18px; font-size:14px; }
.field-alert::after {
	content:' ';
	position: absolute;
	top:-7px; left:20px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 8px 7px;
	border-color: transparent transparent var(--form-alert-bg-color) transparent;
}


.field-box.error .field-label { color: var(--red-color); }
.field-box.error .field-alert { display:block; }

.field-box.active .field-label { color: var(--hl-color); }

.field-box .field-alert input[type="checkbox"] { width:20px; height:20px; display:inline-block; vertical-align:-3px; border-radius:5px; }
.field-box .field-alert label { display:block; font-size:14px; font-style:italic; font-weight:bold; padding:10px 0; }

.fields-3c {
	display: flex;
	justify-content: space-between;
	gap:20px;
}
.fields-3c .field-box {
	flex: 1 1 30%;
	max-width: none;
}


@media (max-width: 700px) {

	.field-box input { height: 50px; font-size:16px; }
	.field-box textarea { font-size:16px; }
	.field-box .field-label { top: 18px; }
	.field-box .toggle-pass { height: 50px; }

	.fields-3c {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom:10px;
	}
	.fields-3c .field-box {
		flex: 1 1 calc(50% - 10px);
		min-width: 200px;
		margin-bottom:10px;
	}

}