/* Sign */

.container_fluid_sign {
	padding: 0 43px;
	background-color: #81d5df;
	min-height: 100vh;
	position: relative;
}

	.sign_left {
		position: relative;
		padding: 0 5px;
		min-height: 59vh;
	}

		.sign_left h3 {
			margin: 30px 0 34px -1px;
		}

		.cta_button_outline {
			background-color: transparent;
			border: 2px solid #561a4c;
			color: #561a4c;
		}

		.cta_button_outline:hover,
		.cta_button_outline:focus {
			background-color: #92dbe4;
		}

		.sign_password_vessel {
			position: absolute;
			padding: 0;
			bottom: 73px;
			margin: 0 0 0 -3px;
		}

	.sub_title_mobile,
	.heading_mobile,
	.paragraph_mobile,
	.sign_button_outline_mobile,
	.pass_link {
		display: none;
	}

	.sign_button_outline_mobile_password {
		display: block;
		background-color: #81d5df;
	}

	.sign_wrapper {
		margin: -110px 0 0 103px;
	}

		.sign_background {
			height: 657px;
			min-width: 477px;
			border-radius: 7px;
			background-color: #81d5df;
			position: absolute;
			top: -82px;
			left: 140px;
			display: none;
		}

		.sign_vessel {
			height: 657px;
			min-width: 477px;
			border-radius: 7px;
			padding: 92px 42px 0;
			background-color: #81d5df;
			border: 2px solid #81d5df;
		}

			.sign_input {
				width: 100%;
				height:55px;
				border: none;
				border-radius: 5px;
				font-size: 20px;
				margin-bottom: 40px;
				padding:0 12px;
				background-color: #81d5df;
				border: 2px solid #561a4c;
				color: #561a4c;
				position: relative;
			}

			input.sign_input:focus {
				border: 2px solid #d972ff;
			}

				input.sign_input + label {
					position: absolute;
					left: -2px;
					background-color: #81d5df;
					padding: 0 7px;
					margin: 16px 51px 0;
					transition: transform 200ms ease;
					pointer-events: none;
				}

				input.sign_input:focus + label,
				input.sign_input + label.freeze {
					font-size: .85em;
					font-weight: 400;
					-webkit-transition: 0.1s ease-in;
					-moz-transition: 0.1s ease-in;
					transition: 0.1s ease-in;
					transform: translateY(-1.85em);
				}

			#access_repassword {
				margin: 0 0 135px;
			}

			.sign_captcha {
				width: 100%;
				height: 55px;
				border-radius: 5px;
				font-size: 20px;
				margin: 0 0 40px;
				border: 2px solid #561a4c;
				position: relative;
			}

				.sign_captcha_icon {
					height: 28px;
					width: 28px;
					cursor: pointer;
					position: absolute;
					bottom: 12px;
					right: 27px;
				}

				.sign_captcha_icon:focus {
					opacity: .5;
				}

				.label_captcha {
					font-size: 0.85em;
					font-weight: 400;
					background-color: #81d5df;
					padding: 0 7px;
					position: absolute;
					left: 49px;
					margin: -105px 0 0;
				}

			#formfield_token:after {
				background-image: url('../assets/icons/key.svg');
				background-size: 28px 28px;
				height: 28px;
				width: 28px;
				position: absolute;
				right: 70px;
				margin: 13px 0 0;
				content: '';
			}

			.sign_error {
				height: 62px;
			}

				.error {
					padding: 0 0 0 34px;
					position: relative;
					font-size: 16px;
					font-weight: bold;
				}

				.error:before {
					background-image: url('../assets/icons/alert.svg');
					background-size: 25px 25px;
					height: 25px;
					width: 25px;
					position: absolute;
					bottom: -4px;
					left: -1px;
					content: '';
				}

/* Breakpoints */

@media (max-width: 1199.98px) {

	.container_fluid_sign {
		padding: 0 30px;
	}
}

@media (max-width: 991.98px) {

	.sign_left {
		display: none;
	}

	.sign_right {
		padding: 0 5px 250px;
		margin: 0 auto;
	}

		.sign_wrapper {
			margin: -120px 0;
		}

			.sign_background {
				display: none;
			}

			.sign_vessel {
				height: auto;
				padding: 50px 42px 35px;
				background-color: #81d5df;
			}

				.sub_title_mobile,
				.heading_mobile,
				.paragraph_mobile,
				.sign_button_outline_mobile,
				.pass_link {
					display: block;
				}

				.sign_input,
				input.sign_input + label,
				.label_captcha {
					background-color: #81d5df;
				}

				.sign_button_outline_mobile_password {
					background-color: #81d5df;
				}
}

@media (max-width: 767.98px) {

	.sign_vessel {
		min-width: initial;
	}
}

@media (max-width: 575.98px) {

	.sign_vessel {
		padding: 50px 10px 35px;
	}

		input.sign_input + label {
			  margin: 16px 19px 0;
		}

		.label_captcha {
			left: 17px;
		}

		#formfield_token:after {
			right: 38px;
		}
}