/* Authentication Layout Styles */

/* Layout Containers */
.auth-container {
	overflow: auto;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.auth-main {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.auth-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
}

.version-container {
	cursor: copy;
}

.auth-view {
	max-width: 35rem;
	border: .0625rem solid #aaa;
	padding: 3rem 5rem;
	box-shadow: 0 1rem 5rem rgba(0,0,0,.2);
	/* For the child elements */
	display: flex;
	flex-direction: column;
	min-width: 300px;
	min-height: 355px;
}

/* Visual Elements */
.auth-logo {
	width: 100%;
	height: auto;
	margin-bottom: 2rem;
	object-fit: contain;
}

.auth-error {
	border: 1px solid red;
	background-color: #ff75811a;
	color: red;
	margin-bottom: 2rem;
	text-align: center;
	padding: 1em;
}

.error-shake {
	animation: shake 0.5s;
}

/* Shared UI Components */
.auth-link-box {
	text-align: center;
}

.auth-page-title {
	text-align: center;
	font-weight: bold;
}

.auth-page-message {
	text-align: center;
	color: #6c757d;
	margin: 0;
}

.auth-button {
	width: 100% !important;
	margin-top: 1rem !important;
}

/* Animations */
@keyframes shake {
	8%, 41% {
		transform: translateX(-10px);
	}

	25%, 58% {
		transform: translateX(10px);
	}

	75% {
		transform: translateX(-5px);
	}

	92% {
		transform: translateX(5px);
	}

	0%, 100% {
		transform: translateX(0);
	}
}

/* Responsive Design */
@media screen and (max-width: 576px) {
	.auth-container {
		overflow: scroll; /* Notwendig für Edge da scrolling nicht automatisch erkennt wird */
	}

	.auth-view {
		box-shadow: none;
		border: none;
		padding-left: 15%;
		padding-right: 15%;
	}
}

@media screen and (max-height: 660px) {
	.auth-container {
		overflow: scroll; /* Notwendig für Edge da scrolling nicht automatisch erkennt wird */
	}

	.auth-view {
		box-shadow: none;
		border: none;
		/*
			height: 85vh;
			Führt am Smartphone dazu, dass der Footer in die Anmeldemaske verschoben wird,
			da die View durch die Tastatur kleiner wird
			--> auth-view Content geht über DIV hinaus
		*/
	}

	.auth-logo {
		width: auto;
		height: 45%;
		margin: 0px 0px 0px 0px;
	}

	.auth-footer {
		padding-bottom: 20px;
	}

	.dxbs-fl .form-group {
		margin-bottom: 1%;
	}

	.col-form-label-sm {
		padding-top: 1%;
		padding-bottom: 1%;
	}

	.form-control-sm {
		padding-top: 1%;
		padding-bottom: 1%;
	}
}

@media screen and (max-height: 380px) {
	.auth-container {
		overflow: scroll;
	}
}