/* IMPORT BASIC */
@import url(../basic_new/layout.css);

/****************************
	LOGIN
*****************************/
.login.page {
	background:
	    linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)),
	    url(images/demo-ea-back-sm.jpg) bottom center no-repeat fixed var(--main-theme-color-50);
	background-size: cover;
	}

.login .main-header {
	margin-bottom: 4vh;

	.btn {
		background-color: var(--main-theme-gray-70);

		&:hover, &:focus, &:active {
			background-color: var(--main-theme-gray-80);
		}
	}
}

.login-content {margin-top: 5vh;}

.logo-container h1 {
	font-size: 1.7em;
	text-shadow: 0 1px 1px var(--neutral-black);
}

.login-h2 {display: none;}

.login-form {
	padding-block: 2rem 3rem;
	background-color: rgba(0, 98, 119, .95); /* main-theme-color-60: #006277;*/
	box-shadow: 0 0 25px -5px var(--neutral-black);

	.btn-custom {
		border-color: var(--neutral-white);
		background-color: var(--main-theme-color-70);
		color: var(--neutral-white);

		&:hover, &:focus {
			border-color: var(--neutral-white);
			background-color: var(--main-theme-color-80);
			color: var(--neutral-white);
		}

		:focus-visible {
			outline-color: currentColor;
		}

		&:active {
			border-color: var(--main-theme-color-70);
			background-color: var(--neutral-white);
			color: var(--main-theme-color-70);
		}
	}
}

.login-form .form-required .col-form-label .required-icon:after {
	color: var(--neutral-white);
}

.opal-login-box h2 {
	margin-bottom: 1.3rem;
	text-align: center;
	text-wrap: balance;
}

.login-separator {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block: 1.5rem;
	font-size: 1.3em;
	text-transform: uppercase;
}
.login-separator:before,
.login-separator:after {
	border-top: 1px solid currentColor;
	content: " ";
	width: 50%;
}

.alternative-login {
	text-align: center;

	h2 {
		margin-bottom: .7rem;
		font-size: inherit;
		text-wrap: balance;
	}
}

.login-news .panel-content {
	padding: 0;
}

.opal-login-form,
.alternative-login {
	padding-inline: 6rem;

	@media (max-width: 599px) {
		padding-inline: 3rem;
	}

	.btn-custom {
		width: 100%;
	}
}

/* login dialog */
.ui-dialog-content .opal-login-form,
.ui-dialog-content .alternative-login {
	width: 30rem;
	padding-inline: 0;
	margin-inline: auto;

	@media (max-width: 599px) {
		width: 90%;
	}
}

.ui-dialog-content .opal-login-box {
	margin-block: 3rem;
}

/************* PROGRESS *************/
.resource-header.progress-0,
.jstree-anchor.progress-0 {border-color: var(--main-theme-gray-30);}
.resource-header.progress-50,
.jstree-anchor.progress-50 {border-color: var(--main-theme-color-20);}
.resource-header.progress-100,
.jstree-anchor.progress-100 {border-color: var(--main-theme-color-50);}