/* region general CSS */

.mainnav {
	height: 45px;
	background-color: rgb(var(--background-navbar));
	z-index: var(--zindex-mainnav);
	position: sticky;
	left: 0;
	width: calc((var(--vw, 1vw) * 100));
	display: flex;
}

.mainnav__menu,
.mainnav__menu li,
.mainnav__tools,
.mainnav__tools > li {
	margin: 0;
	padding: 0;
}

.mainnav__menu > li,
.mainnav__tools > li {
	padding: var(--spacing-small) var(--spacing-small) 0;
	height: 37px;
	display: inline-block;
	vertical-align: middle;
}

.nav__wrapper .badge {
	width: unset;
	min-width: 20px;
	padding: 0 var(--spacing-extra-small);
}
/* endregion */

/* region main menu */

/* region top-level menus */
.mainnav__menu > li {
	position: relative;
	font-family: "Poppins", sans-serif;
	font-size: var(--size-base);
	font-weight: 400;
	color: rgb(var(--textcolor-link-tlm));
	cursor: default;
}

.mainnav__menu > li li {
	/* reset font for menu content */
	font-family: "Poppins", sans-serif;
	font-size: var(--size-base);
}

.mainnav__menu li:not(.nav__nolink) {
	cursor: pointer; /* required to make :hover work on iOS */
}
/* endregion */

/* region main menu background & images */
.mainnav__menu > li:hover {
	background-color: rgb(var(--background-navbar-hover));
}

.mainnav__logo {
	background-color: rgb(var(--background-navbar)) !important; /* important so :hover doesn't override */
	padding: var(--spacing-small) var(--spacing-small) 0 var(--spacing-medium-large) !important;
}

.mainnav__logo:before {
	width: 100px !important;
	height: 25px !important;
	background-image: url(pix/alisqi-logo-lightblue.svg) !important;
	background-size: contain;
	background-repeat: no-repeat;
	top: 1px !important;
}

.mainnav__menu > li:before,
.mainnav__tools > li:before {
	display: inline-block;
	position: relative;
	top: 3px;
	content: "";
	background-image: url(pix/navigation/navigation-sprite.png);
	width: 22px;
	height: 22px;
}

.mainnav__menu > .results:before {
	background-position: -6px -30px;
	width: 30px;
}

.mainnav__menu > .report:before {
	background-position: -8px -62px;
	top: var(--spacing-extra-small);
}

.mainnav__menu > .docsqa:before {
	background-position: -6px -93px;
	top: var(--spacing-extra-small);
	width: 30px;
}

.mainnav__menu > .qesh:before {
	background-position: -9px -249px;
	top: var(--spacing-extra-small);
}

.mainnav__menu > .management:before {
	background-position: -8px -124px;
	top: var(--spacing-extra-small);
	width: 24px;
}
/* endregion */

/* region sub (sub) menus */
.mainnav__menu ul {
	border: 2px solid rgb(var(--border-soft));
	border-top: 0;
	position: absolute;
	z-index: var(--zindex-mainnav);
	background-color: rgb(var(--background-upper));
	box-shadow: var(--main-box-shadow);
	cursor: default;
}

.mainnav__menu ul {
	padding: 10px 0;
	top: 31px;
	left: -2px;
}

.mainnav__menu li li {
	padding: 0;
	width: 222px;
	clear: right; /* make sure lis start below any previous sibling's floating image links */
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

.mainnav__menu li li:hover {
	background-color: rgb(var(--background-main));
	color: rgb(var(--textcolor-link-hover));
}

.mainnav__menu a,
.mainnav__menu li.nav__nolink > span {
	padding: 2px var(--spacing-small);
	display: block;
}

.mainnav__menu a > span {
	margin-right: 0.2em;
}

.mainnav__menu .separator {
	cursor: default;
}

.mainnav__menu .separator:hover {
	background-color: unset;
	color: unset;
}

.mainnav__icon--plus {
	padding: 2px;
	float: right;
}

.mainnav__icon--plus:first-child {
	padding-right: var(--spacing-extra-small);
}

.mainnav__icon--plus:hover .icon {
	transform: scale(1.3);
}

/* sub menu label */
.mainnav__menu .sub {
	padding: 2px 18px 2px var(--spacing-small);
	font-weight: var(--fontweight-normal);
	color: rgb(var(--textcolor-link));
}

.mainnav__menu .sub:before {
	position: absolute;
	right: var(--spacing-medium);
	top: var(--spacing-extra-small);
	font-family: "Font Awesome Pro Light";
	content: "\f105";
}

.mainnav__menu .sub li {
	float: left;
	font-weight: normal; /* reset font-weight */
}

.mainnav__menu .sub li a,
.mainnav__menu .sub li.nav__nolink > span {
	margin-left: 0.5em;
}

.mainnav__menu .sub li.nav__nolink {
	color: rgb(var(--textcolor-main));
}

/* sub sub menu */
.mainnav__menu .sub ul {
	margin: 0;
	z-index: var(--zindex-mainnav-sub);
	top: -10px;
	left: 222px;
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
}

.mainnav__menu .sub li {
	padding-right: 13px;
}
/* endregion */

/* endregion */

/* region tools menu */

/* region tools menu labels */
.mainnav__tools {
	display: inline-flex;
	margin-left: auto;
	margin-right: var(--spacing-medium-large);
	font-size: var(--size-base);
}

.mainnav__tools > li {
	padding: var(--spacing-small) 10px 0;
}

.mainnav__tools > li:hover,
.mainnav__search--pinned {
	background-color: rgb(var(--background-navbar-hover));
}

.redesign.mainnav__search {
	cursor: pointer;
}

.mainnav__tools > li > .badge {
	border-radius: 4px;
	margin-left: 5px;
	margin-bottom: 5px;
	width: unset;
}

.mainnav__tools > .mainnav__alarm > .badge {
	background-color: rgb(var(--background-badge-danger));
	color: rgb(var(--textcolor-decorative));
}

.mainnav__tools > .mainnav__user .badge {
	background-color: rgb(var(--background-badge));
}

.mainnav__tools > .mainnav__user .badge span {
	color: rgb(var(--textcolor-decorative));
}

.mainnav__help,
.mainnav__search,
.mainnav__alarm {
	position: relative;
}

.mainnav__help:after,
.mainnav__search:after,
.mainnav__alarm:after {
	content: "";
	position: absolute;
	height: 17px;
	width: 1px;
	background-color: rgba(var(--border-hard), 0.3);
	top: 13px;
	right: 0;
}

.mainnav__helplink {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.mainnav__helplink:focus {
	outline: none;
}

.mainnav__alarm,
.mainnav__user {
	white-space: nowrap;
}

.mainnav__help {
	cursor: pointer;
}

.mainnav__help:before {
	background-position: -8px -2px;
}

.mainnav__search:before {
	background-position: -8px -157px;
}

.mainnav__alarm:before {
	background-position: -8px -219px;
}

.mainnav__user:before {
	background-position: -8px -188px;
}
/* endregion */

/* region tool popouts */
.mainnav__popout {
	border: 2px solid rgb(var(--border-soft));
	border-top: 0;
	padding: 10px var(--spacing-medium-large);
	position: absolute;
	z-index: var(--zindex-mainnav);
	top: 45px;
	right: 0;
	box-shadow: var(--main-box-shadow);
	background-color: rgb(var(--background-upper));
	margin: 0;
}

.mainnav__popout > a,
.mainnav__popout > p {
	margin: 5px 0;
	display: inline-block;
	white-space: nowrap;
}

/* region popout/search element */

.mainnav__search .search__input {
	width: 202px;
}

.search__popout {
	width: 300px;
	right: -2px;
}

.search__popout > input {
	margin-right: var(--spacing-extra-small);
	width: 300px;
	height: 28px;
}

.search__popout .divider {
	margin: 0 calc(var(--spacing-medium-large) * -1);
}

.search__results {
	margin-top: var(--spacing-small);
}

.search__results > h3 {
	margin: var(--spacing-small) 0;
}

.search__results > ul {
	margin: 0;
}

.search__results .mainnav__icon--plus {
	position: absolute;
	right: 10px;
	top: 5px;
	font-size: var(--size-base);
}

.search__results li {
	padding: var(--spacing-extra-small) var(--spacing-small) var(--spacing-extra-small) 0 !important;
	position: relative;
}

.search__results li {
	font-size: var(--size-base);
}

.search__results--highlight {
	font-weight: normal;
	color: rgb(var(--textcolor-decorative-dark));
	background-color: rgb(var(--background-warning));
	padding: 2px;
}

.search__results .trail {
	display: block;
	font-size: var(--size-base);
}

.search__results .trail__toplevelmenu {
	font-weight: var(--fontweight-semibold);
	color: rgb(var(--textcolor-subheading));
}
/* endregion */

/* region user popout */
.user__popout {
	margin: 0;
	right: 14px;
}

.user__popout .badge {
	margin-left: 3px;
	border-radius: 4px;
	margin-bottom: 2px;
}

.user__popout li {
	margin: 0 calc(var(--spacing-medium-large) * -1) !important;
	padding: 0.3em var(--spacing-medium-large) !important;
}

.user__popout .mainnav__menu--separator {
	padding: 0.3em 0 !important;
}

.user__popout .smallgrey {
	margin-top: -5px !important;
}

.user__popout a:not(.btn) {
	display: block;
}
/* endregion */

/* region alarm popout */
.alarm__popout {
	min-width: 135px;
	right: -2px;
}

.alarm__popout h3 {
	margin-bottom: var(--spacing-small);
}

.alarm__link {
	width: 193px;
	white-space: initial;
}

.mainnav__alarm ul {
	margin: 0;
}

.alarm__date {
	display: inline-block;
	width: 80px;
	margin-right: 10px;
	color: rgb(var(--textcolor-secondary));
}

.alarm__info {
	color: rgb(var(--textcolor-secondary));
}

.alarm__pertype {
	max-height: 40vh;
	overflow-y: auto;
	overflow-x: hidden;
}

.alarm__overview {
	display: flex;
	padding-left: 0 !important;
}
/* endregion */

/* region theme toggle */
.mainnav__theme {
	margin: 0.5em 0;
}

.mainnav__themetoggle {
	display: flex;
	align-items: center;
	height: var(--minimum-tap-target-size);
	max-width: var(--minimum-screen-width);
	min-width: calc(var(--minimum-tap-target-size) * 3);
	margin: 0 auto;
	padding: 0;
	flex-flow: wrap;
	background-color: rgb(var(--background-main));
	border-radius: var(--border-radius-large);
	justify-content: space-between;
	position: relative;
	box-shadow: none;
}

.mainnav__themetoggle input[type="radio"] {
	border: 0; /* the following properties make radios invisible yet available to asisstive technologies */
	clip: rect(0 0 0 0);
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.mainnav__themetoggle label {
	flex-grow: 1;
	justify-content: center;
	position: relative;
}

.mainnav__themetoggle > label:hover > span.icon {
	text-decoration: none;
}

.mainnav__themetoggle input:checked + label {
	color: rgb(var(--button-icon-actbtn));
}

.mainnav__themetoggle span.icon {
	font-size: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
	z-index: 3;
}

.mainnav__themetoggle span.icon:hover {
	text-decoration: none;
	cursor: pointer;
}

:checked ~ .mainnav__themetogglebackground {
	position: absolute;
	height: 100%;
	width: 33.33%;
	border-radius: var(--border-radius-large);
	background-color: rgb(var(--background-actbtn));
}

.mainnav__themetoggle :checked:first-of-type ~ .mainnav__themetogglebackground {
	left: 0;
}

.mainnav__themetoggle :checked:nth-of-type(2) ~ .mainnav__themetogglebackground {
	left: 33.33%;
}

.mainnav__themetoggle :checked:last-of-type ~ .mainnav__themetogglebackground {
	left: 66.66%;
}

body.sandbox .mainnav__themetoggle {
	display: none; /* no need to show the theme toggle in sandbox environments */
}
/* endregion */

/* endregion */

/* endregion */

/* region display and fade-in, fade-out animations */

.mainnav__menu li > .topmenu,
.mainnav__menu li > .submenu,
.mainnav__tools li > .mainnav__popout:not(.search__popout--focus) {
	display: none;
}

/* fade out*/
.mainnav__menu li:not(:hover) > .topmenu.did-fade-in,
.mainnav__menu li:not(:hover) > .submenu.did-fade-in,
.mainnav__tools li:not(:hover) > .mainnav__popout:not(.search__popout--focus).did-fade-in {
	display: block;
	animation: fade-out 0.2s;
}

/* fade in */
.mainnav__menu li:hover > .topmenu,
.mainnav__menu li:hover > .submenu,
.mainnav__tools li:hover > .mainnav__popout:not(.search__popout--focus),
.mainnav__popout--pinned,
.search__popout--focus {
	display: block;
	animation: fade-in 0.1s;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* endregion */

/* region media queries */

.mainnav__menu--collapsed .nav__title {
	display: none;
}

.mainnav__menu--collapsed li:hover > .nav__title {
	display: block;
	position: absolute;
	top: 55px;
	left: var(--spacing-small);
	z-index: var(--zindex-mainnav-sub);
	font-weight: var(--fontweight-semibold);
	color: rgb(var(--textcolor-subheading));
	font-size: 1.17em;
	cursor: default;
	white-space: nowrap;
}

.mainnav__menu--collapsed li:not(.mainnav__logo):not(:last-child):after {
	content: "";
	position: absolute;
	height: 17px;
	width: 1px;
	background-color: rgba(var(--background-upper), 0.3);
	top: 13px;
	right: 0;
}

.mainnav__menu--collapsed ul:not(.sub ul) {
	padding-top: 40px;
}

/* endregion */

/* region mobile menu */

.nav__wrapper .nav--mobile {
	display: none;
}

.nav__wrapper .nav--desktop {
	display: flex;
}

.nav__wrapper.nav__wrapper--mobile .nav--mobile {
	display: flex;
}

.nav__wrapper.nav__wrapper--mobile .nav--desktop {
	display: none;
}

.mobilenav {
	width: 100%;
	background-color: rgb(var(--background-navbar));
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobilenav li,
.mobilenav ul {
	margin: 0;
	padding: 0;
}

.mobilenav__icon {
	font-size: var(--size-subtitle);
	color: rgb(var(--icon-navbar));
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--spacing-medium-large);
}

.mobilenav__badge {
	position: relative;
}

.mobilenav__badge:after {
	content: "";
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: rgb(var(--background-badge));
	top: calc(var(--spacing-medium) * -1);
	left: -1px;
	cursor: pointer;
}

.mobilenav__badge span {
	display: none;
}

.mobilenav__logo img,
.mobilenav__icon .icon {
	cursor: pointer;
}

.mobilenav__container {
	background-color: rgb(var(--background-upper));
	position: fixed;
	z-index: var(--zindex-mobilemenu);
	width: 100%;
	height: calc(100% - 50px);
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	left: 0;
	opacity: 0;
	transition:
		transform var(--animation-timing-fast),
		opacity 0s var(--animation-timing-fast),
		z-index var(--animation-timing-fast);
}

.mobilenav__container--start {
	transform: translateX(-100%);
}

.mobilenav__container--end {
	transform: translateX(100%);
}

.mobilenav__container.container--fullview {
	transition: transform var(--animation-timing-base);
	transform: translateX(0%);
	opacity: 1;
}

.mobilenav__search {
	padding: var(--spacing-medium-large);
	background-color: rgb(var(--background-main));
	border-top: 1px solid rgb(var(--border-soft));
	z-index: var(--zindex-mobilesearch);
	display: flex;
	flex-flow: column;
	height: 32px;
	transition: height var(--animation-timing-fast);
	position: absolute;
	bottom: 0;
	width: calc(100% - var(--spacing-large));
}

.mobilenav__searchrow {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-small);
}

.mobilenav__searchquery {
	flex-grow: 1;
	min-width: 100px;
}

.mobilenav .search--fullview {
	height: calc(100% - var(--spacing-large));
	transition: height var(--animation-timing-base);
}

.mobilenav__search .search__results {
	display: flex;
	flex-flow: column;
	height: calc(100% - var(--spacing-large)); /* full height minus padding */
}

.mobilenav__search .search__list {
	overflow: auto;
}

.mobilenav__user li:not(.separator),
.mobilenav__link {
	font-size: var(--size-subtitle);
	padding: var(--spacing-medium-large) !important;
}

.mobilenav__title {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-medium-large);
	font-size: var(--size-subtitle);
	color: rgb(var(--textcolor-link));
	font-weight: var(--fontweight-semibold);
}

.mobilenav__title .icon {
	font-size: var(--size-base);
	font-weight: var(--fontweight-normal);
}

.mobilenav .submenu {
	position: absolute;
	top: 0;
	width: 100%;
	height: calc(100% - var(--spacing-large)); /* full height minus the search bar height */
	overflow-y: auto;
	overflow-x: hidden;
	background: rgb(var(--background-main));
	opacity: 0;
	transition:
		transform var(--animation-timing-fast),
		opacity 0s var(--animation-timing-fast);
	transform: translateX(200%);
}

.mobilenav .submenu--fullview {
	transition: transform var(--animation-timing-base);
	transform: translateX(0%);
	opacity: 1;
}

.mobilenav__breadcrumbs {
	background-color: rgb(var(--background-navbar));
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: rgb(var(--textcolor-decorative));
	padding: var(--spacing-medium-large);
}

.mobilenav .nav__link {
	padding: var(--spacing-medium-large);
	font-size: var(--size-subtitle);
}

.mobilenav__user .badge {
	background-color: rgb(var(--background-badge));
	margin-left: var(--spacing-extra-small);
}

.mobilenav__user .badge span {
	color: rgb(var(--textcolor-decorative));
}

.mobilenav .nav__messages a {
	display: flex;
	align-items: center;
}

.mobilenav .nav__messages a:hover {
	text-decoration: none !important;
}

.mobilenav .nav__messages a:hover > span:first-child {
	text-decoration: underline;
}

.mobilenav .nav__logout {
	display: flex;
	justify-content: center;
}

.mobilenav li.nav__username {
	font-size: var(--size-subtitle);
	font-weight: var(--fontweight-semibold);
	color: rgb(var(--textcolor-subheading));
	padding-bottom: 0 !important;
}

.mobilenav li.nav__usergroup {
	padding-top: 0 !important;
	font-size: var(--size-icon-base);
}

/* endregion */

/* region animations */
.animationsEnabled :checked ~ .mainnav__themetogglebackground {
	transition: left 0.125s ease-in-out;
}

@media (prefers-reduced-motion) {
	.animationsEnabled :checked ~ .mainnav__themetogglebackground {
		transition: none;
	}
}
/* endregion */