/**
 * ------------
 * Naviagations
 * ------------
 */

nav ul {
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

nav ul > li {
	cursor: pointer;
}

nav ul > li > a {
	position: relative;
	color: var( --color-panthagray );
	font-weight: 400;
	line-height: 1.2em;
	white-space: nowrap;
}

/**
 * ---------------------
 * Naviagations vertical
 * ---------------------
 */

nav.nav-vertical ul > li {
	position: relative;
	max-width: calc( 100vw - 30px );
}

nav.nav-vertical ul > li:not(:last-child) {
	border-bottom: 1px solid var( --color-pearlgray-light );
}

nav.nav-vertical ul > li > a {
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

nav.nav-vertical ul > li > a,
nav.nav-vertical ul > li > a:hover {
	text-decoration: none;
}

nav.nav-vertical ul > li > a::after {
	display: block;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	text-align: center;
	line-height: 1em;
	min-width: 1em;
}

nav.nav-vertical ul > li > a:not(.nav-list-parent)::after {
	content: '\f061';
	color: var( --color-pearlgray-light );
}

nav.nav-vertical ul > li.nav-list-parent > a::after {
	content: '\f105';
	color: var( --color-panthagray );
	transform-origin: 50% 50%;
	transition: all 0.1s;
	transform: rotate( 0deg );
}

nav.nav-vertical ul > li.nav-list-parent:has(ul.active) > a::after {
	transform: rotate( 90deg );
}

nav.nav-vertical ul > li > ul {
	display: none;
	padding-left: 20px;
	border-top: 1px solid var( --color-pearlgray-light );
}

nav.nav-vertical.nav-by-click ul > li > ul.active,
nav.nav-vertical.nav-by-hover ul > li:hover > ul {
	display: block;
}

nav.nav-vertical ul > li > ul > li:last-child {
	padding-bottom: 0;
}

nav.nav-vertical > ul {
	padding-left: 0;
}

/**
 * ---------------------------
 * Naviagations nav-horizontal
 * ---------------------------
 */

	/**
	 * ---------------------------------------
	 * Naviagations nav-horizontal first layer
	 * ---------------------------------------
	 */

    nav.nav-horizontal > ul {
    	display: flex;
		flex-wrap: nowrap;
    }

    nav.nav-horizontal > ul > li:not(:first-child) {
		padding-left: 0.6em;
	}

	nav.nav-horizontal > ul > li:not(:last-child) {
		padding-right: 0.6em;
	}

	nav.nav-horizontal > ul > li.nav-list-parent::after {
		content: '';
		position: relative;
		display: block;
		width: 100%;
		height: 5px;
		margin-top: -5px;
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		background-color: var( --color-panthablack );
		transition: all 0.1s;
	}

	nav.nav-horizontal > ul > li.nav-list-parent:hover::after,
	nav.nav-horizontal > ul > li.nav-list-parent.active::after {
		height: 8px;
		margin-top: -8px;
		background-color: var( --color-orange );
		border-color: var( --color-panthablack );
	}

	nav.nav-horizontal > ul > li > a {
		display: block;
		font-weight: 700;
		line-height: 1em;
		padding-top: 18px;
		padding-bottom: 18px;
		transition: all 0.1s;
	}

	nav.nav-horizontal > ul > li:hover > a,
	nav.nav-horizontal > ul > li.active > a {
		color: var( --color-orange );
	}

		/**
		 * ----------------------------------------
		 * Naviagations nav-horizontal second layer
		 * ----------------------------------------
		 */

		nav.nav-horizontal > ul > li > ul {
			position: absolute;
			left: 0;
			max-width: calc( 100vw - 40px );
			padding: 20px;
			background-color: var( --color-white );
			border: 1px solid var( --color-panthablack );
			/*border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;*/
			border-radius: 5px;
		}

		/*nav.nav-horizontal > ul > li > ul:not(:has(ul.active)) {
			border-radius: 0 0 5px 5px;
		}*/

	    nav.nav-horizontal > ul > li > ul.active {
	    	display: grid;
	    	grid-auto-flow: column;
	    	grid-auto-columns: minmax( 0, 1fr );
	    	grid-template-rows: repeat( 10, auto );
	    	grid-column-gap: 20px;
	    }

	    nav.nav-horizontal > ul > li > ul:not(.active) {
			display: none;
	    }

	   	nav.nav-horizontal > ul > li > ul > li:not(:first-child):not(:nth-child(10n+1)) {
	    	padding-top: 10px;
	    }

	    nav.nav-horizontal > ul > li > ul > li:not(:last-child):not(:nth-child(10n)) {
	    	border-bottom: 1px solid var( --color-pearlgray-light );
	    	padding-bottom: 10px;
	    }
	    
	    nav.nav-horizontal > ul > li > ul > li > a {
	    	display: flex;
			column-gap: 10px;
			align-items: center;
	    }

	    nav.nav-horizontal > ul > li > ul > li:hover > a {
	    	color: var( --color-orange );
	    }

	    nav.nav-horizontal > ul > li > ul > li > a:after {
	    	flex: auto;
	    	text-align: right;
	    	content: '\f061';
	    	font-family: 'Font Awesome 5 Free';
	    	font-weight: 900;
	    	text-align: right;
	    	color: var( --color-pearlgray-light );
	    	transition: all 0.1s;
	    }

	    nav.nav-horizontal > ul > li > ul > li > a:hover:after {
	    	color: var( --color-orange );
	    }