#pre-checkin {
	position: absolute;
	top: 50%;
	right: 50px;
	transform: translateY(-50%);
	z-index: 10;

	width: 500px;
	padding: 40px 35px;
	background: #2f4f7e;
	border-radius: 8px;

	@include breakpoint(0 576px) {
		padding: 20px 20px 54px 20px;

		.checkin-file {
			padding: 0 30px;
		}
	}

	h3 {
		color: #fff;
		font-size: 40px;

		span {
			display: block;
			text-transform: uppercase;
			font-size: 20px;
			font-weight: 400;
			letter-spacing: 2px;
		}

		@include breakpoint(0 576px) {
			font-size: 24px;

			span {
				font-size: 12px;
			}
		}
	}

	.row {
		margin-left: -10px;
		margin-right: -10px;
	}

	// [class^='col'] {
	// 	padding-left: 10px;
	// 	padding-right: 10px;
	// }

	form {
		margin-top: 25px;

		input {
			display: block;
			width: 100%;
			margin-bottom: 10px;
			height: 40px;
			line-height: 40px;
			background: transparent;
			border-bottom: 1px solid #7a8fad;
			margin-bottom: 15px;
			color: #fff;

			&.parsley-error {
				border-color: #d02e2e;
			}
		}

		.submit {
			display: inline-block;
			margin: 40px auto 0;
			height: 55px;
			line-height: 55px;
			width: 190px;
			background: #ed2f59;
			color: #fff;
			font-size: 16px;
			text-transform: uppercase;
			font-weight: 700;
			letter-spacing: 2px;
			border: 0;
			border-radius: 5px;
			transition: all 250ms ease-out;

			&:hover {
				background: #fff;
				color: #ed2f59;
			}

			&.--loading {
				background-image: url('../img/layout/load.svg');
				background-size: 45px;
				background-repeat: no-repeat;
				background-position: center;
			}

			@include breakpoint(0 576px) {
				width: 223px;
				height: 50px;
				line-height: normal;
				font-size: 14px;
				margin-top: 20px;
			}
		}

		.file {
			display: block;
			height: 50px;
			border: 1px solid #fff;
			margin-top: 20px;
			padding: 0 40px 0 10px;
			border-radius: 6px;
			position: relative;
			color: #fff;
			text-align: left;

			&:after {
				content: '';
				position: absolute;
				top: -1px;
				bottom: -1px;
				right: -1px;
				width: 40px;
				background: #fff url(../img/layout/icon-upload.svg) no-repeat
					center right 14px;
				background-size: 14px auto;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
				transition: all 250ms ease-out;
			}

			strong {
				z-index: 1;
				position: relative;
				font-size: 11px;
				line-height: 50px;
				text-transform: uppercase;
			}

			&.error {
				border-color: #d02e2e;
			}

			.file-name {
				position: absolute;
				top: 100%;
				left: 0;
				right: 60px;
				font-size: 12px;
				text-align: center;
				padding-top: 7px;
			}

			input {
				width: 0.1px;
				height: 0.1px;
				opacity: 0;
				overflow: hidden;
				position: absolute;
				z-index: -1;
			}

			&:hover:after {
				width: calc(100% + 3px);
				background: #ed2f59 url(../img/layout/icon-upload-white.svg)
					no-repeat center right 14px;
				background-size: 14px auto;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
				right: -1px;
			}
		}
	}
}
