@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

html{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:flex;
	overflow: hidden;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

*{
	font-family: 'Red Hat Display', Helvetica, Arial, Lucida, sans-serif;
	-webkit-font-smoothing: antialiased;
	-ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

a{
	text-decoration:none;
}

a:link { color: #376684; }
a:visited { color: #376684; }
a:link:active, a:visited:active { color: #376684; }

#backdrop1{
	width:750px;
	height:750px;
	position:absolute;
	left:calc(50% - 575px);
	left:calc(50% - calc(375px + max(0px, min(235px, calc((50% - 500px) / 2)))));
	top:calc(50% - 375px);
	background-image:url('../images/login_backdrop_blue.png');
	background-size:750px 750px;
	opacity:0.1;
}

#backdrop2{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background: url(data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjA0KSIgaGVpZ2h0PSIxOTRweCIgd2lkdGg9IjExMnB4IiB2aWV3Qm94PSIwIDAgMTEyIDE5NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTYsMTI5LjMzLDAsOTcsNTYsNjQuNjcsMTEyLDk3Wk01NiwwSDBWMzIuMzNabTU2LDMyLjMzVjBINTZaTTU2LDE5NGg1NlYxNjEuNjdaTTAsMTYxLjY3VjE5NEg1NloiLz4KCQkJCQkJCQkJCTxwYXRoIGZpbGwtb3BhY2l0eT0iLjUiIGQ9Ik01NiwwVjY0LjY3TDAsOTdWMzIuMzNabTAsMTI5LjMzVjE5NGw1Ni0zMi4zM1Y5N1oiLz48L3N2Zz4=), linear-gradient(180deg, #084f70 0%, #00253a 100%);
	clip-path: polygon(0% 0%, 65% 0%, 35% 100%, 0% 100%);
	z-index:1;
}

#backdrop3{
	width:750px;
	height:750px;
	position:absolute;
	left:calc(50% - 575px);
	left:calc(50% - calc(375px + max(0px, min(235px, calc((50% - 500px) / 2)))));
	top:calc(50% - 375px);
	background-image:url('../images/login_backdrop_white.png');
	background-size:750px 750px;
	opacity:0.1;
	
}

@keyframes fadeIn{
	0%{
		
	}
	100%{
		
	}
}

#content{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	position:relative;
	z-index:3;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

#loginBox{
	width:420px;
	min-height:260px;
	margin-left:max(0px, min(235px, calc((50% - 500px) / 2)));
	padding:70px 0;
	background-color:#fff;
	display:flex;
	flex-direction:column;
	box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.45);
	justify-content:center;
	align-items:center;
	border-radius:12px;
}

#loginBox.changePass{
	padding:50px 0;
}

#title{
	height:60px;
	font-size:24px;
	color: #666;
}

.login_field{
	width: 350px;
    height: 40px;
    margin-bottom: 15px;
	border:solid 1px #ddd;
    border-radius: 5px;
	font-size:14px;
}

.login_field input{
	width: calc(100% - 20px);
	height: 24px;
    margin-left: 10px;
    margin-top: 8px;
    outline: 0;
    background: none;
    border: 0;
    color: #666;
}

.login_description{
	width:352px;
	color:#666;
	font-size:14px;
}

#login_options{
	width:352px;
	height:20px;
}

#login_remember{
	width:50%;
	height:20px;
	float:left;
}

#login_remember input{
	float:left;
}

#login_remember_text{
	color:#888;
	font-size:12px;
	margin-top:2px;
	margin-left:5px;
	float:left;
}

#login_forgot_password{
	width:50%;
	height:20px;
	text-align:right;
	font-size:14px;
	float:right;
}

#login_button{
	width: 350px;
    height: 40px;
	margin-top:25px;
    background-color: #006a88;
	border:solid 1px #006a88;
    border-radius: 5px;
	cursor:pointer;
}
#login_button:hover{
	background-color: #007a98;
}

#login_button_text{
	width: 100%;
	height: 24px;
    margin-top: 9px;
	text-align:center;
    color: #fff;
    font-weight: 600;
}

#login_error{
	width:350px;
	margin-top:15px;
	color:#cc0000;
	font-size:15px;
	text-align:center;
}

#powered_by{
	width:125px;
	height:60px;
	position:absolute;
	right:25px;
	bottom:15px;
}

#powered_by_text{
	color:#666;
	font-size:16px;
	text-align:right;
}

#powered_by_logo{
	width:125px;
	height:30px;
}
#powered_by_logo img{
	width:125px;
	height:30px;
}

#user_button{
	width: 32px;
    height: 32px;
	position:absolute;
	right:30px;
	top:14px;
	cursor:pointer;
	user-select: none;
}
#user_button img{
	width:32px;
	height:32px;
}

#main_user_nav{
	width:150px;
	position:absolute;
	top:60px;
	right:0;
	background-color:#fff;
	border-bottom-left-radius:5px;
	box-shadow: 3px 3px 5px #b2b8df;
	z-index:100;
	display:none;
}

.main_user_nav_row{
	width:100%;
	margin-top:5px;
	padding:12px 0;
	position:relative;
	z-index:2;
	text-align:center;
	color:#000;
	font-weight:700;
	cursor:pointer;
}

.main_user_nav_row:hover{
	background-color:#e9faff;
}

#enquiries{
	height:20px;
	padding:15px;
	background-color:#005a78;
	border-radius:5px;
	position:absolute;
	left:25px;
	bottom:25px;
	font-size:16px;
	color:#fff;
	z-index:4;
}