/** 
 * Imprivata Admin Console Login CASCADING STYLE SHEET
 *
 * [DESCRIPTION]
 * This is the CSS style sheet used in Imprivata Admin Console Login
 *
 * Document Last Modified: November 11, 2024
 */

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: var(--main-font-family);
}

body {
	background-color: #f4f4f4;
}

.login-main-container {
	background-image: url(../images/login-background.jpg);
	height: 100%;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: auto;
}

.login-messages-container {
	display: flex;
	padding: 50px 0 50px 0;
	justify-content: center;
}

.login-message {
	margin: 0;
	position: static;
	top: 60px;
	font-size: var(--h5-font-size);
	font-weight: var(--semi-bold-font-weight);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.login-messages-container .alert {
	width: 420px;
	min-height: 50px;
	border-radius: 12px;
	z-index: 0;
	background-image: none;
	padding: 20px 40px 20px 66px;
	align-content: center;
}

.login-message-icon {
	height: 32px;
	width: 32px;
	position: relative;
	right: -50px;
	z-index: 1;
}

.login-message-close {
	width: 8px;
	height: 8px;
	position: relative;
	top: -25px;
	left: -42px;
	padding: 15px;
	background-repeat: no-repeat;
	cursor: pointer;
	background-position: center;
}

#error-close {
	background-image: url(../images/Alerts/closeIconError.svg);
}

#success-close {
	background-image: url(../images/Alerts/closeIconSuccess.svg);
}

#warning-close {
	background-image: url(../images/Alerts/closeIconWarning.svg);
}

#info-close {
	background-image: url(../images/Alerts/closeIconInfo.svg);
}

.login-error-icon {
	background-image: url(../images/Alerts/errorIconNew.svg);
}

.login-info-icon {
	background-image: url(../images/Alerts/infoIconNew.svg);
}

.login-warning-icon {
	background-image: url(../images/Alerts/warningIconNew.svg);
}

.login-success-icon {
	background-image: url(../images/Alerts/successIconNew.svg);
}

.login-messages-container #error {
	border: 1px solid var(--alert-cabaret);
	background-color: var(--error-background);
	color: var(--alert-cabaret);
}

.login-messages-container #info {
	border: 1px solid var(--alert-pontoon);
	background-color: var(--info-background);
	color: var(--alert-pontoon);
}

.login-messages-container #warning {
	border: 1px solid var(--alert-tangerine);
	background-color: var(--caution-background);
	color: var(--alert-tangerine);
}

.login-messages-container #success {
	border: 1px solid var(--alert-forest);
	background-color: var(--success-background);
	color: var(--alert-forest);
}

.login-content {
	padding: 0 200px 100px 200px;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.login-text {
	max-width: 600px;
	display: flex;
	flex-grow: 0;
	flex-direction: column;
	background-color: transparent;
}

.login-text-header {
	font-size: var(--h0-font-size);
	color: var(--neutral-white);
	font-weight: var(--regular-font-weight);
}

.login-text-devider {
	margin: 30px 0 30px 0;
}

.login-text-icon {
	background-image: url(../images/login-devider.svg);
	height: 6px;
	width: 115px;
	display: block;
}

.login-text-paragraph {
	font-size: var(--h5-font-size);
	color: var(--neutral-white);
}

.login-text-paragraph-title h2 {
	font-size: var(--h2-font-size);
	color: var(--neutral-white);
	font-weight: var(--regular-font-weight);
}

.login-text-paragraph p {
	background-color: var(--imp-blue);
	padding: 20px 14px;
}

.login-text-sso {}

.login-text-sso-button {
	display: block;
    width: 450px;
    height: 40px;
    border: 2px solid var(--neutral-white);
    border-radius: 6px;
    font-size: var(--h5-font-size);
    font-weight: var(--bold-font-weight) !important;
    color: var(--neutral-white);
    margin: 40px 0 14px 0;
    text-decoration: none !important;
    text-align: center;
    align-content: center;
}

.login-text-sso-button:hover {
	box-shadow: 0px 0px 6px var(--neutral-white);
}

.login-text-sso-button:active {
	background-color: var(--primary-120);
}

.login-text-sso-button:focus {
	border: 2px solid var(--focus-color);
}

.login-text-links {
	margin: 40px 0 16px 0;
}

.login-text-links a {
	margin: 0 20px 0 20px;
	text-decoration: none;
	color: var(--neutral-white);
	display: none;
	border-bottom: 1px solid var(--neutral-white);
}

.login-text-links a:first-child {
	margin: 0 20px 0 0;
	display: inline;
}

.login-text-copyright {
	font-size: var(--regular-font-size);
	color: var(--neutral-white);
}

.login-input {
	border-radius: 4px;
	font-size: var(--regular-font-size);
	font-weight: var(--semi-bold-font-weight);
	color: var(--grey-80);
	flex-grow: 0;
	background-color: var(--imp-blue-10);
	height: 672px;
	min-width: 380px;
	max-width: 380px;
	margin: 0 0 0 140px;
	display: flex;
	flex-direction: column;
}

.login-input form {
	display: flex;
	flex-direction: column;
}

.login-input-header {
	border-radius: 3px 3px 0 0;
	text-align: center;
	height: 124px;
	background-color: var(--imp-blue);
}

.login-input-icon {
	position: relative;
	display: block;
	z-index: 0;
	background-image: url(../images/login-icon.svg);
	height: 150px;
	width: 128px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	top: 70px;
	margin-left: auto;
	margin-right: auto;
}

.login-input-form {
	padding: 32px;
	min-height: 485px;
}

.login-input-form-heading {
	text-align: center;
	font-size: var(--h2-font-size);
	font-weight: var(--regular-font-weight);
	color: var(--grey-80);
	margin: 60px 0 20px 0;
}

.login-input-directories {
	font: inherit;
	text-align: right;
}

.login-input-select {
	font-size: var(--regular-font-size);
	font-weight: var(--semi-bold-font-weight);
	text-align: right;
	color: var(--grey-80);
	padding: 6px;
	background-color: transparent;
	border-radius: 6px;
	border: 1px solid transparent;
}

.login-input-select:hover {
	box-shadow: 0px 0px 6px rgb(0 0 0 / 0.3);
}

.login-input-select:focus,
.login-input-select:focus-visible,
.login-input-select:focus-within {
	outline: none;
	border: 1px solid #00A2C7 !important;
}

.login-input-select:active {
	background-color: var(--neutral-white) !important;
}

.login-input-option {
	background-color: var(--neutral-white);
	color: var(--grey-80);
	text-align: left;
}

.login-input-username {}

.login-input-password {
	max-height: 70px;
}

/* hiding default browser icon to show/hide pswrd */
::-ms-reveal {
	display: none;
}

.login-input-password-mask {
	background-image: url(../images/showPswrdIcon.svg);
	height: 20px;
	width: 20px;
	display: inline-block;
	position: relative;
	right: -87%;
	top: -46px;
	cursor: pointer;
	padding: 10px;
	background-repeat: no-repeat;
	background-position: center;
}

.login-input-label {
	font-size: var(--regular-font-size);
	font-weight: var(--semi-bold-font-weight);
	color: var(--grey-80);
}

.login-input-field {
	width: 89%;
	height: 40px;
	border: var(--primary) 2px solid;
	border-radius: 6px;
	font-size: var(--regular-font-size) !important;
	font-weight: var(--regular-font-weight);
	outline: none;
	color: var(--grey-80) !important;
	padding: 0 16px 0 16px;
	margin: 5px 0 5px 0;
	box-shadow: inset 0 40px var(--primary-5);
}

.login-input-field:hover {
	box-shadow: 0px 0px 6px rgb(0 0 0 / 0.3);
}

.login-input-field:active {
	box-shadow: inset 0 40px var(--neutral-white);
	color: var(--grey-80) !important;
}

.login-input-field:focus {
	border: 2px solid var(--focus-color);
	box-shadow: inset 0 40px var(--primary-5);
}

.login-input-submit-button {
	background-color: var(--primary);
	font-size: var(--h5-font-size);
	font-weight: var(--semi-bold-font-weight);
	color: var(--neutral-white);
	width: 100%;
	height: 40px;
	border: 2px solid transparent;
	border-radius: 6px;
	padding: 0 5px 0 5px;
	margin: 10px 0 0 0;
}

.login-input-submit-button:hover {
	box-shadow: 0px 0px 6px rgb(0 0 0 / 0.3);
	background-color: var(--primary-140);
}

.login-input-submit-button:active {
	background-color: var(--primary-120);
}

.login-input-submit-button:focus {
	border: 2px solid var(--focus-color);
}

.login-form-otp {
	text-align: center;
	margin: 15px 0 0 0;
}

.login-form-otp a {
	padding: 2px 5px;
	text-decoration: none;
	color: var(--primary);
	font-size: var(--regular-font-size);
	font-weight: var(--regular-font-size);
	border: 2px solid transparent;
}

.login-form-otp a:hover {
	color: var(--primary-140);
}

.login-form-otp a:active {
	color: var(--primary-120);
}

.login-form-otp a:focus {
	border: 2px solid var(--focus-color);
}

.login-input-challenge {
	text-align: center;
}

.login-input-radio {
	margin: 40px 0 60px 0;
	text-align: center;
}

.login-input-radio span:first-of-type {
	margin: 0 30px 0 0;
}

.login-input-radio input {
	accent-color: var(--neutral-white);
	outline: none;
	background-color: var(--primary-5);
}

.login-input-radio input:hover {
	box-shadow: 0px 0px 6px rgb(0 0 0 / 0.3);
}

.login-input-radio input:active {
	background-color: var(--primary-120);
}

.login-input-radio input::after {
	display: block;
	background: transparent;
	content: '';
	height: 13px;
	width: 13px;
	border-radius: 100%;
	position: relative;
	left: -2px;
	top: -2px;
}

.login-input-radio input:checked::after,
.login-input-radio input:active::after {
	height: 7px;
	width: 7px;
	border: 5px solid var(--primary-120);
	left: -2px;
	top: -2px;
}

.login-input-radio input:focus::after {
	height: 13px;
	width: 13px;
	border: 2px solid var(--focus-color);
	left: -2px;
	top: -2px;
}

.login-input-logo {
	position: relative;
	bottom: 60px;
	left: 34px;
}

.login-note {
	text-align: center;
	color: var(--neutral-white);
}


@media screen and (min-height: 1000px) {
	.login-messages-container {
		padding: 100px 0 100px 0;
	}

	.login-content {
		padding: 0 200px 200px 200px;
	}
}