/* ========================================================================================================================== */
/* General Login CSS                                                                                                          */
/* -------------------------------------------------------------------------------------------------------------------------- */
* {
	margin      : 0;
	padding     : 0;
	font-family : Helvetica;
	font-size   : 14px;
	outline     : none;
	box-sizing  : border-box;
}
html {
	overflow : hidden;
}
body {
	background-color : var(--color-bg);
}
.clg-login {
	z-index          : 10;
	position         : fixed;
	top              : 0;
	left             : 0;
	width            : 480px;
	background-color : var(--color-clear);
	height           : 100vh;
	display          : flex;
	flex-direction   : column;
	align-items      : stretch;
	justify-content  : center;
	padding          : 20px;
	overflow         : auto;
}
.clg-wrapper {
	display        : flex;
	flex-direction : column;
}
.clg-logo {
	margin-right : 0;
	align-self   : center;
}
.clg-content {
	flex-grow   : 1;
	margin-left : 0;
	text-align  : center;
}
.clg-content h3 {
	font-size : 22px;
	color     : var(--color-maindark);
}
.clg-content h4 {
	font-size   : 16px;
	font-weight : normal;
	color       : var(--color-bg2);
}
.clg-content h4 * {
	font-size   : 16px;
}
.clg-content h5 {
	font-size   : 14px;
	font-weight : normal;
	color       : var(--color-grey);
	font-style  : italic;
}
.clg-content .clg-textbox {
	width         : 100%;
	padding       : 10px;
	box-sizing    : border-box;
	border        : 1px solid var(--color-lightgrey);
	border-radius : 5px;
}
.clg-content .clg-textbox:focus {
	border-color     : var(--color-grey);
}
.clg-content .clg-button {
	position         : relative;
	width            : 100%;
	padding          : 10px;
	border           : 1px solid #002c6c;
	border-radius    : 5px;
	background-color : #002c6c;
	color            : var(--color-clear);
	font-weight      : bold;
	cursor           : pointer;
	overflow         : hidden;
}
.clg-content .clg-button:hover {
	background-color : #244779;
}
.clg-content .clg-button:after {
	content    : "";
	background : var(--color-btnfade);
	display    : block;
	position   : absolute;
	opacity    : 0;
	transition : all 0.8s;
	width      : 100%;
	height     : 100%;
	top        : 0;
	left       : 0;
}
.clg-content .clg-button:active:after {
	opacity    : 1;
	transition : 0s
}
.clg-content .clg-button.light {
	border           : 1px solid var(--color-lightgrey);
	border-radius    : 5px;
	background-color : var(--color-clear);
	color            : var(--color-grey);
}
.clg-content .clg-button.light:hover {
	border-color : var(--color-grey);
}
.clg-content .clg-error {
    margin     : 5px;
    color      : var(--color-alert);
    text-align : left;
    font-size  : 12px;
}
.clg-content .clg-link {
	cursor           : pointer;
	background-color : transparent;
	border           : none;
	color            : var(--color-grey);
}
.clg-content .clg-link:hover {
	color : var(--color-light);
}
.clg-content p {
	color : var(--color-bg2);
	text-align : justify;
}
/* -------------------------------------------------------------------------------------------------------------------------- */
.clg-backdrop {
	position         : fixed;
	top              : 0;
	left             : 0;
	width            : 100vw;
	height           : 100vh;
	background-color : black;
	z-index          : 10000;
	opacity          : 0;
	transition       : opacity 0.6s;
	display          : none;
}
.clg-spinner {
	width      : 80px;
	height     : 80px;
	position   : absolute;
	z-index    : 10001;
	opacity    : 0;
	transition : opacity 0.6s;
	display    : none;
	translate  : -50% -50%;
    top        : 50%;
    left       : 50%;
}
.clg-spinner > div {
	box-sizing       : border-box;
	position         : absolute;
	width            : 100%;
	height           : 100%;
	border           : 10px solid transparent;
	border-top-color : var(--color-gs1-blue);
	border-radius    : 50%;
	animation        : clgSpin1 1.2s linear infinite;
}
.clg-spinner > div:last-child {
	border              : 10px solid transparent;
	border-bottom-color : var(--color-gs1-blue);
}
@keyframes clgSpin1 {
	0%   { transform : rotate(0deg);   }
	100% { transform : rotate(360deg); }
}
/* ========================================================================================================================== */
/* Background Images                                                                                                          */
/* -------------------------------------------------------------------------------------------------------------------------- */
.image-container {
	z-index  : 5;
	width    : 100vw;
	height   : 100vh;
	overflow : hidden;
}
.image-container > img {
	position   : absolute;
	top        : 0;
	left       : 0;
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	transition : opacity 1s;
}
.bottom-right-logo {
	z-index  : 10;
	position : fixed;
	bottom   : 20px;
	right    : 50px;
}
.centiva-login-forgot {
	text-align : center;
}
.centiva-login-forgot > a {
	text-decoration : none;
	color           : var(--color-maindark);
}
@media (max-width : 860px) {
	.centiva-login {
		width : 100vw;
	}
	.bottom-right-logo {
		opacity : 0;
	}
}
@media (max-height : 640px) {
	.centiva-login {
		align-items : flex-start;
	}
}
.image-container-50 {
	z-index          : 5;
	margin-left      : 480px;
	width            : calc(100vw - 480px);
	height           : 100vh;
	overflow         : hidden;
	position         : relative;
	display          : flex;
	align-items      : center;
	background-color : #002c6c;
}
.image-container-50 > img {
	position   : absolute;
	width      : 100%;
	object-fit : cover;
	transition : opacity 1s;
}
/* ========================================================================================================================== */
/* Contact Info                                                                                                               */
/* -------------------------------------------------------------------------------------------------------------------------- */
.cin-info {
	width          : fit-content;
	margin         : auto;
	display        : flex;
	flex-direction : column;
	row-gap        : 10px;
	border         : 1px solid var(--color-lightgrey);
    border-radius  : 5px;
    padding        : 20px 100px;
}
.cin-info * {
	font-size       : 16px;
	color           : var(--color-maindark);
	text-decoration : none;
}
.cin-info a:hover {
	color : var(--color-light);
}
.cin-info > div {
	display        : flex;
	flex-direction : row;
	align-items    : center;
	white-space    : nowrap;
	margin-right   : 40px;
}
.cin-info > div *:first-child {
	flex-basis  : 30px;
	flex-shrink : 0;
}
/* ========================================================================================================================== */
/* First Device Accept                                                                                                        */
/* -------------------------------------------------------------------------------------------------------------------------- */
.fda-content {
	position   : relative;
    min-height : 400px;
	padding    : 40px 0 0 0;
}
/* ========================================================================================================================== */
/* Two Factor Authentication Login                                                                                            */
/* -------------------------------------------------------------------------------------------------------------------------- */
.tfa-content {
	position   : relative;
    min-height : 400px;
}
.tfa-spinner {
	display : block;
	opacity : 1;
	top     : 60%;
}
/* ========================================================================================================================== */
/* Change Login Language Classes                                                                                              */
/* -------------------------------------------------------------------------------------------------------------------------- */
.cll-form {
	position : absolute;
	top      : 10px;
	right    : 10px;
}
.cll-button {
	background : none;
	border     : none;
	margin     : 0;
	padding    : 0;
	cursor     : pointer;
}
.cll-image {
	width : 30px;
}
/* ========================================================================================================================== */
.clg-fsview {
	z-index : 12;
	width : 100vw;
}
.clg-fsview .clg-wrapper {
	height : 100%;
	max-width : 1000px;
	margin : auto;
	text-align: center;
}
/* ========================================================================================================================== */
.clg-tnsguide {
	display : none;
}
/* ========================================================================================================================== */