/* ------------ Branding colours -------------*/
:root {
	/* Main */
	--primary-color: #1c6331;
	--secondary-color: #064e3b;
	/* Header and navbar */
	--header-color: #21793b;
	--header-border-color: #5da631;
	--nav-item-color: transparent;
	--nav-item-hover-color: #eee;
	--nav-item-text-color: #fff;
	--nav-item-hover-text-color: #175529;
	/* Typography */
	--heading-color: #111827;
	--text-color: #374151;
	/* Sections and inputs */
	--card-color: #eee;
	--button-hover-color: #144522;
	--button-text-color: #fff;
}

/* -------------- Header Style ---------------*/

.headerBar {
	background: var(--header-color);
	border-bottom: 4px solid var(--header-border-color);
	border-radius: 0;
}

.userDetails {
	z-index: 1;
}

.defaultLogo, .controccTitle {
	display: none;
}

.laTitle {
	padding: 15px 15px 0;
	grid-column: 2 / -1;
	grid-row: 1 / 4;
	align-content: center;
	text-align: right;
}

.customLogo {
	display: inline-block;
	grid-row: 1 / 4;
	align-content: center;
	width: 130px;
	height: 32px;
	background: url(./img/logo.svg) no-repeat;
	background-size: 100%;
	border-bottom: 0;
	margin-top: 20px;
	margin-left: 15px;
}

@media (min-width: 780px) {
	.customLogo {
		width: 175px;
		height: 44px;
	}
}

@media (max-width: 779px) {
	.laTitle {
		font-size: 1em;
	}
}

/* ----- Navigation bar ------ */

.headerBar .navBar .navItem {
	border-radius: 0;
	padding-top: 7px;
	color: var(--nav-item-text-color);
	background: none;
	border-bottom: 4px solid transparent;
}

	.headerBar .navBar .navItem:is(:hover, :focus) {
		background: var(--nav-item-hover-color);
		color: var(--nav-item-hover-text-color);
		text-decoration: none;
		border-bottom: 4px solid;
	}

	/* Logout button */
	.headerBar .navBar .navItem.notab:hover {
		text-decoration: none;
	}

/* Update the burger button when active */
.burger:is(:hover, :focus) .burgerImg {
	filter: invert(1) !important;
}


@media (max-width: 910px) {
	.navBar.expanded {
		border-bottom: 4px solid var(--header-border-color);
	}

		.navBar.expanded .navItem {
			border-bottom-color: transparent;
		}
}

/* -------------- Page Style ---------------*/

body {
	color: var(--text-color);
}

h1, h2, h3, h4, h5, h6, .title {
	color: var(--heading-color);
	font-weight: 600;
}

.welcome {
	display: none;
}

div.expando {
	background: linear-gradient(white 5%, var(--card-color) 5%, var(--card-color) 95%);
}

	div.expando#exceptions, div.expando p, div.filter {
		background: var(--card-color);
	}

.expando p.title {
	background: var(--header-color);
	border-radius: 0;
}

.expando ul.tree, .ui-widget.ui-widget-content, .ui-widget-content {
	border: 1px solid var(--header-color);
}

a:not(.customLogo) {
	color: var(--primary-color);
	font-weight: 600;
	line-height: 1.5;
	text-decoration-style: dotted;
	text-underline-offset: 2px;
}

	a:not(.customLogo):is(:hover, :focus) {
		background: none;
		color: var(--secondary-color);
		text-decoration: underline;
	}

:is(input, button:not(.burger)):is([type="submit"], [type="button"]) {
	cursor: pointer;
	background: var(--primary-color);
	color: var(--button-text-color);
	border: none;
	border-radius: 6px;
	padding: 0.5em 1em;
}

	:is(input, button:not(.burger)):is([type="submit"], [type="button"]):disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	:is(input, button:not(.burger)):is([type="submit"], [type="button"]):not(:disabled):is(:hover, :focus) {
		background: var(--button-hover-color);
		color: var(--button-text-color);
		border: none;
	}

	:is(input, button:not(.burger)):is([type="submit"], [type="button"]):not(:disabled):is(:focus, :active) {
		outline: 2px solid var(--button-hover-color);
		outline-offset: 2px;
	}

.ui-dialog {
	padding: 0;
	border-radius: 0;
}

.ui-widget-header {
	background: var(--header-color);
	border: var(--header-color);
	border-radius: 0;
}