/** @format */

//*  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Navigation
@use "../common/common-variables-sass.scss" as sassVariables;

nav {
	font-family: var(--font-family-sans-serif);
	font-size: var(--font-size-menu);
	font-variant: small-caps;
	height: var(--navbar-height);
	border: 0;
}
.navbar {
	background-color: var(--navbar-default-color-bg);
	color: var(--base-white);
	margin: 0;
}
.navbar-nav > li > a {
	background-color: var(--navbar-default-color-bg);
	color: var(--base-white);
	text-decoration: none;
}
.navbar-nav > li > .dropdown-menu {
	border-radius: 0px;
}
.navbar-nav .open .dropdown-menu > li {
	background-color: var(--navbar-default-color-bg);
	min-height: var(--navbar-height) / 2;
}
.liDivider {
	border-bottom: 1px solid var(--navbar-height);
}
/*
.navbar-nav .open .dropdown-menu > li:nth-of-type(3) {
	border-bottom: 1px solid var(--navbar-height);
}
*/
.navbar-nav .open .dropdown-menu > li > a {
	background-color: var(--navbar-default-color-bg);
	color: var(--base-white);
	text-decoration: none;
	border-bottom: 0px solid var(--navbar-height);
}
.navbar-nav .open .dropdown-menu > li > a:focus {
	background-color: var(--navbar-default-color-bg);
}
.navbar-nav .open .dropdown-menu > li > a:hover {
	background-color: var(--accent-red);
}

ul.dropdown-menu {
	background: var(--navbar-default-color-bg);
	color: var(--base-white);
	padding-top: 0;
	padding-bottom: 0;
	margin-left: -1px;
	border: 1px solid var(--navbar-height);
	border-radius: 0;
	//border-bottom: 0;
}
.dropdown-menu {
	border-top: 1px solid var(--body-bg-color);
	margin-left: 0;
}
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -1px;
	margin-left: 1px;
	/*-webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 0 6px 6px 6px;*/
	border: 1px solid var(--body-bg-color);
}
.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}
.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: var(--base-white);
	margin-top: 5px;
	margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
	border-left-color: var(--navbar-default-color-bg); //var(--navbar-height);
}

nav.navbar.navbar-inverse.navbar-fixed-top {
	margin-top: 0;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
	color: var(--base-white);
	width: auto;
}
.navbar-inverse {
	background-color: var(--navbar-default-color-bg);
	border: 0;
	border-color: var(--navbar-default-color-bg);
	border-radius: 0;
	min-height: calc(var(--navbar-height) / 2);
}
.navbar-inverse .navbar-collapse {
	border-color: var(--navbar-default-color-bg);
}
.navbar-inverse .navbar-nav > li > a {
	color: var(--base-white);
	text-decoration: none;
	padding-top: 14px;
	padding-bottom: 14px;
	//border-right: 1px solid var(--navbar-height);
}
.navbar-inverse li:hover a:hover {
	background-color: var(--accent-red);
	color: var(--base-white);
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
	color: var(--base-white);
	background-color: var(--accent-red);
}

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Responsive Navbar
//  Large screens (≥768px): Hide hamburger menu, show full navbar
@media screen and (min-width: sassVariables.$screen-bp-sm) {
	#menu_Menu {
		display: none;
	}
}

//  Small screens (<768px): Show hamburger menu, collapsible navbar
@media screen and (max-width: sassVariables.$screen-bp-sm) {
	.navbar-collapse {
		padding-right: 15px;
		padding-left: 15px;
		overflow-x: visible;
		-webkit-overflow-scrolling: touch;
		border-top: 1px solid transparent;
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}
	.navbar-collapse.in {
		overflow-y: auto;
	}
	button.navbar-toggle.btn-md:hover,
	button.navbar-toggle.btn-md:focus {
		background-color: var(--accent-red);
	}
	.nav > li {
		//background-color: var(--navbar-default-color-bg);
		width: var(--navbar-width);
		text-indent: 1em;
	}
	.nav > li > a {
		display: inherit;
	}
	.nav > li > a::before {
		content: "";
	}
	.nav.navbar-nav > li > a {
		font-family: var(--font-family-base);
		font-size: var(--font-size-base);
		font-variant: small-caps;
		line-height: 20px;
		width: var(--navbar-width);
		//border: 1px solid var(--navbar-height);
	}
	.navbar-header {
		height: var(--navbar-height);
		background-color: var(--navbar-default-color-bg);
	}
	.navbar-toggle {
		color: var(--base-white);
		position: relative;
		float: left;
		margin: 0 30px 0 0;
		padding: 3px 10px;
		background-color: var(--navbar-default-color-bg);
		background-image: none;
		border: 0 solid transparent;
		border-radius: 0;
		height: var(--navbar-height);
	}
	.navbar-toggle:focus,
	.navbar-toggle:hover {
		background-color: var(--accent-red);
		outline: 0;
	}
	.navbar-toggle:active {
		background-color: var(--accent-red);
	}

	.navbar-inverse .navbar-nav > li > a {
		color: var(--base-white);
		text-decoration: none;
		padding-top: 5px;
		padding-bottom: 5px;
		//border-right: 1px solid var(--navbar-height);
	}

	.navbar-nav {
		margin: 0 -15px;
	}
	.navbar-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		height: var(--navbar-height);
		margin-top: 0;
		background-color: transparent;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.navbar-nav .open .dropdown-menu > li > a {
		background-color: var(--navbar-default-color-bg);
		color: var(--base-white);
		text-decoration: none;
		line-height: 20px;
		min-height: var(--navbar-height);
		width: auto;
		padding: 5px 15px 5px 10px;
		//border-bottom: 1px solid var(--navbar-height);
	}
	.navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-nav .open .dropdown-menu > li > a:focus {
		background-color: var(--accent-red);
	}
	.dropdown-menu {
		background-color: var(--navbar-default-color-bg); //var(--navbar-height);
		color: var(--accent-red);
		width: auto; //var(--navbar-width);
		height: var(--navbar-height);
		margin: 0;
	}
	.dropdown-menu ul {
		width: auto; //var(--navbar-width) - 80;
		color: var(--accent-red);
	}
	.dropdown-menu > ul {
		min-width: var(--navbar-width);
	}
	.dropdown-menu > li {
		min-height: calc(var(--navbar-height) / 2);
		//border: 1px solid var(--navbar-height);
		//margin-top: -1px;
		margin-left: -2px;
	}
	.dropdown-menu > li > a {
		background-color: var(--navbar-default-color-bg);
		color: var(--base-white);
		text-decoration: none;
		min-height: calc(var(--navbar-height) / 2);
		padding: 5px 10px 5px 0;
	}
	.dropdown-menu > li > a:hover,
	.dropdown-menu > li > a:focus {
		background-color: var(--accent-red);
	}
	.navbar-static-top .navbar-collapse,
	.navbar-fixed-top .navbar-collapse,
	.navbar-fixed-bottom .navbar-collapse {
		padding-right: 0;
		padding-left: 0;
	}
	.navbar-fixed-top .navbar-collapse,
	.navbar-fixed-bottom .navbar-collapse {
		max-height: 340px;
	}

	#menu_UL-SM {
		max-height: 1500px;
	}
	#menu_UL-SM.navbar-collapse.collapse.in {
		background-color: var(--navbar-default-color-bg);
		color: var(--accent-red);
		width: var(--navbar-width);
		margin-left: 0;
	}
}