/* group-input */

.modal.form.form-column1 {
	position: fixed;
	display: flex;
	flex-direction: column;
	gap: 24px;
	background-color: #fe0;
	padding: 20px;
	max-width:672px;
	width:100%;
	left:50%; top:50%; 
	translate:-50% -50%;
}

.modal.form .group-input {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	flex-grow: 1;
	padding-top: 4px;
	position:relative;
}


.icon-right{
	position: absolute; 
	display:none;
}
.icon-right.checkmark{
	width: 19px;
	right: 15px;
	top: 48px; 	
}
.icon-right.cross{
	width:16px;
	right:17px;
	top:48px;
}

.group-input.success object.checkmark{ display: block;}
.group-input.success object.cross{ display: none;}

.group-input.error object.checkmark{ display: none;}
.group-input.error object.cross{ display: block;}



.modal.form .text-label {
	margin: 0 20px;
	align-self: stretch;
}

.modal.form .input {
	height: 40px;
	/* width: 304px;  */
	width:100%;
	flex-shrink: 0;
	background-color: #fff;
	border-radius: 30px;
	padding:0 16px;
}
/* end group-input*/




input[type="checkbox"], input[type="radio"]{
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	
	width: 20px; height: 20px;
	background-color: #fff;
	border-radius: 5px;
	border:0;
	flex-shrink: 0;
	fill: #FFF;
	padding:0px;
	cursor:pointer;
}

input[type="checkbox"]:checked{
	background:url(../assets/icons/cb-checkmark.png) center no-repeat, white;
}





.modal.form .form-column-top {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.modal.form .form-title {
	--min-size-px: 15; --max-size-px: 16; font-size: var(--interpolate);
	font-weight: 400;
	text-align: center;
	line-height:1.33;
}

.modal.form .line-separator {
	height: 0;
	flex-shrink: 0;
	border-top: 1px solid #000;
}

.modal.form .column-fields {
	container: column-fields / inline-size;
	margin-top: 3px;
	display: flex;
	flex-direction: column;
	font-size: 18px;
	font-weight: 500;
	text-align: left;
}

.modal.form .form-line1 {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	flex-shrink: 0;
}

.modal.form .group-input-civility {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	flex-grow: 1;
	padding-top: 4px;
}

.modal.form .text-label2 {
	margin: 0 20px;
	align-self: stretch;
}
/* 
.modal.form .btn-input-civility {
	width: 304px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 175px;
	font-style: normal;
	letter-spacing: 0px;
	text-align: left;
	background-color: #cce7eb;
	padding: 4px 16px;
	border-radius: 32px;
}
 */

select{
	width: 295px; height: 40px;
	font-size: 18px;
	font-weight: 500;
	background-color: #cce7eb;
	border-radius: 30px;
	padding: 0 16px;
	border:0;
	-moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
	background-image:url(../assets/icons/arrow-down.svg);
	background-position:calc(100% - 16px) 50%;
	background-repeat:no-repeat;
}





.modal.form .form-line2 {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	flex-shrink: 0;
}

.modal.form .form-column2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.071;
	text-align: left;
}

.modal.form .form-row {
	display: flex;
	align-items: center;
	gap: 5px;
	line-height: normal;
	padding-bottom: 1px;
	cursor:pointer;
	line-height:1;
}
.modal.form .form-row-multiline {
	align-items: flex-start;
}



.modal.form .text-symbol {
	margin: 0 24px;
	align-self: stretch;
	font-weight: 700;
}

.modal.form .btn-valid-form {
	align-self: center;
}

.modal.form .btn-close {
	position: absolute; top: 7px; right: 8px; 
	rotate: 45deg;
	transform-origin: 50% 50%;
	background-color: #000;
	padding: 9px;
	border-radius: 50%;
}
.modal.form .btn-close > *{
	pointer-events: none;
}

.modal.form .union2 {
	width: 18px; height: 18px;
}

.container-moustique-form-mobile{
	display:none;
	position:absolute;
	width:100%; height:100%;
	pointer-events: none;
}


/** breakpoints (margin / paddings) **/

@media screen and (max-width: 745px) {
	
	.modal.form.form-column1{
		min-height:100%; 
		max-width:unset;
		padding-left:36px;
		padding-right:36px;
	}
	.modal.form .input {
		width:100%;
	}
	.select-civility{
		width:100%;
	}
	select{
		width:100%;
	}
	
	.container-moustique-form-mobile{
		display:block;
		
	}
	.moustique1{
		left:-40px; top:0px;
		transform:scale(0.5) rotate(46deg);
	}
	.moustique2{
		right:30px; top:20px;
		transform:scale(0.5) rotate(22deg);
	}
}



/* container queries (flex rows) */

@container column-fields (width < 632px) {
	.modal.form .form-line1 {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
}

@container column-fields (width < 632px) {
	.modal.form .form-line2 {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
}