@font-face {
	font-family: 'Source Sans Pro';
	src: url('fonts/SourceSansPro-Regular.ttf.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Source Sans Pro';
	src: url('fonts/SourceSansPro-Semibold.ttf.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Source Sans Pro';
	src: url('fonts/SourceSansPro-Bold.ttf.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Titillium Web';
	src: url('fonts/titillium-web-latin-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Titillium Web';
	src: url('fonts/titillium-web-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

/* Reset and base styles */
* {
	margin: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Source Sans Pro', Arial, sans-serif;
	background-color: #f5f9ff;
	color: #231f20;
	/* Needed to keep the footer at the bottom of the screen when the content height is smaller than the screen height */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a {
	color: #007BE5;
	letter-spacing: 0.5px;
}

/* Layout components */
.main-container {
	flex: 1; /* Absorbs all remaining vertical space, so the footer is at the bottom of the screen */
	display: flex;
	flex-direction: column;
}

.content-area {
	padding: 36px 16px;
}

/* The 'Broadcast Message' image */
#broadcast {
	display: none; /* Hide by default */
	margin: 0 auto; /* Center the image */
}

/* The main screen elements */
.login-card, .privacy-card, .warning-card, .message-card {
	background-color: #fdfeff;
	border-radius: 5px;
	flex-direction: column;
	align-items: center;
	padding: 35px 100px;
	margin: 0 auto;
	max-width: 590px;
	display: none; /* Hide by default */
	gap: 20px;
}

/* The login element */
.login-card {
	gap: 12px;
}

/* The privacy terms element */
.privacy-card {
	max-width: 795px;
	gap: 25px;
}

/* The warning element for disabled JavaScript or cookie */
.warning-card {
	display: flex; /* Show by default */
}

/* EXIM logo on the top */
.top-logo {
	height: 84px;
	width: 84px;
}

.privacy-title {
	width: 100%;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.1px;
}

.privacy-text > p {
	margin-bottom: 1em; /* Creates one blank line of space */
}

.button-register {
	width: 100%;
	border: 1.5px solid #007BE5;
	color: #007BE5;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	padding: 10px 34px;
	margin: 12px 0;
}

.form-title {
	font-size: 32px;
	font-family: 'Titillium Web', Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.login-form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.privacy-policy-button-container {
	width: 65%;
	display: flex;
	flex-direction: column;
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-label, .checkbox-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #656565;
	margin-bottom: 4px;
}

.text-input, .password-input, .passcode-input {
	border: 1px solid #888;
	height: 44px;
}

.text-input, .password-input {
	font-size: 14px;
	letter-spacing: 0.5px;
}

.passcode-input {
	font-size: 27px;
	font-weight: 700;
	font-family: monospace; /* To make sure each digit takes up the exact same width */
	letter-spacing: 40px;
	padding-left: 50px;
	/* Dashed under the digits */
	background-image: /* 1. Create 6 identical gradients (one for each dash) */
		linear-gradient(#666, #666),
		linear-gradient(#666, #666),
		linear-gradient(#666, #666),
		linear-gradient(#666, #666),
		linear-gradient(#666, #666),
		linear-gradient(#666, #666);
	background-repeat: no-repeat; /* 2. Stop them from repeating */
	background-size: 25px 2px; /* 3. Set the size of each individual dash */
	background-position: /* 4. Position each dash individually (the initial 45 left offset + 55 for each next) */
		left 45px bottom 6px,
		left 100px bottom 6px,
		left 155px bottom 6px,
		left 210px bottom 6px,
		left 265px bottom 6px,
		left 320px bottom 6px;
}

.checkbox-container {
	display: flex;
	gap: 10px;
}

.checkbox {
	width: 18px;
	height: 18px;
	border: 1px solid #888;
}

.login-button {
	background: #007BE5;
	color: #ffffff;
	font-size: 16px;
	font-family: 'Source Sans Pro', Arial, sans-serif; /* Override the default browser font */
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	padding: 10px 34px;
	margin-top: 8px;
}

.logout-button {	
	width: 100%;
	background: #007BE5;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	padding: 10px 34px;
}

.gov-id-section {
	display: flex;
	align-items: flex-end;
	margin: 10px 0;
}

.lock-icon {
	width: 20px;
	height: 20px;
	margin-bottom: -2px;
}

.divider-line {
	width: 100%;
	height: 1px;
	background-color: #e3e3e3;
	margin: 10px 0;
}

.forgot-password, .go-back-section, .regenerate-password {
	display: flex;
	align-items: center;
	margin: 10px 0;
}

.arrow-icon {
	width: 14px;
	height: 14px;
}

.regenerate-password-text {
	color: #666;
	font-size: 14px;
}

.notice-text > p, .notice-text > ol {
	margin-bottom: 1em; /* Creates one blank line of space */
	color: #1B1B1B;
	font-size: 12px;
	letter-spacing: 0.1px;
}

/* Errors text */
#submitError font {
	color: #EF4C45;
	font-size: 14px;
	letter-spacing: 0.1px;
}

#submitError ul {
	padding-inline-start: 20px;
}

#submitError li {
	margin-top: 5px;
}

/* Hide the <br> element coming from the legacy auth.js */
#submitError br {
	display: none;
}

/* Text styles */
.red {
	color: #EF4C45;
}

.semibold {
	font-weight: 600;
}

.italic {
	font-style: italic;
}

.small-font {
	font-size: 14px;
}

/* Footer */
.footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100px;
	padding-right: 120px;
	gap: 20px;
	color: #033572;
	background: #FEFEFE;
	border-top: 1px solid #E3E3E3;
}

/* A vertical divider line used in the header */
.vertical-divider-line {
	width: 1px;
	height: 32px;
	background-color: #033572;
}

/* The left part of the footer with links */
.footer-links {
	display: flex;
	gap: 7px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.1px;
}

.footer-links a {
	color: #033572;
	text-decoration: none;
}

/* The right part of the footer with EXIM logo */
.footer-logo {
	width: 214px;
	height: 66px;
}

/* Interactive states */
a:hover {
	color: #0056A0;
	opacity: 0.8;
}

.button-register:hover {
	transform: scale(1.02);
}

.login-button:hover {
	background-color: #0056A0; 
	transform: scale(1.02);
}

.logout-button:hover {
	color: #ffffff;
	background-color: #0056A0; 
	opacity: 1;
	transform: scale(1.02);
}

/* Transitions */
.button-register, .login-button, .logout-button, .gov-id-link, .forgot-link, .footer-link {
	transition: all 0.3s ease-in-out;
}