.form1 {
	--form-primary: var(--color__primary);
	--form-primary-hover: var(--color__primary);
	
	--form-border: var(--color__gray);
	--form-border-focus: var(--color__select);
	--form-radius: var(--borderRadius1);
	--form-focus-shadow: var(--color__select);
	--form-placeholder-color: var(--color__silver);
	--form-error: hsl(var(--hslColor__danger));
	--form-label-width: 10em;
	
	accent-color: var(--color__select);
	
	container-type: inline-size;
	container-name: cnt__form1;
	
	font-size: var(--size__body--small);
}

.form1 .form__reqHint {
	margin-top: 0;
	font-size: var(--size__body--smallest);
}


.form1 a {
	color: var(--color__orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

	.form1 a:hover {
		color: var(--color__black);
	}

.form1 fieldset {
	border: 0;
	padding: 0;
	width: 100%;
}

.form1 fieldset > legend:not(.form__groupTitle) {
	margin-bottom: var(--spacing3);
	
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px; 
}

.form1 fieldset > legend:not([class]) {
	display: block;
	
	font-size: var(--size__body--smallest);
	font-weight: var(--weight__medium);
	color: var(--color__silver);
	text-transform: uppercase;
}

.form1 fieldset + fieldset {
	margin-top: var(--spacing8);
}

	.form1 fieldset:not(:only-child):last-child {
		margin-top: var(--spacing4);
	}

.form1 label {
	font-weight: var(--weight__regular);
	font-style: italic;
}

.form1 .form__fieldsetFlex .form-label {
	font-style: italic;
}

.form1 .form__fieldsetFlex .input__group {
	display: flex;
	flex-direction: row;
	gap: var(--spacing2);
}



.form1 .form__group--options label:after {
	content: unset;
}

.form__text {
	
}

.form1 fieldset > * + * {
	margin-top: var(--spacing3);
}

.form1 fieldset > legend + .form__group {
	margin-top: 0;
}

.form1 .form__groupTitle {
	margin-bottom: var(--spacing3);
	font-weight: var(--weight__medium);
}
	
.form1 .input__wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing1);
}

.form1 input[type="text"],
.form1 input[type="email"],
.form1 input[type="password"],
.form1 input[type="number"],
.form1 input[type="tel"],
.form1 input[type="url"],
.form1 input[type="date"],
.form1 input[type="time"],
.form1 input[type="search"],
.form1 select,
.form1 textarea {
	display: block;
	width: 100%;
	padding: var(--spacing1) var(--spacing2);
	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);
	transition: all 0.2s ease-in-out;
	box-sizing: border-box;
	background-color: var(--color__white);
}

.form1 input[type="text"]:focus,
.form1 input[type="email"]:focus,
.form1 input[type="password"]:focus,
.form1 input[type="number"]:focus,
.form1 input[type="tel"]:focus,
.form1 input[type="url"]:focus,
.form1 input[type="date"]:focus,
.form1 input[type="time"]:focus,
.form1 input[type="search"]:focus,
.form1 select:focus, 
.form1 textarea:focus {
	border-color: var(--form-border-focus);
	outline: 0;
	box-shadow: 0 0 0 3px var(--form-focus-shadow); 
}

.form1 input:disabled,
.form1 select:disabled,
.form1 textarea:disabled {
    background-color: var(--color__silver--light); 
    color: var(--color__gray); 
    border-color: var(--color__silver--light); 
    cursor: not-allowed; 
    box-shadow: none;
}

.form1 select {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	
	padding-right: 2em;
	
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
	
	background-position: right 0.7em center;
    background-size: 16px; 
}


.input--small {
	max-width: 8em;
}

.input--medium {
	max-width: 14em;
}

.input__ElementWrap {
	position: relative;
}

.input__ElementWrap select {
	appearance: none;
	-webkit-appearance: none;
}

.input__ElementWrap > img {
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	
	width: 1.2em;
	pointer-events: none;
}

.input__ElementWrap:has(select) > img {
	transform: translateY(-50%) rotate(90deg);
	width: 0.8em;
}

.form1 ::placeholder {
	color: var(--form-placeholder-color);
	opacity: 1;
}

.form1 textarea {
	resize: vertical;
	min-height: 120px;
}

.form1 .form__groupOptions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 0.5rem;
	gap: var(--spacing1);
}

.form1 .form__group--checkbox input, 
.form1 .form__group--checkboxes input,
.form1 .form__group--radios input,
.form1 .form__group--radio input {
	flex: 0 0 auto;
	transform: translateY(0.1em);
}

.form1 .input__wrapper.form-check {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--spacing5);
}

.form1 .form-check-label {
	width: unset;
	flex: 1 1 auto;
	font-weight: var(--weight__normal);
	font-style: normal;
}

.form1 .form__group--checkbox .form-check-label {
	font-size: var(--size__body--small);
}

.form1 .form__groupOptions .input__wrapper,
.form1 .form__group--inline .input__wrapper {
	flex-direction: row; 
	align-items: flex-start;
	gap: var(--spacing5);
}

.form1 input[type="checkbox"], 
.form1 input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	
	background-color: var(--color__white); 
	
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1.35rem;
	height: 1.35rem;
	border: 1px solid var(--form-border);
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.form1 input[type="checkbox"] {
	border-radius: var(--form-radius);
}

.form1 input[type="radio"] {
	border-radius: 50%;
	transform: translateY(0.1em);
}

.form1 input[type="checkbox"]:checked,
.form1 input[type="radio"]:checked {
	background-color: var(--form-primary);
	border-color: var(--form-primary);
}

.form1 input[type="checkbox"]::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--color__white);
	
	transform-origin: center;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.form1 input[type="radio"]::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--color__white);
	
	transform-origin: center;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.form1 input[type="checkbox"]:checked::before,
.form1 input[type="radio"]:checked::before {
	transform: scale(1);
}

.form1 input[type="checkbox"]:hover,
.form1 input[type="radio"]:hover {
	border-color: var(--form-primary);
}

.form__groupOptions label,
.form__group--inline label {
	cursor: pointer;
}

.form__group--inline label a {
	color: var(--form-primary);
	text-decoration: underline;
}
.form__group--inline label a:hover {
	color: var(--form-primary-hover);
	text-decoration: none;
}

.form1 input[type="range"] {
	width: 100%;
	height: 1.5rem;
	padding: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	border: none;
}

.form1 input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 0.5rem;
	background: transparent;
	border-radius: 1rem;
	cursor: pointer;
}

.form1 input[type="range"]::-moz-range-track {
	width: 100%;
	height: 0.5rem;
	background: var(--color__navy);
	border-radius: 1rem;
	cursor: pointer;
}

.form1 input[type="range"]::-webkit-slider-thumb {
	height: 1.25rem;
	width: 1.25rem;
	border-radius: 50%;
	background: var(--form-primary); 
	cursor: grab;
	-webkit-appearance: none;
	border: 2px solid var(--color__white);
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	transition: transform 0.1s;
}

.form1 input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.1);
	background: var(--form-primary-hover);
}

.form1 input[type="range"]::-moz-range-thumb {
	height: 1.25rem;
	width: 1.25rem;
	border: 2px solid var(--color__white);
	border-radius: 50%;
	background: var(--form-primary);
	cursor: grab;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.form1 .range-val-display {
	color: var(--form-primary);
	font-family: monospace;
	font-size: 1.1em;
}

.form1 .attachmentsDropzone {
	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);
	padding: 2.5rem 1.5rem;
	text-align: center;
	background-color: transparent; 
	cursor: pointer;
	transition: all 0.2s;
}

.form1 .attachmentsDropzone:hover {
	border-color: var(--form-primary);
}

.form1 .attachmentsHint p {
	margin: 0 0 1rem 0;
}



.form1 hr.sep {
	border: 0;
	margin: var(--spacing4) 0;
}

.form1 h3 {
	padding-bottom: var(--spacing1);
	margin-bottom: var(--spacing3);
}

.form1 .form__status {
	display: none;
	margin-top: var(--spacing5);
}

	.form1 .form__status.error, 
	.form1 .form__status--error {
		display: block;
		color: var(--form-error);
	}
	
	.form1 .form__status.success, 
	.form1 .form__status--success {
		display: block;
		color: var(--color__green);
	}


.form1.was-validated input:invalid,
.form1.was-validated textarea:invalid,
.form1.was-validated select:invalid,
.form1 .hasError input,
.form1 .hasError textarea,
.form1 .hasError select {
	border-color: var(--form-error);
	border-width: 2px;
}

.form1.was-validated input:invalid:focus,
.form1.was-validated textarea:invalid:focus,
.form1.was-validated select:invalid:focus {
	border-color: var(--form-error);
	box-shadow: 0 0 0 3px hsla(var(--hslColor__danger), 0.25);
}

.form1 .attachmentsList .attachment-item  {
	display: flex;
	align-items: center;
	gap: var(--spacing3);
}

.form1 .attachmentsList .btn-remove-file {
	border: 0;
	margin: 0;
	padding: 0.5em;
}

.form1 .attachmentsList .attachment-item.error {
	color: var(--form-error);
}

.form1 .bWrap {
}




.form1 .form__captcha label:after {
	content: unset;
}

.altcha {
	--altcha-border-width: 0;
	margin-top: var(--spacing5);
}

.altcha-main {
	padding: 0 !important;
	gap: var(--spacing3) !important;
}

.altcha-checkbox {
	margin-left: 0.25em;
} 

.altcha-label {
	margin-left: 1em;
}

.altcha-footer {
	display: none !important;
}


@container cnt__form1 (min-width: 25em) {
	.form1 .input__wrapper {
		flex-direction: row;
		align-items: center;
	}
	
	.form1 .form__fieldsetFlex .form-label, 
	.form1 label {
		width: var(--form-label-width);
		flex: 0 0 auto;
	}
	
	.form__group--checkboxIndented {
		padding-left: calc(var(--form-label-width) + var(--spacing1));
	}
	
	.form1 .form__fieldsetFlex {
		display: flex;
		flex-direction: row;
		gap: var(--spacing2);
	}
	
	.form1 .form__groupOptions .input__group {
		padding-left: 0;
		gap: var(--spacing2) var(--spacing6);
	}
}