@import "../../assets/scss/variables";
#noauthpages {

	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	.main-content {
		padding-top: 80px;
		.img-wrapper {
			img {
				// width: 100%;
				width: 70rem;
			}
		}
		& .credentials-wrapper {
			display: flex;
			flex-direction: column;
			position: relative;
			letter-spacing: 0.4px;
			font-size: $text-size;
			font-weight: $thin;
			font-family: $font-family;
			margin-bottom: 45px;
			& p {
				margin-bottom: 38px;
			}

			.input-wrapper {
				position: relative;
				max-width: 537px;
				margin-bottom: 19px;
				& label {
					z-index: -2;
					position: absolute;
					left: 28px;
					top: 50%;
					transform: translateY(-50%);
					color: $text-color;
					transition: all 0.2s;
					font-size: 1.4rem;
					font-weight: $medium;
				}

				& input {
					letter-spacing: 0px;
					font-size: 2rem;
					font-weight: $thin;
					padding-left: 36px;
					height: 64px;
					max-width: 537px;
					width: 100%;
					border-radius: 5px;
					background-color: transparent;
					border: 2px solid #a2a2a2;
					color: $text-color;
					&::placeholder {
						opacity: 0;
						font-weight: $medium;
						font-size: 1.6rem !important;
					}
					&:not(:placeholder-shown) ~ label {
						display: inline-block;
						width: unset;
						z-index: 10;
						padding: 0px 10px;
						color: $secondary-color;
						top: 0;
						font-size: 1.2rem;
						background: linear-gradient(white 61%, #ffffff11 39%);
					}

					& ~ .pass-reveal img{
						filter: brightness(0) saturate(100%) invert(66%) sepia(91%) saturate(0%) hue-rotate(153deg) brightness(110%) contrast(82%);;
					}

					&:focus {
						&::placeholder {
							opacity: 1;
							font-weight: $medium;
							font-size: 1.6rem !important;
						}
						background-color: #177bff11 !important;
						& + label {
							display: inline-block;
							width: unset;
							z-index: 10;
							color: $secondary-color;
							font-size: 1.2rem;
							top: 0;
							background: linear-gradient(
															white 61%,
															#ffffff11 39%
							);
							padding: 0px 10px;
						}
						color: $secondary-color;
						outline: none;
						border: 2px solid $secondary-color !important;

						& ~ .pass-reveal img{
							filter: brightness(0) saturate(100%) invert(31%) sepia(97%) saturate(1689%) hue-rotate(203deg) brightness(94%) contrast(94%);
						}
					}
				}
				.pass-reveal {
					color: $secondary-color;
					position: absolute;
					top: 16px;
					right: 20px;
					cursor: pointer;
				}
			}
			#ldap-success {
				display: flex;
				img {
					margin-right: 21px;
				}
			}

			h2 {
				font-weight: bold;
			}
		}
		& h2 {
			margin-bottom: 23px;
			font-weight: $bold;
		}
	}
	form.has-error{
		input {
			border-color: $error-color !important;
		}
	}
	#footer {
		margin-top: auto;
	}
	.banner {
		@media (max-width: 991px) {
			display: none;
		}
		max-width: 693px;
		width: 35%;
		position: absolute;
		bottom: 15px;
		right: 5.5rem;
		img {
			width: 100%;
		}
	}
}