body:not(.contact-form-modal-open) #contact-form-modal,
body:not(.contact-form-modal-open) #contact-form-modal *,
body:not(.contact-form-modal-open) #contact-form-modal *:before,
body:not(.contact-form-modal-open) #contact-form-modal *:after {
	pointer-events: none !important;
}
.contact-form-modal-open #contact-form-modal {
	transform: translateY(0px);
	opacity: 1;
	pointer-events: auto;
}

/*----------------------------------------------------------------------------*/

#contact-form-modal .inner-wrapper > .scrollable {
	--bg-color-basic: #D5ED99;
	--bg-color-hover: #BCD5E4;
	--text-color: #364A67;
}
@media (min-width: 900px) {
	#contact-form-modal .inner-wrapper > .scrollable {
		display: grid;
		grid-template-areas:
			"title		title"
			"controls	description"
			"forms		forms";
		grid-template-columns: 3fr 2fr;
		grid-auto-rows: auto;
		row-gap: 40px;
		column-gap: 50px;
	}
	#contact-form-modal .inner-wrapper > .scrollable > .controls {
		grid-area: controls;
		align-self: center;
		width: 100%;
	}
	#contact-form-modal .inner-wrapper > .scrollable > .forms {
		grid-area: forms;
		width: 100%;
	}
}
@media (max-width: 899.99px) {
	#contact-form-modal .inner-wrapper > .scrollable {
		display: flex;
		flex-direction: column;
		row-gap: 40px;
	}
}

/*----------------------------------------------------------------------------*/

#contact-form-modal .inner-wrapper > .scrollable > .title {
	font-weight: 500;
}
#contact-form-modal .inner-wrapper > .scrollable > .description {
	margin: 0;
	
	font-weight: 500;
}
@media (min-width: 900px) {
	#contact-form-modal .inner-wrapper > .scrollable > .title {
		grid-area: title;
		
		font-size: 40px;
	}
	#contact-form-modal .inner-wrapper > .scrollable > .description {
		grid-area: description;
		align-self: center;
		
		text-align: right;
		font-size: 15px;
	}
}
@media (max-width: 899.99px) {
	#contact-form-modal .inner-wrapper > .scrollable > .title {
		font-size: 32px;
	}
	#contact-form-modal .inner-wrapper > .scrollable > .description {
		font-size: 14px;
	}
}

/*----------------------------------------------------------------------------*/

#contact-form-modal .inner-wrapper > .scrollable > .controls {
	margin: 0 -10px;
	padding: 3px 10px;
	
	--mask-image: linear-gradient(to right, transparent 0px, #000 10px, #000 calc(100% - 10px), transparent 100%);
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
#contact-form-modal .inner-wrapper > .scrollable > .controls > .swiper-wrapper {}
#contact-form-modal .inner-wrapper > .scrollable > .controls > .swiper-wrapper > .swiper-slide {
	display: flex; height: 46px;
	flex-direction: row; width: auto;
	justify-content: flex-start;
	align-items: stretch;
	padding: 3px;
	column-gap: 3px;
	
	background-color: #FFF;
	border-radius: 23px;
}
#contact-form-modal .inner-wrapper > .scrollable > .controls > .swiper-wrapper > .swiper-slide > .control {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0 25px;
	
	background-color: var(--bg-color-basic);
	border-radius: 20px;
	
	cursor: pointer;
	
	transition: background-color .2s ease-out;
}
#contact-form-modal .inner-wrapper > .scrollable > .controls > .swiper-wrapper > .swiper-slide > .control > span {
	font-weight: 500;
	font-size: 15px;
	color: var(--text-color);
}
#contact-form-modal .inner-wrapper > .scrollable > .controls > .swiper-wrapper > .swiper-slide > .control.current,
#contact-form-modal .inner-wrapper > .scrollable > .controls > .swiper-wrapper > .swiper-slide > .control:hover {
	background-color: var(--bg-color-hover);
}
@media (min-width: 900px) {
	#contact-form-modal .inner-wrapper > .scrollable > .controls {
		grid-area: controls;
		align-self: center;
		width: 100%;
	}
}
@media (max-width: 899.99px) {
}

/*----------------------------------------------------------------------------*/

#contact-form-modal .inner-wrapper > .scrollable > .forms {}
#contact-form-modal .inner-wrapper > .scrollable > .forms > .form {}
@media (min-width: 900px) {
	#contact-form-modal .inner-wrapper > .scrollable > .forms {
		grid-area: forms;
		width: 100%;
	}
}
@media (max-width: 899.99px) {
}