@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;
	}
}

.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;
}

@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.5em; /* der jQM default ist hier 1em, was zu breit ist */
}

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

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

.ui-bar, .ui-body {
    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-content, .ui-tabs-panel {

/*		background: #999999; */
}


.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;
}



.selectAccount ul li {
	font-weight: normal;
}

.selectAccount ul {
	list-style-image: url('gifMobile/checkbox12.png');
}

.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.5em;
    font-weight: 500;
}

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


h3 {
	font-size: 1.3em;
	margin-bottom: 0.2em;
    font-weight: 500;
}

h4 {
	font-size: 1.3em;
	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;
}

/* Überschrift mit icon über alle Seiten, die vom menü/Home aus aufgerufen werden */
.pageHeader {

}

.pageHeader img {
	margin-bottom: -9px;
	padding-left: .1em;
	padding-right: 1em;
}


.partnerInactive {
	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 */
}

.searchHeaderInput {
	width: 12em !important;
	font-size: 16px !important;
	padding-left: 12px !important;
	margin-top: -2px !important;
	height: 22px !important;
}

.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;
}

/* 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-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-largeMedia80 {
	width: 80% !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.5em;
}


.marginTopLargeMedia1Dot5em {
	margin-top: 1.5em;
}

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

	body {
		font-size: 1em;
	}

	.ui-block-largeMedia80,
	.ui-block-largeMedia50, .ui-block-largeMedia100,
	.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;
	}

	.hideSmallMedia {
		display: none !important;
	}

	.hideLargeMedia {
		display: block !important;
	}

	/* die Inhaltsseiten z.B. mein Training oder meine WBT */
	.contentArea {
		padding: 0.3em !important;
	}
	.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-block-a, .ui-grid-b > .ui-block-a {
		padding-right: 0px;
	}
	.ui-grid-a > .ui-block-b, .ui-grid-b > .ui-block-c {
		padding-left: 0px;
	}

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

	/* Überschrift mit icon über alle Seiten, die vom menü/Home aus aufgerufen werden */
	.pageHeader {

	}

	.pageHeader img {
		margin-left: -2px;
		margin-bottom: -9px;
		padding-left: .2em;
		padding-right: .2em;	/* nur ein kleiner Abstand zwischen dem Icon und dem Text */
	}


	#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;
	}

}

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


.dataDetails {
}

.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, .contentDiv ul:not([data-role=listview]), .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: 4px;
    padding-left: 16px;
    font-weight: normal;
}

.bulletLevel1, .contentDiv ul:not([data-role=listview]) li, .mobileWidgetTinyMcePreviewDiv ul li {
    list-style-image: url(gif/bullet2.gif);
    padding-bottom: 2px;
}

.bulletLevel2,  .contentDiv ul li ul li  {
    list-style-image: url(gif/bullet3.gif);
    padding-bottom: 2px;
}
/* --- 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-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::square-o {
	background-image: url(gifMobile/square-o-16.svg);
}


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

/* 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);
}

.errorHighlight {
	border: red solid 2px !important;
}

/* Mobile-Widgets Pflichtfelder leicht gelber Hintergrund, aber nicht bei disable ------------------------------------ */
input:required:not([disabled]), textarea:required:not([disabled]), .requiredInput:not(.select2-container-disabled ) {
  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 --------------------------------------------------------------------------------------------- */


.competenceSquareWidgetTable {
	border-collapse: collapse;
	margin: auto;
}

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;
}

.competenceSquareWidgetNoTarget {
	background-color: white;
}

.competenceSquareWidgetTarget {
	background-color: #aaaaaa;
}

.setCompetenceSquareValueReached {
	background-color: #00ff00;
	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;
}

#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 !important;
}

/* QPMatrix ------------------------------------------------------------------------------------------------------------------------------------------ */


#inputCompetenceFilterQPMatrixFrame {
	margin-top: 60px;
	margin-left: 12px;
}

.btn-qpMatrix:hover {
	/* kleiner Schatten damit man den hover besser sieht */
	box-shadow: 0px 0px 12px #999999;
}

.KompetenzMatrix {
	border-collapse: collapse;
}

.qpMatrix_tpHeaderTrainingScheduleChild {
	background-color: #dcffdc !important;
	text-shadow: none !important;
}

.qpMatrix_tpHeader {
	white-space: nowrap;

	-webkit-transform-origin: 148px 117px;
	-moz-transform-origin: 148px 117px;
	-o-transform-origin: 148px 117px;
	-ms-transform-origin: 148px 117px;
	transform-origin: 148px 117px;

	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}

.KompetenzMatrix th:not(.qpMatrix_col1Fixed):not(.qpMatrix_col2Fixed) {
	white-space: nowrap;
	border: 1px solid black;
	overflow: hidden;
}


.KompetenzMatrix td {
	vertical-align: middle !important;
}

.KompetenzMatrix td:not(.qpMatrix_col1Fixed):not(.qpMatrix_col2Fixed) {
	border: 1px solid #888888;
	height: 28px;
}

#KompetenzMatrixParentDiv {
	overflow-x:scroll;
	overflow-y:visible;

	margin-left:280px;
	border-left: 1px solid #888888;
	left: 0;
}

.qpMatrix_header_duration {
	height: 30px;
}

.qpMatrix_tpHeaderText {
	vertical-align: bottom;
	height: 250px;
	width: 70px;
	padding-bottom: 20px /* fürs iPad nötig */;
}

.KompetenzMatrix td.QPMatrixCell {
	padding: 2px 0 0 0;
	margin: 0;
}

.KompetenzMatrix td.QPMatrixCell a {
	padding: 0;
	margin: 0;
	width: 70px;
	text-align: center;
	display: inline-block;
	height: 25px;
}

.KompetenzMatrix td.QPMatrixCell a div {
	font-size: 10px;
	text-shadow: none !important;
	text-align: center;
	white-space: normal;
	height: 25px;
	padding: 0;
	margin: 0;
    vertical-align: middle;
    overflow: hidden;
    width: 68px;
    display: table-cell;
}


/* die Zelle macht die vertikale Zentrierung */
.QPMatrixCellNoButton  {
	overflow: hidden;
	height: 30px;
	padding: 1px;
  	vertical-align: middle;
}

/* das div in der Zelle macht die horizontale Zentrierung -  das geht wohl nicht schöner */
.QPMatrixCellNoButton > div {
	overflow: hidden;
	width: 80px; /* die Buttons haben 60 + 2 x 10 padding */
  	text-align: center;
}

td.qpMatrix_keinBedarf,
td.qpMatrix_geplant,
td.qpMatrix_teilgenommen,
td.qpMatrix_offen,
td.qpMatrix_terminiert,
td.qpMatrix_nichtTerminiert,
td.qpMatrix_manuell,
td.qpMatrix_bedarfInakiv {
	font-size: 10px;
	text-shadow: none !important;
	width: 70px;
	text-align: center;
}

td.qpMatrix_keinBedarf a,
td.qpMatrix_keinBedarf,
td.qpMatrix_geplant a,
td.qpMatrix_geplant,
td.qpMatrix_offen a,
td.qpMatrix_offen,
td.qpMatrix_terminiert a,
td.qpMatrix_nichtTerminiert a,
td.qpMatrix_bedarfInakiv a {
	color: black;
}

/* dunkle Zellen mit weißer Schrift */
td.qpMatrix_teilgenommen,
td.qpMatrix_teilgenommen a,
td.qpMatrix_manuell a,
td.qpMatrix_manuell {
	color: white;
}

.qpMatrix_summe {
	text-align: right !important;
	padding-right: 6px;
}

.qpMatrix_col1FixedSum, .qpMatrix_col2FixedSum {
	text-align: right !important;
	padding-top: 3px !important;
}

.qpMatrix_col1Fixed {
    position:absolute;
    width:168px;
    left:0;
	border-bottom: 1px solid #888888;
	height: 30px;
}

.qpMatrix_col2Fixed {
    position:absolute;
    width:108px;
    left:168px;	/* das padding einrechnen */
	border-bottom: 1px solid #888888;
	height: 30px;
}

.qpMatrix_colFixedColspan2 {
	position:absolute;
	width:260px;
	left:0px;
	border: none !important;
}

td.qpMatrix_colName div, th.qpMatrix_colName div {
	white-space: nowrap;
	overflow: hidden;
	width: 160px !important;
	padding: 4px;

}

td.qpMatrix_colFunktion div, th.qpMatrix_colFunktion div {
	white-space: nowrap;
	overflow: hidden;
	width: 100px !important;
	padding: 4px;

}

.qpMatrix_col1Header, .qpMatrix_col2Header {
	padding-top: 242px;
}

.qpMatrix_tpHeaderCompetenceField {
	white-space: normal !important;
	color: #cf0000;
	background-color: #efefef;
	vertival-align: middle;
	padding: 0.6em 1em 0.2em 1em;
}

.qpMatrix_keinBedarf {
	background-color: white;
}

.qpMatrix_offen {
	background-color: red !important;
}

/* Vormerkung ohne Termn */
.qpMatrix_nichtTerminiert {
	background-color: orange !important;
}

.qpMatrix_terminiert {
	background-color: orange !important;
}

.qpMatrix_teilgenommen {
	background-color: green;
}

.qpMatrix_geplant {
	background-color: yellow;
}

.qpMatrix_manuell {
	background-color: green;
}

.qpMatrix_bedarfInakiv {
	background-color: white !important;
}

.qpMatrix_nichtAusQualiweg {
	background-color: white !important;
}

.qpMatrix_toggleCompetenceField {
	position: absolute;
	right: -24px;
	bottom: -10px;
}

.qpMatrix_toggleCompetenceShow {
	display: block;
	margin: 0;
}

.qpMatrix_toggleCompetenceShowHeader {
	text-align: center;
	border-top: none;
	border-bottom: none;
}

.qpMatrix_toggleCompetenceDummyTD {
	background-color: #efefef;
	border-top: none !important;
	border-bottom: none !important;
}

.qpMatrix_toggleCompetenceShowHeaderTextOuter {
	white-space: nowrap;

	-webkit-transform-origin: 142px 135px;
	-moz-transform-origin: 142px 135px;
	-o-transform-origin: 142px 135px;
	-ms-transform-origin: 142px 135px;
	transform-origin: 142px 140px;

	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}

.qpMatrix_toggleCompetenceShowHeaderTextInner {
	vertical-align: bottom;
	height: 250px;
	width: 30px;
	padding-bottom: 20px /* fürs iPad nötig */;
}

.btn-competenceMatrixCompetenceWidget {
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	padding: 6px;
	margin: auto;
	border: 1px solid #999999;
	border-radius: 3px;
	text-align: center;
	padding: 3px;
}

.btn-qpMatrix, .btn-competenceMatrix {
	display: table-cell;
	width: 100px;
	height: 30px;
	max-height: 30px;
	overflow: hidden; /* damit mnicht ein zu langer Text das Layout verhagelt */
	vertical-align: middle;
	cursor: pointer;
	border: 1px dotted #999999;
	text-decoration: none;
}


/* Ende QPMatrix ------------------------------------------------------------------------------------------------------------------------------------------ */

/* Kompetenzmatrix (competenceMatrix.jsp) ----------------------------------------------------------------------------------------------------------------- */

#CompetenceMatrix {
	border-collapse: collapse;
  display: block;
  overflow-x: auto;
  width: 2000px;		/* wir starten mal recht breit, das wird dan per js wieder kleiner gemacht */
}

#CompetenceMatrix > tbody > tr > td, #CompetenceMatrix > thead > tr > th {
	border: 1px solid black;
	padding: 0.4em;
	vertical-align: middle;
}

#CompetenceMatrix > thead {
  display: block;
}

#CompetenceMatrix > tbody {

  /* Scrollen des Body */

  display: block;
  overflow-y: auto;
	height: 500px;

}

/* erste Zeile mit den gedrehten Namen */
#CompetenceMatrix > thead > tr.CompetenceMatrix_NameRow > th:nth-child(1) {
	height: 200px;
}

.CompetenceMatrix_NameCellInner {
    white-space: nowrap;
    transform-origin: 68px 50px;
    transform: rotate(270deg);
}

.CompetenceMatrix_NameCellFrame {
}

.CompetenceMatrix_CompetenceName {
	font-weight: bold;
}

.CompetenceMatrixTrainingProductHide {
	display: none;
}

.hideShowTrainingProductButton {
	margin-right: 0.5em;
}

.CompetenceMatrix_col2, .CompetenceMatrix_Required {
	display: none; /* Nutzen unklar, Tel. SG, RS, 08.01.2019 erstmal abgeklemmt */
}


.CompetenceMatrix_colAvg {
	width: 60px;
}

/* der Trenner mit dem KOmpetenzfeld in einer eigenen Zeile */
.CompetenceMatrix_CompetenceFieldSeparator {
	background-color: steelblue;
	color: white;
}

tr.CompetenceMatrix_CompetenceRow > td {
	background-color: AliceBlue;
}

td.CompetenceMatrix_TrainingProduct {
	padding: 2px !important;
	background-color: white;
}


/* die Links der Produkte in Listview-Optik ----------------------------------------------------------------------------------- */
td.CompetenceMatrix_TrainingProduct > ul.ui-listview {
	margin: 0.1em;

}
.CompetenceMatrix_TrainingProduct ul.ui-listview > li > a {
	padding: 0 2em 0 1em;
	line-height: 1;

}

td.CompetenceMatrix_col1 > a {

}




.CompetenceMatrix_TrainingProduct ul.ui-listview > li > a > img {
	top: 4px !important;
}

.CompetenceMatrix_TrainingProduct ul.ui-listview > li > a > h3, .CompetenceMatrixTrainingProduct ul.ui-listview > li > a > p {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	line-height: 1.1;
}



#CompetenceMatrix > thead > tr > th.CompetenceMatrix_col1,
#CompetenceMatrix > tbody > tr > td.CompetenceMatrix_col1 {
	width:  380px;
	max-width: 380px;
	overflow: hidden;
 	white-space: nowrap;
	text-align: left;
}

#CompetenceMatrix > thead > tr > th.CompetenceMatrix_col2,
#CompetenceMatrix > tbody > tr > td.CompetenceMatrix_col2 {
	width: 40px;
	max-width: 40px;
	overflow: hidden;
 	white-space: nowrap;
}

#CompetenceMatrix > thead > tr > th.CompetenceMatrix_colAvg,
#CompetenceMatrix > tbody > tr > td.CompetenceMatrix_colAvg {
	width: 50px;
	max-width: 50px;
	overflow: hidden;
}

#CompetenceMatrix > thead > tr > th.CompetenceMatrix_NameCell,
#CompetenceMatrix > thead > tr > th.competenceMatrix_partnerAverage,
#CompetenceMatrix > tbody > tr > td.CompetenceMatrix_Cell,
#CompetenceMatrix > tbody > tr > td.CompetenceMatrix_trainingProductAction
 {
	width: 90px;
	max-width: 90px;
	overflow: hidden;
 	white-space: nowrap;
 	text-align: center;
}

#CompetenceMatrix > thead > tr > th.CompetenceMatrix_NameCell {
 	text-align: left;
}


/* Ende Kompetenzmatrix (competenceMatrix.jsp) ------------------------------------------------------------------------------------------------------------ */

/* Anzeigebox innerhalb einer Kachel */
.qpMatrixSummary {
	float: left;
	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;
}

.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;
}

.FeedbackSheet h2 {

}

.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 {
	padding: 0.5em;
	text-align: center;
	border: 2px solid #999999;
	min-width: 6em;
}


.EvaluatorQuestionSelectionContainer table tr:nth-child(1) td, .EvaluatorQuestionScaleContainer table tr:nth-child(1) td, .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 :640px) {

	.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;
	}

}
/* -- 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 > 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 */
.inlinetabs .ui-navbar {
}

.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 --------------------------------------------------------------------------------------------------------- */

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

.dataTables_filter {
	width: 160px;
	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;
}

.ui-dialog {
	background-color: #fafafa !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) {
	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 */
}


/* in der Kacheldarstellung ist einfach für diese Teile kein Platz */
.tileLayout .embeddedEventTable, .tileLayout .embeddedProductShortDescription {
	display: none;
}

table.embeddedEventTable td {
	text-align: right;
}

.embeddedProductShortDescription p {
	white-space: normal !important;
}


#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;
	}
}

.ui-listview > li table {
    margin: 0.5em 10px;
	font-size: .75em;
	font-weight: normal;
	display: block;
}

.ui-listview > li table td:not(.eventTableAfterImg) {
	padding: 2px 2px 2px 6px;
}

.ui-listview > li table tbody tr:not(:first-child) {
	border-top: 1px solid #aaaaaa;
}

.ui-listview > li table td img {
	padding-right: 6px;
	padding-left: 0px;
	margin-bottom: -3px;
}

.ui-listview > .ui-li-static {
    padding: .1em .1em;
}


.explorer.tileLayout .ui-listview  .ui-li-icon {
    top: 0.25em !important; /* RS, 17.12.2016: leicht nach oben angehoben */
}


#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;
}

.custom-corners .ui-body {
  border-top-width: 0;
  -webkit-border-bottom-left-radius: inherit;
  border-bottom-left-radius: inherit;
  -webkit-border-bottom-right-radius: inherit;
  border-bottom-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 ---------------------------------------------------------------------------------------------------- */

.UserRating {
	height: 30px; /* damit die Anzahl-Box nicht unten abgeschnitten wird */
	margin-left: 10px;
}

.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;
}

#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 {
	/* wenn das expanden in einer Listview genutzt wird, dann haben die Buttons sondz unpassende Einstellungen */
	min-height: 0 !important;
	padding-left: 0 !important;
}

.expandArea {
	padding-bottom: 4px;
}

/* 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));
}

/* 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;
}

.rouleTextError {
	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                                                    */
/* *************************************************************************************************** */


/* *************************************************************************************************** */
/* Carousel z.B. im webSite.jsp                                                                        */
/* *************************************************************************************************** */
.ContentSlider table {
	margin: 40px;
}

.ContentSlider table td {
	vertical-align: top;
	display: none;
	overflow: hidden;
	background-size: contain;
}

.ContentSlider table td:last-child {
	width: 45%;


}
.ContentSlider table td:first-child {

	width: 55%;
	background-repeat: no-repeat;
	background-position: 50% 30%;
}

.ContentSlider table td:last-child p {
	padding-left: 30px;
	font-size: 2vw;
}

.ContentSlider table td:last-child h1 {
	padding-left: 30px;
	font-size: 3vw;
}

.ContentSlider button.slick-prev {
	left: 20px;
}

.ContentSlider button.slick-next {
	right: 20px;
}

.ContentSlider button.slick-prev, .ContentSlider button.slick-next  {

	position: absolute;
	top: 40%;
	background-color: #f6f6f6 /*{a-bup-background-color}*/;
    border-color: #ddd;
    color: #333;

	-webkit-border-radius: 1em;
	z-index: 100;
}

ul.slick-dots {
	position: absolute;
	left: 40%;
	bottom: -10px;
	display: block;
    margin-left:auto;
	margin-right:auto;
}

.slick-dots li {
	list-style-type: none;
	float: left;
}

.slick-dots li button {
	margin: 2px;
	border: 2px solid #aaaaaa;
	padding: 4px 6px 4px 6px;
	z-index: 100;

}

.slick-dots .slick-active button {
	border: 2px solid #666666 !important;
}

/* *************************************************************************************************** */
/* Ende Carousel z.B. im webSite.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;
}

.registerAlternativeProductHeader {
	background-color: white !important;
}


.taggedValueArea .ui-btn-inline {
	margin-left: 0;
}

/* *************************************************************************************************** */
/* enroll.jsp                                                                                          */
/* *************************************************************************************************** */
.enrollDataTable td {
	font-weight: 400; /* sonst ist das so blass */
}


/* *************************************************************************************************** */
/* 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                                                            */
/* *************************************************************************************************** */

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

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

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

.documentTable td p {

	padding: 0 !important;
	margin:0 !important;
	white-space: normal;
	font-size: 1em;
}

/* 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;
	}

	.documentTable {
		margin: 0 !important;
	}

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

	.documentTable p {
		margin: 0 !important;
	}

	.documentTable td h3 {
		margin: 0 !important;
	}
}


/* *************************************************************************************************** */
/* Inquiry                                                                                             */
/* *************************************************************************************************** */
/* den ganzen Fragebogen umrahmen */
.inquiryForm {
	margin: 0.5em;
	padding: 1em;
	border: 2px solid #888888;
	box-shadow: 4px 4px 4px #999999;
	background-color: white;
}

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

/* Matrix-Frage Zelle */
.matrixTable-cell {
	padding-left: 0px !important;
	padding-right: 0px !important;
	min-height: 80px !important;
	min-width: 50px !important;
}

.ui-btn.ui-checkbox-on.ui-checkbox-on:after, .ui-btn.ui-checkbox-off.ui-checkbox-off:after, .ui-btn.ui-radio-on:after, .ui-btn.ui-radio-off:after{
	width: 22px !important;
	height: 22px !important;
	border-width: 0px !important;
	border-style: none !important;
}

label.ui-btn.ui-checkbox-on.ui-checkbox-on:after, .ui-btn.ui-radio-on:after{
	background-image: url(gifMobile/checked.png) !important;
	background-color: white !important;
}

.contentArea_inquiryParticipant{
	max-width: 1200px;
}

.ui-btn-icon-bottom:after {
	margin-left: -11px !important;
}

.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;
}

.matrixTable .table h3 {
	padding-top: 1.5em !important;
	padding-left: 1em;
	font-size: 1em;
}

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


@media ( max-width :680px) {

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

}

/* 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;
}

/* --- Select2 Mobile Patches ----------------------------------------------------------------------------- */
/* großzügigere Anzeige im zugeklappten Zustand - größe wie ein Button  */
.select2-container .select2-choice {
	padding: 9px 6px 8px 6px;
	background-image: none;
	background-color: white;
}

.select2-container {
	margin-bottom: 0.5em;
}

.smartSelection.select2-container .select2-choice {
	padding: 5px 6px 4px 6px;
}


/* großzügigere Anzeige der aufgeklappten Zeilen */
.select2-results .select2-result-label {
	padding: 9px 6px 8px 6px;

}

/* so hoch wie ein Text-Input */
.select2-container .select2-choice .select2-arrow b {
    background: url('gifMobile/arrowDown.png') no-repeat 0 6px !important;
}
.select2-container .select2-choice .select2-arrow {
	width: 22px;

	/* dem Pfeil etwas mehr Rahmen geben */
	padding: 6px;
}

/* so hoch wie ein Text-Input */
.smartSelection.select2-container .select2-choice .select2-arrow {
	width: 22px;
	padding: 1px 6px 2px 6px;
}


.select2-result-label {
	text-shadow: none !important;
}

.select2-results {
	max-height: 30em;
}

/* die Box für die mehrfache Auswahl */
.select2-choices {
	min-height: 2.2em;	 /* wie jQM bei den Inputs */
	border-radius: .6em; /* wie jQM bei den Inputs */

	padding-right: 4px !important;
}

/* die einzelne der mehrfachen Auswahlen */
.select2-search-choice {
	line-height: inherit;

}

/* damit der Placeholder ganz angezeogt wird */
/* damit der Placeholder ganz angezeogt wird */
.select2-search-field {
	width: 100%;
}

.select2-container-multi  .select2-search-choice-close, .select2-container-multi  .select2-search-choice-close:hover {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    position: absolute !important;
    right: 0px !important;
    border: 1px solid #999999 !important;
    top: 8px !important;
    font-size: 1px !important; /* RS, 05.11.2017: verstehe ich nicht : wieso 1px? */
    outline: none !important;
    background: url('gifMobile/select2RemoveMultiple.png') right top no-repeat !important;
    z-index: 1000 !important;
	margin-left: 4px;
	margin-right: 4px;
}

.select2-search-choice {
	padding: 5px 8px 5px 26px;
}

.select2-search-choice div {
	padding: 7px 4px 7px 18px
}

.comboboxFormatSelect2 {
	width: 100%;
}

/* HTMLTable2 speziell Responsive */
.filterResponsive input[type=search] {
	width: 4em;
}

/* Da das Select2 ein Textinput hat, muss desen Border ausgeblendet werden.
Ansonsten haben wir eine komische Linie unter dem Select2 */
.select2-container > .ui-input-text{
	border: none;
}


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


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

#requestPasswordArea {
	display: none;
}

#captchaNewAccount {
	width: 220px;
}

#captchaNewAccount.showWaitMessage {
	width: 20px;
	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;
}

/* 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; siehe externalProviderRegister.jsp  */
.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;
}

.productImage {
	float: left;
	box-shadow: 0 2px 5px 1px rgba(0,0,0,.2);
	border-radius: 3px;
	border: none;
	margin: 0.5em;

}

#popupImageDialog {

}

.select2Icon {
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: -2px;
}

.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 > form > div:nth-child(1){
/* 	padding: 10px 10px 10px 10px; */
	border: dashed 4px #cccccc;
	border-radius: 20px;
/* 	max-width: 50%; */
/* 	margin-right: 2em; */
}

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


.mobileWidget.mobileUpload > form > div:nth-child(2){
/*     margin: 0 auto !important; */
/*     width: 50%; */
/*     padding-left: 2em; */
}
.mobileWidget.mobileUpload > form {
	margin-bottom: 10px;
}

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

.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;
}


.competenceText {

}


.competenceProgressBarFrame {
	border: 1px solid #999999;
	box-shadow: 2px 2px #999999;
	background: white;

}

.competenceProgressBarCurrent {
	background: #00ff00;
	margin: 2px;
	font-size: .7em;
	color: black;
}

.competenceProgressBarRequired {
	background: #999999;
	margin: 2px;
	font-size: .7em;
	color: black;
}

.competenceProgressBarText {
	font-size: .7em;
	font-color: #777777;
}

.competenceProgressBar {
	/* sonst kommt das von btn-ui und ist etwas hoch */
	padding-bottom: .2em !important;
}

.competenceProgressBarCurrentBox .competenceProgressBarText {
	margin-bottom: 10px;
}

#s2id_selectionCurrent .select2-choice {
	background: #00ff00;

}

#s2id_selectionTarget .select2-choice {
	background: #999999;

}

/* Kompetenzliste --------------------------------------------------------------------------------------------------- */


#explorer {
}


#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; }


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

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



/* Prozent-Balken beim Lernfortschritt */
.wbtProgressbar > div.Progressbar_100 { background-color:#6F9FD8; height:17px; text-align:left; padding: 0 0 6px 0; border: 1px solid #AAAAAA; }
div.gray.wbtProgressbar { height:24px; display: inline-block; margin-left: 10px; border-radius: 3px; padding: 3px;}



/* 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;
}

.explorer > ul > li > a > h2 , #productListAreaExplorer > ul > li > a > h2 {
	padding-top: 0;
}

/* Examen ----------------------------------------------------------------------------------------------- */
table.ExamParticipantSheetFolderOverviewTable {

	border-collapse: collapse;
	display: inline-block;
}

table.ExamParticipantSheetFolderOverviewTable th, table.ExamParticipantSheetFolderOverviewTable td {
	border: 2px solid #cdcdcd;
	padding: 0.1em 0.5em 0.1em 0.5em;
	vertical-align: middle;
	min-height: 2.5em;
}

/* Fragen-Kapitel Name */
table.ExamParticipantSheetFolderOverviewTable th:nth-child(1),
table.ExamParticipantSheetFolderOverviewTable td:nth-child(1)  {
	width: 2em;
	text-align: center;

}

/* Fragen-Kapitel Name */
table.ExamParticipantSheetFolderOverviewTable th:nth-child(2),
table.ExamParticipantSheetFolderOverviewTable td:nth-child(2)  {
	width: 15em;
	text-align: left;
}

/* Anzahl Fragen */
table.ExamParticipantSheetFolderOverviewTable th:nth-child(3),
table.ExamParticipantSheetFolderOverviewTable td:nth-child(3)  {
	width: 5em;
	text-align: right;
}

/* Erreichbare Punkte */
table.ExamParticipantSheetFolderOverviewTable th:nth-child(4),
table.ExamParticipantSheetFolderOverviewTable td:nth-child(4)  {
	width: 5em;
	text-align: right;
}

/* Progressbar, Anteil */
table.ExamParticipantSheetFolderOverviewTable th:nth-child(5),
table.ExamParticipantSheetFolderOverviewTable td:nth-child(5)  {
	width: 10em;
	text-align: center;
}

table.ExamParticipantSheetFolderOverviewTable th {
	background-color: #e1e2e3;
}

.ExamTemplateDescription ul, #examFolderQuestions ul:not(.examQuestionRankingList) {
	padding-left: 2em !important;
    list-style: square outside url(gif/bullet2.gif) !important;
}

.ExamTemplateDescription ul li,  #examFolderQuestions ul:not(.examQuestionRankingList) li {
	padding-left: 10px !important;
    display: list-item;
}


#ExamParticipantSheetMain {
	width: 100%;
}

#Header {
}

#ExamParticipantSheetMain #examFolderQuestions{
	margin-top: 40px;
	border-style: solid;
	border-radius: 10px;

	padding: 10px 10px 10px 10px;
}

#ExamParticipantSheetMain .dot {
	float: left;
	height: 25px;
	width: 25px;
	border-style: solid;
	border-radius: 50%;
	display: inline-block;
	z-index: 1000;
	background-color: white;
	position: relative;
	text-align: center;
	font-weight: bold;
}

#ExamParticipantSheetMain .lane {
	float: left;
	margin-top: 13px;
	background-color: red;
	width: 30px;
	height: 3px;
	border-radius: 10%;
	z-index: 500;
	margin-left: -5px;
	margin-right: -5px;
	position: relative;
}

#ExamParticipantSheetMain .center{
	text-align: center;
}

#ExamParticipantSheetMain .centerNG {
  display: inline-block;
  margin-bottom: -2em;
}

#ExamParticipantSheetMain #examFolderDrawerContainer{
	text-align: center;
}

#ExamParticipantSheetMain .answered {
	background-color: #bbb;
}

#ExamParticipantSheetMain ul.examQuestionRankingList {
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
}

#ExamParticipantSheetMain ul.examQuestionRankingList li,
#ExamParticipantSheetMain ul.examQuestionRankingList .ui-state-highligh {
	margin: 5px;
	padding: 10px;
	width: 90%;

	cursor: pointer;
	text-align: left !important; /* weil ui-btn den Text sonst zentriert */
}

#ExamParticipantSheetMain #textDiv,
#ExamParticipantSheetMain #imgDiv {
    clear: both;
}

#ExamParticipantSheetMain #textDiv {
	padding-bottom: 10px; /* kleiner Abstand zur Ternnlinie */
}

#ExamParticipantSheetMain #imgDiv {
	/* Trennlinie zwischen den Bildern und dem Drop */
	border-top: 4px solid #efefef;
	padding-top: 10px;
}


#ExamParticipantSheetMain .dropAreaPictureTD,
#ExamParticipantSheetMain .dropAreaBack {
 	width : 180px;
 	vertical-align:top;
    text-align:  center;
    padding-bottom: 0px !important;
    display: inline-block;
    margin: 0.2em; /* so passen auf dem iPad 5 Fragen nebeneinander */
    height: 180px;

 	border : 1px solid #ababab !important;
    border-radius: 3px;
    box-shadow: 4px 4px #efefef;
    position: relative;
    background-color: white;
}


/* füllt die übergeordnete Box vollständig aus */
#ExamParticipantSheetMain .dropAreaPicture {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: absolute;
    top: 0px;
}

#ExamParticipantSheetMain .dragAreaPicture {
	padding: 20px;
	max-width:140px;
 	max-height:140px;
 	min-width: 32px;
 	min-height: 32px;
 	width: auto;
  	height: auto;
  	z-index: 10; /*Damit wird sichergestellt, das die Bilder vor den jeweiligen Flächen sind */
}

#ExamParticipantSheetMain .dropAreaLabel {
	margin: 4px;
}

#ExamParticipantSheetMain .buttonDiv{
	text-align: center;
	width: 100%;
}

#ExamParticipantSheetMain .folderDiv{
	    padding-top: 1em;
}

#ExamParticipantSheetMain .tableDragDrop{
	    margin: 0 auto;
}

#ExamParticipantSheetMain .examFolderStartInfo {
    margin-top: 20px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    width : 96%;
    margin: 0 auto /* Zentriert im div darüber */
}

#ExamParticipantSheetMain p.folderInformation{
	margin: 0px;
}

/* bündig machen mit der Progressbar für die verbleibende Zeit sowie die bearbeiteten Punkte */
#ExamParticipantSheetMain #remainingPointLabel,
#ExamParticipantSheetMain #examRemainingTimeLabel {
    margin: 5px 0 4px 0;
}

#ExamParticipantSheetMain #pBTime,
#ExamParticipantSheetMain #progressBarPoint {
	width: 90%;
}

#ExamParticipantSheetMain .examQuestionRadio, #ExamParticipantSheetMain .examQuestionCheckbox {
	width: 100%;
	margin: .5em 0;
}

#ExamParticipantSheetMain .ui-progressbar {
    position: relative;
}

#ExamParticipantSheetMain .progressbarMobile_label {
  position: absolute;
  top: 4px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
  margin-left: 10px;
}

#ExamParticipantSheetMain .lessTime{
	background: #ff00c2;
}

#ExamParticipantSheetMain .lessTime2{
	background: red;
}

/* Examen Ende -------------------------------------------------------------------------------------------- */

#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 -------------------------------------------------------------------------------------------- */
#loginSSORequest {
}

#loginSSORequest img[name="loginSSOLogo"] {
	height: 40px;
    width: auto;
}

#loginSSORequest span[name="loginSSOText"]{
  text-align: left;
}
/* Login Ende -------------------------------------------------------------------------------------------- */



.autorisation td {
}

.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;
}