@CHARSET "UTF-8";


@media only screen and (min-width: 70em){
     .ui-page {
         position: relative !important;
     }

     .ui-page, .ui-header, .ui-footer {
         /* max-width: 70em !important; */
         margin: 0 auto !important;
         border-right: 1px #eeeeee solid !important;
         border-left: 1px #eeeeee solid !important;
	}

	.ui-overlay-d {
		background: #333;
	}
}

/* Überschreibt eine jQueryMobile-Regel: Der Textshadow schadet viel mehr, als dass er nützt - generell abschalten */
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
	text-shadow: none;
}

.ui-popup-screen.in {
	background: #333 url("gifMobile/ui-bg_flat_100_333333_40x100.png") 50% 50% repeat-x;
	opacity: 0.3;

}

/* Trick um Inputs nebeneinander zu haben, wie inline beim Button */
.aside .ui-input-text {
    display:inline-block;
}

.ui-panel {
	width: 28em;
}

/*
	Menü auf der rechten und Bookmarks auf der linken Seite:
	das ist der Bereich, dessen Input dem Panel zugeschlagen wird. Weiter
   	rechts bzw. links führt dann ein Klick dazu dass das Panel zugeht. Muss gleich sein
   	wie bei #filterPanel die Breite */
.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
	left: 28em;
}

.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
	right: 28em;
}

/* RS, 20.11.2021: blöden Schatten und weiße Schrift aus dem jQM-Standard für selektierte Button überschreiben */
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head+body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {
    background-color: #38c;
    border-color: #38c;
    color: black;
    text-shadow: none;
}


@media ( max-width :680px) {
	.ui-panel {
		width: 20em;
	}
	.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
		left: 20em;
	}
	.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
		right: 20em;
	}
}

/* RS, 31.08.2017: ganz seltsam: das führt bei kleinen Geräten bei ui-grid zu ungleichen rechten und linken Rändern */
[class*='ui-block-'] > .ui-btn, [class*='ui-block-'] > .ui-select, [class*='ui-block-'] > .ui-checkbox, [class*='ui-block-'] > .ui-radio, [class*='ui-block-'] > button.ui-btn-inline, [class*='ui-block-'] > button.ui-btn-icon-notext, .ui-header [class*='ui-block-'] > button.ui-btn, .ui-footer [class*='ui-block-'] > button.ui-btn {
    margin-right: inherit;
    margin-left:  inherit;
}

/* völlig unverständlich wieso man das brauch: aber sonst ist der Header um die höhe des menuPanel zu hoch */
.ui-panel-wrapper { min-height: 0; }

.ui-content {
	margin: 0 auto;
	padding: 0 0.5em 0.5em 0.5em; /* der jQM default ist hier 1em, was zu breit ist - und oben nicht nötig */
}

.ui-body-a {
	border: 0 !important;
}

.ui-content .ui-listview-inset, .ui-panel-inner > .ui-listview-inset {
    margin: 0 0;
}

.ui-bar {
    padding: 0.1em 0.5em; /* Standard: 0.5 1 wodurch die Masken zu weit auseinanderlaufen */
}

.ui-select, .ui-controlgroup, fieldset.ui-controlgroup {
    margin-bottom: 0em; /* die Combobox oder ui-controlgroup hat im Standard 0.5em, was unnötig weit ist */
    margin-top: 0em;
}

.ui-header .ui-title, .ui-footer .ui-title {

	margin: 0 10%; /* statt default 30% worurch ja 2/3 Platz verloren geht */
}

/* Benutzerinfo, die auf der Seite statisch angezeigt wurd */
.userMessage {
	display: block;
	margin: auto;
	width: 20em;
	padding: 1em 1em 1em 3.5em;
	border: 1px solid #999999;
	border-radius: 4px;
	box-shadow: 4px 4px #efefef;
	background-color: #fafbfc;
	background-image: url(gifMobile/info32.png);
	background-repeat: no-repeat;
	background-position: 10px 20px;
	background-color: #ffffff;
}

.dataDetails h2 {
	padding-bottom: 6px !important;
	border-bottom: 2px solid #ddd !important;
}

h3.contentSeparator {
	margin: 0.4em 0 0.2em 0 !important;
	font-size: 16px !important;
	font-shadow: none !important;
	border-bottom: 1px solid #aaaaaa !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;

}

/* Welcome-Seite aus indexMobile.jsp ---------------------------------------------------------------------- */
#welcome {
    background: url(gifMobile/background-image.jpg) #ffffff !important;
	background-size:  auto 100% !important;
    background-position: left top !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
	background-color: #ffffff;
	padding-top: 0.5em;
}

#welcomeContent {
	text-align: center;
	padding-top: 1em;
}

.welcomeHeader {
	border-radius: 5px;
	margin-left:0.5em;
	margin-top: 0.5em;
	background-position: 10% top;
	background-color: #ffffff;
}

#welcomeLogoArea {
	margin: auto;
	margin-top: 60px;
	width: 400px;
}

#welcomeEcadiaImage {
	margin-left: -130px !important;
	display: none;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.6);
}


#welcome .footer {
	border-radius: 5px;
	position: absolute;
	bottom: 4px;
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	background-color: #ffffff;
	height: 6em; /* wird sonst seltsam gekürzt */
	width: 100%;
	font-weight: bold;
}


#welcome .footer p {
	background-color: #ffffff;
	color: #999999;
	margin: 0;
}

#welcomeTradeMark {
	font-size: 0.8em;
}

#ecadiaWelcomeLogo {
	background: rgba(255,255,255,0.5);
	padding: 0px;
	border-radius: 30px;
}

#welcomeNextButton {
	text-align: center;
	position: absolute;
	top: 400px;
	width: 100%;
}

@font-face {
	font-family: "OCR A Extended";
    src: url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.eot");
    src: url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.eot?#iefix") format("embedded-opentype"),
    url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.woff2") format("woff2"),
    url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.woff") format("woff"),
    url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.ttf") format("truetype"),
    url("fonts/@font-face/971c473a19b6bba1059ba6add6af78d7.svg#OCR A Extended") format("");
}

.contentDiv {
	/* Silbetrennung, speziell bei den Produktinhalten */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.contentDiv p {
	padding-bottom: 0.5em !important;
}


.ecadiaMobilePage.ui-page > .dataDetails > p, .ecadiaMobilePage.ui-page > .dataDetails > h1,
.ecadiaMobilePage > h1,
.ecadiaMobilePage.ui-page > .dataDetails > h2, .ecadiaMobilePage.ui-page > .dataDetails > h3 {
	background-color: white; padding: 0.4em;
}


/* Tab-Control */
.ui-tabs-nav .ui-state-active {
	background-color: #3388cc /* Standardfarbe jQM, sollte überschrieben werden, wenn aktive Buttons anders gefürbt wurden */;
	border-color: #3388cc;
}

.ui-tabs-nav .ui-btn-icon-left {
	padding-left: 2.5em !important;
}


.labelEcadiaSlogan {
	display: none; /* wird per js eingeblendet */
	font-family:  "OCR A Extended" !important;
	font-size: 28pt;
	font-weight: bold;
	color: #474849; /* #12345c lila  */;
	text-shadow: 0 0 20px #ffffff !important;
	min-width: 20em; /* damit nicht zu  früh umgebrochen wird */
	text-align: left;
	padding: 0 !important;
	margin: 0 0 0 -20px !important;
}

.footerCopyrightInfo {
	position: absolute;
	right: 1em; bottom: 0.2em;
	font-size: 7pt;
	color: #aaaaaa;
	font-weight: normal;
	text-shadow: none;
}




/* h1, h2, h3, h4 { */
/* 	color: #0b3378; */

/* 	/* das ist ansonsten 1em und wirkt sehr verschwenderisch, speziell auf kleinen Geräten */ */
/* 	padding-bottom: 0.2em !important; */
/* 	margin-top: 0.3em !important; */
/* 	margin-bottom: 0.2em !important; */
/* } */

h1 {
	font-size: 1.3em;
    font-weight: 500;
}

h2 {
	font-size: 1.2em;
    font-weight: 500;
}


h3 {
	font-size: 1.1em;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
    font-weight: 500;
}

h4 {
	font-size: 1.1em;
	margin-bottom: 0.2em;
	margin-top: 0.2em;
    font-weight: 300;
}


h5 {
/* 	color: #0b3378; */
	font-size: 1.1em;
	margin-bottom: 0.1em;
	margin-top: 0.1em;
    font-weight: 500;
}

/* sonst ist der Text auf den Buttons zu fett */
a {
	font-weight: normal !important;
}

/* damit der Veranstaltungstermin nicht so fett angezeigt wird */
.eventExpandItem h4 a {
	font-weight: normal !important;
}

b, strong {
    font-weight: 900;
}

/* durchgestrichen darstellen */
.partnerInactive, .entryInactive {
	text-decoration: line-through;
}

.dataDetails, .pageTopArea {
	margin: 0 auto;
}

.headerText {
	padding-top: 2px;
    color: #0b3378 /* #0084A8; */;
    font-size: 1em;
    text-align: center;
    font-weight: normal;
    padding-bottom: 2px;
    margin: 0;
}

.headerArea {
	background-color: #F0F8Fe;
    background-image: url('gifMobile/ecadiaLogo220x54.png');
    background-repeat: no-repeat;
    background-position: 110px 2px;
    padding-top: 56px;
}

.headerButton {
	height: 24px; /* RS, 01.12.2015: ist irgendwie seltsam, dass die Angaben zu headerButtonNoText nicht passen. Aber so sieht das gut aus */
	padding-top: 15px !important;
	float:left;
}

/* Popup-div aus indexMobile.jsp */
#tooltipPopup {
	max-width:350px;
}

.infoMessagePopup {
	padding: 0.5em;
}

.infoMessageText {

	padding: 0.5em 1em 2em 4em;
	background-image: url('gifMobile/info32.png');
	background-position: 0.5em 0.5em;
	background-repeat: no-repeat;
	width: 16em;
}

.headerSearchField {
	background-color: white !important; /* sonst ist das so grau wie die Buttons */
}

/* der lösch-Button für den Suchtext soll mittig kommen */
.headerSearchField a {
	margin-top: -17px !important;
}

.openHeaderLanguageSelectionButton img {
	margin-top: 10px; /* für die kleine Anzeige wird das wieder auf 0 gesetzt */
}

/* das Suchfeld im Header, nicht das im Explorer */
/* #searchHeaderInput { */
/* 	width: 12em !important; */
/* 	font-size: 16px !important; */
/* 	margin-top: -2px !important; */
/* 	height: 22px !important; */
/* 	padding-left: 10px; */
/* } */

.searchHeaderSubmit {
	position:absolute;
	left:-9999px;
}

.searchHeaderAutocompleteArea {

	position: absolute;
	width: 300px;
}

/* die Schnellsuche im Header */
.mobileAutocompleteItem {
	width: 300px;			/* etwas willkürlich ... */
	padding-right: 30px; /* damit das Icon rechts nicht überschrieben wird */
}

.autocompleteHighlightSearchTerm {

	color: black;
	font-weight: bold;
	background-color: #efefef;
}

.mobileAutocompleteItem img {
	top: 0.3em !important;
}

/* speziell bei ui-block-b um dann aber im Smartphone wieder linksbündig zu stehen; wird bei Smartphones überschrieben mit left*/
.floatRightLargeMedia {
	float: right;
}

.moveUp3emLargeMedia {
	margin-top: -3em;
}


/* ecadia-grün als Hintergundfarbe */
.greenBackground {
    background-color: rgba(0, 114, 164, 0.3);
}

.hideLargeMedia {
	display: none !important;
}

/* die Inhaltsseiten z.B. mein Training oder meine WBT */
.contentArea {
	padding: 1em;
}

.roundCornerLeft {
	/* so tun wie bei ui-first-child */
	-webkit-border-top-left-radius: inherit;
	border-top-left-radius: inherit;
	-webkit-border-bottom-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

.roundCornerRight {
	/* so tun wie bei ui-last-child */
	-webkit-border-top-right-radius: inherit;
	border-top-right-radius: inherit;
	-webkit-border-bottom-right-radius: inherit;
	border-bottom-right-radius: inherit;

    border-right-width: 1px !important;
}

.headerButtonNoText {
	height: 30px !important;
}

.ui-content table td {
	vertical-align: top;
}

.ui-block-largeMedia15 {
	width: 15% !important;
}

.ui-block-largeMedia20 {
	width: 20% !important;
}

.ui-block-largeMedia25 {
	width: 25% !important;
}

.ui-block-largeMedia30 {
	width: 30% !important;
}


.ui-block-largeMedia35 {
	width: 35% !important;
}

.ui-block-largeMedia40 {
	width: 40% !important;
}


.ui-block-largeMedia45 {
	width: 45% !important;
}

.ui-block-largeMedia50 {
	width: 50% !important;
}

.ui-block-largeMedia55 {
	width: 55% !important;
}

.ui-block-largeMedia60 {
	width: 60% !important;
}

.ui-block-largeMedia65 {
	width: 65% !important;
}

.ui-block-largeMedia70 {
	width: 70% !important;
}

.ui-block-largeMedia75 {
	width: 75% !important;
}

.ui-block-largeMedia80 {
	width: 80% !important;
}

.ui-block-largeMedia85 {
	width: 85% !important;
}

.ui-block-largeMedia100 {
	width: 100% !important;
}

/* z.B, die Checkbox der Ordnersuche im Explorer, die ansonsten zu hoch sitzt */
.marginTopLargeMedia1em {
	margin-top: 1em !important;
}

/* wird bei kleinen Geräten auf 0.2em  überschrieben */
.paddingLargeMedia05_02 {
	padding: 0 0.5em 0.5em 0.5em;
}


.marginTopLargeMedia1Dot5em {
	margin-top: 1.5em;
}


/* das eingebettete Video */
.embeddedVideoFrame {
	padding: 5px;
	background-color: #eeeeee;
}

.embeddedVideo {
	max-width: 300px; /* sonst wird das so riesig */
	width: 80%;
	display: block;
	margin: 0 auto;
}


/* die kleine Breite, z. B. iPhone */
@media ( max-width :680px) {

	body {
		font-size: 1em;
	}

	.ui-block-largeMedia85,	.ui-block-largeMedia80,
	.ui-block-largeMedia50, .ui-block-largeMedia100,
	.ui-block-largeMedia15, .ui-block-largeMedia10,	
	.ui-block-largeMedia20, .ui-block-largeMedia25,
	.ui-block-largeMedia30, .ui-block-largeMedia70,
	.ui-block-largeMedia35, .ui-block-largeMedia65,
	.ui-block-largeMedia40, .ui-block-largeMedia60,
	.ui-block-largeMedia45, .ui-block-largeMedia55 {
	width: 100% !important;
	}

	/* speziell bei ui-block-b um dann aber im Smartphone wieder linksbündig zu stehen; wird bei Smartphones überschrieben mit left */
	.floatRightLargeMedia {
		float: left !important;
	}
	
	.moveUp3emLargeMedia {
		margin-top: 0 !important;
	}

	.hideSmallMedia {
		display: none !important;
	}

	.hideLargeMedia {
		display: block !important;
	}

	/* die Inhaltsseiten z.B. mein Training oder meine WBT */
	.contentArea {
		padding: 0;
		padding-top: 0.3em;
	}
	.marginTopLargeMedia1em, .marginTopLargeMedia1Dot5em {
		margin-top: 0;
	}

	.paddingLargeMedia05_02 {
		padding: 0.2em !important;
	}


	/* das ist ansonsten 1em, für Smartphone zu viel */
	.ui-tabs .ui-tabs-panel {
		padding: 0;
	}

	/* wurde für große Geräte zuvor gesetzt, wenn aber die blöcke sowieso untereinander kommen, dann braucht es den Rand natürlich nicht */
	.ui-grid-a.ui-responsive > .ui-block-a, .ui-grid-b.ui-responsive > .ui-block-a {
		padding-right: 0px;
	}
	.ui-grid-a.ui-responsive > .ui-block-b, .ui-grid-b.ui-responsive > .ui-block-c {
		padding-left: 0px;
	}

	.headerArea {
		background-image: url('gifMobile/ecadialogo130x30.png');
	    padding-top: 38px;
	    background-position: 100px top;
	}

	.pageSubHeader {
		font-size: 0.7em;
		padding-left: 38px;
	}

	#labelEcadiaSlogan {
		font-size: 14pt;
	}

	.headerButton {
		height: 16px !important;
		padding-top: 6px !important;
	}

	.headerButtonNoText {
		height: 13px !important;
	}

	/* das ecadia-Logo im Welcome kleiner machen */
	#welcomeEcadiaImage {
		width: 250px !important;
	}

	/* und den Schriftzug auch etwas kleiner */
	.labelEcadiaSlogan {
		font-size: 18pt;
		margin: 0 0 0 20px !important;
		text-shadow: 0 0 5px #ffffff !important;
	}

	#welcomeNextButton {
		top: 280px;
	}

	.openHeaderLanguageSelectionButton img {
		margin-top: 0px;
	}

	/* Tabs am Smartphone kleiner anzeigen */
	.inlinetabs .ui-tabs-nav .ui-btn {
		padding: 1em .7em 1em 2.7em !important;
	}

	/* auf dem Smartphone ist der 1em Standard zu verschwenderisch */
	.ui-collapsible- {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	/* die Überschriften etwas kompakter anzeigen */
/* 	h1,h2, h3, h4, h5  { */
/* 		font-size: 1.1em; */
/* 	} */


	/* *************************************************************************************************** */
	/* Symbolanzeige in der linken Spalte (z.B. Forum ist im Smartphone etwas kompakter                    */
	/* *************************************************************************************************** */
	.ui-listview .ui-li-has-thumb > img:first-child, .ui-listview .ui-li-has-thumb > .ui-btn > img:first-child, .ui-listview .ui-li-has-thumb .ui-li-thumb {
		max-width: 4em !important;
	}

	.ui-listview > .ui-li-has-thumb > .ui-btn, .ui-listview > .ui-li-static.ui-li-has-thumb {
		padding-left: 4.24em;
	}
	
	.embeddedVideo {
		max-width: 300px; /* sonst wird das so riesig */
		width: 80%;
		display: block;
		margin: 0 auto;
	}
	

}

.ui-collapsible-content {
	background-color: white;
}

.dataDetails td {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	padding-left: 0;
	padding-right: 1em;
	vertical-align: top;
}

/* --- die Bullets aus dem normalen ecadia, aber natürlich nicht die ganzen Listviews -------------------------- */
.bulletLevelUL1, .mobileWidgetTinyMcePreviewDiv ul {
    padding-left: 26px;
    font-size: 1em;
    font-weight: normal;
    margin-top: 0.2em; /* das wird sonst ein zu breiter Abstand */
}

.bulletLevelUL2, .contentDiv ul li ul {
    padding-left: 16px;
    font-weight: normal;
}

.bulletLevel1, .contentDiv ul li:not(.mobileWidget *),
.mobileWidgetTinyMcePreviewDiv ul li:not(.mobileWidget *) {
    list-style-image: url(gif/bullet2.gif);
    padding-bottom: 2px;
}

.bulletLevel2,
.contentDiv ul li ul li:not(.mobileWidget *)  {
    list-style-image: url(gif/bullet3.gif);
    padding-bottom: 2px;
}

/* falls das ul durch den TextHelper erzeugt wurde, den sehr breiten Rand etwas kürzen */
ul.UL_TextHelper {
	margin-top: 4px;
	margin-bottom: 4px;
}

.content ul, .content ol, .contentArea ul:not(.list-group, .select2-results__options), .contentArea ol {
	padding-left: 2rem;
}


/* --- Ende - die Bullets aus dem normalen ecadia ------------------------------------------------------------- */

.eventDetail p, .trainingProductDetail p, .partnerDetail p, .pageTopArea p  {
	padding: 0 0 0.58em 0;
	margin: 0;
}

.pageTopArea table td {
	padding: 0.2em;
}

.ui-input-text {
	margin-top: .1em  /* 0.5em */;
}

.ui-icon-pdf::after {
	background-image: url(gif/pdf.png);
}

.ui-icon-play::after {
	background-image: url(gifMobile/caret-right-16.svg);
}

.ui-icon-folder::after {
	background-image: url(gifMobile/folder-open-16.svg);
}

.ui-icon-shoppingCart::after {
	background-image: url(gifMobile/shopping-cart-16.svg);
}

.ui-icon-calendar::after {
	background-image: url(gifMobile/calendar-16.svg);
}

.ui-icon-userplus::after {
	background-image: url(gifMobile/user-plus-16.svg);
}

.ui-icon-pdf::after {
	background-image: url(gifMobile/file-pdf-o-16.svg);
}

.ui-icon-cube::after {
	background-image: url(gifMobile/cube-16.svg);
}

.ui-icon-share::after {
	background-image: url(gifMobile/share-alt-16.svg);
}

.ui-icon-arrowDown::after {
	background-image: url(gifMobile/arrow-down-16.svg);
}

.ui-icon-arrowUp::after {
	background-image: url(gifMobile/arrow-up-16.svg);
}

.ui-icon-print::after {
	background-image: url(gifMobile/print-16.svg);
}


.ui-icon-upload::after {
	background-image: url(gifMobile/upload-16.svg);
}

.ui-icon-download::after {
	background-image: url(gifMobile/download-16.svg);
}

.ui-icon-cloud-upload::after {
	background-image: url(gifMobile/cloud-upload-16.svg);
}

.ui-icon-qrcode::after {
	background-image: url(gifMobile/qrcode-16.svg);
}

.ui-icon-save::after {
	background-image: url(gifMobile/save-16.svg);
}

.ui-icon-user-plus::after {
	background-image: url(gifMobile/user-plus-16.svg);
}

.ui-icon-exchange::after {
	background-image: url(gifMobile/exchange-16.svg);
}

.ui-icon-copy::after {
	background-image: url(gifMobile/copy-16.svg);
}

.ui-icon-square-o::after {
	background-image: url(gifMobile/square-o-16.svg);
}

.ui-icon-copy::after {
	background-image: url(gifMobile/square-o-16.svg);
}

.ui-icon-hotel::after {
	background-image: url(gifMobile/hotel-16.svg);
}

.icon24 {
	padding-right: 6px;
	padding-left: 0px;
	margin-bottom: -4px;
}

.icon16 {
	padding-right: 6px;
	padding-left: 0px;
	margin-bottom: -2px;
}

/* z. B. in register und preregister */
.iconLeft a {
    padding-left: 2.5em !important;
    padding-right: 1em !important;
}
.iconLeft a:after{
    right: auto;
    left: 9px;
    transform: scaleX(-1);
}


/* Mobile-Widgets Pflichtfelder leicht gelber Hintergrund, aber nicht bei disable ------------------------------------ */
/* input:required:not([disabled]), textarea:required:not([disabled]), .requiredInput:not(.select2-container-disabled ), .requiredInput:not(.select2-container-disabled ) > .select2-choice, select:required + span .select2-selection { */
/*   background: #FFFBDF !important; */
/* } */


/* -- Der Kalender --------------------------------------------------------------------------------------------------- */
.jq-calendar-wrapper h1 {
	font-size: 1.4em !important;
}

.jq-calendar-wrapper table  td {
	vertical-align: middle;
}


.jq-calendar-wrapper td, .jq-calendar-wrapper th {
	border: #555555 1px solid !important;
}

.jq-calendar-wrapper .holiday:not(.ui-btn-active) {
	background-color: #fedec4 !important;
}

.jq-calendar-wrapper .empty {

	background-color: #ffffff !important;

}

.jq-calendar-wrapper .training {
	background-color: PaleTurquoise !important;

}

.jq-calendar-wrapper .ui-btn-today {
	background-color: #ffdd6e !important;
	background-image: none;
}

.jq-calendar-wrapper .ui-btn-active {
	color: black !important;
	background-color: #cdcdcd !important;

}

.jq-calendar-wrapper .importance-0 {
	border: solid 2px #f6f6f6 !important;
}

.jq-calendar-wrapper td.darker, .jq-calendar-wrapper span.darker {
	opacity: 1;
}

.fc-text-arrow {
	font-size: inherit !important;
}


/* -- Der Kalender - Ende --------------------------------------------------------------------------------------------- */


/* Mitarbeiter-Ressourcen-Kalender -- Buttons dürfen nicht die jQM Nornalgröße haben, weil das sonst die Optik verhageln kann */

.fc-content .headerWeekCell .ui-btn {
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0;
	height: 100%;
	font-size: 12px;
}

.fc-content .headerWeekCell .ui-btn button {
	width: 100%;
	height: 100%;
	margin: auto;
	border: 0 !important;
	cursor: pointer;

}


/* -- Lernzielanzeige ------------------------------------------------------------------------------------------------- */


.learningTargetWidgetTable {
	border-collapse: collapse;
	margin: 0.2em;
}

.learningTargetWidgetTable td {
	border: 1px solid black;
	width: 1em;
	height: 1em !important /* wird sonst von der höher der gesamten Spalte überschrieben */;
	overflow: hidden;
	margin: 0.1em;
}

.learningTargetWidgetReached {
	background-color: #00ff00;
}

.learningTargetWidgetNoTarget {
	background-color: white;
}

.learningTargetWidgetTarget {
	background-color: #aaaaaa;
}



.setLearningTargetValueReached {
	background-color: #00ff00;
	box-shadow: 2px 2px #aaaaaa;
}

.setLearningTargetValueTarget {
	background-color: #a9a9a9;
	box-shadow: 2px 2px #777777;
}

.setLearningTargetValue {
	margin: 0;
	height:4em;
	width: 4em;
	vertical-align: middle;
	line-height:4em;
	text-align: center;
	border: #777777 solid 1px;
}

.setLearningTargetValue:hover {
	cursor: pointer;
}

.setLearningTargetValueInactive {
	background-color: #eaebec !important;
	box-shadow: none;
}

.setLearningTargetValueInactive:hover {
	cursor: initial !important;
}



.setLearningTargetValue.ui-btn-active,
.setLearningTargetValue.ui-btn:visited,
.setLearningTargetValue.ui-focus,
.setLearningTargetValue.ui-btn:focus {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none ;
	border: none;
	color: inherit;
	text-shadow: none;
}

.learningTargetWidgetArea {
	text-align: center;
	margin: auto;
}
/* -- Lernzielanzeige -- Ende ----------------------------------------------------------------------------------------- */

/* -- Kompetenzen Square4 --------------------------------------------------------------------------------------------- */


table.competenceSquareWidgetTable {
	border-collapse: collapse;
	margin: auto;
	min-width: 32px;  /* Darstellung in der Liste soll nie kleiner werden */
}

table.competenceSquareWidgetTable tr {
	line-height: 14px;
}

table.competenceSquareWidgetTable tbody > tr > td {
	border: 1px solid black !important;
	width: 14px;
	overflow: hidden;
	padding: 0 !important;
	line-height: 14px;
}

table.competenceSquareWidgetTableInactive tbody > tr > td {
	border: 1px dotted #aaaaaa !important;
	background-color: #eeeeee !important;
	color: #eeeeee !important;
}


.competenceSquareWidgetReached {
	background-color: #00ff00;
}

.competenceSquareWidgetReachedSelfAssessment {
	background-color: yellow;
}

.competenceSquareWidgetNoTarget {
	background-color: white;
}

.competenceSquareWidgetTarget {
	background-color: #aaaaaa;
}

.setCompetenceSquareValueReached {
	background-color: #00ff00;
	box-shadow: 2px 2px #aaaaaa;
}

.setCompetenceSquareValueReachedSelfAssessment {
	background-color: yellow;
	box-shadow: 2px 2px #aaaaaa;
}


.setCompetenceSquareValueTarget {
	background-color: #a9a9a9;
	box-shadow: 2px 2px #777777;
}

.setCompetenceSquareValue {
	margin: 0;
	height:4em;
	width: 4em;
	vertical-align: middle;
	line-height:4em;
	text-align: center;
	border: #777777 solid 1px;
}

.setCompetenceSquareValue:hover {
	cursor: pointer;
}

.setCompetenceSquareValueInactive {
	background-color: #eaebec !important;
	box-shadow: none;
}

.setLearningTargetValueInactive:hover {
	cursor: initial !important;
}



.setCompetenceSquareValue.ui-btn-active,
.setCompetenceSquareValue.ui-btn:visited,
.setCompetenceSquareValue.ui-focus,
.setCompetenceSquareValue.ui-btn:focus {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none ;
	border: none;
	color: inherit;
	text-shadow: none;
}

.competenceSquareWidget {
	text-align: center;
	margin: auto;
	display: inline-block; /* damit die Zentrierung tut */	
}

table.CompetenceSquareWidgetSmall > tr > td {
	vertical-align: middle !important;
}

#popupEmployeeCompetenceSquare #LastModification {
	padding: .2em;
}

#popupEmployeeCompetenceSquare #LastModification table td {
	font-size: 0.7em;
	line-height: 0.7em;
}

/* -- Kompetent (Quadrant) -- Ende ----------------------------------------------------------------------------------------- */

table.competenceListTrainingTable {
	width: 100%;
	border-collapse: collapse;
}

/* table.competenceListTrainingTable > tbody > tr > td { */
/* 	padding: 0.1em !important; */
/* 	border-bottom: 1px solid #999999 !important; */
/* 	font-size: 0.8em; */
/* } */


/* table.competenceListTrainingTable tr td:first-child { */
/* 	padding-left: 2px !important; */
/* 	border-left: none !important; */
/* } */

/* table.competenceListTrainingTable tr td:last-child { */
/* 	padding-right: 2px !important; */
/* 	border-right: none !important; */
/* } */


/* wegen der hohen Maßnhamen-Inhalte ist es besser alle Zeilen oben anzuordnen */
/* #MobileCompetenceList td { */
/* 	vertical-align: top; */
/* } */


/* Anzeigebox innerhalb einer Kachel */
.qpMatrixSummary {

	border: 1px solid black;
	padding:  0.2em 0.4em 0.2em 0.2em;
	width: 60px;
	text-align: right;
	text-shadow: none !important;
	box-shadow: 2px 2px #aaaaaa;
	margin: 0.2em 0.2em 0.2em 0.2em;
}

.qpMatrixSummaryHeader {

	border: 1px solid black;
	padding:  0.1em 0.2em 0.1em 0.2em;
	min-width: 30px !important;
	max-width: 50px !important;
	text-align: center;
	text-shadow: none !important;
	box-shadow: none;
	margin: 0.1em .1em 0.1em 0.2em;
	text-align: center;
	font-size: 10pt;
	display: block;
}

/* Der Untertext zur farbigen Box */
.qpMatrixSummaryHeader + div {
  font-weight: normal;
  font-size: 8pt;
  text-align: center;
   white-space: nowrap;
  display: block;

}



.QPLEOverviewTable_headerRow td, .QPLEOverviewTable_headerRow th {
	padding: 0 12px 0 0 !important;
	margin: 0 12px 0 0 !important;
	font-weight:normal !important;
	background-color: #eeeeee;
	text-align: center;
}


/* Swipe works with mouse as well but often causes text selection. */
/* We'll deny text selecton on everything but INPUTs and TEXTAREAs. */
.ecadiaMobilePage :not(INPUT):not(TEXTAREA):not(a), .unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/* -- Generelle Einstellung bei a-grids oder b-grids  -------------------------------------------------------------------------------------- */
/* einen kleinen Abstand in den nebeneinander-Darstellung NUR zwischen den grids und nicht am rechten oder linken Rand; wird für kleine Geräte wieder auf 0 gesetzt */
.ui-grid-a > .ui-block-a, .ui-grid-b > .ui-block-a {
	padding-right: 4px;
}
.ui-grid-a > .ui-block-b, .ui-grid-b > .ui-block-c {
	padding-left: 4px;
}

/* ohne Abstand in den untereinander-Darstellung (dann ist ui-responsive gesetzt) */
@media (max-width: 35em) {
	.ui-grid-b.ui-responsive > .ui-block-a {
		padding-left: 0;
	}

	.ui-grid-a.ui-responsive > .ui-block-a {
		padding-right: 0;
	}

	.ui-grid-a.ui-responsive > .ui-block-b {
		padding-left: 0;
}
/* -- Ende Generelle Einstellung bei grids  ----------------------------------------------------------------------------------------------- */
	.ui-grid-b.ui-responsive .ui-block-c {
		padding-left: 0;
	}
}


/* -- Produkt und Veranstaltungssuche  ---------------------------------------------------------------------------------------------------- */
/* -- Produkt und Veranstaltungssuche  ---------------------------------------------------------------------------------------------------- */
.RankingWidget {
	float: left;
}

.RankingWidgetContainer {
	margin: 4px 10px 0 10px;
}

.checkKeyWordsForSearchText {
	white-space:nowrap;
	display: block;
	float: left;
}

.checkKeyWordsForSearchText img {
	padding-left: 20px;
	float: left;
}

.checkKeyWordsForSearchText label {
	padding-left: 6px;
	vertical-align: top;
	float: left;
	margin-top: -2px;
}
/* -- Ende Produkt und Veranstaltungssuche  ----------------------------------------------------------------------------------------------- */

/* -- home-Seite ---------------------------------------------------------------------------------------------------- */

#infoArea {
	/* wie die ListView-Kacheln */
	background-color: #f6f6f6;
	border: 1px solid #ddd;
	box-shadow: 0 0 9px #111;
	transition: all 500ms ease;
	border-radius: 5px;

	margin: 0  auto;	/* zentriert */
	min-height: 240px; /* damit das Logo gut aussieht */
	max-width: 61.25em; /* so breit wie die 4 Boxen nebeneinander */
	margin-bottom: 8px;
}


@media (max-width: 52em) {

	#infoArea .ui-block-a {
		width: 100%;
	}
	#infoArea .ui-block-b {
		width: 100%;
	}
}
/* -- Ende home-Seite ------------------------------------------------------------------------------------------ */


/* -- Feedback ------------------------------------------------------------------------------------------------- */

#FeedbackItems, .FeedbackInputMessage, .feedbackEvaluation {

	background-color: #fefefe;
}

.feedbackEvaluation {
	padding: 1em;
}





.QuestionScaleContainer label {
	max-width: 6em;
	min-width: 2.5em;
	min-height: 7em;
	text-align: center !important;
	position: relative;
	font-weight: normal;
}

.QuestionScaleContainer label div {
	 position: absolute !important;
	 bottom: 5px !important;
	 left: 50%;
	 margin-left: -12px;
}

.EvaluatorQuestionSelectionContainer table, .EvaluatorQuestionScaleContainer table {
	 border-collapse: collapse;
	 width: 94%; 		/* also die praktisch ganze Breite nutzen */
	 margin: 0 auto; 	/* vertikal zentriert                     */
	 max-width: 50em; 	/* Breiter macht keinen Sinn              */
}

.EvaluatorQuestionScaleContainer table {
	margin-bottom: 2em;
}

.EvaluatorQuestionSelectionContainer table td, .EvaluatorQuestionScaleContainer table td,
.EvaluatorQuestionSelectionContainer table th, .EvaluatorQuestionScaleContainer table th {
	padding: 0.5em;
	text-align: center;
	border: 2px solid #999999;
	min-width: 6em;
}


.EvaluatorQuestionSelectionContainer table tr th, .EvaluatorQuestionScaleContainer table tr th, .EvaluatorQuestionScaleContainer table tr:nth-child(2) td {
	background-color: #dce6f1;
}

.EvaluatorQuestionSelectionContainer table tr:nth-child(2) td, .EvaluatorQuestionScaleContainer table tr:nth-child(3) td {
	height: 4em;
	vertical-align: bottom;
	padding-bottom: 0;
	border-bottom: 1px solid #cccccc;
}

.EvaluatorQuestionSelectionContainer table tr:nth-child(3) td, .EvaluatorQuestionScaleContainer table tr:nth-child(4) td {
	border-top: 1px solid #cccccc;
}

.EvaluatorQuestionSelectionContainer .barChart, .EvaluatorQuestionScaleContainer .barChart {
	width: 3em;
	background-color: #4f81bd;
	display: block;
	text-align: center;
	margin-left: auto ;
	margin-right: auto ;
}

/* die kleine Breite, z. B. iPhone */
@media ( max-width :990px) {

	.EvaluatorQuestionSelectionContainer .barChart, .EvaluatorQuestionScaleContainer .barChart {
		width: 1.8em;
		background-color: #4f81bd;
		display: block;
		text-align: center;
		margin-left: auto ;
		margin-right: auto ;
	}

	.EvaluatorQuestionSelectionContainer table td, .EvaluatorQuestionScaleContainer table td {
		padding: 0.1em;
		text-align: center;
		border: 2px solid #999999;
		min-width: 2em;
		font-size: 10pt;
	}

	.QuestionScaleContainer label {
		max-width: 5em;
		min-width: 2em;
		min-height: 7em;
		text-align: center !important;
		position: relative;
		font-size: 10pt;
		font-weight: normal;
		 padding: 0 5px;
	}

	.QuestionScaleContainer label div {
		 position: absolute !important;
		 bottom: 5px !important;
		 left: 50%;
		 margin-left: -12px;
	}


	.EvaluatorQuestionSelectionContainer table td, .EvaluatorQuestionScaleContainer table td,
	.EvaluatorQuestionSelectionContainer table th, .EvaluatorQuestionScaleContainer table th {
		padding: 0.2em;
		border: 1px solid #999999;
		min-width: 2em;
	}
	
	.EvaluatorQuestionSelectionContainer table, .EvaluatorQuestionScaleContainer table {
		width: 100%; /* ganze Breite - wir haben nichts zu verschenken */
	}
	
	#allEvalDiv {
		padding: 0.1em; /* nur minimalen Abstand zum Rand */
		border: none;
	    box-shadow: none;
	}
	
	/* jedes einzalne Chart das eine Frage zusammenfasst */
	#allEvalDiv > div {
		margin-bottom: 1em;
	}
	
	/* Auflistung der Antworten bei der Auswertung */
	.EvaluatorPlainText ul {
		padding-left: 1em;
		list-style-type: square;	
	}

}
/* -- Ende Feedback -------------------------------------------------------------------------------------------- */


/* -- Paginierung ---------------------------------------------------------------------------------------------- */
#paginate {
	width: 100%;
	text-align: right;
}

#paginate a {
	margin-right: 1em;
}
/* -- Ende Paginierung ----------------------------------------------------------------------------------------- */



/* -- Wizard-Control, Änderungen gegebnüber jquery.steps.css --------------------------------------------------- */

.wizard>.content>.body label {
	margin-bottom: 0 /* .5em */;
}

.wizard > .content > .body {
    position: absolute;
    padding: 0.5em;
}


.wizard a {
	font-weight: normal;
}

.actions li {
	min-width: 8em;
	text-align: center;
}

.wizard > .content {
	margin-top: 0;
    min-height: 32em;  /* Größe der step-box */
}

.wizard ul, .tabcontrol ul {
	margin-right: 0.5em;
}

/*
.wizard>.steps .done a {
	background-image: url('gifMobile/ok24.png');
	background-position: 90% 50%;
	background-repeat: no-repeat;
}

.wizard>.steps .failed a {
	background-image: url('gifMobile/fail24.png');
	background-position: 90% 50%;
	background-repeat: no-repeat;
}
*/
.wizard > .actions > ul > li.disabled {
  display: none;
}

/* die Prozessschritte */
.wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active {
    padding: 0.5em;
	margin-right: 0;
}

/* leichte optische Anzeige, dass der Button nun aktiv ist; Ziel so ähnlich wie die original jQM-Buttons wirken */
.wizard > .actions a:hover, .wizard > .actions a:active {
	background:  #2f4f9f; /* etwas heller als das standardmäßige Dunkelblau */
}


@media ( max-width :680px) {
	.wizard>.steps a, .wizard>.steps a:hover, .wizard>.steps a:active {
	   padding: 0.3em;
	}
	/* der Weiter und zurück-Button */
	.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
	    padding: 0.3em 0.3em;
	}
}

/* -- Ende Wizard-Control, Änderungen gegebnüber jquery.steps.css --------------------------------- */


/* -- Quartalseingabe ----------------------------------------------------------------------------- */
.selectQuater {
	float: left;
	display: block;
	margin-right: 1em;
	margin-bottom: 0.5em;
}


.selectQuater .ui-radio {
	margin: 0;
}
/* -- Ende Quartalseingabe ------------------------------------------------------------------------ */


#ui-datepicker-div {
	/* Popups haben 1100 und dass der Datepicker sichtbar ist muss der darüber liegen */
	/* der openConfirmMessageBox-Popup hat 2000, deswegen gehen wir auf 2100 */
	z-index: 2100 !important;
}

.ui-datepicker {
    width: auto!important;
}

input.ui-date.ui-inline {

	width: 8em;
	display: inline-block;
}

/* -- Highlighting der Suchwörter im Text ------------------------------------------------------------------------ */
.highlight {
	background: #FAFAD2; /* lightgoldenrodyellow */
	color: black;
}

/* HTML-Editor Felder ---------------------------------------------------------------------------------------------------------- */
/*
RS, 31.01.2016:
Bei Verwendung des HTML-Editors müssen Zeilenabstände und die Bullets und geordneten Listen angepasst werden.
Ein sehr ähnliches HTML ist auch in ecadia.css für die Vorschau. Dort unter trainingProductContentPreview.
Für die pdf Ausgabe muss im pdf ebenso ein entsprechender css gesetzt werden.
*/

.ecadiaHTMLContentArea p, .mobileWidgetTinyMcePreviewDiv p  {
	margin: 0; /* sonst haben wir einen etwa 1em oberen und unteren Rand */
	padding: 0;
}


.ecadiaHTMLContentArea ul:not('.dropdown-menu') > li, .mobileWidgetTinyMcePreviewDiv ul li  {
   	list-style-image: url(gif/bullet2.gif);
 	padding-bottom: 2px;
}


.ecadiaHTMLContentArea ul > li > ul > li {
   list-style-image: url(gif/bullet3.gif);
	padding-bottom: 2px;
 }

.ecadiaHTMLContentArea ul, .mobileWidgetTinyMcePreviewDiv ul  {
	margin: 0;
	padding-top: 0.2em; /* ein kleiner Abstand zum vorherigen Abschnitt */
	padding-bottom: 0.2em;
	padding-left: 1em;
}

.ecadiaHTMLContentArea ol {
	margin: 0;
	padding-top: 0.2em; /* ein kleiner Abstand zum vorherigen Abschnitt */
	padding-bottom: 0.2em;
	padding-left: 1.6em;
}


/* Tabs (z.B. aus dem Explorer) ------------------------------------------------------------------------------------------------ */
/* vgl. https://github.com/kryops/jqm-inlinetabs */

.targetgroupDescription {
	font-size: 0.8em;
	padding: 0 !important;
}
/* RS, 06.08.2017: so passt das mit den Einstellungen .inlinetabs .ui-tabs-panel zusammen */

/* RS, 06.08.2017: so passt das mit den Einstellungen .inlinetabs .ui-tabs-panel zusammen */
.inlinetabs {
    padding:0.5em;
}


.inlinetabs .ui-navbar .ui-widget-header {
    background-color: transparent;
}

.inlinetabs .ui-tabs-nav > li {
    margin: 0 2px;
    width: auto;
    clear: none;
}

.inlinetabs .ui-tabs-nav .ui-btn {
    border: 1px solid #ddd;
    border-bottom: none;
    border-top-left-radius: .6em;
    border-top-right-radius: .6em;
    padding: 1em 2em 1em 3.5em;
}

.inlinetabs .ui-tabs-panel {
    border-top: 2px solid #ddd;
    margin-left: -0.5em;
    margin-right: -0.5em;
}


/* Bilder drehen (indexMobile.jsp werden alle src="action..." gedreht, wenn Orientierungseinstellungen im Bild sind --------------------- */
/* nur für IE und Safari ... */
.rotate-90 {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -o-transform: rotate(-90.0deg);
}
.rotate-180 {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -o-transform: rotate(180.0deg);
}

/* YesNoMessageBox ---------------------------------------------------------------------------------------------------------------------- */
/* .inputReadOnly { */
/* 	border: none !important; */
/* 	background: #efefef !important; */
/* } */

#ecadiaPopupDiv {
	border: 2px solid #ddd;
	box-shadow: 0px 0px 12px rgba(0,0,0,0.6);
	border-radius: .3125em;
	position:absolute;
	z-index: 10; /* über den mainPage Sachen, aber noch hinter dem Kalenderpopup */
	background: #ffffff;
}


.YesNoMessageBox {
	display: none;
	width: 96%;
	max-width: 32em;
	min-height: 16em;
	border: 2px solid #ddd;
	box-shadow: 0px 0px 12px rgba(0,0,0,0.6);
	border-radius: .3125em;
	position:absolute;
	z-index: 2000; /* 1100 hat der jQM Popup */
	background: #ffffff;
}

.YesNoMessageBox .YesNoMessageBoxText {
	hight: 8em;
	padding: 1em 1em 1em 4em;
	background-image: url('gifMobile/question32.png');
	background-position: 1em 22px;
	background-repeat: no-repeat;
}

.YesNoMessageBoxYes, .YesNoMessageBoxNo {
	min-width: 5em;
}

.YesNoMessageBoxHeader {
	text-align: center;
}

.YesNoMessageBoxButtons {
	position: absolute;
	bottom: 1em;
	padding-left: 2em;
}

/* liegt direkt im Body und macht die ganze Seite als readonly */
.bodyBackgroundDisable {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #bbbbbb;
	opacity: 0.6;
	z-index: 1200;
	display: none;
}

.popupPrintBookmarksTitle {
	margin-left: 1em;
}

.bookmarksListview, .menuPanelListView {
	margin-top:-16px;
}

.bookmarkPanelInfoEmpty {
	border: 2px #888888 solid;
	padding: 1em 1em 1em 1em;
	margin: 3em 1em 1em 1em;
	text-align: center;
}

.popupPrintBookmarks {
	min-width: 24em;
	max-width: 30em;
}

.popupPrintBookmarksContent {
	padding: 1em;
}

/* dataTable-Anpassungen für Mobile --------------------------------------------------------------------------------------------------------- */

table.dataTable.compact tbody th, table.dataTable.compact tbody td {
	vertical-align: middle;
}

.dataTables_filter label {
	float: left;
}
.dataTables_filter button {
	float: right;
}


/* Styles von ui-btn nachbilden für den Excel-Button */
.dataTables_filter .button {
	padding: 0.4em 0.4em 0.4em 0.4em;
	margin: 0 0 0 .4em;
	border-radius: .3125em;
	border: 1px solid #ddd;
	cursor: pointer;
}

.dataTables_filter .ui-input-search {
	margin: 0;
}


/* table.dataTable tbody td { */
/* 	padding: 0.5em !important; */
/* 	vertical-align: middle; */
/* } */

/* bei paginierten Tabellen bieten wir keine Combobox zur Änderung der Anzahl an, weil sonst wegen des Height der Seite der untere teil ggf. abgeschnitten wird */
.dataTables_length {
	display: none;
}

.ui-dialog {
	background-color: #fafafa !important;
}

/* der grüne +-Button zum expandieren im Mobile etwas weiter nach unten */
table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before {
	top: 12px !important;
}



@media screen and (max-width:767px) {
	.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
	    text-align: left; /* sonst ist das seltsamerweise zentriert */
	}
}

/* Dialog Zugriffsberechtigungen - Kopie aus ecaddia.css ------------------------------------------------------ */
/* Verwendung in ecadiaAdmin.js openDialogEditAccessProfile                                                     */

.AccessProfileDialogTable {
	border: 2px solid #999999;
	border-collapse: collapse;
}

.AccessProfileDialogTable th {
	bacgground-color: #cacbcc;
	width: 160px;
	border: 1px solid #999999;
	padding: 6px;
	text-align: center;
}

.AccessProfileDialogTable td {
	border: 1px solid #999999;
	padding: 4px;
	text-align: center;
}

/* damit die Tabelle im grau/weiß Wechsel kommt */
.AccessProfileDialogTable tr:nth-child(odd):not(.drop-highlight):not(drag-highlight) {
	background-color: #eaeaea;
}

.AccessProfileDialogTable td:first-child {
	text-align: left;
}

.AccessProfileDialogTable .dragObject {
	background: #72879d !important;
	color: white;
}

.AccessProfileDialogTable .dropObject {
	background: #dddddd;
	color: #000000;

}

/* ----------------------------------------------------------------------------------------------------------- */

/* Besonderheiten explorer.jsp ------------------------------------------------------------------------------- */
.pageTypeClass-explorer h1 {
	margin-top: 0.2em;
}

.rangeSliderWidget .ui-rangeslider .ui-rangeslider-sliders {
    margin: 0 20px; /* da steht Standardmäßig 68px was zu breite Ränder ergibt */
}

.rangeSlider {
	margin: 2px 0; /* sonst wird der Schieber-Knopf oben etwas abgeschhnitten */
}




#resultSummary {
	padding-bottom: 0.5em;
}

/* das Suchfeld bei zweispaltiger Darstellung optisch schön gleichauf mit den Buttons anordnen */
.searchFieldContainer {
	padding-top: 4px;
}

@media (max-width: 35em) {
	.searchFieldContainer {
		padding-top: 0;
	}
}

#searchResult > li p {
	white-space: normal;
}

.custom-corners .ui-bar {
  -webkit-border-top-left-radius: inherit;
  border-top-left-radius: inherit;
  -webkit-border-top-right-radius: inherit;
  border-top-right-radius: inherit;
}


.ui-disabled, .ui-state-disabled, button[disabled], .ui-select .ui-btn.ui-state-disabled {
	opacity: 0.8; /* Standard ist 0.3, was sehr blass ist */
}

table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,
	table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before
	{
	top: 8px;
	left: 4px;
	height: 16px;
	width: 20px;
	border-radius: 14px;
	line-height: 14px;
	text-indent: 0px;
	padding-top: 4px;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child
	{
	cursor: pointer;
	padding-left: 34px !important;
	position: relative;
}

/* --- Bewertungen ---------------------------------------------------------------------------------------------------- */

.embeddedProductRating {
	display: block;
}

.ratingCount {

	border: 1px solid #888888;
	border-radius: 4px;
	padding: 4px;
	width: 30px;
	height: 16px;
	margin-left: 10px;
	font-size: 0.8em;
	text-align: center;
}

/* Verwendung im Katalog */
.ratingFilterItemText {
	float: left;
	margin-left: 10px;
}

.ratingFilterItemStars {
	background-image: url("gifMobile/starRow.png");
	height: 30px;
	width: 120px;
	display: block;
	background-repeat: no-repeat;
	float: left;	
}

#popupRating {
	min-width: 26em;
}

#ratingArea {
	padding: 1em 1em 1em 1em;
}

#ratingTable {
	width: 100%;
	margin-bottom: 2em;
}

#ratingTable td {
	width: 20%;
	height: 3em;
	border: 2px solid #888888;
}

/* Expandierbare Bereiche ---------------------------------------------------------------------------------------- */
.expandButton {
	right: 0px;
	bottom: 0px;
	padding:4px; 
	position: absolute;
	z-index:999;
}

.expandArea {
	padding-bottom: 4px;
	position: relative; /* damit der expand-Button hierrein absolut positioniert werden kann */
}

/* sachtes Ausblenden bei abgeschnittenen Inhalten */
.expandAreaReduced:before {
	content:'';
    width: 100%;
    height: 200px;   /* ab der Hälfte soll das Ausblenden anfangen: Problem dabei: Links mit <a ...> sind nicht erreicbar weil der transparente Teil drüber liegt */
    position:absolute;
    left:0;
    bottom:0;
    z-index: 1;

    background:linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

/* Katalog, erweiterte Suche, Lerndauer */
.duration-range {
	width: calc(100% - 60px);
}

.form-range-text {
	position: absolute;
	margin-left: 1em;
	color: var(--color-special-primary);
}

/* Word cloud -------------------------------------------------------------------------------------------------- */
.wordclouditem:hover {
	color: rgb(112,175,255) !important;
	cursor: pointer;
}


/* *************************************************************************************************** */
/* jQuery dataTable                                                                                    */
/* *************************************************************************************************** */

table.dataTable th.alignRight,
table.dataTable td.alignRight {
  text-align: right !important;
}

table.dataTable th.alignCenter,
table.dataTable td.alignCenter {
  text-align: center !important;
}

/* inaktive Objekte in der List: durchstreichen */
tr.InactiveRowSubject  td {
	text-decoration: line-through;
}

tr.hideInactiveRowSubject {
	display: none !important;
}

/* diesen Style kann man setzen, damit es durchgestrichen wird */
tr.lineThroughRowSubject  td {
	text-decoration: line-through;
}

/* *************************************************************************************************** */
/* Ende jQuery dataTable                                                                               */
/* *************************************************************************************************** */


/* *************************************************************************************************** */
/* Passwort Eingabe                                                                                    */
/* *************************************************************************************************** */
#indicator1OK, #indicator2OK, #indicator1Error, #indicator2Error,
.indicatorOK, .indicatorError {
	display:none;
	margin-top: 4px;
	margin-left: 6px;
}

.ruleTextError {
	font-weight: bold;
	color: red;
}
/* *************************************************************************************************** */
/* Ende Passwort Eingabe                                                                               */
/* *************************************************************************************************** */


.ecadiaVideo {
	padding-top: 1em;
	padding-bottom: 1em;
}

/* *************************************************************************************************** */
/* Standard Suchmasken wie z.B. enrolllist.jsp                                                         */
/* *************************************************************************************************** */

/* den Suchbutton bei zweispaltiger Darstellung optisch schön neben dem Eingabefold anordnen */
#searchButtonContainer {
	padding: 1em 6px 0 6px;
}

@media (max-width: 35em) {
	#searchButtonContainer {
		padding: 0;
	}
}

/* *************************************************************************************************** */
/* Ende Standard Suchmasken wie z.B. enrolllist.jsp                                                    */
/* *************************************************************************************************** */


.documentList p {
	padding: 0 !important;
	margin: 0 !important;
}

.documentList td:first-child {
	padding: 4px 0 0 0  !important;
	margin: 0 !important;
	vertical-align: middle;
}

.documentList td:last-child {
	padding-left: 10px !important;
	margin: 0 !important;

}

.cancellatonDetails ul li {
	color: red;
}


/* *************************************************************************************************** */
/* Forum                                                                                               */
/* *************************************************************************************************** */
.forumItems h2 {
	margin: 0 !important; /* hier brauchen wir keinen Rand */
    font-weight: 500 !important;
}

.forumItems > li ul {
	margin-left: 6px !important;
}

.forumItems > li p {
	margin-bottom: 0.1em !important;
	margin-top: 0.1em !important;
	margin-left: 0 !important;
	white-space: normal !important; /* nicht abschneiden sondern vollständig anzeigen */
}


/* *************************************************************************************************** */
/* Dokumentliste im Produkt oder beim Forum                                                            */
/* *************************************************************************************************** */


table.documentTable td {
	vertical-align: middle;
}

/* die Textspalte mit etwas Rand zum Preview-Bild */
table.documentTable td:nth-child(2){
	margin: 0 !important;
	padding: 0 0 0 4px !important;
}

/* das Preview-Bild ohen Rand */
table.documentTable td.documentTableThumbnail {
	margin: 0 !important;
	padding: 0 !important;
}

/* etwas kleinere Überschrift um Längeren Dateinamen gerecht zu werden */
table.documentTable td p {
	font-size: 1.1em;
	margin: 0 !important;
	padding: 0 !important;
}

table.documentTable td p:first-child {
	margin-bottom: 0.2em !important;
}

/* die Vorschau-Spalte */
.documentTableThumbnail  {
	width: 100px;
	text-align: center;
	padding-right: 4px !important;
}

/* die Vorschau */
.documentTableThumbnail img {
	max-height: 100px;
	max-width: 100px;
}

/* die kleine Breite, z. B. iPhone */
@media ( max-width :640px) {

	/* *************************************************************************************************** */
	/* Dokumentliste im Produkt oder beim Forum alle etwas kleiner                                         */
	/* *************************************************************************************************** */
	.documentTableThumbnail img {
    	max-height: 70px;
    	max-width: 70px;
	}

	.documentTableThumbnail {
		width: 70px;
	}

	table.documentTable {
		margin: 0 !important;
	}

	table.documentTable td {
		margin: 0 !important;
		padding: 0 !important;
	}

	table.documentTable p {
		margin: 0 !important;
	}
}


/* *************************************************************************************************** */
/* Inquiry                                                                                             */
/* *************************************************************************************************** */
/* den ganzen Fragebogen umrahmen */
.inquiryForm {
	margin: 0.5em;
	padding: 1em;
	background-color: white;
}

/* der "submit"-Button unten am Fragebogen */
.inquiryForm #save {
	margin-top: 1em;
	background-color: LawnGreen; /* kräftiges grün */
	height: 6em;
}

.quest{
	padding-top: 1em;
}    

/* damit individuelle Bilder nicht das ganze Layout verhageln */
.inquiryForm img {
	max-width: 100%;
	height: auto;
}


.inquiryForm h1 {
	font-size: 1.4em;
	font-weight: bold;
}

.inquiryForm h2 {
	font-size: 1.2em;
	font-weight: bold;
}

/* die Zeilen der Umfrageschaltflächen nicht abschneiden, weil sonst wichtige Infos abgeschnitten werden */
.inquiryList h3, .inquiryList .ui-btn {
	white-space: normal !important;
}

.progressbarInquiry {
	
	height: 3rem;
    font-size: 2rem;
}

.progressbarInquiry  .progress-bar-text {
		color: black;
	
}

@media ( max-width :680px) {

	/* am Smartphone den Rahmen etwas klainer machen */
	.inquiryForm {
		margin: 0;
		padding: 0;
	}

	.progressbarInquiry {		
		height: 2.3rem;			/* Hähe des Balkens ruhig etwas dicker */
	    font-size: 0.9rem;
	}
	
	/* auf dem Mobile den Fortschrittsbalken so groß wie Platz ist (wird sinst bei 60px limitiert) */
	span.mobileWidget.progress.progressbarInquiry {
    	max-width: none !important;
    }
}

/* Vorschau der Fragebögen */
.inquiryThumbnail {
	width: 140px;
	text-align: center;
	padding-right: 4px !important;
	float: left;
}

.inquiryThumbnail  img {
	max-height: 140px;
	max-width: 140px;
}


/* Highlighting bei nicht-ausgefüllten Pflichtfeldern ---------------------------------------------------- */
div.highlightRequired[data-required=true] .ui-btn,
table.highlightRequired[data-required=true] .ui-btn,
div.highlightRequired[data-required=true] .ui-input-text {

	border: 2px solid green !important;
	background-image: url("gif/warning.png");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

/* Warn-Symbol bei Matrix-Fragen besser oben anzeigen, weil das sonst gerne mit Text kollidiert */
table.highlightRequired[data-required=true] .ui-btn {
	background-position: right 4px top 4px;
}

. matrixTable .highlightRequired {
	
}


/* --- Select2 Mobile Patches ----------------------------------------------------------------------------- */
/* großzügigere Anzeige im zugeklappten Zustand - größe wie ein Button  */

/* die Box um das Select2 */
.select2-container--default .select2-selection--single {
	height: 38px;
}

/* der selektierte Text im Select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-top: 4px;
}

/* der Pfeil rechts */
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 34px;
}

/* Achtung: sonst wird die Auswahl in Popups nicht angezeigt, https://stackoverflow.com/questions/46927681/select2-doesnt-show-options */
.select2-dropdown {
    z-index:99999;
}

.select2.select2-container {
	width: 100% !important; /*sond wird seltsamerweise 300px gesetzt, Mobile wollen wir aber immer 100%*/
}

.select2-container--default .select2-selection--single[aria-disabled=true] {
	border-color: #ddd; /* so wie die readonly Inputs */
}



/* Styles für includePopupLogin --------------------------------------------------- */
.errorMessage {
	color: red;
	display: none;
}


.textInputError {
	border: 3px solid red !important;
}

#requestPasswordArea {
	display: none;
}

.captchaImg.showWaitMessage {
	margin: auto;
	display: block;
	padding-top: 32px;
}


.buttonLogonAsGuestArea {
	float: right
}

.buttonLogonAsGuestArea .ui-btn-inline {
	margin-right: 0 !important; /* weil sonst inline-Buttons nicht rechts bündig sind */

	color: blue !important; /* optisch diesen Button hervorheben */
}

/* document.jsp ------------------------------------------------------------------- */
.contentArea_document {
	padding: 0;
}

.RegistrationResult {
	width: 100%;
	border-bottom: 1px solid #999999;
	padding-top: 6px;
	padding-bottom: 6px;
}


/* Buchungsresultat, wenn Kindbuchungen vorliegen */
.childRegistrationResultTable {
	border-collapse: collapse;
}
.childRegistrationResultTable td {
	padding: .5em;
	border-bottom: 1px solid #999999;
}

/* 16px Icon etwas nach unten ziehen  */
.childRegistrationResultTable img {
	margin-bottom: -2px;
}

.childRegistrationResultTable li {
	display: list-item !important;
}


/* Bereich, der durch einen Radio-Button aktiviert oder deaktiviert wird;  */
.areaSelected {
	border: 1px solid #999999;
	padding: 1em 1em 1em 2.5em; /* damit das unter dem Radiobutton mit dem label in etwa bündig wird */
	background-color: white;
}
.areaNotSelected {
	border: none;
	padding: 1em 1em 1em 2.5em; /* damit das unter dem Radiobutton mit dem label in etwa bündig wird */
	background-color: #efefef;
}


/* Fileupload z.B. beim Inhalte Teilen oder beim Buchen externer Veranstaltungen */
.bar {
	height: 32px;
	background: #70d138;
}

/* die "Wolke" zum Upload */
.fileDropArea {
	padding: 20px;
	min-height: 150px;
	border: 5px dashed rgb(210, 214, 216);
	border-radius:20px;
	background: url('gifMobile/UploadCloudBackground.PNG') #ffffff no-repeat right center;
	background-position: 50% 80%;
}



#pdfCatalogueArea {
	margin-bottom: 0.5em;
}

#pdfCatalogueArea a {
	padding-top: 0;
}
/* Formatierung für Reporting */
#pdfCatalogueArea a h2 {
	padding-bottom: 0 !important;
}


/* Formatierung für Reporting */
div.barChartPercent {
	width: 100%;
	background-color: #c0eadc;
	height: 32px;
	text-align: left;
	border: 1px solid #555555;
	border-radius:5px;
	overflow: hidden;
}

div.barChartPercent div:nth-child(1) {
	float:left;
	padding: 4px 1px 1px 10px;
	color: black;
}

/* das ist der von links kommende %-Balken */
div.barChartPercent div:nth-child(2) {
	margin-right:  1px;
	background-color: #7dc6ae;
	border: 1px solid #77bda6;
	border-right: 2px solid #eeeeee; /* Trennbalken zwischen den Bereichen */
	height:30px;
}

/* Formatierung für Reporting: das gestufte Balkendiagramm, horizontal */
div.stackedBarChart {
	height: 32px;
	border: 1px solid #555555;
	border-radius:5px;
	overflow: hidden;
}

span.formatStackedBarChartValueClass {
	display: inline-block;
	text-align: center;
	width: 100%;
	padding-top: 4px;
}

div.stackedBarChart div {
	float:left;
	color: black;
	height: 32px;

}


div.stackedBarChart div:nth-child(1), .stackedBarChart1 {
	background-color: Turquoise ;
}

div.stackedBarChart div:nth-child(2), .stackedBarChart2 {
	background-color: lightyellow ;
}

div.stackedBarChart div:nth-child(3), .stackedBarChart3 {
	background-color: SkyBlue;
}

div.stackedBarChart div:nth-child(4), .stackedBarChart4 {
	background-color: LightCoral;
}

div.stackedBarChart div:nth-child(5), .stackedBarChart5 {
	background-color: PaleGoldenRod;
}

.reportUtilImportant {
	background-color: red;
	color: white;
	font-weight: bold;
}

.productImageArea {

	margin: 0.5em;
	padding: 0.5em;
}



.ibanIcon, .validateIcon {
    float:  right;
    margin-top: -1.8em;
    margin-right: 5px;
}

.mobileWidget .patternMessage{
	float:  left;
	z-index: 100;
	color: red;
    font-size: small;
    position: absolute;
}

.mobileWidget.mobileUpload .mobile-upload-field {
	border: dashed 4px #cccccc;
	border-radius: 20px;
	max-width: 400px;
}

.mobileWidget.mobileUpload > form > div:nth-child(1) > img{
	max-height: 140px;
	max-width: 140px;
	margin: auto;
	padding-top: 1em;
	padding-bottom: 1em;
}

/* Bei unseren MobileCollapsibleWidget sollen die
Überschriften ohne Abstand zur Liste drunter angezeigt werden */ 
h3.collapsibleHeading{
	margin-bottom: 0!important;	
	padding-bottom: 0!important;
}

.mobileWidget.mobileUpload a.document-link img.photo, .mobileWidget.mobileUpload div.description {
	margin-left: auto;
	margin-right: auto;
	max-width: 95%;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 20px;
}

.mobileWidget.mobileUpload a.document-link img.photo {
	max-height: 150px;
}

.mobileWidgetFloatLeft {
	float:left;
}

img.iconInMobileCheckboxWidget {
	margin-bottom: -6px; /* wir müssen das leicht nach unten ziehen */
}


/* Belegung: < 75% grün, dann gelb und bei 100% rot */

#popupCompetenceActions span.TrainingRecommandationLabelArea {
	line-height: 0.7em;
	float: left; /* in einer Reihe mit dem img */
}

#popupCompetenceActions p.TrainingRecommandationLabelType {
	font-size: 0.7em;
	padding: 0 0 0.4em 0;
	margin: 0;
}


#popupCompetenceActions  p.TrainingRecommandationLabelTitle {
	padding: 0;
	margin: 0;
	white-space: normal;
}

.HighlightExpringCompetence {
	color: red;
	font-weight: bold;
}

.MobileDateTimePickerNowButton {
	margin-top: 2px;
}

/* Buchungsprozess Liste Mitarbeiter ------------------------------------------------------ */

/* die listview mit den gefundenen Mitarbeiter - wenn das zu lang wird dann rutzscht der Weiter-Button zu weit nach unten */
#EmployeeListAutocomplete {

	max-height: 20em; /* etwa 4 Mitarbeiter */
	overflow-y: auto;
}

.employeeListAutocompleteArea {
	padding: 1em;
	border-right: 1px solid #dddddd;
}
@media ( max-width :640px) {
	.employeeListAutocompleteArea {
		padding: 0.5em;
		border-right: none;
	}
}

/* damit die Eingaben der Meldezusätze nicht so eng aufeinander stehen; Select2 hat sowieso schon einen Abstand */
.TaggedValuesWidgetSection textarea, .TaggedValuesWidgetSection .ui-input-text, .TaggedValuesWidgetSection .ui-checkbox {
	margin-bottom: .5em !important;
}


/* #folderListAreaExplorer { */
/* 	margin: 0 auto; */

/* 	/* wir starten mit der Breite */ */
/* 	max-width: 420px; */
/* } */


.btn-folderCell {
	float: left;
	width: 410px;
}

.FolderCell {
	height: 370px;
	padding: 0px 0px 4px 0px ;
	margin: 10px 10px 10px 10px;
	position: relative;

	background: #e6e7e8;

    background-image: url("gifMobile/arrowRight.png");	/* Pfeil rechts wie bei Link-Button */
    background-position: right 10px center;
    background-repeat: no-repeat;

}

/* ohne Bild brauchen auch weniger höhe */
.FolderCell:hover {

	-moz-box-shadow: 0px 0px 12px #999999;
	-webkit-box-shadow: 0px 0px 12px #999999;
	box-shadow: 0px 0px 12px #999999;
}


/* ohne Bild brauchen auch weniger höhe */
.FolderCell.FolderCellNoImage {
	height: 175px;
}

/* ohne Bild soll der Produkt-zähler nicht im Text stehen */
.FolderCellNoImage .FolderDescription, .FolderCellNoImage h2 {
	padding-right: 30px !important;
}


.FolderCell .ui-li-count {
	background-color: white;
	right: 10px;
	top: 20px;
	z-index: 1000; /* damit die transition auf dem Untergrund die Zahl nicht ä */
}

.FolderCellInner {
	overflow: hidden;
	display: inline-block;
	width: 100%;
	height: 100%;

}

.FolderCell h2 {
	padding: 0 10px 0 10px;
	white-space: normal;
	display: inline-block;

}

.FolderImageWrapper {
	overflow: hidden;
	width: 100%;

}

.FolderTitle {
	color: #0b3378;
	font-weight: bold;
	font-size: 1.1em;
	padding: 4px 16px 4px 8px;

}

.FolderDescription {
	padding: 0 10px 0 10px;
}

.FolderBoxBackgroundImage {
    overflow: hidden;
}

/* die kleine Breite, z. B. iPhone */
@media ( max-width :680px) {

	/* die Überschrift für den PDF-Katalog stört bei Mobile eher */
	#pdfCatalogueArea > h2 {
		display: none;
}

/* 2-spaltige Darstllung */
	.btn-folderCell {
		width: 100%;
	}

	.FolderCell {
		margin: 4px;
		height: auto; 	/* so hoch wie nötig, weil das hier ja sowieso einspaltig ist */
		display: block;
	}

	/* am Handy sollen die Ordner im Bildungskatalog keinen besonderen Rand bekommen */
	.FolderCell.FolderCellImage {
		height: auto;;
	}

	.FolderCellImage .FolderImageWrapper {
		float: left;
		width: 125px; /* das Bild ist 175 breit, wird aber links und rechts um je 25px abgeschnitten */
		margin-right: 8px;
	}

	.FolderCellImage .FolderImageWrapper img {
		display: block;
		max-height: 100%;
		width: 175px;
		height: auto;
	    float: left;
		overflow: hidden;

		 margin: 0 -25px 0 -50px;
	}

	/* kein Effekt beim Bild - ist auch dem Smartphone sowiso nicht sichtbar */
	.FolderCellImage .FolderBoxBackgroundImage {
	    transition: none !important;
	    overflow: hidden;
	}

	.FolderCellImage .FolderBoxBackgroundImage:hover {
	    transition: none !important;
	}

	.FolderCellImage .FolderDescription {
		margin: 0;
		clear: both;
		padding:  4px 10px 0 10px;
	}

	.FolderCell.FolderCellNoImage {
		height: auto;
		min-height: 100px;
	}

}

/* 2-spaltige Darstllung */
/* @media ( min-width: 980px ) { */

/* 	#folderListAreaExplorer { */
/* 		max-width: 860px; */
/* 	} */
/* } */

/* /* 2-spaltige Darstllung */ */
/* @media ( min-width: 1400px ) { */

/* 	#folderListAreaExplorer { */
/* 		max-width: 1290px; */
/* 	} */
/* } */

.WidgetSettingsButton{
	margin-left: 5px!important;
}

.left-grid {
	float: left;
	padding-right: 0.5em;
	display: inline-block;
	vertical-align: top;
}

/* newsItemList.jsp --------------------------------------------------------------------------------------------------------------------------------- */
/* tagesschau.de angelehnt */

.newsItemList {
	display: block;
}

.newsItemMain {
	display: block;

	/* https://stackoverflow.com/questions/10101841/how-to-auto-adjust-parent-div-height-according-to-the-contents-in-child-div */
	overflow: hidden;
	padding-bottom: 10px;
	margin: 10px 10px 10px 0;
	padding: 20px;
	background: #efefef;
}

.newsItemImage {
	display: block;
	max-width:320px;
	max-height: 100%;
	width: 20%;
	height: auto;
    float: left;
	overflow: hidden;
}

.newsItemTextArea {
    float: left;
	overflow: hidden;
	width: 100%;
}

.newsItemTextAreaWithImage {
	padding-left: 10px;
	width: 75%;	/* wenn es ein Image gibt dann istr der Text nur 75% breit */
}

.newsItemTextArea p {
	color: black;
	margin: 0 !important;
}

.newsItemTextArea h2 {
	margin: 0 !important;
}

.newsItemLink {
    text-decoration: none;
}

#newsTicker .newsItemImage {
	width: 30%;	/* damit da Bild nicht zu winzug wird auf 30% gehen */
}

#newsTicker .newsItemTextAreaWithImage {
	width: 65%;
}

/* newsItem.jsp --------------------------------------------------------------------------------------------------------------------------------- */

.newsImage {
	width: 100%;
	height: 250px;
	background-position: center center;
  	background-repeat: no-repeat;
  	background-size: 100%;
}

.newsItemTeaser {
	font-weight: bold;
	padding-bottom: 10px;
}


/* rechts unten den Namen der jsp abdrucken -------------------------------------------------------------  */
.jspNameInfo {

	position: absolute;
	right: 6px;;
	bottom: 37px;
	font-size: 6pt;

	color: #dddddd;

    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    -o-user-select: text !important;
    user-select: text !important;
}

/* Teilnehmer beim Umbuchen ----------------------------------------------------------------------------- */
.eventRegisterEmployeeList {
	max-height: 20em;
	overflow-y: scroll;
}

.IsOutsideQuater {
	background-color: #e5eaee !important;
	font-weight: normal !important;
}


/* Prozent-Balken default */
div.gray 			{ background-color:#AAAAAA; height:28px; text-align:left; margin: auto;}
div.Progressbar		{ height:24px; text-align:left; padding-top: 1px; border: 1px solid #AAAAAA; }
div.Progressbar_25	{ background-color:#FF3300; }
div.Progressbar_50	{ background-color:#FF3300; }
div.Progressbar_100 { background-color:#2DFA00; text-align:center; }
div.Progressbar_75 	{ background-color:#ffee00; }



/* Prozent-Balken WBT-Fortschritt */
.wbtProgressbar div.Progressbar_25	{ background-color:#2DFA00; }
.wbtProgressbar div.Progressbar_50	{ background-color:#2DFA00; }
.wbtProgressbar div.Progressbar_100 { background-color:#FF3300; }
.wbtProgressbar div.gray 			{ background-color:#AAAAAA; }
.wbtProgressbar div.Progressbar_75 	{ background-color:#ffee00; }


.wbtProgressbar .Progressbar {
	color: white;
	text-shadow: none;
}

/* Prozent-Balken z.B. im DataProviderHotel - immer die gleiche Farbe */
.blueStyle div.Progressbar_25	{ background-color: #6F9FD8; color: white; font-weight: bold; }
.blueStyle div.Progressbar_50	{ background-color: #6F9FD8; color: white; font-weight: bold; }
.blueStyle div.Progressbar_100 	{ background-color: #6F9FD8; color: white; font-weight: bold; }
.blueStyle div.Progressbar_75 	{ background-color: #6F9FD8; color: white; font-weight: bold; }

/* Formatierung für Reporting */
div.blueStyle {
	width: 100%;
	background-color: #c0eadc;
	height: 24px;
	text-align: left;
	border: 1px solid #555555;
	border-radius:5px;
	overflow: hidden;
	margin: 0 !important;
}





/* im Bildungskatalog die Anzeige der Belegung der Veranstaltungen */
div.gray.embeddedEventTableBar 				{  height:21px; display: inline-block;  }
.embeddedEventTableBar div					{ height:17px; }
div.embeddedEventTableBar div.Progressbar_90 { background-color:#2DFA00; }
div.embeddedEventTableBar div.Progressbar_99 { background-color:#ffee00; }
div.embeddedEventTableBar div.Progressbar_100 { background-color:#FF3300; }




/* Produkt-Kachel der Suche/Explorer mit Veranstaltungsterminen ---------------------------------------------------------------------------------------------- */
.embeddedEventTable > table th {
	font-weight: bold;
	text-align: left;
}
.embeddedEventTable > table th, .embeddedEventTable > table td {
	padding: 0 2px 0 0 !important;
}


a.explorerTrainingProductListItem {
	padding-top: 2px;
}


/* das Explorer-Tab mit dem Ordnernamen nicht zu lang werden lassen */
#explorerTab {
	width: 400px;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* die kleine Breite, z. B. iPhone */
@media ( max-width :680px) {

	/* hier etwas fremd: die Liste der Such-Treffer */
	#searchResultArea {
		padding: 0;
	}

	/* das Explorer-Tab mit dem Ordnernamen nicht zu lang werden lassen, weil das ansonsten mit dem Suchergebnis zusammen zwei zeilig wird */
	#explorerTab {
		width: 100px;
	}

	a.explorerTrainingProductListItem {
		padding-top: 2px;
		padding-left: 0 !important;
	}
	a.explorerTrainingProductListItem > h2, a.explorerTrainingProductListItem >  .embeddedProductRating {
		padding-left: 3em;
	}

	a.explorerTrainingProductListItem >  .embeddedProductRating .UserRating {
		padding-left: 0;
	}

	.embeddedEventTable img {
		display: none;
	}
	
}

.TrainingProductTitleExplorerTitle {
	display: block; /* damit es einen Umbruch danach gibt */
	color: #0b3378;
	font-weight: bold;

}

.TrainingProductTitleExplorerID {
	font-size: 0.7em;
}




#popupDocumentEdit{
	max-width: 98%;
	width: 40em;
}

#popupDocumentEdit .popupDocumentEditPreviewImage{
	width: 200px; /* das ist eine gute Breite für die Preview-Bilder */
	border: 1px solid #aaaaaa;
	box-shadow: 4px 4px #efefef;
}

/* der Bereich um die Bild-Vorschau */
.popupDocumentEditPreviewImageArea {
	text-align: center;	
}

/* SSO-Login Anfang -------------------------------------------------------------------------------------------- */

#sso-area-container img[name="brandLogo"] {
	width: 70px;
	position: absolute;
	top: -30px;
	right: 0px;
}

/* Login Ende -------------------------------------------------------------------------------------------- */

.autorisationOpen td {
	font-weight: bold;
	color: red;
}

.autorisationFulfilled td {
	font-weight: bold;
	color: green;
}

/* Die Radio-Buttons mit der Beschreibung im p */
#inquiryFormListDiv label > p  {
	margin: 0 !important; /* sonst haben wir einen etwa 1em oberen und unteren Rand */
	padding: 0;
}

.mobileWidgetTinyMcePreviewDiv{
	background-color: #f7f8f9;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* vom Kunden angepasste Texte farblich hervorheben, in translateHelper.jpg */
.TranslateCustomized {	
	background-color: yellow;
}

/* PartnerChooser sollen erstmal über die komplette Länge gehen */
.partnerRoleChooser {
	width: 100%;
}


/* Gast-Buchung Hotel-Information --------------------------------------------------------------------------------------- */
table.hotelRegistrationPriceInfo td {
	
	padding: 4px 12px 4px 12px;
}

table.hotelRegistrationPriceInfo th {
	text-align: left; /* damit dan icht zentriert wird */	
	padding: 4px 12px 4px 12px;
	color: #0b3378;  /* wie h3 */
}

/* Preis-Tabelle zum Produkt --------------------------------------------------------------------------------------------- */
#priceArea td:nth-child(1) {
	min-width: 8em;
}	

#priceArea td:nth-child(2) {
	text-align: right;
}	


.eventHTMLDescription td {
	padding: 2px 8px 2px 0;
}


.TrainerRequestExternalComment td {
	color: #0b3378;
	font-size: 1.1em;
	padding-top: 10px;	
}

.TrainerRequestExternalComment td:nth-child(2) {

	padding-left: 24px;	
	background-repeat:no-repeat;
	background-position: 0px 14px;
	background-image: url('gif/information.png');
}


/* BBCode Editor CSS */
td.bbcode-table {
	min-width: 50px;
	border: 1px solid grey;
	padding-left: 3px;
    padding-right: 3px;
}

/* Siehe sceditor-custom.css - beides soll ähnlich aussehen */
.bbCodePreview ul {
	padding-left: 24px;
	list-style: square;
}

.bbCodePreview ol {
	padding-left: 24px;
}

.bbCodePreview li {
	padding-left: 18px;
	padding-bottom: 2px;
}
	
/* TOTP-Popup --------------------------------------------------------------------------------------- */



.DocumentListVCInfo {
	padding: 0.5em 1em 1em 1em !important; /* damit die Infos linksbündig mit den Angaben im darüberstehenden Link stehen */
}

.DocumentListVCInfo h2, .DocumentListVCInfo p, .DocumentListVCURLLink p {
	padding-left: 0 !important;		/* nicht nochmals links einrücken - sondet passt das nicht mehr linksbündig */
	margin-left: 0 !important;
}

/* fullcalendar 5.5 in ------------------------------- */
.fc .fc-event, .fc .fc-daygrid-event {
	color: black !important;
	border: 1px solid #444444;
	padding: 2px;
	font-size: 0.9em;
	overflow: hidden; /* damit ein Eintrag nicht aus der Box herauslappt */
}
.fc .fc-daygrid-dot-event {
	display: block;		/* wird seltsamerweise für die Monatsanzeige gebraucht */
}

.fc .fc-button-primary {
	color: black !important;
	background-color: #efefef !important;
}

.fc .fc-button-primary:hover {
	background-color: #dedede !important;		
}
/* im Smartphone kein "Heute", weil der Platz nicht reicht */
@media ( max-width :680px) {
	/* Header kleiner */
	.fc .fc-toolbar-title {
		font-size: 0.9em !important;
		text-align: center;
	}
}


/* RS, 21.03.2021: Burger-Menü nicht mit <h2> sondern mit <p class="MenuItemHeader"> - aber gleich wie h2 darstellen; Grund: für google gelten die Menüpunkte ansonsten als <h2> - obwohl man sie ja nicht sieht */
.ui-listview > li p.MenuItemHeader {
    font-size: 1em;
    font-weight: bold;
    display: block;
    margin: 0.2em 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;	   
}

	
 /* ToDos im Onboarding */
.onboardingOverview .toDoIsLate {
	
	background-image: url("gifMobile/deadline32.png");
	background-repeat: no-repeat;
	background-position: right 5px center;	
}
 
.onboardingOverview .todoHighlight {
	
	background-image: url("gifMobile/alert32.png");
	background-repeat: no-repeat;
	background-position: right 5px center;	
}


/* Onboarding ----------------------------------------------------------------------------------------------- */
/* von onBoardingOverview.jsp                                                                                 */


table.onboardingOverview {
    border-collapse: collapse; /*Keine Lücken zwischen Border*/
    width: 100%;
    table-layout: fixed;
    margin-top: 2em;
}

table.onboardingOverview > thead > tr > th {
    /* ich verstehe es nicht, aber ein absolut positioniertes Element bezieht sich irgendwie
    zum ersten Parent, der relative ist 
    https://www.freecodecamp.org/news/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd/
    */
    position: relative;
}

th.toggleTimeFrameHeader span.timespanText {
	display: block;
}

a.onboardingitem {
	margin: 4px;
	padding: 4px;
	color: black;
	/* z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). */
	position: relative;
	/* so erst jetzt können wir den z-index setzen */
	z-index: 100;
	/* bei sehr engen Bildschirmen dann eine y-Scrollbar */
	overflow-y: auto;
	z-index: 100;	
	text-shadow: none;
}

/* Klasse wird gesetzt im DP, wenn die Kompetenz nur durch WBTs vermittelt wird */
a.onboardingitem.WBTOnlyCompetence, #legendeTodoTrainingDigital {
	/* etwas helleres blau */
	background-color: PaleGreen !important;
	color: black !important;
}

a.onboardingitem.DefaultCompetence, #legendeTodoTraining {
	/* etwas helleres blau */
	background-color: LightCoral !important;
	color: black !important;
}


/* die Trennlinie zwischen den Spalten in der Tabelle*/
div.lineDivider {
	position: absolute;
	/* height wird nicht im CSS gesetzt, dies macht ein Skript, da wir im CSS die Höhe der Tabelle noch nicht wissen */
	width: 2px;
	background-color: #666666;
	top: 0;
}

/* Das Icon des Bearbeitungsstandes links im Button */
a.onboardingitem img {
	/* damit die Icons nicht unterschiedlich groß werden, teils waren diese 64 oder 24px */
	width: 24px;
	float: left;
	padding-top: 3px;	
}

/* Text-Abschnitt im Onborading-Item */
a.onboardingitem > span {
	float: left;
	padding-left: 4px;
	width: 80%;
}

/* der untere Text */
a.onboardingitem > span > p {
	padding: 0;
	margin: 0;
	font-size: 0.8em;
	color: #666666;
	text-align: left;
}

/* der obere Text als Titel */
a.onboardingitem > span > p.TrainingTitle, a.onboardingitem > span > p.ToDOTitle {
	font-size: 1em;
	color: black;
}

/* die Area über der Tabelle */
#topArea {
	padding: 20px;
	margin-bottom: 30px;
}

/* Einfärbung der ToDos je nachdem wer Zuständig ist */

/* ToDo Mitarbeiter */
a.onboardingitem.employeeSelf, #legendArea .employeeSelf {
	background-color : LightYellow !important;
}

/* ToDo Manager */
a.onboardingitem.responsibleRelative-20, #legendArea .responsibleRelative-20 {
	background-color: LightBlue !important;
}

/* Buchung */
a.onboardingitem.enrollitem {
	background-color: #bf0000 !important;
}

/* der Block in der Legende für die Farbe */
div.legendSquare {
	height: 32px;
	width: 32px;
	display: inline-block;
	margin-right: 10px;
}

/** Bilder in der Legende */
img.legendImg {
	width: 32px;
}

/* Trennlinie von den Headern zu den TDs */
.onboardingOverview th {
	border-bottom: 2px solid #666666;
}

/* der Hinweistext hat etws mehr Abstand zum Zeitstrahl */
#disclaimerContainer {
	margin-bottom: 60px;
}

/* Pflichttraining im Onboarding, gleiches Icon wie bei wichtigen ToDos */
.MandatoryTraining {
	background-image: url("gifMobile/alert32.png");
	background-repeat: no-repeat;
	background-position: right 5px center;	
	
}

/* siehe https://stackoverflow.com/questions/28832129/replace-image-src-location-using-css */
#legendeMandatory {
	background: url("gifMobile/alert32.png") left top no-repeat;
	padding-left: 32px;
	box-sizing:border-box;
	width: 32px; height: 32px;
}
#legendeDeadline {
	background: url("gifMobile/deadline32.png") left top no-repeat;
	padding-left: 32px;
	box-sizing:border-box;
	width: 32px; height: 32px;
}

#legendAreaPiktogramm > div > span, #legendArea > div > span {
	vertical-align: top; 
	padding-top: 6px;
	display: inline-block;
	padding-left: 8px;
}

/* damit bei vielen vom Manager gebuchten Tln auch eine Scrollbar angezeigt wird - man sieht das sonst nicht alle ausgewählten Tln */
#selectedParticipantsList {
	max-height: 450px;
	overflow-y: scroll;
}

/* Zahleneingabe - speziell Teilnehmergebühr */
.InputNumber {
	text-align: right !important;
	font-family: monospace !important;
	width: 7rem;
}

textarea.mobileUploadDescription {
	width: 100%; /* Beschreibung in der Fläche des hochgeladenen Dokuments über die ganze Breite */
}

/* TOTP-Popup ----------------------------------------------------------------------------------- */
.logonMFAEnterToken {
	margin-top: 1rem; /* wir haben genügend platz, so sieht das besser aus */
}

.logonMFAStep2 img, .logonMFAEnterToken img {
	margin-bottom: -20px; /* damit das mittig mit dem erklärenden Text wird */
}

ul.moduleEnrolls > li > a.subscription-link:hover {
	background-color: #d8e6f1;
}

/* dicke Linie um fehlende Leseberechtigung anzuzeigen */
.noAccessPlaceholder {
	height: 20px;
	border-radius: 20px;
	background-color: #aaaaaa; 
	display: inline-block;
}

/* Smileys, die im eFeedback in der Funktion replaceEmoticons ersetzt werden */
img.emoticonsReplace {
	width: 18px;
	padding: 1px;
	margin-top: -3px; /* wir müssen etwas nach oben ziehen, damit das Icon auf gleicher Höhe wie der Text steht */
}

/* Gastbuchungsprozess, Fertig-Seite, Liste der Tln ohne Bullets; wird über Serienduckvariable ((htmlParticipantList)) gesetzt */
ul.GuestBookingParticipantList {
	list-style-type: none;
	padding: 0; 
	margin: 0;
}

table.registerGuestPriceTable span.PriceText {

    font-size: 1.1em;
    margin-bottom: 0.2em;
    font-weight: 500;
}

/* Das Step-Control hat ansonsten 30px unteren Rand */
#progressbar {
    margin-bottom: 4px !important;
}

#progressbar p {
	font-size: 1.4em; /* wie h2, sonst ist das nur 12px uns zu unscheinbar - ist ja hier die Seitenüberschrift */
}

#progressbar li.active  p {
	font-weight: bold;
}

/* die kleine Breite, z. B. iPhone */
@media ( max-width :680px) {
	
	#progressbar p {
		font-size: 11px; /* am Handy ist halt wenig Platz */
	}	
	#progressbar i {
		font-size: 2em;
	}	
}

.HTMLPriceInfoValue {
	max-width: 16em; /* damit der Preis-Betrag nicht zu weit rechts steht */
}

/* Beim Aufklappen der Veranstaltungen beim Produkt mit der tabellenartigen Detailanzeige */
.eventDetailGrid {
	display: grid;
	grid-template-columns: max-content auto;
	padding-right: 4px;
}

.eventDetailGrid div {
	padding-right: 1em;
}

.EventDescriptionModuleTable {
	display: grid;
	grid-template-columns: max-content auto;
	padding-right: 4px;
}

.moduleHeader, .hotelHeader, .taggedValueHeader {
	margin-top: 1em; /* etwas Abstand damit ein optisch sichtbarerer Trenner entsteht */
}

/* eventParticipant.jsp */
.setAttendanceButton i:not(.fa-circle-question) {
	margin-right: 1em; /* Abstand zwischen Icon und Text außer wenn mit fa-circle-question gar kein Text kommt */
}

/* employeeResourceCalendar ------------------------------------------------------------------------------------------------------------------------ */
#resourceCalendar .fc-widget-header, #resourceCalendar .fc-widget-content  {

	border-bottom: 1px solid black;
}

#resourceCalendar .typeEvent {

	border: 2px dashed black;
	padding: 4px !important;
}

/* Zusammengefasst die css für die fullcalendar (Raumübersicht, Trainingplanner, Belegungsanzeige (CalendarPartnerView) ---------------------------- */

#resourceCalendar #fc-headerTableWeeks {
	table-layout:fixed;
}

#resourceCalendar .fc-event a {
	font-weight: bold;
}

#resourceCalendar .fc-event {
	cursor: pointer;
}

#resourceCalendar.fc td.fc-resourceName, #resourceCalendar.fc th.fc-resourceName {
	padding: 2px;
	border-bottom: 2px solid #aaaaaa;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	background-color: #efefef;
	vertical-align: top;
	width: 150px !important;
	white-space: nowrap;
	overflow: hidden;
}

#resourceCalendar.fc td.fc-weekend-column {
	background-color: #e6edf7; /* das Blau aus Outlook */
}

/* die Zeile mit der MonatsÜberschrift und den View-Buttons */
#resourceCalendar .fc-header td {
	background-color: #eaeaea;
}

#resourceCalendar .headerWeekCell {
	text-align: center;
}

#resourceCalendar .fc-headerCellDay {
	text-align: center;
}

#resourceCalendar .fc-holiday {
	background-color: #bbbbdd;
}

/* needed for modifying fullcalendar.css file */
#resourceCalendar .fc-view {
	overflow-y: auto;
}

/* die Zeile mit den Monat/Woche/Tag-Buttons */
#resourceCalendar .fc-header td {
	background-color: #ffffff;
}
/* Ende employeeResourceCalendar ------------------------------------------------------------------------------------------------------------------- */

/* Katalog GetHTMLPriceInfo ------------------------------------------------------------------------------ */
.PriceListTable {
	display: grid;
	grid-template-columns: max-content auto;
}
.PriceListTable > div {
	padding-right: 1em;
}
.PriceListTable .priceCol {
	text-align: right;	/* Preise rechtsbündig */
}

.PriceListTable .priceInfoCol {
	max-width: 22em; /* etwas willkürlich und kann natürlich ggf. überschrieben werden. Aber ansonsten wird der Text nicht umgebrochen */
}