.common-form { color: #FFF; }
.common-form > :not(.response) { opacity: 1; transition: opacity .2s ease-out; }
.common-form.sending > :not(.response) {
    animation: blink 1s infinite linear;
    pointer-events: none;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

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

.common-form > .title {
    margin-bottom: 35px;
    
    font-size: 30px;
    font-weight: 100;
    color: #47B0B5;
}
.common-form > .subtitle {
    margin-bottom: 40px;
    
	line-height: 110%;
    font-size: 75px;
    font-weight: 200;
    color: #FFF;
}
@media (min-width: 1200px) {
	.common-form > .title,
	.common-form > .subtitle { padding-left: 135px; }
	.common-form > .subtitle { font-size: 75px; }
}
@media (max-width: 1199.99px) {
	.common-form > .subtitle { font-size: 45px; }
}
.common-form > .subtitle > span {
	display: block;
	
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
}
.common-form > .description { display: none; }
.common-form > .fields {
	width: 100%;
	padding-bottom: 50px;
	
    border-top: solid 1px rgba(255,255,255,.4);
    border-bottom: solid 1px rgba(255,255,255,.4);
}
.common-form > .fields > .field { padding: 50px 0 20px; }
@media (min-width: 1200px) {
	.common-form > .fields > .field {
		position: relative;
		padding-left: 135px;
		counter-increment: fieldNumber;
	}
	.common-form > .fields > .field:before {
		content: counters(fieldNumber, ".", decimal-leading-zero);
		position: absolute; left: 0; top: 50px;

		line-height: 20px;
		font-size: 18px;
		font-weight: 100;
		color: #47B0B5;
	}
}
.common-form > .fields > .field:not(:last-child) { border-bottom: solid 1px rgba(255,255,255,.4); }
.common-form > .fields > .field > label {
    display: block;
	padding-right: 45px;
    margin-bottom: 15px;
    
	line-height: 20px;
    font-size: 24px;
    font-weight: 600;
}
@media (min-width: 1200px) { .common-form > .fields > .field > label { font-size: 24px; } }
@media (max-width: 1199.99px) { .common-form > .fields > .field > label { font-size: 20px; } }
.common-form > .fields > .field > .input-area {
    display: block; width: 100%;
    
    border: none;
    background-color: transparent;
    
    font-family: inherit;
    font-size: 18px;
	font-weight: 100;
	color: #FFF;
}
.common-form > .fields > .field > .input-area::placeholder { opacity: .6; }
.common-form > .fields > .field > input {
    height: 35px;
    padding: 0 45px 0 0;
}
.common-form > .fields > .field > textarea {
    height: 180px; resize: none;
    padding: 0 45px 0 0;
}

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

.common-form > .fields > .field > .uploadbox { position: relative; }
.common-form > .fields > .field > .uploadbox > input {
	position: absolute; top: 0; left: 0;
	pointer-events: none;
	visibility: hidden;
}
.common-form > .fields > .field > .uploadbox > label {
	display: block; overflow: hidden;
	padding-right: 45px;
	
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 35px;
	font-size: 18px;
	font-weight: 100;
	color: #FFF;
}
.common-form > .fields > .field > .uploadbox > label > span {
	display: inline-block; width: max-content; max-width: 100%;
	
	background-image: linear-gradient(transparent calc(100% - 2px), #FFF 100%);
	background-repeat: no-repeat;
	background-size: 0% 100%; transition: background-size .2s ease-out;
}
.common-form > .fields > .field > .uploadbox > label:hover > span { background-size: 100% 100%; }
.common-form > .fields > .field > .uploadbox > label > span:empty { opacity: .6; }
.common-form > .fields > .field > .uploadbox > label > span:empty:after { content: attr(data-placeholder); }

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

.common-form > .fields > .field > .selectbox { position: relative; }
.common-form > .fields > .field > .selectbox > .selection {
    position: relative;
    display: block; height: 50px; overflow: hidden;
    padding: 0 50px 0 20px;

    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 50px;
}
.common-form > .fields > .field > .selectbox > .selection:empty { content: attr(data-placeholder); }
.common-form > .fields > .field > .selectbox > .selection:before {
	opacity: 1;
	-webkit-mask: url("../../images/icons/arrow.down.svg") no-repeat 50% 50%;
	mask: url("../../images/icons/arrow.down.svg") no-repeat 50% 50%;
}
.common-form > .fields > .field > .selectbox > .selection:after  {
	opacity: 0;
	-webkit-mask: url("../../images/icons/arrow.up.svg") no-repeat 50% 50%;
	mask: url("../../images/icons/arrow.up.svg") no-repeat 50% 50%;
}
.common-form > .fields > .field > .selectbox.open > .selection:before { opacity: 0; }
.common-form > .fields > .field > .selectbox.open > .selection:after  { opacity: 1; }
.common-form > .fields > .field > .selectbox > .selection:before,
.common-form > .fields > .field > .selectbox > .selection:after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0;
    display: block; width: 50px;

    background-color: #000;
    -webkit-mask-size: contain;
    mask-size: contain;
    
    transition:
        background-color .2s ease-out,
        opacity          .2s ease-out;
}
.common-form > .fields > .field > .selectbox > .selection:hover:before,
.common-form > .fields > .field > .selectbox > .selection:hover:after { background-color: #E08A7E; }
.common-form > .fields > .field > .selectbox > .selection > .default { opacity: .6; }
.common-form > .fields > .field > .selectbox > .selection > a {
    text-decoration: underline;
    color: #BA1717;
}
.common-form > .fields > .field > .selectbox > .options {
    position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); z-index: 1;
    width: 100%; max-height: 200px; overflow: auto;

    background-color: #E5E7ED;
    border-radius: 10px;
    box-shadow: 5px 5px 30px rgba(0,0,0,.1);

    opacity: 0; transition: opacity .2s ease-out;
    pointer-events: none;
}
.common-form > .fields > .field > .selectbox.open > .options {
    opacity: 1;
    pointer-events: auto;
}
.common-form > .fields > .field > .selectbox > .options .option {
    display: block; overflow: hidden;
    padding: 0 20px;

    background-color: transparent;

    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 50px;

    transition:
        background-color .2s ease-out,
        color            .2s ease-out;
}
.common-form > .fields > .field > .selectbox > .options .option.default,
.common-form > .fields > .field > .selectbox > .options .option.disabled {
    opacity: .3;
    pointer-events: none;
}
.common-form > .fields > .field > .selectbox > .options .option:hover,
.common-form > .fields > .field > .selectbox > .options .option.selected:not(.default) {
    background-color: #E08A7E;
    color: #FFF;
}
.common-form > .fields > .field > .selectbox > .options .option > a { pointer-events: none; }

.common-form > .fields > .field > .error {
    display: none;
	padding-right: 45px;
    
    font-size: 18px;
	color: #E45C4A;
}
.common-form > .fields > .field.empty > .empty,
.common-form > .fields > .field.wrong > .wrong { display: block; }

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

.common-form > .submit-btn {
	position: absolute; bottom: -50px; right: 0;
    display: block; width: 270px; height: 100px;
    padding: 0;
    margin-top: 0;
    
    border: none;
    background-color: #207175;
	background-image: linear-gradient(to right, #E45C4A, #E45C4A);
	background-size: 0% 100%; transition: background-size .2s ease-out;
	background-repeat: no-repeat;
    
	text-transform: uppercase;
	text-align: center;
	line-height: 100px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #FFF;
}
.common-form > .submit-btn:hover { background-size: 100% 100%; }

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

.common-form > .response {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 150;
    
    background-color: rgba(0,0,0,.3);
    
    opacity: 0; transition: opacity .2s ease-out;
    pointer-events: none;
	
	color: #000;
}
.common-form > .response > .content-wrapper {
    display: flex; height: 100vh; width: 100vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.common-form > .response > .content-wrapper > span {
	position: relative;
    display: block; max-width: 330px;
	padding: 20px 30px 20px 46px;
    
    background-color: #FFF;
	box-shadow: 5px 5px 30px rgba(0,0,0,.1);
	border-radius: 10px;

	font-size: 14px;
	font-weight: 500;
}
.common-form > .response > .content-wrapper > span:before {
	content: "";
	position: absolute; top: 50%; left: 20px; transform: translateY(-50%);
	height: calc(100% - 40px);
	
	border-left: solid 6px;
	border-radius: 3px;
}
.common-form > .response.success > .content-wrapper > span { color: var(--main-color); }
.common-form > .response.success > .content-wrapper > span:before { border-left-color: green; }
.common-form > .response.failure > .content-wrapper > span { color: var(--off-color); }
.common-form > .response.failure > .content-wrapper > span:before { border-left-color: red; }
.common-form > .response > .content-wrapper > span > strong {
	display: inline-block;
	margin-bottom: 10px;
	
	line-height: 140%;
	font-size: 18px;
	font-weight: 700;
}
.common-form.success > .success,
.common-form.failure > .failure {
    opacity: 1;
    pointer-events: auto;
}