@charset "UTF-8";
/* do not change :root definitions */
:root {
	--heading-font: sans-serif;
	--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--default-font-size: 13px;	
	scroll-behavior: smooth;
}

:root {
	--accent-color: #008b8b;
}

html {
	height: 100%;
	overflow-x: hidden;
}

body {
	background-image: url('../images/login-bg.jpg');
	background-repeat: repeat;
	font-family: var(--default-font);
	font-size: var(--default-font-size) !important;
	min-height: 100%;
}

body .ui-widget, body .ui-inputfield {
	font-family: var(--default-font);
	font-size: var(--default-font-size) !important;
}

body .ui-widget.ui-state-focus {
	border-color: var(--accent-color) !important;	
}

body .ui-button {
	background: color-mix(in srgb, var(--accent-color), transparent 40%) !important;
	border: var(--accent-color) !important;
}

body .ui-button, body .ui-inputfield {
	border-radius: 0;
}

body .ui-button.ui-state-hover {
	background: var(--accent-color) !important;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active {
	background: var(--accent-color) !important;
	border: var(--accent-color) !important;
}

body .ui-chkbox .ui-chkbox-box.ui-state-focus {
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 40%) !important;
}

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
	top: 30%;
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight {
	background: var(--accent-color) !important;
}

body .ui-password .ui-password-icon {
	margin-top: -0.75em !important;
}

span.ui-password.ui-input-icon-right:has(> input.form-control) {
	width: 100%;
	margin-bottom: 1.5rem;	
}

body .ui-growl {
	top: 20px;
	width: 321px;
}

body .ui-growl .ui-growl-image {
	font-size: 1.4rem !important;
}

body .ui-growl .ui-growl-item-container {
	font-size: .875em;
}

body .ui-growl-message {
	width: 250px;	
}

::placeholder {
	color: #777;
	font-size: 0.875em;
	font-style: italic;
}

.container {
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -0%);
	margin-top: 60px;
}

.container>.row {
	background-color: #f9f9f9;
	border: 3px solid color-mix(in srgb, var(--accent-color), transparent 60%);
}

.login-banner {
	background-image: url('../images/login-banner.png');
	background-size: cover;
	background-position: center;
	background-color: color-mix(in srgb, var(--accent-color), transparent 60%) !important;
}

.shadow-lg {
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .75) !important;
}

@media ( min-width : 992px) {
	.container.login {
		max-width: 700px;
	}
	.container.forgotpassword {
		max-width: 525px;
	}
	.container.changepassword {
		max-width: 525px;
	}
	.container.companybranch {
		max-width: 525px;
	}
}

.mt-px-8 {
	margin-top: 8px !important;
}