/*****************************************************************************/
/*                      HINWEIS                                              */
/*****************************************************************************/
/*
- Neue Styles dürfen nur in die Datei 'HISinOneExperimental.css' eingecheckt werden
*/
/* BITTE IN DIESER DATEI NICHTS ÄNDERN OHNE RÜCKSPRACHE MIT TEAM OBERFLÄCHEN/STYLEGUIDE */
/*****************************************************************************/
/*****************************************************************************/
/*               INHALTSVERZEICHNIS                                          */
/*****************************************************************************/
/*****************************************************************************/
/*               Hamburger-Navigation                                        */
/*****************************************************************************/
/*****************************************************************************/
/*               Navigationsband scrollbar                                   */
/*****************************************************************************/


/*****************************************************************************/
/*****************************************************************************/
/*               ANFANG CSS                                                  */
/*****************************************************************************/
/*****************************************************************************/
/*               Hamburger-Navigation                                        */
/*****************************************************************************/

/* Navigationsband Dropdown-Menü und Hamburger-Menü Links gemeinsames CSS*/ 

/* ab 1. Ebene */
.nav, .nav ul {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;    
    align-items: center;
    justify-content: center;    
    -webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;      
    padding: 0 0 1px 0;
    margin: 0;  
	list-style: none;
}


.topMenuLink{
	background: none;
	background-color:var(--backgroundColor2);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	width:auto;
	box-sizing: border-box;	
	padding:4px 2px 4px 0;
	position: relative;
}

.topMenuLinkHighlighted{
	text-decoration: none;
	border: var(--highlightBorder);
	white-space: nowrap;
	cursor: pointer;
	width:auto; 
	color:var(--contrastFontColor);
	font-weight:bold;
	position:relative;
 	background:var(--backgroundColor11) !important;	
}

.topMenuLinkHighlighted {
	color:var(--contrastFontColor);
}

.nav a.topMenuLinkHighlighted{
	text-decoration:underline;
}

.nav li ul{
	-moz-box-shadow: 0 0 0 var(--basicButtonBorderColor);
	-webkit-box-shadow: 0 0 0 var(--basicButtonBorderColor);
	box-shadow: 0 0 0 var(--basicButtonBorderColor);
	border-top:none;
} 

.nav, .nav ul{
 margin-top:-1px;
}

.nav li ul.marginFix {
	margin:0;
}

.nav .topMenuList {
	flex: 0 1 auto;
	margin: 0;
	background-color: var(--backgroundColor2);
	order:3;
}

.nav a:after {
	content:attr(data-shortcut_txt) !important;
}

.nav .link_homepage {
	order:1;
}

/* ab 2. Ebene */
.nav li ul {
	display: none;
	width: 275px;
	background-color: var(--backgroundColor2);
	margin-top: -2px;
	margin-left: 12px;/* Abstand Dropdown 2. Ebene */
}

/* Abstand Dropdown 3. Ebene */
.nav li ul li ul {
	margin-left: 0;
}

.nav li ul.marginFix{	
	margin-top:-2.5px;
	margin-left:22px;
}

/* Abstand des Dropdown-Elements vom Top-Level-Link in Chrome und Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.nav li ul {
	margin-top:-2px;
	}
	.nav li ul.marginFix {
	margin-top:-6px;
}
}

.nav a.subMenuLink {
	width: 275px;	
	text-align: left;	
	min-height:24px;
}

.nav a.link_simple{
	padding-left:22px;
}

.nav .menuLeftIconNext, .nav .menuLeftIconNext{
	font-size:90%;
	padding-top: 2px;
	display: inline-block;
}

@media screen and (max-width: 768px){ 	
	 .nav li ul,
	 .hideOnMobile{
		display:none;
	}
}

.topMenuList.parentListItem.hisinonestyleguide .styleguideNews .subMenuLink.link_simple{
	font-weight:bold;
	margin-top:10px;
	margin-bottom:10px;
	background-image: url('/HISinOne/images/icons/comment_new.svg');	
	background-size: var(--backgroundImagesSize);	
	background-position: 12px 2px;
	background-repeat: no-repeat;
	padding: 3px 2px 0 36px;
	width:auto;
}

html.js-navOpen body {
	position:fixed;
	overflow:hidden !important;
	overflow-y: scroll;
	width:100%;
}

.parentListItem > a {
	position:relative;
}



.topMenuList{
	width:100%;
	margin-bottom:-1px;
}

body .mobileOnly{
	display:block;
}
	
ul.flexdropdownmenu li.mobileOnly{
	display:block !important;
}

/* #logoAndServicesHeader .navbar-toggle:hover{
	-webkit-box-shadow: none !important;
  	-moz-box-shadow : none !important;
 	-o-box-shadow : none !important;
  	box-shadow : none !important;
} */

.topMenuList.switchToGerman, .topMenuList.switchToEnglish, .topMenuList.link_impressum, .topMenuList.link_privacy, 
.topMenuList.link_accessibilityHelp, 
.topMenuList.link_accessibilityStatement, 
.topMenuList.link_sitemap,
.topMenuList.link_logout, 
.topMenuList.link_easyLanguageHelp,
.topMenuList.link_signLanguageHelp{
	display:none;
}
.mobile .topMenuList.link_logout {
	display:block;
}

/*Sitemap*/
.sitemapNavigationList{
	list-style-type: ""; 
	margin-bottom:15px;
}


/*Umswitchen der Links im Footer in das Hamburger-Menü*/
@media screen and (max-width: 768px){	
	.topMenuList.switchToGerman, .topMenuList.switchToEnglish, .topMenuList.link_impressum, 
	.topMenuList.link_privacy, .topMenuList.link_accessibilityHelp, .topMenuList.link_accessibilityStatement, 
	.topMenuList.link_sitemap, .topMenuList.link_logout, 
	.topMenuList.link_easyLanguageHelp,
	.topMenuList.link_signLanguageHelp{	
		display:block;
	}	
	.topMenuList.link_privacy{	
		padding:0  !important;
		background-image:none !important;
		text-decoration:none;
	}	
	#accessibilityHelp.sLink,
	#accessibilityStatement.sLink,
	#sitemap.sLink{
		display:none !important;
	}	
}

.subMenuLink .menuLeftIconNext:before,
.topMenuLink .menuLeftIconNext:before {
	color:var(--accentFontColor);
}

.subMenuLinkHighlighted .menuLeftIconNext:before,
.topMenuLinkHighlighted .menuLeftIconNext:before {
	color:var(--contrastFontColor);
}

.topMenuLinkHighlighted:hover .menuLeftIconNext:before, .topMenuLinkHighlighted:focus .menuLeftIconNext:before { 
	color:var(--basicFontColor);	
}

.js-opennavoverlay {
	position: fixed;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 100%;
   	z-index: 1097;
   	background-color: rgba(204, 204, 204, 0.3);
}

.parentListItem.js-visible > ul {
	display:block !important;
}

.navitem-headline {
	padding:8px 0 0px;
	font-weight:bold;
	border-top:1px solid rgb(0 106 178 / 18%); 
}

.navitem-headline a {
	margin: 0.1em 0 0.3em 0;
    color: var(--accentFontColor);
    font-size: var(--fontSize2);
}

.navitem_headline_h2:focus {
	background-color: var(--highlightBackgroundColor) !important;
   	box-shadow: var(--highlightShadow);	
	outline:var(--highlightFocusOutline);
}

.backButton:before {
	content:"\e9b9" / "";
	font-family: "HISinOneIcons" !important;
	color:var(--accentFontColor);
	position:absolute;
	left:6px;
	top:0.8em; 
}

/**
 * Verwendungszweck: JS Menu
 */
ul.flexdropdownmenu input[type='submit'] {
	margin-top: 0;
	margin-bottom: 0;
	min-width: 150px;
	text-align: left;
	 -moz-border-radius: 0 0 0 0;
	 -webkit-border-radius: 0 0 0 0; 
     border-radius: 0 0 0 0; 
}

/*topmost and sub ULs, respectively*/
ul.flexdropdownmenu, 
ul.flexdropdownmenu ul { 
	margin: 0 0 0 10px;
	padding: 0;
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	display: none; 
	/*width: 150px; Breite muss im Moment noch direkt an das ul per style geschrieben werden, sonst geht es in Chrome nicht. */
	overflow: visible;
}

ul.flexdropdownmenu li {
	position: relative;
	display: block;
}

ul.flexdropdownmenu li .tabButton {
	width: 100%;
}

/*****************************************************************************/
/*              Hamburger Menü                                               */
/*****************************************************************************/	
.topMenuContainer .nav .services .listBullet {
	display:block;
}

.topMenuContainer ul.flexdropdownmenu, .topMenuContainer ul.flexdropdownmenu ul {
	visibility:visible;
}

.topMenuContainer ul.flexdropdownmenu li {
	position:static;
}

.topMenuContainer .nav ul li a.backButton{		
	padding-left:25px;	
	padding-top:10px;	
	margin-top:2px;
}

.topMenuContainer .nav a.mainnavLink {		
	margin-top:3px;
}

.topMenuContainer .nav li ul {
	width:100%;
	transform: translate(100%);
}

.toggleNavigation {
	display:none;
}

.topMenuContainer .nav {
	transition: transform 0.2s ease-out;
}

.topMenuContainer .nav li.js-hidden {
	display:none;
}

.topMenuContainer .nav a {
	line-height:inherit;
}

.topMenuContainer .nav li ul {
	left:0 !important;
	top:0 !important;
	width:100%;
	margin:0;
}

.topMenuContainer .nav a {
	display: block;
	width:auto;
	text-decoration: none;
	min-width:190px;
	text-align:center;
	border:1px solid transparent;
	margin:1px 2px;
	padding-left: 10px;
	padding-right:10px;
}

.topMenuContainer{
	background-color:var(--backgroundColor2);
	display:none;
   	position:fixed;
	top:0;
	left:0;
   	width:100%;
	height:100vh;
	max-width:27em;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
	z-index:102;
}

.fixedElements .topMenuContainer {
	margin:0;
}

.topMenuContainer .nav a.subMenuLink, .topMenuContainer .nav a {
	position:relative;
	text-align:left;
	padding:8px 10px;
	width:auto;
}

.topMenuContainer .nav [class^="iconfont-"], .topMenuContainer .nav [class*=" iconfont-"] {
	width:auto;
	font-family: var(--font) !important;
	padding: 8px 10px;
	font-size:100%;
	line-height: inherit;
}	

#logoAndServicesHeader .navbar-toggle:focus .burger_navigation,
#logoAndServicesHeader .navbar-toggle:focus .burger_navigation:after,
#logoAndServicesHeader .navbar-toggle:focus .burger_navigation:before {
	background-color:var(--accentFontColor);
}

#logoAndServicesHeader .burger_navigation,
#logoAndServicesHeader .burger_navigation:after,
#logoAndServicesHeader .burger_navigation:before {
	content:"";
	display:block;
	background-color:var(--accentFontColor);
	width:20px;
	height:2px;
	position:absolute;
	z-index:2;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	border:1px solid var(--accentFontColor);
}

#logoAndServicesHeader .burger_navigation {
	top:16px;
   	left:6px;	
}

#logoAndServicesHeader .burger_navigation:before {
	left:-0.5px;
   	top:-7px;
}

#logoAndServicesHeader .burger_navigation:after {
	left:-0.5px;
    top:5px;
}

button.navbar-toggle, button.navbar-toggle:focus {
	margin-right: 10px;
}

li.parentListItem ul.flexdropdownmenu.smartphoneNavigation, li.parentListItem ul.subMenu.smartphoneNavigation {
	top:0 !important;
	left:0 !important;
	position:absolute;
}

.topMenuContainer .nav .menuLeftIconNext:before { 
	font-family: "HISinOneIcons" !important;	
}

.topMenuContainer .nav .menuLeftIconNext {
	position:absolute;
	top:0;
	right:0;
	line-height: 1.8em;
	width: 26px;
	height: 100%;
	font-size: 1.5em;
  	background: none;
	border:none;
	padding:0;
}

/*****************************************************************************/
/*              Navigationsband  scrollbar                                   */
/*****************************************************************************/	

 .navband {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	overflow-y:hidden;
	overflow-x:auto;
	margin:0;
	padding:1px 0;
	background-color:var(--backgroundColor2);
	-ms-overflow-style: none;
	scrollbar-width: none;
	border-bottom:3px solid var(--headerFooterBG);
}

.navband::-webkit-scrollbar {
  display: none;
}

.navbandWrap {
	position:relative;
}

.navband li.topMenuList {
	list-style-type:none;
	width:auto;
}

.navband a {
	font-family: var(--font);
	margin:0;
	border:none;
	font-size: var(--fontSize4);
	line-height:1;
	padding:4px 25px 4px 25px;
	display: block;
	text-decoration: none;
	text-align: center;
}

.navband .menuLeftIconNext {
	display:none;
}

.navband .subMenuLink .menuLeftIconNext {
	display:inline-block;
	padding-top:0;	
	margin-left:-5px;
	top:5px;
}

.navband .topMenuLinkHighlighted:focus, .navband .topMenuLinkHighlighted:hover {
	border:none;
}

.navband .parentListItem > ul {
	background-color:var(--backgroundColor2);
	box-shadow: 2px 2px 10px var(--highlightShadowColor);
}

.navband ul.flexdropdownmenu, .navband ul.flexdropdownmenu ul {
	padding-left:0;
}

.navband .navitem-headline,
ul.navband li.mobileOnly {
	display:none !important;
}

.navband ul.flexdropdownmenu li {
	margin:0;
}

.navband ul.flexdropdownmenu a {
	padding:0.35em 10px;
	display:block;
}

.navband .jqflexmenu {
	top:24px !important; 
}

.navbandArrow{
	padding:1px 1px 1px 2px;
	background-color:var(--headerFooterBG);
}

.navbandLeft {
	left:0;
}

.navbandRight {
	right:0;
}

.navbandLeft,
.navbandRight {
	position:absolute;
	top:0;
	z-index:1;	
	cursor:pointer;
	display:none;
}

body #hisinoneHeader.js-fixed.js-absolute {
	position:absolute;
}

.reducedHeader .navbandWrap {
	display:none;
}

@media screen and (max-width: 1024px){ 
	.navbandWrap {
		display:none;
	}
} 


a.capitalizeFirstLetter:first-letter{
	text-transform: capitalize;
}

.js-navOpenFooter .divfoot_portal_hisinone {
	position:relative;
	z-index:1098;
	
}

.closeButtonNavigationESC {
	position:absolute;
	right:0;
    color: var(--accentFontColor);
	background-color: transparent;
    font-weight: bold;
    font-size: 80%;
	margin-top:0;
}