/* Application-wide styles */
@font-face {
	font-family: "Manrope-Medium";
	src: url("/fonts/Manrope-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "Manrope-SemiBold";
	src: url("/fonts/Manrope-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Manrope-Light";
	src: url("/fonts/Manrope-Light.ttf") format("truetype");
}

@font-face {
	font-family: "Manrope-Bold";
	src: url("/fonts/Manrope-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "HindMadurai";
	src: url("/fonts/HindMadurai-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "HindMadurai-Light";
	src: url("/fonts/HindMadurai-Light.ttf") format("truetype");
}

@font-face {
	font-family: "HindMadurai-SemiBold";
	src: url("/fonts/HindMadurai-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "HindMadurai-Bold";
	src: url("/fonts/HindMadurai-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Roboto-Light";
	src: url("/fonts/Roboto-Light.ttf") format("truetype");
}

@font-face {
	font-family: "Roboto";
	src: url("/fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Roboto-SemiBold";
	src: url("/fonts/Roboto-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Arial-Bold";
	src: local('Arial'), weight: bold;
}

@font-face {
	font-family: "Sans-Serif-Light";
	src: local("Microsoft Sans Serif"), local("Sans Serif");
	font-weight: 100;
}

:root {
  --primary: #004769;
  --secondary: rgba(0, 0, 0, 0.6);
  --accent: #0D0D21;
  --background: #FFFFFF;
  --secondary-background: #EBEEF3;
  --selector-background: #E3E7ED;
  --error-background: #ff9a9a;
  --on-background: #000000;
  --on-background-variant: #C5C1C1;
  --on-background-passive: #666666;
  --on-background-error: #FF1E1E;
  --on-background-success: #1EC01E;
  --on-primary: #FFFFFF;
  --on-secondary: #000000;
  --shadow: rgba(0, 0, 0, 0.3);
  --divider: #C5C1C1;
  --content-radius: 20px;
  --popup-radius: 10px;
}

/* Smallest size */
@media (width > 0px) {
	div.header {
		flex-direction: column;
		gap: 12px;
		height: 110px;
		align-items: center; /* Center sections horizontally */
		justify-content: center; /* Center sections vertically */
	}
	div.header-primary {
		align-items: center; /* Center items in section vertically */
		justify-content: center; /* Center content of section horizontally */
		min-width: 340px;
	}
	div.header-secondary {
		align-items: center; /* Center items in section vertically */
		width: 100%;
	}
	div.header-compact-insets {
		display: flex;
	}
	img.rounded-icon {
		width: 41px;
		height: 41px;
		border-radius: 20px;
	}
    img.logo {
        height: 23px;
    }
    span.sublogo {
        font-size: 8px;
    }
    div.language-btn {
        padding: 6px 0px 6px 16px;
        font-size: 12px;
    }
    img.popup-arrow {
        width: 11px;
        margin-left: 5px;
        margin-right: 4px;
    }
    div.language-menu ul li {
        padding: 6px 0px 6px 16px;
		font-size: 12px;
    }
	span.greeting {
		font-size: 12px;
	}
    .rounded-button {
        height: 32px;
        border-radius: 16px;
        padding: 0px 16px; /* Padding for button content */
        font-size: 13px;
		min-width: 90px;
    }
    button.mini-button {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        font-size: 8px;
    }
	button.mini-button img {
		width: 18px;
		height: 18px;
	}
	img.button-icon {
		width: 13px;
		height: 13px;
	}
	div.account-popup {
		top: 40px;
	}
    div.footer {
        flex-direction: column;
        gap: 10px;
        font-size: 10px;
    }
	div.account-menu-wrapper {
		margin-left: 7px;
		margin-right: 7px;
	}
	.nav-toggle {
		margin-right: 7px;
		margin-left: 7px;
		background: var(--background);
	}
	.nav-toggle-spacer {
		flex: 1;
	}
    .next-in-row {
        margin-left: 5px;
    }

    .next-in-row2 {
        margin-left: 8px;
    }

    .next-in-row3 {
        margin-left: 24px;
    }
}

/* Medium size */
@media (width > 400px) {
    div.header {
        gap: 15px;
        height: 130px;
    }
	div.header-primary {
		align-items: center; /* Center items in section vertically */
		justify-content: center; /* Center content of section horizontally */
		min-width: 360px;
	}
	div.header-compact-insets {
		display: flex;
	}
    img.rounded-icon {
        width: 47px;
        height: 47px;
        border-radius: 23px;
    }
    img.logo {
        height: 29px;
    }
    span.sublogo {
        font-size: 10px;
    }
    div.language-btn {
        padding: 7px 0px 7px 20px;
        font-size: 14px;
    }
    img.popup-arrow {
        width: 15px;
        margin-left: 8px;
        margin-right: 4px;
    }
    div.language-menu ul li {
        padding: 7px 0px 7px 20px;
		font-size: 14px;
    }
	span.greeting {
		font-size: 14px;
	}
    .rounded-button {
        height: 40px;
        border-radius: 20px;
        padding: 0px 16px; /* Padding for button content */
        font-size: 14px;
		min-width: 128px;
    }
    .rounded-button {
        height: 40px;
        border-radius: 20px;
        padding: 0px 16px; /* Padding for button content */
        font-size: 14px;
		min-width: 128px;
    }
    button.mini-button {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size: 9px;
    }
	button.mini-button img {
		width: 22px;
		height: 22px;
	}
	img.button-icon {
		width: 16px;
		height: 16px;
	}
	div.account-popup {
		top: 48px;
	}
    div.footer {
        flex-direction: column;
        gap: 12px;
        font-size: 12px;
    }
	div.account-menu-wrapper {
		margin-left: 7px;
		margin-right: 7px;
	}
	.nav-toggle {
		margin-right: 7px;
		margin-left: 7px;
		background: var(--background);
	}
	.nav-toggle-spacer {
		flex: 1;
	}
    .next-in-row {
        margin-left: 7px;
    }

    .next-in-row2 {
        margin-left: 10px;
    }

    .next-in-row3 {
        margin-left: 30px;
    }
}

/* Large size */
@media (width > 700px) {
	div.header {
		height: 160px;
	}
	div.header-primary {
		align-items: center; /* Center items in section vertically */
		justify-content: center; /* Center content of section horizontally */
		min-width: 400px;
	}
	div.header-secondary {
		align-items: center; /* Center items in section vertically */
		justify-content: center;
		width: 100%;
	}
	div.header-compact-insets {
		display: none;
	}
    img.rounded-icon {
        width: 59px;
        height: 59px;
        border-radius: 23px;
    }
    img.logo {
        height: 33px;
    }
    span.sublogo {
        font-size: 11.5px;
    }
    div.language-btn {
        padding: 7px 0px 7px 44px;
        font-size: 18px;
    }
    img.popup-arrow {
        width: 17px;
        margin-left: 18px;
        margin-right: 4px;
    }
    div.language-menu ul li {
        padding: 7px 0px 7px 44px;
		font-size: 18px;
    }
	span.greeting {
		font-size: 18px;
	}
    .rounded-button {
        height: 40px;
        border-radius: 20px;
        padding: 0px 16px; /* Padding for button content */
        font-size: 18px;
		min-width: 128px;
    }
    button.mini-button {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size: 9px;
    }
	button.mini-button img {
		width: 22px;
		height: 22px;
	}
	img.button-icon {
		width: 20px;
		height: 20px;
	}
	div.account-popup {
		top: 56px;
	}
    div.footer {
        flex-direction: column;
        gap: 16px;
		font-size: 13px;
    }
	div.account-menu-wrapper {
		margin-left: 9px;
		margin-right: 9px;
	}
	.nav-toggle {
		display: none;
	}
	.nav-toggle-spacer {
		display: none;
	}
    .next-in-row {
        margin-left: 9px;
    }

    .next-in-row2 {
        margin-left: 14px;
    }

    .next-in-row3 {
        margin-left: 41px;
    }
}

/* Larger than large */
@media (width > 1000px) {
    div.header {
        flex-direction: row;
        height: 85px;
		align-items: center;
		padding: 0px 24px 0px 24px;
    }
    div.header-primary {
        justify-content: left;
		min-width: 410px;
    }
    div.header-secondary {
		flex: 1 1 auto; /* Fill horizontal space */
		justify-content: right;
    }
	div.header-compact-insets {
		display: none;
	}
    img.rounded-icon {
        width: 59px;
        height: 59px;
        border-radius: 29px;
    }
    img.logo {
        height: 33px;
    }
    span.sublogo {
        font-size: 11.5px;
    }
    div.language-btn {
        padding: 7px 0px 7px 44px;
        font-size: 18px;
    }
    img.popup-arrow {
        width: 17px;
        margin-left: 18px;
        margin-right: 4px;
    }
    div.language-menu ul li {
        padding: 7px 0px 7px 44px;
		font-size: 18px;
    }
	span.greeting {
		font-size: 18px;
		padding: 0 8px 0 8px;
	}
    .rounded-button {
        height: 40px;
        border-radius: 20px;
        padding: 0px 16px; /* Padding for button content */
        font-size: 18px;
		min-width: 128px;
    }
    button.mini-button {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        font-size: 9px;
    }
	button.mini-button img {
		width: 22px;
		height: 22px;
	}
	img.button-icon {
		width: 20px;
		height: 20px;
	}
	div.account-popup {
		top: 56px;
	}
	div.account-menu-wrapper {
		margin-left: 9px;
		margin-right: 0;
	}
	.nav-toggle {
		display: none;
	}
	div.footer {
		flex-direction: row;
		font-size: 13px;
	}
    .next-in-row {
        margin-left: 9px;
    }

    .next-in-row2 {
        margin-left: 14px;
    }

    .next-in-row3 {
        margin-left: 41px;
    }
}

/* Globally use border-box box sizing */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* Toolbar-alike content header */
div.header {
	display: flex;
	background: var(--background);
	box-shadow: 0 -4px 25px var(--shadow);
	min-width: 340px;
	position: relative;
	z-index: 999;
}

/* A group of views in content header */
div.header-primary {
	display: flex;
	flex-direction: row;
}

div.header-secondary {
	display: flex;
	flex-direction: row;
	min-width: 320px;
}

div.header-compact-insets {
	flex-direction: row;
	align-items: center;
}

img.rounded-icon {
	border: 0;
	vertical-align: middle;
}

/* A wrapper that arranges logo image and application purpose text below it */
div.logo-wrapper {
	display: flex;
	flex-direction: column;
	margin-top: 4px;
	gap: 2px;
	text-transform: uppercase;
	align-items: center;
}

/* Logo image */
img.logo {
	width: auto;
}

/* Application purpose text below logo */
span.sublogo {
	font-family: Manrope-Light;
}

/* Language selector */
.language-selector {
	position: relative;
	display: inline-block;
}

/* Button that activates language selector */
.language-btn {
	font-family: Manrope-SemiBold;
	cursor: pointer;
	background-color: var(--background);
	color: var(--primary);
}

img.popup-arrow {
	height: auto;
	vertical-align: middle;
	cursor: pointer;
}

/* Language selector popup menu */
div.language-menu {
position: absolute;
top: 0; /* Position below the button */
left: 0;
background-color: white;
z-index: 1;
text-align: left;

/* Fade effect settings */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
pointer-events: none;
}

.language-menu ul {
list-style: none;
margin: 0;
padding: 0;
}

.language-menu ul li {
display: block;
font-family: Manrope-SemiBold;
color: var(--primary);
}

.language-menu ul li a {
text-decoration: none;
color: var(--primary);
cursor: pointer;
}

.language-menu.show {
visibility: visible; /* Show the menu when it has the 'show' class */
opacity: 1;
pointer-events: auto;
}

span.greeting {
font-family: Manrope-SemiBold;
color: var(--primary);
}

.rounded-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 2px solid var(--primary);
cursor: pointer;
vertical-align: middle;
transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
font-family: Roboto;
}

.mini-button {
box-sizing: border-box;
border: 2px solid var(--primary);
padding: 0;
cursor: pointer;
vertical-align: middle;
transition: all 0.3s, color 0.3s; /* Smooth hover effect */
text-transform: uppercase;
}

.primary-button {
background-color: var(--primary);
color: var(--on-primary); /* Text color */
}

.primary-button:hover {
background-color: var(--on-primary); /* Change background on hover */
color: var(--primary); /* Change text color on hover */
}

.secondary-button {
background-color: var(--on-primary);
color: var(--primary); /* Text color */
}

.secondary-button:hover {
background-color: var(--primary); /* Change background on hover */
color: var(--on-primary); /* Change text color on hover */
}

div.account-menu-wrapper {
	position: relative;
}

button.profile img {
	content: url(/images/profile.svg);
}

button.profile:hover img {
	content: url(/images/profile-reverse.svg);
}

div.account-popup {
	min-width: 200px;
	background: var(--background);
	box-shadow: 0 0 16px var(--shadow);
	border-radius: var(--content-radius);
	padding: 16px 0 16px 0;
	position: absolute;
	right: -8px;
	display: none;
}

div.account-menu-wrapper.expanded div.account-popup {
	display: block;
}


div.account-popup-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-family: Manrope, helvetica;
	font-size: 15px;
	font-weight: 400;
	color: var(--primary);
	padding: 8px 24px 8px 24px;
	cursor: pointer;
}

div.account-popup-item:hover {
	background: var(--secondary-background);
}

div.account-popup-item img {
	height: 18px;
	width: auto;
}

.permanent-spacer {
	flex: 1;
}

div.footer {
	display: flex;
	position: relative;
	box-sizing: border-box;
	background: var(--background);
	box-shadow: 0 4px 25px var(--shadow);
	padding: 12px 24px 12px 24px;
	flex-wrap: wrap;
	font-family: Manrope-Light;
	min-width: 320px;
	z-index: 700;
}

div.footer-primary {
	flex: 1 1 auto;
	display: flex;
	justify-content: left;
}

div.footer-secondary {
	flex: 1 1 auto; /* Allow flexibility for content */
	text-align: right; /* Right-align content */
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: end;
}

button.link {
	box-sizing: border-box;
	border: 0;
	padding: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	overflow: hidden;
	outline: none;
	cursor: pointer;
	font-family: Manrope-Light;
	font-size: 13px;
}

button.link:hover {
	text-decoration: underline;
}

div.footer-line {
	margin-top: 14px;
}

div.footer-line a {
	color: var(--on-background);
}

.droplet-button {
	background-color: var(--primary);
	color: var(--on-primary); /* Text color */
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	border: 2px solid var(--primary);
	border-radius: 24px 24px 24px 0;
	padding: 0;
	font-size: 11px;
	vertical-align: middle;
	transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
}

button.nav-toggle.balancer {
	visibility: hidden;
}

div.divider {
	height: 1px;
	background: var(--divider);
}

.nav-toggle img.button-icon {
	content: url(/images/nav-close.svg);
}

.nav-toggle.hidden img.button-icon {
	content: url(/images/nav-open.svg);
}

div.header-compact-insets .switch {
	display: inline-block;
}

.switch {
	position: relative;
	width: 57px;
	height: 32px;
	overflow: hidden;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 2px;
	left: 0;
	right: 0;
	bottom: 2px;
	background-color: var(--background);
	box-shadow: inset 2px 4px 5px rgba(0,0,0,0.3);
	transition: 0.4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	height: 19px;
	width: 20px;
	left: 4px;
	bottom: 4px;
	content: "";
	background-color: var(--primary);
	transition: 0.4s;
	border-radius: 50%;
}

.switch .switch-label {
	position: absolute;
	color: var(--primary);
	top: 12px;
	right: 5px;
	HindMadurai-Light, sans-serif;
	font-size: 8px;
	transition: 0.4s;
}

input:checked + .slider:before {
	transform: translateX(28px);
}

input:checked ~ .switch-label {
	transform: translateX(28px);
}

div.inline-notification {
	display: none;
	flex-direction: row;
	gap: 16px;
	align-items: center;
	border: 2px solid var(--primary);
	border-radius: var(--content-radius);
	width: 100%;
	max-width: 1450px;
	padding: 16px;
	font-family: Roboto;
	font-size: 14px;
	color: var(--primary);
}

div.inline-notification.active {
	display: flex;
}