form {
	display: flex;
	gap: 24px;
	flex-direction: column;
}

.input-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

form label,
span.label {
	font-size: 18px;
	line-height: 22px;
	font-weight: 800;
}

select {
	position: relative;
	width: 100%;
	appearance: none;
	background-color: var(--color-white);
}

select::before {
	content: '\0704';
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: 'Tribee Icons';
	font-weight: normal;
}

select::-ms-expand {
	display: none;
}

select,
input {
	--computed-padding-right: calc(var(--padding-right, 0px) + var(--counter-size, 0px) + var(--icon-size, 0px));
	border-radius: 50px;
	position: relative;
}

textarea {
	border-radius: 16px;
	min-height: 224px;
	resize: vertical;
}

input,
select,
textarea {
	--padding-right: 16px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	padding: 16px var(--computed-padding-right, 16px) 16px 24px;
	color: var(--color-praline);
	border-color: var(--color-praline);
	border-width: 1px;
	border-style: solid;
}

input:not([type="date"]):not(:placeholder-shown),
input[type="date"]:valid,
select,
textarea:not(:placeholder-shown) {
	border-color: var(--color-mandarin);
	border-width: 2px;
	color: var(--color-carbone);
}

input:focus,
textarea:focus,
select:focus {
	border-width: 1px;
	border-color: var(--color-mandarin);
	outline: 3px solid var(--color-eggshell);
	color: var(--color-carbone);
}

input,
input::placeholder,
textarea {
	color: var(--color-praline);
	font-family: var(--body-regular-xl-ff);
	font-weight: var(--body-regular-xl-fw);
	line-height: var(--body-regular-xl-lh);
	text-rendering: var(--body-regular-xl-tr);
	letter-spacing: var(--body-regular-xl-ls);
	font-size: var(--body-regular-xl-fs);
}

.input-group-error.input-group-error input,
.input-group-error.input-group-error select,
.input-group-error.input-group-error textarea {
	border-color: var(--color-raspberry);
	outline: 3px solid var(--color-blush);
}

.input-error-list {
	color: var(--color-raspberry);
	font-size: 11px;
	line-height: 18px;
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-weight: 600;
}

input[disabled],
form button[disabled], form select[disabled] {
	background-color: var(--color-eggshell);
	border-color: var(--color-caramel)!important;
	cursor: not-allowed;
}

input[disabled]::placeholder {
	color: var(--color-caramel);
}


label.toggle {
	display: flex;
	flex-direction: column;
}

input[type=checkbox] {
	opacity: 0;
	width: 0;
	height: 0;
	user-select: none;
}

input[type=checkbox]~span {
	position: relative;
	pointer-events: initial;
	display: inline-block;
	background-color: var(--color-eggshell);
	width: 54px;
	height: 32px;
	border-radius: 32px;
}

input[type=checkbox]~span:after {
	content: '';
	font-family: "Tribee Icons";
	width: 24px;
	height: 24px;
	border-radius: 16px;
	position: absolute;
	top: 4px;
	left: 4px;
	background-color: var(--color-white);
	color: var(--color-white);
	line-height: 1.8;
	text-align: center;
	font-size: 14px;
	transition: 0.3s;
}

input[type=checkbox]:checked~span:after {
	font-family: "Tribee Icons";
	content: '\0703';
	font-weight: normal;
	border-radius: 16px;
	position: absolute;
	color: var(--color-raspberry);
	transform: translateX(21px);
}

input[type=checkbox]:checked~span {
	background-color: var(--color-raspberry);
}



input[type=checkbox].checkbox {
	opacity: 1;
	display: inline-block;
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--color-caramel);
	outline: none;
	border-radius: 4px;
	background-color: var(--color-white);
}

input[type=checkbox].checkbox:checked::before {
	content: '\0703';
	font-family: "Tribee Icons";
	color: var(--color-raspberry);
	position: absolute;
	transform: translate(25%, -15%);
}

input[type=checkbox].checkbox:checked {
	border: 2px solid var(--color-raspberry);
}

.input-box {
	position: relative;
	display: flex;
	flex-direction: column;
}

.input-left-toolbox {
	display: flex;
	position: absolute;
	padding: 0 16px;
	height: 100%;
}

.input-left-toolbox.eye {
	max-height: 60px;
}

.input-left-toolbox:not(.eye) {
	pointer-events: none;
}

select~.input-left-toolbox,
input~.input-left-toolbox {
	align-items: center;
	top: 0;
	right: 0;
}

textarea~.input-left-toolbox {
	align-items: center;
	bottom: 16px;
	right: 24px;
	padding: 0;
	right: 16px;
	height: auto
}

.reveal-password {
	font-size: 1.6em;
	color: var(--color-caramel);
	padding-left: 8px;
}

.input-box:has(.reveal-password) {
	--icon-size: 21px;
}

.word-count {
	order: -1;
	color: var(--color-chestnut);
	font-family: var(--body-regular-s-ff);
	font-size: var(--body-regular-s-fs);
	font-weight: var(--body-regular-s-fw);
	line-height: var(--body-regular-s-lh);
	text-rendering: var(--body-regular-s-tr);
	letter-spacing: var(--body-regular-s-ls);
}

.input-box:has(.word-count) {
	--counter-size: 54px;
}

.select-chevron {
	font-size: 1.6em;
	color: var(--color-praline);
}

button[type="submit"],
input[type="submit"] {
	margin-top: 16px;
}

small {
	text-align: left;
	color: var(--color-praline);
	font-family: var(--body-regular-l-ff);
	font-weight: var(--body-regular-l-fw);
	line-height: var(--body-regular-l-lh);
	text-rendering: var(--body-regular-l-tr);
	letter-spacing: var(--body-regular-l-ls);
	font-size: var(--body-regular-l-fs);
}


.input-box:has(.input-money) {
	width: 216px;
}

.input-money,
.input-money-symbol {
	font-family: var(--title-m-ff);
	font-weight: var(--title-m-fw);
	line-height: var(--title-m-lh);
	text-rendering: var(--title-m-tr);
	letter-spacing: var(--title-m-ls);
	font-size: var(--title-m-fs);
}

.input-money-symbol {
	padding-right: 9px;
}

/* === Range commons === */
/* === https://codepen.io/ShadowShahriar/pen/zYPPYrQ === */
.tips-range-container {
	width: 100%;
}

.tips-range.tips-range.tips-range {
	position: relative;
	width: 100%;
	padding: 0;
	border: none;
	overflow: hidden;
	border-radius: 0;
	color: var(--color-raspberry);
	--thumb-height: 46px;
	--track-height: 8px;
	--track-color: var(--color-eggshell);
	--brightness-hover: 180%;
	--brightness-down: 80%;
	--clip-edges: 0.125em;
	--image: url("../../images/components/tips-range/tips-range-cursor-T3MTpk3.png");
}

.tips-range:active {
	cursor: grabbing;
}

.tips-range.tips-range.tips-range:disabled {
	--image: url("../../images/components/tips-range/tips-range-cursor-disabled-IKhzPQe.png");
	color: var(--color-eggshell);
	background: none;
	cursor: not-allowed;
	pointer-events: none;
}

/* === WebKit specific styles === */
.tips-range,
.tips-range::-webkit-slider-runnable-track,
.tips-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: var(--thumb-height);
}

.tips-range::-webkit-slider-runnable-track,
.tips-range::-webkit-slider-thumb {
	position: relative;
}

.tips-range::-webkit-slider-thumb {
	--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
	--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
	--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
	--clip-further: calc(100% + 1px);
	--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;

	width: var(--thumb-width, var(--thumb-height));
	background: var(--image);
	background-position: center;
	background-size: auto var(--thumb-height);
	background-repeat: no-repeat;
	box-shadow: var(--box-fill);

	filter: brightness(100%);
	clip-path: polygon(100% -1px,
			var(--clip-edges) -1px,
			1px var(--clip-top),
			-100vmax var(--clip-top),
			-100vmax var(--clip-bottom),
			1px var(--clip-bottom),
			var(--clip-edges) 100%,
			var(--clip-further) var(--clip-further));
}

.tips-range:hover::-webkit-slider-thumb {
	filter: brightness(var(--brightness-hover));
	cursor: grab;
}

.tips-range:active::-webkit-slider-thumb {
	filter: brightness(var(--brightness-down));
	cursor: grabbing;
}

.tips-range::-webkit-slider-runnable-track {
	background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

.tips-range:disabled::-webkit-slider-thumb {
	cursor: not-allowed;
}

/* === Firefox specific styles === */
.tips-range,
.tips-range::-moz-range-track,
.tips-range::-moz-range-thumb {
	appearance: none;
	height: var(--thumb-height);
}

.tips-range::-moz-range-track,
.tips-range::-moz-range-thumb,
.tips-range::-moz-range-progress {
	background: #fff0;
}

.tips-range::-moz-range-thumb {
	background: var(--image);
	background-position: center;
	background-size: auto var(--thumb-height);
	background-repeat: no-repeat;
	border: 0;
	width: var(--thumb-width, var(--thumb-height));
	cursor: grab;
}

.tips-range:active::-moz-range-thumb {
	cursor: grabbing;
}

.tips-range::-moz-range-track {
	width: 100%;
	background: var(--track-color);
}

.tips-range::-moz-range-progress {
	appearance: none;
	background: currentColor;
	transition-delay: 30ms;
}

.tips-range::-moz-range-track,
.tips-range::-moz-range-progress {
	height: calc(var(--track-height) + 1px);
	border-radius: var(--track-height);
}

.tips-range::-moz-range-thumb,
.tips-range::-moz-range-progress {
	filter: brightness(100%);
}

.tips-range:hover::-moz-range-thumb,
.tips-range:hover::-moz-range-progress {
	filter: brightness(var(--brightness-hover));
}

.tips-range:active::-moz-range-thumb,
.tips-range:active::-moz-range-progress {
	filter: brightness(var(--brightness-down));
}

.tips-range:disabled::-moz-range-thumb {
	cursor: not-allowed;
}

.tips-range-container__minmax {
	display: flex;
	justify-content: space-between;
	font-family: var(--title-xxs-ff);
	font-weight: var(--title-xxs-fw);
	line-height: var(--title-xxs-lh);
	text-rendering: var(--title-xxs-tr);
	letter-spacing: var(--title-xxs-ls);
	font-size: var(--title-xxs-fs);
	transform: translateY(-10px);
}

.tips-range:focus {
	outline: none;
}

@media screen and (min-width: 720px) {
	input[type="date"] {
		width: fit-content;
	}
}

span.checkbox-container input[type="checkbox"]:checked~.help-text .not-checked {
	display: none;
}

.checkbox-container input[type="checkbox"]:not(:checked)~.help-text .checked {
	display: none;
}

span.checkbox-container input[type=checkbox]:checked~span.slider {
	background-color: var(--color-raspberry);
}

span.checkbox-container input[type=checkbox]:checked~span.slider:after {
	font-family: "Tribee Icons";
	content: '\0703';
	border-radius: 16px;
	position: absolute;
	color: var(--color-raspberry);
	transform: translateX(21px);
}

span.checkbox-container input[type=checkbox] {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 1;
}

span.checkbox-container span.slider {
	pointer-events: initial;
	display: inline-block;
	background-color: var(--color-caramel);
	border-radius: 32px;
	min-width: 54px;
	height: 32px;
}

span.checkbox-container span.slider:after {
	content: '\0708';
	font-family: "Tribee Icons";
	width: 24px;
	height: 24px;
	border-radius: 16px;
	position: absolute;
	top: 4px;
	left: 4px;
	background-color: var(--color-white);
	color: var(--color-caramel);
	line-height: 1.8;
	text-align: center;
	transition: 0.3s;
}

.suggestions-is-active {
	z-index: 4;
}


input.suggestions-input {
	z-index: 3;
}

.suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 2;
	/* Ensure it's above other elements */
	/* Hidden by default */
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.suggestions::before {
	content: '';
	width: 100%;
	height: 30px;
	position: absolute;
	top: -30px;
	background-color: #fff;
}

.suggestions li {
	cursor: pointer;
	list-style: none;
	padding: 10px 24px;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
}

.suggestions li:hover {
	background-color: #f0f0f0;
}

.suggestions-loader {
	margin: 8px auto;
}

form .toggle-input-group {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

form .toggle-input-group label {
	flex: 1 100%
}

form .toggle-input-group .input-box {
	width: 100%;
}

form .toggle-input-group .checkbox-container {
	flex: 1;
	display: flex;
	flex-direction: row-reverse;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
}

form .toggle-input-group .input-box input[type=checkbox] {
	cursor: pointer;
}

.phone-container {
	flex-grow: 1;
}

.phone-prefix-container {
	position: relative;
  width: 100px;

}

.number-phone-input {
	display: flex;
	column-gap: 10px;
}

.phone-input {
	width: 100%;
	box-sizing: border-box;
}

.phone-prefix-select {
	font-size: 12px;
	padding-left: 40px;
	background-position: 10px center;
	background-size: 24px 18px;
	background-repeat: no-repeat;
}

@media screen and (min-width: 720px) {
	.phone-prefix-container {
		width: 140px;

	}
}

input.border-red {
	border: 2px solid red !important;
}

.center-submit {
	margin: auto;
}