:root {
	--input-background: var(--grayscale-5-color);
}

fieldset {
	border: 1px solid silver;
	border-radius: 5px;
	padding: 1rem;
}

fieldset legend {
	font-size: 1.5em;
	font-weight: bold;
	background: white;
	padding: 0 1rem;
}

input[type=text], input[type=tel], input[type=password], input[type=search], input[type=number], input[type=email], input[type=date], input[type=datetime], input[type=datetime-local], input[type=range], textarea {
	padding: 11px 16px 12px;
	min-height: 2.5em;
	gap: 10px;
	color: var(--form-field-text-color);
	background-color: var(--form-field-background-color);
	border-radius: 4px;
	width: 100%;
	font-weight: 600;
}

input::placeholder, textarea::placeholder {
	color: var(--form-field-placeholder-color);
}


.form-group {
	margin-bottom:1rem;
}

.large input {
	padding: 24px;
}

.form-group.search .input-container, .form-group.check .input-container {
	position: relative;
}

.form-group.search .input-container:after {
	content: "";
	position: absolute;
	right: 12px;	
	width: 20px;
	height: 100%;
}

.form-group.check .input-container:after {
	content: "";
	position: absolute;
	right: 12px;	
	width: 20px;
	height: 100%;	
}

.form-group.form-group--invalid .input-container:after {
	content: "";
}

.form-group.large.search .input-container:after {
	right:20px;
}

.form-group.large.check .input-container:after {
	right: 20px;
}

.form-group.search .input-container:after {
	-webkit-mask-image: url('data:image/svg+xml;utf8, <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22.561 20.4391L17.328 15.2061C18.6406 13.3613 19.2121 11.0908 18.9293 8.84444C18.6465 6.59813 17.5301 4.54006 15.8012 3.07822C14.0724 1.61638 11.8574 0.857479 9.59528 0.951963C7.3332 1.04645 5.1892 1.98742 3.58828 3.58834C1.98735 5.18926 1.04639 7.33326 0.951902 9.59534C0.857418 11.8574 1.61632 14.0724 3.07816 15.8013C4.54 17.5301 6.59807 18.6466 8.84438 18.9294C11.0907 19.2122 13.3613 18.6406 15.206 17.3281L20.439 22.5611C20.7204 22.8425 21.1021 23.0006 21.5 23.0006C21.898 23.0006 22.2796 22.8425 22.561 22.5611C22.8424 22.2797 23.0005 21.898 23.0005 21.5001C23.0005 21.1021 22.8424 20.7205 22.561 20.4391ZM3.00001 10.0001C3.00001 8.6156 3.41055 7.26222 4.17972 6.11108C4.94889 4.95993 6.04214 4.06273 7.32123 3.53291C8.60031 3.0031 10.0078 2.86448 11.3656 3.13457C12.7235 3.40467 13.9708 4.07135 14.9498 5.05032C15.9287 6.02929 16.5954 7.27657 16.8655 8.63444C17.1356 9.9923 16.997 11.3998 16.4672 12.6789C15.9374 13.9579 15.0401 15.0512 13.889 15.8204C12.7379 16.5895 11.3845 17.0001 10 17.0001C8.14414 16.998 6.3649 16.2598 5.0526 14.9475C3.7403 13.6352 3.00213 11.8559 3.00001 10.0001Z" fill="black"/> </svg>');
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: url('data:image/svg+xml;utf8, <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22.561 20.4391L17.328 15.2061C18.6406 13.3613 19.2121 11.0908 18.9293 8.84444C18.6465 6.59813 17.5301 4.54006 15.8012 3.07822C14.0724 1.61638 11.8574 0.857479 9.59528 0.951963C7.3332 1.04645 5.1892 1.98742 3.58828 3.58834C1.98735 5.18926 1.04639 7.33326 0.951902 9.59534C0.857418 11.8574 1.61632 14.0724 3.07816 15.8013C4.54 17.5301 6.59807 18.6466 8.84438 18.9294C11.0907 19.2122 13.3613 18.6406 15.206 17.3281L20.439 22.5611C20.7204 22.8425 21.1021 23.0006 21.5 23.0006C21.898 23.0006 22.2796 22.8425 22.561 22.5611C22.8424 22.2797 23.0005 21.898 23.0005 21.5001C23.0005 21.1021 22.8424 20.7205 22.561 20.4391ZM3.00001 10.0001C3.00001 8.6156 3.41055 7.26222 4.17972 6.11108C4.94889 4.95993 6.04214 4.06273 7.32123 3.53291C8.60031 3.0031 10.0078 2.86448 11.3656 3.13457C12.7235 3.40467 13.9708 4.07135 14.9498 5.05032C15.9287 6.02929 16.5954 7.27657 16.8655 8.63444C17.1356 9.9923 16.997 11.3998 16.4672 12.6789C15.9374 13.9579 15.0401 15.0512 13.889 15.8204C12.7379 16.5895 11.3845 17.0001 10 17.0001C8.14414 16.998 6.3649 16.2598 5.0526 14.9475C3.7403 13.6352 3.00213 11.8559 3.00001 10.0001Z" fill="black"/> </svg>');
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	background-color: var(--form-field-text-color);
}

.form-group.check .input-container:after {
	-webkit-mask-image: url('data:image/svg+xml;utf8, <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 13L9 18L20 7" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: url('data:image/svg+xml;utf8, <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 13L9 18L20 7" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	background-color: var(--form-field-background-color);
}

.form-group.search input, .form-group.check input {
	padding-right: 2.5rem;
}

.form-group.large.search input, .form-group.large.check input {
	padding-right: 3.5rem;
}

.form-group.form-group--invalid input {
	border: 1px solid var(--error-color);
}

.form-group.form-group--invalid .input-container:after {
	-webkit-mask-image: url('data:image/svg+xml;utf8, <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.24302 18.953L10.152 2.11098C10.33 1.77464 10.5963 1.49318 10.9222 1.29687C11.2482 1.10056 11.6215 0.996826 12.002 0.996826C12.3825 0.996826 12.7559 1.10056 13.0818 1.29687C13.4078 1.49318 13.6741 1.77464 13.852 2.11098L22.761 18.953C22.9282 19.2708 23.0103 19.6265 22.9991 19.9855C22.988 20.3445 22.8841 20.6944 22.6975 21.0013C22.5109 21.3081 22.2479 21.5614 21.9343 21.7364C21.6207 21.9114 21.2672 22.0022 20.908 22H3.09202C2.73323 22.0015 2.38014 21.9102 2.06709 21.7349C1.75404 21.5596 1.49169 21.3063 1.30555 20.9995C1.11942 20.6928 1.01583 20.3431 1.00488 19.9845C0.993918 19.6259 1.07596 19.2705 1.24302 18.953V18.953Z" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/><path d="M12 7.99997V14" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/><path d="M12 19C12.8284 19 13.5 18.3284 13.5 17.5C13.5 16.6715 12.8284 16 12 16C11.1716 16 10.5 16.6715 10.5 17.5C10.5 18.3284 11.1716 19 12 19Z" fill="black"/></svg>');
	mask-image: url('data:image/svg+xml;utf8, <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.24302 18.953L10.152 2.11098C10.33 1.77464 10.5963 1.49318 10.9222 1.29687C11.2482 1.10056 11.6215 0.996826 12.002 0.996826C12.3825 0.996826 12.7559 1.10056 13.0818 1.29687C13.4078 1.49318 13.6741 1.77464 13.852 2.11098L22.761 18.953C22.9282 19.2708 23.0103 19.6265 22.9991 19.9855C22.988 20.3445 22.8841 20.6944 22.6975 21.0013C22.5109 21.3081 22.2479 21.5614 21.9343 21.7364C21.6207 21.9114 21.2672 22.0022 20.908 22H3.09202C2.73323 22.0015 2.38014 21.9102 2.06709 21.7349C1.75404 21.5596 1.49169 21.3063 1.30555 20.9995C1.11942 20.6928 1.01583 20.3431 1.00488 19.9845C0.993918 19.6259 1.07596 19.2705 1.24302 18.953V18.953Z" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/><path d="M12 7.99997V14" stroke="black" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/><path d="M12 19C12.8284 19 13.5 18.3284 13.5 17.5C13.5 16.6715 12.8284 16 12 16C11.1716 16 10.5 16.6715 10.5 17.5C10.5 18.3284 11.1716 19 12 19Z" fill="black"/></svg>');
	background-color: var(--error-color)
}

.form-group .form-group-validation-messages {
	color: var(--error-color);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	padding: 1rem 0;
}


.form-group.large select {
	padding: 24px;
}


.form-group select:focus, .form-group input:focus, .form-group textarea:focus {
	outline: 3px solid var(--form-field-outline-color);
}

.form-group {
	margin-bottom:1rem;
}

.form-group label, .radio-checkbox-list > label {
	display: block;
	color: var(--accent-text-color);
	font-weight: 600;
	padding-bottom: 1rem;
}

.large input {
	padding: 24px;
}

.form-group.form-group--invalid input {
	border: 1px solid var(--error-color);
}

.form-group .form-group-validation-messages {
	color: var(--error-color);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	padding: 1rem 0;
}

.success input {
}

input[type=range] {
	--range-height: 1.6em;
	--range-padding: 3px;
	appearance: none;
	background-color: var(--form-field-background-color);
	border-radius: calc(var(--range-height) /2 );
	height: var(--range-height);
	padding: var(--range-padding);
}

	input[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none;
		height: calc(var(--range-height) - var(--range-padding) * 2);
		width: calc(var(--range-height) - var(--range-padding) * 2);
		border-radius: 50%;
		background: var(--form-field-text-color);
		cursor: ew-resize;
	}


	input[type=range]::-moz-range-thumb {
		-moz-appearance: none;
		height: calc(var(--range-height) - var(--range-padding) * 2);
		width: calc(var(--range-height) - var(--range-padding) * 2);
		border-radius: 50%;
		background: var(--form-field-text-color);
		cursor: ew-resize;
	}

	input[type=range]:focus {
		outline: 3px solid var(--form-field-outline-color);
	}

	input[type=range]:is([disabled])::-webkit-slider-thumb {
		background: var(--form-field-text-color-disabled);
	}

	input[type=range]:is([disabled])::-moz-range-thumb {
		background: var(--form-field-text-color-disabled);
	} 

.validation-summary {
	border: 1px solid var(--error-color);
	border-radius: 4px;
	color: var(--error-color);
	background: var(--input-background);
	padding: 1rem;
	margin: 1rem 0;
}

	.validation-summary ul {
		font-size:.8em;
	}

input[disabled], select[disabled], textarea[disabled] {
	background: var(--form-field-background-color-disabled) !important;
}

input[disabled]::placeholder, select[disabled]::placeholder, textarea[disabled]::placeholder {
	color: var(--form-field-text-color-disabled) !important;
}

.form-group--required label:after {
	content: "*";
	color: var(--error-color);
	font-weight: bold;
	font-size: 1rem;
	padding: 0 5px;
}