/*** style the navabar ***/
.nav-link:focus-visible, .nav-link:focus, .nav-link:active, .nav-link:visited {
  box-shadow: none !important;
}


#navbar-main { background: rgba(255,255,255,1) }

#navbarMainRight .h4 {
	font-size: calc(1rem + .3vw) !important;
}

#navbarMainRight ul.navbar-nav > li.nav-item > a.nav-link {
	text-transform: uppercase;
	color: rgba(0,88,133,1);
}

#navbarMainRight ul.navbar-nav > li.nav-item > a.nav-link:hover {
	color: rgba(85,184,48,1);
}

#navbarMainRight ul.navbar-nav > li.nav-item.active > a.nav-link {
	color: #009080;
}

/*** style the navabar for md and smaller ***/
@media (max-width: 991.98px) {
	#navbarMainRight ul.navbar-nav > li.nav-item > a.nav-link {
		padding: .2rem 0 .2rem 1rem;
	}
}


#navbar-top {
	height: 3.5rem !important
}

#navbar-main {
	/* height: 3.8rem !important; */
	margin-top: 3.5rem;
}

/*** style the navabar for lg and bigger ***/
@media (min-width: 992px) {
	
	#navbar-top {
		height: 3.5rem !important
	}
	
	#navbar-main {
		height: 3.8rem !important;
		margin-top: 3.5rem;
	}
	
	
	/* #navbar-main, #navbar-top { */
		/* height: 3.7rem !important; */
		/* overflow: hidden; */
	/* } */
	
	#navbarMainRight ul.navbar-nav > li.nav-item > a.nav-link {
		color: rgba(255,255,255,1);
	}

	#navbarMainRight ul.navbar-nav > li.nav-item > a.nav-link:hover {
		color: rgba(0,88,133,1);
	}
	
	#navbarMainRight ul.navbar-nav > li.nav-item.active > a.nav-link {
		color: #beff99;
	}	
	
	#navbarMainRight ul.navbar-nav > li {
		padding: 0;
		margin: 0;
	}

	#navbarMainRight ul.navbar-nav > li > a {
		padding: 1.15rem 3rem;
		margin: 0;
	}

	#navbarMainRight ul.navbar-nav > li:nth-child(even) > a {
		padding-right: 1.5rem;
		padding-left: 1.5rem;
	}


	#navbarMainRight, #navbarMainRight ul.navbar-nav, #navbarMainRight ul.navbar-nav > li, #navbarMainRight ul.navbar-nav > li > a {
		position: relative;
	}

	#navbarMainRight ul.navbar-nav {
		background-image: linear-gradient(90deg, rgba(85, 184, 48, .67), rgba(0, 144, 128, .67), rgba(0, 88, 133, 0.67));
	}

	#navbarMainRight ul.navbar-nav > li:nth-child(even) {
		background: rgba(255,255,255,0.3);
	}

	#navbarMainRight ul.navbar-nav > li::before,
	#navbarMainRight ul.navbar-nav > li::after,
	#navbarMainRight ul.navbar-nav::after {
		background-size: cover;
		content: "";
		height: 100%;
		width: 1.5rem;
		position: absolute;
		top: 0;
		overflow: hidden;
	}

	#navbarMainRight ul.navbar-nav > li:nth-child(even)::before {
		background-image: url(/media/images/vautron-skew-footer.svg);
		opacity: 0.3;
		margin-left: -1.5rem;
	}

	#navbarMainRight ul.navbar-nav > li:first-child::before {
		background-image: url(/media/images/vautron-skew-header.svg);
		opacity: 1;
		left: -1px; /* used to be 0, but fix border issue */
	}


	#navbarMainRight ul.navbar-nav > li:nth-child(even)::after {
		background-image: url(/media/images/vautron-skew-header.svg);
		opacity: 0.3;
		right: -1.5rem;
		z-index: 6;
	}
	
	#navbarMainRight ul.navbar-nav > li:last-child:nth-child(even)::after {
		background-image: none;
	}


	#navbarMainRight ul.navbar-nav::after {
		background: rgba(0, 88, 133, 0.67);
		opacity: 1;
		width: 50vw;
		right: -50vw;
		z-index: 5;
	}
	
	#navbarMainRight ul.navbar-nav.even::after {
		opacity: 0.7;
	}
	

/*
	#navbarMainRight ul.navbar-nav > li:last-child:nth-child(even)::after {
		background-image: url(/media/images/vautron-skew-header.svg);
		outline: 1px solid yellow;
		opacity: 0.3;
		right: -1.5rem;
		z-index: 6;
	}
*/
	
	
	#navbar-main .dropdown {
		position:static !important;
	}
	#navbar-main .dropdown-menu {
		border-top: 4px solid #005885 !important;
		border-bottom: 4px solid #005885 !important;
		box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
		margin-top:0px !important;
		width:100% !important;
		position: fixed;
		top: 7.3rem;
		left: 0;
	}
	
	#navbar-main .dropdown-menu::before,
	#navbar-main .dropdown-menu::after {
		content: "";
		position: absolute;
		z-index: -1
	}
	
	#navbar-main .dropdown-menu::before {
			top: 0;
			left: -4rem;
			background-image: linear-gradient(90deg, rgba(85, 184, 48, .67), rgba(0, 144, 128, .67), rgba(0, 88, 133, .67));
			-webkit-transform: skew(-21deg, 0deg);
			-moz-transform: skew(-21deg, 0deg);
			-ms-transform: skew(-21deg, 0deg);
			-o-transform: skew(-21deg, 0deg);
			transform: skew(-21deg, 0deg);
			width: 33%;
			height: 100%;
	}
	#navbar-main .dropdown-menu::after {
			bottom: -4px;
			left: 0;
			background-color: rgba(0, 88, 133, .67);
			width: 100%;
			height: 4px
	}
	
	/*
	#navbar-main .dropdown:hover > .dropdown-menu {
		display: block;
		opacity: 1;
		margin-top:0;
	}
	
	#navbar-main .dropdown > .dropdown-toggle:active {
    pointer-events: none;
	}
	*/
	
}


/*** style navbar main dropdowns ***/
#navbar-main .dropdown-menu {
	min-width: 100%;
	background-color: #fff;
	/* border: 0 !important; */
}

#navbar-main .dropdown-item {
	/* color: rgba(0,88,133, 1); */
	color: #009080;
	/* font-weight: bold; */
	text-transform: uppercase;
	padding: 0.3rem 0.3rem;
}

#navbar-main .dropdown-item:hover,
#navbar-main .dropdown-item:focus {
	color: rgba(85,184,48,1);
	background: transparent !important;
}


.loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	background: rgba(0,0,0,0.5);
	width: 100%;
	z-index: 999999;
	display: none;
}

.mainLoadingSpinner {
  position: relative;
	top: 50%;
	transform: translateY(-50%);
  text-align: center;
}