@font-face {
  font-family: "VWAG TheSans";
  font-style: normal;
  font-weight: normal;
  src: url("/fo/resources/groupui/fonts/VWAGTheSans-Regular.otf") format("opentype");
}

@font-face {
  font-family: "VWAGTheSans-Regular";
  font-style: normal;
  font-weight: normal;
  src: url("/fo/resources/groupui/fonts/VWAGTheSans-Regular.otf") format("opentype");
}

@font-face {
  font-family: "VWAGTheSans-Bold";
  font-style: normal;
  font-weight: normal;
  src: url("/fo/resources/groupui/fonts/VWAGTheSans-Bold.otf") format("opentype");
}

div.navigation {
	height: 48px;
	width: auto;
	width: 1080px;
	
    position: fixed;
    display: flex;
    justify-content: space-between;
	
}


.ajustPadding {
	padding-left: 20px!important;	
}

div.navigation ul.section {
	display: flex;
	justify-content: center;
	margin: 0px;
	padding: 0px 4px 0px 4px; /* Leave a at least 4px left and right for the ul-mouseover event and ajust with ajustPadding to a total of 24px */
	background-color: #FFFFFF;
	height: 100%;
	position: absolute;
	top: 0px;
	cursor: default;
	list-style: none;
	width: 100%;

}

#navigationMenueForm {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

div
.navigation
ul.section
li
a {
	text-decoration: none;
	/*font-size:12px;*/
	cursor: pointer;
	font-family: VWAGTheSans-Regular;
	font-size: 16px;
	color: #20607E;
	letter-spacing: 0.2px;
	line-height: 24px;
	font-weight: 400;
	height: 100%; 
	align-items: center;
	display: flex;
	padding-inline:24px;
	white-space: nowrap;
	height:48px;
}

div.navigation ul.section li a:hover {
	background-color:#eaf0f3!important;
	font-weight: 400!important;
	
}

div.navigation ul.section li.tmpSelected > a {

	box-shadow: none!important;

}
div.navigation ul.section li ul.section li.selectedBackup > a,
div.navigation ul.section li ul.section li.selected > a {
	box-shadow: inset 2px 0px 0 #20607e;
}
div.navigation ul.section li.selected > a, div.navigation ul.section li.selectedBackup > a {

	background-color: #FFFFFF;
	font-family: VWAGTheSans-Bold;
	font-size: 16px;
	color: #20607E;
	letter-spacing: 0.2px;
	line-height: 24px;
	font-weight: 400;
	box-shadow: inset 0 -2px 0  #20607E;
}


div.navigation ul.section > li ul {
	display: none;
	width:auto;
	margin-top:48px;
	overflow-y:auto;
	overflow-x:hidden;
	max-height:650px;
	width: 320px;
}	

div.navigation ul.section > li ul li {
	background-color: #FFFFFF;
	width: 320px;
	z-index: 2;
    position: relative;
	height: 48px;
}	

div.navigation ul.section > li ul li a {
	height: 36px; /* fix for text wrap in link*/ 
	display: block;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    padding-top: 12px;
}


 div.navigation ul.section li.tmpSelected:hover,  div.navigation ul.section li.tmpSelected > ul {
 	display:block;
 	
 }
 
 
div.navigation ul.section li.tmpSelected ul{
	margin-top:48px!important;
}
 
 div.navigation ul.section li.tmpSelected ul li > ul  {
 	margin-top:48px!important;
 	display:none;
 	box-shadow:none;
 }
 
 
 div.navigation ul.section li.tmpSelected > ul {
	display:block;
	height: auto;
	box-shadow: 0px 3px 6px 0px grey;
}

div.navigation ul.section li.selected > ul{
	display:none;
}


div.navigation ul.section li.selected:hover + 
div.navigation ul.section li.selected > ul , 
div.navigation ul.section li.tmpSelected > ul
{
	display: block;
	z-index:2;
}

   

div.navigation div.userInfo {
	display: none;
}


.arrow {
	z-index: 11;
	width: 54.89px;
	border: none;
	cursor:pointer;	
} 

.arrow-left {
	background: url(/fo/javax.faces.resource/img/chevron-left-16.svg.jsf?ln=groupui) no-repeat center center;
	background-size: 20.62px;
} 

.arrow-right {
	background: url(/fo/javax.faces.resource/img/chevron-right-16.svg.jsf?ln=groupui) no-repeat center center;
	background-size: 20.62px;
}

.sub-sub-menu-btn-closed {
	background: url(/fo/javax.faces.resource/img/chevron-down-16.svg.jsf?ln=groupui) no-repeat center center;
}

.sub-sub-menu-btn-opened {
	background: url(/fo/javax.faces.resource/img/chevron-up-16.svg.jsf?ln=groupui) no-repeat center center;
}


.sub-sub-menu-btn {
	width: 20px;
	height: 20px;
	background-size: 20px;
	border: none;
	position:absolute;
	right:20px;
	cursor: pointer;
}

div.navigation ul.section li ul ul {
	overflow: visible;
}


div.navigation ul.section li ul ul li a{
	padding-left: 50px;
}

div.navigation ul.section li {
	position: relative;
}


div.navigation ul.section > li ul::-webkit-scrollbar {
  width: 8px;               /* width of the entire scrollbar */

}

div.navigation ul.section > li ul::-webkit-scrollbar-track {
  background:  #D9D9D9;        /* color of the tracking area */
}

div.navigation ul.section > li ul::-webkit-scrollbar-thumb {
  background-color: #7A8084;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
}