/* Dieser pixel-Wert wird in der ecadiaMobile.js abgefragt. Sollte er hier verändert werden, 
dann auch dort. Stichwort toggleSidebar */
/* Die Sidebar verhält sich auf dem Desktop anderst. Das sind die Regeln hier*/
@import "ecadiaMobileNoSidebar.css" screen and (min-width: 768px);


/*------------------------VARIABLES-----------------------*/

:root {
	--bs-font-sans-serif: system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	--svg-accordion-collapsed: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black' %3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--svg-accordion-notcollapsed: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white' %3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	/*Es gibt wenige CSS-Pseudoelemente die als Font-AwesomeIcon angezeigt werden. Die brauchen immer eine Font. Damit die nur an einer Stelle geändert werden muss hier die Font in eine Variable gelegt*/
	--fa-font-ecadia: "Font Awesome 6 Pro";
}
/*--------------------------------------------------------*/


/*------------------------FONTS-----------------------*/

body {
	font-family: var(--bs-font-sans-serif);
	background-color: var(--color-bg-body);
	color: var(--color-text);
}

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



/*--------------------- GENERAL ----------------------*/

/* Bisher sind alle Links immer blau und unterstrichen, das sieht aber etwas blöd aus*/
a {
	text-decoration: none;
	color: var(--color-text-link);	
	cursor: pointer;
}

a:hover:not(.nav-link):not(.btn):not(.dropdown-item):not(.nav_link):not(.monthCalendar-dayButton) {
	text-decoration: none;
	color: var(--color-text-link); /* das sollte --color-text-primary-hover sein?? */
}

h1 {
	color: var(--color-header-1);
}

h2 {
	color: var(--color-header-2);
}

a.link-action:hover {
	text-decoration: underline;
	cursor: pointer;
}

/* das wird seltsamer weise auf 2rem definiert */
ol, ul {
	padding-left: 0;
}

/*Standardmäßig ist ein großer margin-bottom, sodass der optische Bezug zum Input nicht optimal ist */
.form-label {
    margin-bottom: 0.2rem;
    margin-top: 0.3rem;			/* in der Summe ist das wieder 0.5rem */
}

/* generell bei den Checkboxen den Pionter anzeigen, damit man sieht, dass eine aktion möglich ist */
.form-check-label, .form-check-label .form-check-input {
	cursor: pointer;
}

.form-check-input:checked {
	border-color: var(--color-bg-quaternary);
}
	
.form-check-input:checked {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
	border-color: var(--color-bg-primary);
}

.form-switch.form-switch-md {
    padding-left: 3.5em;
    height: 2.0em;
}

.form-switch.form-switch-md .form-check-input {
    margin-left: -3.5em;
    height: 1.5em;
    width: 3em;
}

.form-switch.form-switch-md .form-check-label {
    padding-top: 0.5em;
}

.form-switch.form-switch-lg {
    padding-left: 8.5em;
    height: 4.5em;
}

.form-switch.form-switch-lg .form-check-input {
    margin-left: -8.5em;
    height: 4em;
    width: 8em;
}

.form-switch.form-switch-lg .form-check-label {
    padding-top: 1.5em;
}

img.filter-invert-50 {
	filter: invert(0.5);
}

img.filter-invert-100 {
	filter: invert(1);
}

nav.bg-ecadia-navbar {
	background-color: var(--color-bg-secondary);
	color: var(--color-text-secondary);
	height: var(--header-inner-height);
	box-shadow: -1px 12px 27px 3px rgb(0 0 0 / 18%);
    -webkit-box-shadow: -1px 12px 27px 3px rgb(0 0 0 / 18%);
    -moz-box-shadow: -1px 12px 27px 3px rgba(0,0,0,0.18);
    flex-wrap: nowrap;
/* 	background: linear-gradient(170deg, var(--color-bg-quaternary), var(--color-bg-tertiary)); */
}

.navbar-nav .dropdown-menu[data-bs-popper]{
	right: 0px;
	left: unset;
}

nav.bg-ecadia-navbar .navbar .navbar-nav .nav-link,
nav.bg-ecadia-navbar .nav-item .nav-link {
	color: var(--color-text-secondary);
}

.pageSubHeader {
    font-size: 0.4em;
    display: block;
    color: #565656;
    margin-top: 10px;
}

.header .navbar .navbar-nav .nav-link:hover,
.header .nav-item .nav-link,
.header .navbar .navbar-nav .nav-link:focus {
	color: var(--color-text-secondary-hover);
}

img.select2Icon {
	vertical-align: baseline;
	margin-right: 10px;
}


/* Große Checkboxen vor allem in Listen vorne (employeeGroup, enrollModules) */
input.bigCheckbox{
	width: 25px;
	height: 25px;
}


/* HTML wird zum Teil so zusammengebaut durch TrainingProduct.getMobileButtonText */
/* ?bergangsl?sung sobald die Methode da kein h3 mehr reinschreibt sollte die Regel entfernt werden */
/* NMA 15.02.2022*/
.btn > h3, a > h3, input[type=button] > h3, button > h3 {
	display:inline;
}

.table-hover > tbody > tr:hover {
	--bs-table-accent-bg: var(--bs-table-hover-bg);
}

.modal {
	/* Oben und unten ist der Standar 1rem relativ viel */
    --bs-modal-padding: 0.5rem 1rem 0.5rem 1rem;        
}

.modal-content {
    background-color: var(--color-bg-body);
}

.modal .ecadia-alert {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.5rem;
}

/* ein Trick: damit leere alert-Bereiche keinen Platz wegnehmen */
.modal .ecadia-alert:empty {
    display:none;
}

#ecadiaAlert{
	position: sticky;
    top: 60px;
    z-index: 100;
	background-color: var(--color-bg-body);
}

#ecadiaAlert .ecadia-alert{
	margin-bottom: 0.5rem;
}

.mobile-list .card a.stretched-link:focus-visible:after {
	background-color: var(--color-bg-primary-hover);
	opacity: 0.5;
}

.mobile-list .list-group-item a.stretched-link:focus-visible:after {
	background-color: var(--color-bg-quaternary-hover);
	opacity: 0.5;
}


/* form-controls mit unseren Farben - Aber Achtung: required hat eine eigene Farbe */
.form-control,
select:not(required) .select2.select2-container--default .select2-selection, /* NMA 03.08.22 Ist wahrscheinlich überflüssig */
select:not(required) .select2.select2-container--default.select2-container--disabled .select2-selection, /* NMA 03.08.22 Ist wahrscheinlich überflüssig */
select.form-control:not(.requiredInput) + span .select2-selection {
	background-color: var(--color-bg-body);
	color: var(--color-text);
}

#searchHeaderInput.form-control,
#searchHeaderInput.form-control:focus {
	background-color: var(--color-bg-secondary);
	color: var(--color-secondary);
}

li.autocomplete-result-entry {
	padding: 0.2em 0.8em 0.2em 0;
}

/**Icons in der Schnellsuche oben sollen immer eine bestimmte Größe haben. Das soll nicht vom Text daneben oder der größe des Icons abhängen */
.autocomplete-result-entry .img-thumbnail{
	max-width: 24px;
    min-width: 24px;
    text-align: center;
    line-height: 24px;
    height: 24px; /* soll ja ein quadratisches Icon sein */
}

.form-control:disabled, .form-control[readonly]:not(.flatpickr, .flatpickr-timepicker),
.select2.select2-container--default.select2-container--disabled .select2-selection {
	background-color: var(--color-bg-body);
	color: var(--color-text);
	filter: brightness(0.75);
    opacity: .50;
}

.form-control:focus {
	color: var(--color-text);
	background-color: var(--color-bg-body);
	border-color: var(--color-bg-primary);
	box-shadow: 0 0 0 0.15rem var(--color-bg-primary);
}

.form-control::placeholder {
	color: var(--color-text);
	opacity: 0.5;
	filter: grayscale(0.6);
}

.select2.select2-container--default .select2-selection .select2-selection__rendered {
	color: var(--color-text);
}

.select2-selection {
	background-color: var(--color-bg-body)
}
.select2-search__field {
	color: var(--color-text);
}

.select2-container--default .select2-dropdown {
	background-color: var(--color-bg-body);
}

.select2-container--default .select2-dropdown .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-dropdown .select2-results__option[aria-selected=true].select2-results__option--highlighted[aria-selected] {
	background-color: var(--color-bg-primary);
}

.select2-container--default .select2-dropdown .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
	background-color: var(--color-bg-body);
	filter: brightness(0.75);
}

.select2-selection__choice {
	background-color: var(--color-bg-quaternary) !important;
	color: var(--color-text);
	border: var(--color-bg-body) !important;
}

.select2-selection:focus-within {
	border-color: var(--color-bg-primary) !important;
	box-shadow: 0 0 0 0.15rem var(--color-bg-primary) !important;
}

.form-control.flatpickr:not(.inputReadOnly):not([required]), .form-control.flatpickr-timepicker:not(.inputReadOnly) {
	background-color: var(--color-bg-body);
}

/* RS, 14.09.2024: der Kalenderpopup ist immer etwas zu weit unten */
.flatpickr-calendar  {
	margin-top: -56px;	/* irgendwie keine schlaue Lösung, aber es bewirkt genu das Gewünschte */
}


.form-range::-moz-range-track {
	background-color: var(--color-text);
}

.documentTableThumbnail i {
	color: var(--color-bg-primary);
}

.dropdown-menu {
	background-color: var(--color-bg-quaternary);
	color: var(--color-text-quaternary);
}

.dropdown-menu .dropdown-item {
	color: var(--color-text-quaternary);
}

.dropdown-menu .dropdown-item:hover {
	background-color: var(--color-bg-quaternary-hover);
	color: var(--color-text-quaternary-hover);
}

.dropdown-menu .dropdown-item.btn-secondary:hover {
	background-color: var(--color-bg-primary-hover);
	color: var(--color-text-primary-hover);
}

/*Kleine Alerts, bisher nur in Popups die unter dem Header angezeigt werden*/
.alert.alert-primary{
	color: var(--color-text-primary);
	background-color: var(--color-bg-primary);
    border-color: var(--color-bg-primary);
}

.alert.alert-primary.alert-dismissible > button.btn-close{
	color: var(--color-text-primary);
}

.img-thumbnail {
  padding: 0; /* besser kein (weißen) Rahmen, den man bei pdf-Previews nicht braucht und bei dunklen Bildern wirkt es nicht so gut */
  color: var(--text-bg);
  background-color: var(--color-bg);
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

/* icon die im Standard nicht schön aussehen */
i.fa-person-chalkboard {
	padding-left: 0px;
	padding-right: 4px;
}

.popover {
	background-color: var(--color-bg-tertiary);
	color: var(--color-text-tertiary);
	position: relative;
	margin-left: - calc(var(--nav-width) + var(--nav-open-padding));
}

.popover-header {
	background-color: var(--color-bg-primary);
	color: var(--color-header-primary);
}

.popover-nav .nav_link {
	color: var(--color-text-tertiary);
}

.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
	border-right-color: var(--color-bg-tertiary);
}

.breadcrumb-item {
	color: var(--color-text);
}


a:focus-visible {
	outline : .15rem solid var(--color-bg-primary-hover);
	box-shadow: 0 0 0 .15rem var(--color-bg-primary-hover);
}

.btn:focus, .btn:focus-visible {
	outline : .15rem solid var(--color-bg-primary-hover);
	box-shadow: 0 0 0 .15rem var(--color-bg-primary-hover);
}

.form-check-input:focus {
	border-color: var(--color-bg-primary-hover);
	box-shadow: 0 0 0 .15rem var(--color-bg-primary-hover);
}

.form-control:focus, .form-control:focus-visible {
	outline : .15rem solid var(--color-bg-primary-hover);
  	box-shadow: inset 0 1px 1px outline var(--color-bg-primary-hover), 0 0 8px var(--color-bg-primary-hover);
}

.select2-selection:focus, .select2-selection:focus-visible {
	outline : .15rem solid var(--color-bg-primary-hover);
	box-shadow: inset 0 1px 1px outline var(--color-bg-primary-hover), 0 0 8px var(--color-bg-primary-hover);
}

.accordion-button:focus, .accordion-button:focus-visible {
	outline : .15rem solid var(--color-bg-primary-hover);
	box-shadow: inset 0 1px 1px outline var(--color-bg-primary-hover), 0 0 8px var(--color-bg-primary-hover);
}

textarea:focus, textarea:focus-visible,
input[type="text"]:focus, input[type="text"]:focus-visible, 
input[type="password"]:focus, input[type="password"]:focus-visible,
input[type="datetime"]:focus, input[type="datetime"]:focus-visible,
input[type="datetime-local"]:focus, input[type="datetime-local"]:focus-visible,
input[type="date"]:focus, input[type="date"]:focus-visible,
input[type="month"]:focus, input[type="month"]:focus-visible,
input[type="time"]:focus, input[type="time"]:focus-visible,
input[type="week"]:focus, input[type="week"]:focus-visible,
input[type="number"]:focus, input[type="number"]:focus-visible,
input[type="email"]:focus, input[type="email"]:focus-visible,
input[type="url"]:focus, input[type="url"]:focus-visible,
input[type="search"]:focus, input[type="search"]:focus-visible,
input[type="tel"]:focus, input[type="tel"]:focus-visible,
input[type="color"]:focus, input[type="color"]:focus-visible,
.uneditable-input:focus {   
	border-color: var(--color-bg-primary-hover);
	box-shadow: 0 0 0 .15rem var(--color-bg-primary-hover);
}

/*-----------------------END GENERAL-----------------------*/



/*-----------------------START HELPERS-----------------------*/

/* diese media-queries für position gibts nicht nativ in bootstrap */
@media (min-width: 576px) {
  .position-sm-static {
    position: static !important;
  }
  .position-sm-relative {
    position: relative !important;
  }
  .position-sm-absolute {
    position: absolute !important;
  }
  .position-sm-fixed {
    position: fixed !important;
  }
  .position-sm-sticky {
    position: sticky !important;
  }
}
@media (min-width: 768px) {
  .position-md-static {
    position: static !important;
  }
  .position-md-relative {
    position: relative !important;
  }
  .position-md-absolute {
    position: absolute !important;
  }
  .position-md-fixed {
    position: fixed !important;
  }
  .position-md-sticky {
    position: sticky !important;
  }
}

@media (min-width: 992px) {
  .position-lg-static {
    position: static !important;
  }
  .position-lg-relative {
    position: relative !important;
  }
  .position-lg-absolute {
    position: absolute !important;
  }
  .position-lg-fixed {
    position: fixed !important;
  }
  .position-lg-sticky {
    position: sticky !important;
  }
}

@media (min-width: 1200px) {
  .position-xl-static {
    position: static !important;
  }
  .position-xl-relative {
    position: relative !important;
  }
  .position-xl-absolute {
    position: absolute !important;
  }
  .position-xl-fixed {
    position: fixed !important;
  }
  .position-xl-sticky {
    position: sticky !important;
  }
}

/* für schnelleres Farben setzen */
.color-body {
	background-color: var(--color-bg-body);
	color: var(--color-text);
}

.color-primary {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
}

.color-secondary {
	background-color: var(--color-bg-secondary);
	color: var(--color-text-secondary);
}

.color-tertiary {
	background-color: var(--color-bg-tertiary);
	color: var(--color-text-tertiary);
}

.color-quaternary {
	background-color: var(--color-bg-quaternary);
	color: var(--color-text-quaternary);
}

.color-text-body {
	color: var(--color-text);
}

.color-text-primary {
	color: var(--color-text-primary);
}

.color-text-secondary {
	color: var(--color-text-secondary);
}

.color-text-tertiary {
	color: var(--color-text-tertiary);
}

.color-text-quaternary {
	color: var(--color-text-quaternary);
}

.color-bg-body {
	background-color: var(--color-bg-body);
}

.color-bg-primary {
	background-color: var(--color-bg-primary);
}

.color-bg-secondary {
	background-color: var(--color-bg-secondary);
}

.color-bg-tertiary {
	background-color: var(--color-bg-tertiary);
}

.color-bg-quaternary {
	background-color: var(--color-bg-quaternary);
}

/* diese kleinen font-sizes werden nativ nicht von Bootstrap unterstützt */
.display-7 {
	font-size: 2.0rem;
}

.display-8 {
	font-size: 1.5rem;
}


.z-index-1 {
	z-index: 100;
}

.z-index-2 {
	z-index: 500;
}

.z-index-3 {
	z-index: 1000;
}

.z-index-4 {
	z-index: 2000;
}

.rotate-90 {
	transform: rotate(90deg);
}

.rotate-180 {
	transform: rotate(180deg);
}

.btn-rounded {
    border-radius: 10em;
}

/* das ist problematisch, weil hier mit padding: .44rem 1.64rem; riesige Buttons entstehen */
.btn-long {
	padding: .4rem 1.2rem;
	margin-top: .2rem;
}

.btn-long.buttonWithRightIcon {
	padding-right: 1.8rem;			/* wenn rechts noch ein Icon eingeblendet werden sol, dann braucht es meht Platz */
}

.btn-label {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-radius: 5px;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.btn-label:hover {
	background-color: var(--color-bg-secondary-hover);
	color: var(--color-text-secondary-hover);
}

.btn-label input.form-check-input:checked {
	border-color: var(--color-bg-secondary);
}

.radio .btn-label {
	border-radius: 5px;
}

.btn-label.checked {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
}

@keyframes slide-in-down {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
}

@keyframes slide-in-up {
    0% {
        transform: translateY(-1rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
}

@keyframes slide-in-start {
    0% {
        transform: translateX(-1rem);
        opacity: 0;
    }
    100% {
        transform: translateX(0rem);
        opacity: 1;
    }
}

@keyframes slide-in-end {
    0% {
        transform: translateX(1rem);
        opacity: 0;
    }
    100% {
        transform: translateX(0rem);
        opacity: 1;
    }
}

.slide-in {
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

/* Leider funktioniert das derzeit alles nicht so richtig .. */
/* .slide-in.start { */
/* 	-webkit-animation-name: slide-in-start; */
/*     animation-name: slide-in-start; */
/* } */

/* .slide-in.end { */
/* 	-webkit-animation-name: slide-in-end; */
/*     animation-name: slide-in-end; */
/* } */

/* .slide-in.up { */
/* 	-webkit-animation-name: slide-in-up; */
/*     animation-name: slide-in-up; */
/* } */

/* .slide-in.down { */
/* 	-webkit-animation-name: slide-in-down; */
/*     animation-name: slide-in-down; */
/* } */

/* .btn:hover, .btn:focus, .btn:active { */
/*     -webkit-box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%); */
/*     box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%); */
/* } */





/************************************************************
* MobileTag
*************************************************************/

.item-list-tag {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
	border-radius: 3px;
}

.item-list-tag.tag-danger {
	background-color: var(--color-bg-danger);
	color: var(--color-text-danger);
}

.item-list-tag.tag-warning {
	background-color: var(--color-bg-warning);
	color: var(--color-text-warning);
}

.item-list-tag.tag-success {
	background-color: var(--color-bg-success);
	color: var(--color-text-success);
}

.item-list-tag {
	padding: 3px 5px 3px 5px;	
}

.ecadia-card .item-list-tag {
	background-color: var(--color-bg-quaternary);
	color: var(--color-text-quaternary);
}

/************************************************************
* MobileList
*************************************************************/

.list-item-tags > *:not(:last-child) {
	margin-right: .3rem;
}

.list-item-tags {
	margin-bottom: 0.5em;
}

.list-group-item.list-group-item-action:hover,
ul.mobile-list .list-group-item.list-group-item-action:hover,
ul.mobile-list .list-group-item-primary.list-group-item-action:hover,
ul.mobile-list .list-group-item-primary.list-group-item-action:focus
ul.mobile-list .list-group-item-action a.stretched-link:focus-visible:after {
	color: var(--color-text-quaternary-hover);
	background-color:  var(--color-bg-quaternary-hover);
}



.list-group-item {
	background-color: var(--color-bg-quaternary);
	color: var(--color-text-quaternary);
	
 	/* overflow: hidden; /* keine Texte, die über die Schaltfäche rausgehen */
 	
 	padding: 0; /* den Platz ganz nutzen */
}

.item-count-circle { 
  	position: absolute;
  	display: flex;
	align-items: center;
	justify-content: center;
  	vertical-align: middle;
  	line-height: 30px;
  	box-sizing: border-box;
 	top: 4px;		/* Achtung: falls >4 wird das in der Stichwortliste unschön */
    right: 10px;
	min-width: 24px;
	height: 24px;
	font-size: 10pt;
	font-weight: normal;
	text-align: center;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	background-color: var(--color-bg-body);
	color: var(--color-text);
}


.list-group-item .item-count-html {
	font-size: 0.9rem;
	position: absolute;
	right: 4px;
	top: 4px;
}


.list-group-item h1,
.list-group-item h2,
.list-group-item h3,
.list-group-item h4,
.list-group-item h5, .list-group-item .h5 /* eine Klasse, die so aussieht wie h5 */
.list-group-item h6 {
	color: var(--color-header-quaternary);
}

/* beim hover für h5 aber die hover-Farbe und nicht die header-Farbe nehmen */
.list-group-item:hover h5, .list-group-item:hover .h5  {
	color: var(--color-header-quaternary-hover);
}

.list-group-item.listDivider {
	background-color: var(--color-bg-primary);
	color: var(--color-header-primary);
}

.list-group-item.listDivider h5 {
	color: var(--color-header-primary);
}

.mobileWidget.mobile-list .list-group-item.list-item-large-img .img-thumbnail {
	min-width: 94px;
	max-width: 94px;
}

.mobileWidget.mobile-list .list-group-item.list-item-large-img i.img-thumbnail {
	font-size: 60px;
	line-height: 120px;
	text-align: center;
}

.mobileWidget.mobile-list .list-group-item .img-thumbnail {
	max-width: 38px;
    min-width: 38px;    
}

.mobileWidget.mobile-list .list-group-item .img-thumbnail.font-icon {
    height: 38px; /* soll ja ein quadratisches Icon sein */
    background-color:  var(--color-bg-body);
    color: var(--color-text) !important; /* auch bei hiver in dieser Farbe bleiben */
}



.mobileWidget.mobile-list .list-group-item i.img-thumbnail {
	font-size: 24px;
	line-height: inherit;
	text-align: center;
}

.mobileWidget.mobile-list .list-group-item.active {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
	border-color: var(--color-bg-primary);
}

.mobileWidget.mobile-list .list-group-item.list-group-item-action.active:hover {
	background-color: var(--color-bg-primary-hover);
	color: var(--color-text-primary-hover);
	border-color: var(--color-bg-primary-hover);
}

.list-group-item.list-divider {
	background-color: #f3f3f3;
	margin-top: 10px;
	border-radius: 0.25rem 0.25rem 0 0;
	border-top-width: 1px;
}

.list-group-item.disabled, .list-group-item:disabled {
    background-color: var(--color-bg-quaternary);
    color: var(--color-text-quaternary);
	/* filter: grayscale(0.2) opacity(0.6); */
    color: inherit;
}

/* Wird benötigt, damit Text in Flex-Containern mit drei Punkten abgeschnitten werden kann */
/* https://css-tricks.com/flexbox-truncated-text/ */
.d-flex {
	min-width:0px;
}


.list-item-block-withIcon {
	display: grid;
	grid-template-columns: max-content auto; 	/* Icon - Inhaltsbereich (wobei die Zeilen in Tite/Titleright nochmasl aufgesplittet wedren */
	padding-right: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.list-item-block-noIcon {
	padding: 4px;
}

.mobile-list .card {	
	min-height: 100% /* 200px */; /* sind immer unterschiedlich groß */ 
}

/*  Der Dropdown-Container in den ListItems, wo man verschiedene Aktionen ausführen kann für jedes ListItem bzw. der Buttoncontainer um eine Aktion auszuführen*/
.dropdown-actions-container, .button-actions-container {
	position: absolute;
	right: 3px;
	bottom: 3px;
	z-index: 100; /* die Icon-Counts in der MobileList haben 50 */
}

/* Die Icons links in der MobileList: Wenn diese auf Große gesetzt werden, dann bestimmen wir die Größe auf 80 - 120px*/
.listitem-icon-big {
	max-width: 120px;
	min-width: 80px;
}

.item-count {
	position: absolute;
	right: 10px;
	top: min(20%, 20px);
	max-width: 70px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	z-index: 4;
}

.table {
	color: inherit;
}

.table td.bordered,
.table th.bordered,
.table tr.bordered td,
.table tr.bordered th {
	border-color: currentColor;
    border-width: 1px;
}

.table tr.hide-border td,
.table tr.hide-border th,
.table td.hide-border,
.table th.hide-border {
	border-width: 0px !important;
}

.card-icon-ecadia {
	height: 1em;
}


.avatar {
	display: flex;
    justify-content: center;
    color: white;
    align-items: center;
}


/*-----------------------END HELPERS-----------------------*/


/*------------------------COLORS (BUTTONS, BORDERS ETC.) -----------------------*/



.btn-primary {
	background-color:var(--color-bg-primary);
	border-color:var(--color-bg-primary);
	color:var(--color-text-primary);
}
.btn-primary:hover, .btn-primary:focus {
	background-color:var(--color-bg-primary-hover);
	border-color:var(--color-bg-primary-hover);
	color:var(--color-text-primary-hover);
}

.btn-secondary {
	background-color:var(--color-bg-secondary);
	border-color:var(--color-bg-secondary);
	color:var(--color-text-secondary);
}
.btn-secondary:hover, .btn-secondary:focus {
	background-color:var(--color-bg-secondary-hover);
	border-color:var(--color-bg-secondary-hover);
	color:var(--color-text-secondary-hover);
}

.btn.collapsed {
	background-color: var(--color-bg-body);
	border-color: var(--color-bg-body);
	color: var(--color-text-body);
}

.btn-success {
	background-color:var(--color-bg-success);
	border-color:var(--color-bg-success);
	color:var(--color-text-success);
}

.btn-success:hover {
	background-color:var(--color-bg-success-hover);
	border-color:var(--color-bg-success-hover);
	color:var(--color-text-success-hover);
}

.btn-danger {
	background-color:var(--color-bg-danger);
	border-color:var(--color-bg-danger);
	color:var(--color-text-danger);
}
.btn-danger:hover {
	background-color:var(--color-bg-danger-hover);
	border-color:var(--color-bg-danger-hover);
	color:var(--color-text-danger-hover);
}

.btn-warning {
	background-color:var(--color-bg-warning);
	border-color:var(--color-bg-warning);
	color:var(--color-text-warning);
}
.btn-warning:hover {
	background-color:var(--color-bg-warning-hover);
	border-color:var(--color-bg-warning-hover);
	color:var(--color-text-warning-hover);
}

.border-ecadia-primary {
	border-color: var(--color-bg-primary) !important;
}

.border {
	border: var(--bs-border-width) var(--bs-border-style) var(--color-text) !important;
}

.form-check .form-check-input {
	border-color: var(--color-bg-primary);
	color: var(--color-text-primary);
	background-color: #f3f3f3;
}

.form-check .form-check-input:checked {
	border-color: var(--color-bg-primary);
	background-color:  var(--color-bg-primary);
}

.form-check .form-check-input:focus {
	box-shadow: 0 0 0 0.2rem var(--color-bg-secondary-hover);
}

.btn-primary .form-check-input {
	color: var(--color-text-primary);
}

.btn-primary .form-check-input:checked {
	background-color:  var(--color-bg-primary);
	border-color: var(--color-bg-primary);
}

.btn-primary .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem var(--color-bg-secondary-hover);
}

input.form-range::-webkit-slider-thumb, input.form-range::-moz-range-thumb {
    background: var(--color-bg-primary);
}

.text-success {
	color: var(--color-bg-success) !important;
}

.text-danger {
	color: var(--color-bg-danger) !important;
}

.text-warning {
	color: var(--color-bg-warning) !important;
}

.progress-bar {
	color: var(--color-text-primary);
	background-color: var(--color-bg-primary);
	overflow: visible; /* brauchen wir, damit wir den Text unten transformen können und er über das eigentliche Div rauskann */
}

/*Normaler Text einer Progressbar (annahme er hat Platz im linken Teil angezeigt zu werden*/
.progress-bar-text {
	transform: none;
	transition-duration: 1s; /*Dann ist verschieben von Text animiert / flüssiger */
	color: var(--color-text-primary);
}
/* Die Klasse bekomt Text in einer Progressbar zusätzlich, wenn der Text im linken Teil der Progresbar angezeigt werden muss*/
.progress-bar-text.progress-bar-text-outside {
	transform: translate(100%); /*Wir verschieben den Text weiter nach rechts*/
	color: var(--color-text);
}



.table-danger {
  --bs-table-color: var(--color-text-danger);
  --bs-table-bg: var(--color-bg-danger);
  --bs-table-border-color: black;
  --bs-table-striped-bg: var(--color-bg-danger-hover);
  --bs-table-striped-color: var(--color-text-danger-hover);
  --bs-table-active-bg: var(--color-bg-danger-hover);
  --bs-table-active-color: var(--color-text-danger-hover);
  --bs-table-hover-bg: var(--color-bg-danger-hover);
  --bs-table-hover-color: var(--color-color-danger-hover);
}

.table-success {
  --bs-table-color: var(--color-text-success);
  --bs-table-bg: var(--color-bg-success);
  --bs-table-border-color: black;
  --bs-table-striped-bg: var(--color-bg-success-hover);
  --bs-table-striped-color: var(--color-text-success-hover);
  --bs-table-active-bg: var(--color-bg-success-hover);
  --bs-table-active-color: var(--color-text-success-hover);
  --bs-table-hover-bg: var(--color-bg-success-hover);
  --bs-table-hover-color: var(--color-text-success-hover);
}
.table-warning {
  --bs-table-color: var(--color-text-warning);
  --bs-table-bg: var(--color-bg-warning);
  --bs-table-border-color: black;
  --bs-table-striped-bg: var(--color-bg-warning-hover);
  --bs-table-striped-color: var(--color-text-warning-hover);
  --bs-table-active-bg: var(--color-bg-warning-hover);
  --bs-table-active-color: var(--color-text-warning-hover);
  --bs-table-hover-bg: var(--color-bg-warning-hover);
  --bs-table-hover-color: var(--color-text-warning-hover);
}
.table td.bordered, .table th.bordered, .table tr.bordered td, .table tr.bordered th {
	border-color: black;
}
/* ------------ BURGERMENU & BOOKMARKS ------------ */


:root {
    --header-height: 56px;
    --header-inner-height: 55px;
    --nav-width: 68px;
    --nav-open-padding: 200px;
}


.main-area {
	margin-top: var(--header-height);
	transition: 0.5s;
}


.header {
    width: 100%;
    /*height: var(--header-height);*/
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.5s;
    z-index: 1000;
}

.navbar-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100%; /* Für mobile-Browser wie Chrome und Safari dürfen das leider nicht 100vh sein, da sonst die Größe nicht passt wenn die Adressleiste angezeigt wird */
    background-color: var(--color-bg-tertiary);
    padding: 0.5rem 0 0 0;
    transition: all 0.5s ease 0s;
    z-index: 100;
    box-shadow: rgb(99 99 99 / 20%) 8px 2px 8px 0px;
    -webkit-box-shadow: rgb(99 99 99 / 20%) 8px 2px 8px 0px;
}

.navbar-left.show {
	width: var(--nav-width);
	padding: 0.5rem 1rem 0 0;
}

.navbar-left .nav_list {
	overflow-y: auto;
	max-height: calc(100vh - 190px);
}

#nav-bar * {
	font-size: 0.9rem;
}

#nav-bar .nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

#nav-bar .accordion-button {
	width: 220px;
	border: none;
}

#nav-bar .accordion-item .accordion-button span {
	margin-right: 0;
	width: 100%;
}

#nav-bar .accordion-item .accordion-button span.collapsed {
	white-space: nowrap;
	overflow: hidden;
}

#nav-bar .accordion-item,
#nav-bar .accordion-item .accordion-button {
	color: var(--color-text-tertiary) !important;
	background-color: var(--color-bg-tertiary) !important;
}

#nav-bar .accordion-item .accordion-button::after {
	color: var(--color-text-tertiary);
	background-color: var(--color-bg-tertiary);
    line-height: 1em;
}

#nav-bar .accordion-item .accordion-button:not(.collapsed)::after {
	color: var(--color-text-tertiary);
	font-weight: bold;
}

#nav-bar .accordion-button,
#nav-bar .accordion-body {
	background-color: unset;
	padding: unset;
}

#nav-bar .accordion-item,
#nav-bar .accordion-button:focus {
	border: none;
	box-shadow: none;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#nav-bar .accordion-button::after {
	margin-left: 1em;
	width: 0.9rem;
	height: 0.9rem;
	background-size: 0.9rem;
	
}

#nav-bar .accordion-header .accordion-button:not(.collapsed) {
	color: inherit;
	box-shadow: none;
}

#nav-bar .accordion-header:hover {
	color: inherit;
}

#nav-bar .accordion-header .accordion-button.active {
	font-weight: bold;
	color: var(--color-text-tertiary);
}


#nav-bar .accordion-body .nav_link {
	padding-left: 4em;
}


.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}

.popover-nav .nav_link {
	padding: 0.25rem 0.5rem 0.25rem 1.5rem;
}


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

.nav_link {
    position: relative;
    color: var(--color-text-tertiary);
    margin-bottom: 0.5rem;
    transition: 0.3s;
}

.popover-nav:hover,
.nav_link:hover {
    color: var(--color-text-tertiary-hover);
}

.nav_link::before {
	content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 32px;
/*     opacity: 0; */
    transition: 0.3s;
}

.nav_link:hover::before,
.nav_link.active:hover::before {
/* 	opacity: 1; */
	background-color: var(--color-text-tertiary-hover);
}

.nav_link.active::before {
/* 	opacity: 1; */
    background-color: var(--color-text-tertiary);
}

.nav_link .nav_name {
	width: 180px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav_icon {
    font-size: 1.25rem;
}

.navbar-left .scroll_icon {
/* 	margin-left: 1.5em; */
	width: 100%;
	text-align: center;
/* 	margin-bottom: 1em; */
}

#sidebarCollapseIcon {
	transition: transform 0.3s;
}


#sidebarCollapseDivOutsideSidebar {
	bottom: 4px;
	transition: 1s;
	left: 0;
	background-color: var(--color-bg-tertiary);
	box-shadow: rgb(99 99 99 / 20%) 8px 2px 8px 0px;
	-webkit-box-shadow: rgb(99 99 99 / 20%) 8px 2px 8px 0px;
	margin-bottom: 0.5em;
	
	/* CNG 16.11.22 Vorerst abgeklemmt, weil es über das Bürgermenue geht #3303 */
	display: none;
}

#sidebarCollapseDivOutsideSidebar .sidebarCollapse {
	margin-bottom: 0;
}


/*
* Im Mobile im Status sidebarInitialState wird die Sidebar nicht angezeigt, also auch 
* das Overlay nicht
*/
#pageOverlay.sidebarInitialState {
	position: none;
}

/* Im Mobile im Status sidebarInitialState wird die Sidebar nicht ausgeklappt angezeigt*/
.navbar-left.sidebarInitialState {
	width: 0;
}

/* Wenn im Mobile wird nicht im Status sidebarInitialState sind, wird die Sidebar ausgeklappt angezeigt  wir berechnen also die Width*/
.navbar-left {
    width: calc(var(--nav-width) + var(--nav-open-padding));
}
/* Im Mobile im Status sidebarInitialState den Burger-Button zum Ausfahren der Sidebar anzeigen */
#burgerMenuBtn > i#openMenuIcon.sidebarInitialState{
	display: inline-block;
}
/* Im Mobile  das X zum einklappen der Sidebar immer verstecken */
#burgerMenuBtn > i#closeMenuIcon{
	display: none
}

/* Im Mobile wird der Body beim Aus- und Einklappen der sidebar in der Größe nicht geändert */
body,  body.sidebarInitialState {
    padding-left: 0;
}

/* Wenn im Mobile wird nicht im Status sidebarInitialState sind, wird der Button zum Ausfahren der Sidebar um 180° gedreht (einfahre) da die Sidebar ja ausgeklappt ist*/
#sidebarCollapseIcon:not(.sidebarInitialState) {
	-moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);;
    transform: rotate(180deg);;
    -o-transform: rotate(180deg);;
}

/* Im Mobile im Status sidebarInitialState wird der Button zum Ausfahren der Sidebar um 360° gedreht (ausfahren) da die Sidebar ja eingeklappt ist
	Ohne ein Transform haben gewisse Animationen nicht funktioniert, daher drehen wir um 360°*/
#sidebarCollapseIcon.sidebarInitialState {
	-moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
}


#pageOverlay {
	position: fixed;
}

/* Im Mobile im Status sidebarInitialState  wird der Button zum Ausfahren der Sidebar (unten links losgelöst von der Sidebar) angezeigt
	Ist man nicht mehr im initial-State ist Mobile die Sidebar ausgefahren und der Button soll versteckt werden 
	Lösung über opacity, da eine Animation mit display nicht möglich ist*/
#sidebarCollapseDivOutsideSidebar:not(.sidebarInitialState) {
	opacity: 0;
}
/* Im Mobile im Status sidebarInitialState  wird der Button zum Ausfahren der Sidebar (unten links losgelöst von der Sidebar) angezeigt
	Lösung über opacity, da eine Animation mit display nicht möglich ist*/
#sidebarCollapseDivOutsideSidebar.sidebarInitialState {
	opacity: 1;
}

.sidebar-wrapper {
    display: flex;
    align-items: stretch;
    position: fixed;
    top: 0;
    z-index: 50;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
}

.sidebar-wrapper.left {
	left: 0;
	box-shadow: rgba(99, 99, 99, 0.2) 8px 2px 8px 0px;
}

.sidebar-wrapper.right {
	right: calc(-100vw - 8px);
	box-shadow: rgba(99, 99, 99, 0.2) -8px 2px 8px 0px;
}

#sidebar,
#bookmarks {
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
	max-height: 100vh;
    transition: margin 500ms;
}

#sidebar.inactive {
    margin-left: calc(-100vw - 8px);
    transition: margin 500ms;
}

#bookmarks.active {
	margin-right: calc(100vw + 8px);
	transition: margin 500ms;
}

#bookmarks-panel {
	z-index: 520;   /* einige andere Elemente wie z.B. die Ampel scheinen sonst durch */
}

@media only screen and (min-width: 576px) {
	
	#sidebar,
	#bookmarks {
	    min-width: 350px;
	    max-width: 350px;
	    min-height: 100vh;
		max-height: 100vh;
	    transition: margin 500ms;
	}
	
	.sidebar-wrapper.right {
		right: -358px;
	}
	
	#sidebar.inactive {
	    margin-left: -358px;
	}
	
	#bookmarks.active {
		margin-right: 358px;
	}
}

@media only screen and (min-width: 768px) {
	
	.navbar-left {
		z-index: 50;
	}
		
}


/*----------------sidebar-wrapper----------------*/


.sidebar-wrapper ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.sidebar-wrapper a {
	text-decoration: none;
	color: var(--color-text-tertiary);
}

/*----------------sidebar-content----------------*/

.sidebar-content {
	position: relative;
	height: 100%;
}

.sidebar-content .scrollbar {
	scrollbar-color: var(--color-bg-tertiary-hover) var(--color-bg-tertiary);
	scrollbar-width: thin;
}

.sidebar-content .scrollbar::-webkit-scrollbar-thumb {
	background: #ffffff85;
	border-radius: 10px;
}

.sidebar-content .scrollbar::-webkit-scrollbar {
	min-height: 20px;
	width: 8px;
}

.sidebar-content .scrollbar {
	max-height: calc(100% - 50px);
	height: calc(100% - 50px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin-right: 5px; /*damit die scrollbar etwas Abstand hat*/
}

/*--------------------sidebar-brand----------------------*/


.sidebar-wrapper .sidebar-brand {
	padding: 10px 20px;
	display: flex;
	align-items: center;
	/*   border-bottom: 1px solid var(--color-bg-divider-dark); */
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
	-webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
	box-shadow: 0px 5px 5px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}

.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-brand > p {
	text-transform: uppercase;
	font-weight: bold;
	flex-grow: 1;
	color: var(--color-text-primary);
	margin: 0;
}

.sidebar-wrapper .sidebar-brand #close-sidebar,
.sidebar-wrapper .sidebar-brand #close-bookmarks {
	cursor: pointer;
	font-size: 20px;
	float: right;
/*   color: var(--color-text-light); */
}

/*----------------------sidebar-menu-------------------------*/

.sidebar-wrapper .sidebar-menu {
	padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu ul li a {
	display: flex;
	width: 100%;
	text-decoration: none;
	position: relative;
	padding: 8px 30px 8px 20px;
	height: 50px;
/* border-bottom: 1px solid var(--color-special-primary); */
}

.sidebar-wrapper .sidebar-menu ul li a:hover {
	background-color: var(--color-bg-tertiary-hover);
	color: var(--color-text-tertiary-hover);
}

.sidebar-wrapper .sidebar-menu .img-thumbnail {
	width: 32px;
	height: 32px;
	font-size: 1.3rem;
}


.ecadia-card .card-icon {
    width: 3rem;
    height: 3rem;
    line-height: 48px !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--color-text);
    border-radius: var(--bs-border-radius);
    background-color: var(--color-bg-body);
  	color: var(--color-text);
  	text-align: center;
  	font-size: 2.0rem;
  	margin-bottom: 3em;
}

.sidebar-wrapper .sidebar-menu ul li a p {
	position: relative;
	top: 5px;
	margin-left: 10px;
	overflow: hidden;
    text-overflow: ellipsis;
    height: 1.5em;
    white-space: nowrap;
    /* font-weight: bold; */
}

.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
  display: inline-block;
  animation: swing ease-in-out 0.5s 1 alternate;
}



#bookmarks .sidebar-menu {
	padding-bottom: 0;
	border-bottom: 20px solid var(--color-bg-secondary-dark);
}


/*----------------------bookmarks-list-------------------------*/

#bookmarks .bookmarks-list li.bookmarks-item {
	display: flex;
	align-items: center;
	padding-left: 20px;
	padding-right: 30px;
	height: 40px;
}

#bookmarks .bookmarks-list li.bookmarks-item a:not(.remove-bookmark) {
	margin-left: 10px;
}

/* #bookmarks .bookmarks-list { */
/* 	margin-top: 8px; */
/* } */

#bookmarks .bookmarks-list a.remove-bookmark {
	position: absolute;
	right: 10px;
}


/* ------------ END BURGERMENU ------------ */

/* ------------ START FOOTER ------------ */

#footer {
	background-color: var(--color-bg-quaternary);
	color: var(--color-text-quaternary);
/* 	background: linear-gradient(170deg, var(--color-bg-primary), var(--color-bg-tertiary)); */
	box-shadow: 0px -12px 27px 3px rgb(0 0 0 / 18%);
    -webkit-box-shadow: 0px -12px 27px 3px rgb(0 0 0 / 18%);
    -moz-box-shadow: 0px -12px 27px 3px rgba(0,0,0,0.18);
    padding: 0;
}

#footer a {
	color: var(--color-text-quaternary);
}

#footer a:hover {
	text-decoration: underline;
}

.footer-copyright {
	position: absolute;
    bottom: 5px;
    right: 20px;
    font-size: x-small;
    opacity: 0.5;
    letter-spacing: 0.025em;
}

/* ------------ END FOOTER ------------ */

/* ------------ START BOOKMARKS ------------ */

input#pdfTitle {
	width: 100%;
	margin-top: 1em;
}

button#runPDFPrint > i {
	margin-right: 10px;
}

/* ------------ END BOOKMARKS ------------ */


/* ------------ START LOADING MESSAGE ------------ */

#loadingPopup {
	position: fixed;
	top: 50%;
	left: 50%;
	text-align: center;
	width:18em;
    height:12em;
    margin-top: -6em;
    margin-left: -9em;
    z-index: 1060; /*Muss vor den normalen popups angezeigt werden */
/*     background-color: lightgray; */
/*     border-radius: 1em; */
/*     border: 1px solig gray; */
}

#loadingPopup .loading-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

/* ------------ END LOADING MESSAGE ------------ */


/* -------------- START INDEXMOBILE.JSP ---------------- */

img.tab-header-icon {
    margin-bottom: 6px;
    margin-right: 16px;
    width: 40px;
}

img.ecadia-mobile-logo {
    max-height: 45px;
    width: auto;
}

@media only screen and (min-width: 768px) {
	img.tab-header-icon {
	    margin-bottom: 7px;
	    margin-right: 16px;
    	width: 40px;
	}
}


.template-container {
	margin-bottom: 2em;
}


/* -------------- END INDEXMOBILE.JSP ---------------- */

/* ---------------ecadiaMobileAdmin.js----------------*/

#widgetSettingsDialogContentFields #roleSelectionComboboxVisible{
	width: 90%;	
}

#widgetSettingsDialogContentFields #roleSelectionComboboxEnabled{
	width: 90%;
}
#widgetSettingsDialogContentFields #roleSelectionComboboxStyle{
	width: 400px;
}
#widgetSettingsDialogContentFields #inputStyle{
	width: 200px;	
}

#widgetSettingsDialogContentFields td {
	min-width:10%;
}

.drop-highlight:not(.drag-highlight) {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
}




.drag-highlight {
	font-weight: bold;
}


/* widgetSettingsDialog (aus ecadia.js)  ----------------------------------------------------- */
#widgetSettingsDialogContentFields table {
	border-collapse: collapse;
	width: 100%;
	margin-top: 30px;
}

#widgetSettingsDialogContentFields table td, #widgetSettingsDialogContentFields table th  {
	padding:10px;
	border-bottom: 1px solid #888888;
}

#widgetSettingsDialogContentFields table th  {
	font-weight: bold;
	background-color: #dddddd;
}

/* Der Name des Ecadia-Java-Einsprungspunktes für dieses Widget */
#widgetSettingsDialog span.widgetNameEcadiaJava{
	user-select: text;
}

/* ----------------- START HOME ----------------- */


.ecadia-card {
    border-radius: 4px;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  	padding: 4px;
  	cursor: pointer;
  	
  	display: block;
}

.ecadia-card:hover{
	transform: scale(1.05);
	box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  
    background-color: var(--color-bg-primary-hover);
    color: var(--color-text-primary-hover) !important;  
}

.ecadia-card:hover .home-title  {
    color: var(--color-text-primary-hover);
}

.ecadia-card h1,
.ecadia-card h2,
.ecadia-card h3,
.ecadia-card h4,
.ecadia-card h5,
.ecadia-card h6 {
	color: var(--color-header-primary);
}

.ecadia-card:hover h1,
.ecadia-card:hover h2,
.ecadia-card:hover h3,
.ecadia-card:hover h4,
.ecadia-card:hover h5,
.ecadia-card:hover h6 {
	color: var(--color-header-primary-hover);
}


.ecadia-card h3 {
  font-weight: 400;
}

.ecadia-card p {
  font-weight: normnal;
  font-size: 0.9em;
  display: block;
}

.ecadia-card-img {
	height: 42px;
	width: 42px;
}

/* .ecadia-card img{ */
/*   position: absolute; */
/*   top: 10px; */
/*   left: 10px; */
/* } */

.ecadia-card i.img-thumbnail {
	font-size: 1.6rem;
	text-align:center;
	width: 42px;
	height: 42px;
	line-height: 1.9rem;
}
.ecadia-card .card-title {
	
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-x: clip;
	
/* 	margin-top: 2.5em !important; */
/* 	margin-left: 0 !important; */
/* 	display: block; */
	
}


/* Aktions-Buttons, die "altenn" Kacheln */
.home-title h2.card-title {
	text-overflow: visible ; /* nicht einzeilig undnicht abschneiden */	
	white-space: normal;
}
.invert-color .ecadia-card {
	background-color: var(--color-bg-secondary);
	color: var(--color-text-secondary);
}

.invert-color .card-title {
	color: var(--color-text-secondary) !important;
}

.invert-color .item-list-tag {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
}

	
/*---------media-queries-----------*/

@media only screen and (min-width: 992px) {
	
/* 	.card.ecadia-card, */
/* 	.card.ecadia-card * { */
/* 		color: var(--color-text-primary); */
/* 	} */
	
	.card-text-home {
	 
	}
		
	.home-title {
		min-height: 40px;
		vertical-align: middle;
	}
	
}


/* ----------------- END HOME ----------------- */


/* ------------ START EXPLORER ------------ */

.ecadia-folder-card {
    overflow: hidden;
    background-color: var(--color-bg-quaternary);
}

.ecadia-folder-card a:hover {
	color: inherit;
	text-decoration: none;
}

.ecadia-folder-card .card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.ecadia-folder-card .card-body {
	position: absolute;
	height: 140px;
	bottom: 0px;
	width: 100%;
	background-color: var(--color-bg-quaternary);
}

.ecadia-folder-card,
.ecadia-folder-card * {
	transition: all .4s ease-out;
}


.card-body {
	padding-top: .4em; /* viel weniger als Standard, damit 2-zeilige Texte sichtbar sind */
}

/* Zeile vertikal zentrieren, damit 1 und 2-zeilige Texte gut aussehen */
h5.ecadia-folder-title {
	height: 2em;
	display:flex;
    align-items: center;
}

.ecadia-folder-card:hover {
	-webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
}

.ecadia-folder-card:hover img {
	transform: scale(1.1);
}

.ecadia-folder-card:hover .card-text {
	display: block;
}

.ecadia-folder-card-no-img {
	padding-top: 1.5em;
	background-color: var(--color-bg-quaternary);
	color: var(--color-text-quaternary);
}

.ecadia-folder-card-no-img-icon:after {
	font-family: var(--fa-font-ecadia);
    font-size: 10em;
    content: "\f19d";
    text-align: center;
    min-width: 100%;
    display: inline-block;    
    margin-top: -40px; /* etwas nach oben verschoben, damit man das Icon nicht unten abgeschnitten wird */
}

/* Über eine Systemvariable kann man einstellen, dass bei Ordnern ohne Bild immer der Text direkt angezeigt wird 
 Dann bekommen diese Ordner diese Klasse und der Text wird immer angezeigt */
.ecadia-folder-card-always-expanded{
	transform: translate(0, -90px);
}

.ecadia-count > i {
	display: none;
}

 .ecadia-count, .ecadia-count-circle {
  	position: absolute;
 	top: 6px;
    right: 6px;
	min-width: 24px;
	height: 24px;
	font-size: 10pt;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
.ecadia-count-circle {
	background-color: var(--color-bg-body);
	color: var(--color-text);
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.125);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Bildungsprodukt-Liste (z.B. Suchergebnis im Katalog oder Produkte zum Ordner) */

.explorer-event-table table {
	font-size: 11pt;
	width: auto !important; /* seltsam, die Tabelle wird sonst auf 100% angezeigt */
}

.explorer-event-table table th, .explorer-event-table table td {
	padding-right: 2rem;
	padding-left: 0; /* damit wir auch ganz am linken Rand bündig sind */
	padding-top: 0;
}

/*Progressbar Farben*/
.explorer-event-table .progress-bar-step-0 {
	background-color: green;
}

.explorer-event-table .progress-bar-step-80 {
	background-color: orange;	
}

.explorer-event-table .progress-bar-step-100 {
	background-color: red;
}


/* Auslastung als Ampel */
span.eventComplete, span.eventWellBooked, span.eventGuaranteed, span.eventDeadline, span.eventMinNotReached {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50% ;
    width: 16px;
    height: 16px; 
    min-width: 16px; /*Ansonsten gibt es Bildschirmgrößen bei denen das ansonsten verzerrt angezeigt wird */
    min-height: 16px; /*Ansonsten gibt es Bildschirmgrößen bei denen das ansonsten verzerrt angezeigt wird */
	display: inline-block;
	border: 1px solid white;
	vertical-align: bottom;
	/* position: fixed; RS, 17.12.2022: führt dazu, dass im Dashborad der Punkt außerhalb li-Bereichts angezeigt wird */
	/* right: 30px; Wird nur gebraucht wenn position fixed an wäre /* auf der rechten Seite vor dem Symbol fürs aufklappen */
	
    z-index: 50;
}

.trainingProductListItem span.eventComplete, 
.trainingProductListItem span.eventDeadline, 
.trainingProductListItem span.eventWellBooked, 
.trainingProductListItem span.eventGuaranteed,
.trainingProductListItem span.eventMinNotReached {	
	position: relative; 	/* sonst funktioniert der z-index nicht richtig */
}

/* in der Übersichtstabelle nicht rechtsbündig */
.trainingProductListItem span.eventComplete, .trainingProductListItem span.eventWellBooked,
 .trainingProductListItem span.eventGuaranteed, .trainingProductListItem span.eventDeadline, .trainingProductListItem span.eventMinNotReached {
	right: auto !important;
} 


span.eventComplete, span.eventDeadline {
	background-color: var(--color-bg-danger);
	border: 1px solid #999999;
}

span.eventWellBooked {
	background-color: var(--color-bg-warning);
	border: 1px solid #999999; /* sonst ist der gelbe Kreis nicht gut zu sehen */
}

span.eventGuaranteed, span.eventMinNotReached  {
	background-color: var(--color-bg-success);
	border: 1px solid #999999;
}
	
/* Label in Checkboxen brauchen einen anderen cursor- ansonsten suggerieren sie, dass sie nicht klickbar sind */
label.btn label.form-check-label{
	cursor: pointer;
}

/* im Lerncoach-Kachel, der Button für das private Forum */
.dashboardForumButton {
	top: 10px;
    position: absolute;
    right: 15px;
}




/* RS, 15.04.2022: so ist das gedacht: je deliveryMode gibt es dann eine eigene Klasse */


.trainingProductListItem .rating {	
	padding: 2px 6px 2px 6px;
	position: absolute;
	top: 14px;
    right: 200px;
}

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


div#explorerAdvancedSearch * {
    color: var(--color-text);
}



/**
 * Hier ist der Bereich für die Smartphone-Einstellungen
 *
 */
@media ( max-width :680px) {

	.home-title {
		display: grid;
		grid-template-columns:  56px auto;
	}
	
	
	i.card-icon {
	}
	
	/* Kachel im Home */
	.ecadia-card .card-title {
		margin-top: .5em !important;
		
	}
	
	.ecadia-card .card-icon {
		margin-bottom: 0.2em !important;	
	}
	
	.action-item {
		margin-top: 4px !important;
	}
	
	.card-body {
		padding: 0.5em; /* etwas weniger als beim Desktop */
	}
				
	.trainingProductListItem .rating {
		position: relative;
		display: inline-block;
		top: auto;
		right: auto;
		padding-left: 0;
	}
	
	.explorer-event-table table th, .explorer-event-table table td {
		padding: 0.1rem 0.5rem 0.1rem 0.1rem;
		font-size: 9pt;
	}
	
	/* für den Titel haben wir am Handy keinen Platz */
	.explorer-event-table table .title {
		display: none;
	}
	/* für den Trainer haben wir am Handy keinen Platz */
	.explorer-event-table table .trainer {
		display: none;
	}
	
	.list-item-subtitle {
		font-size: 0.7em;
	}
	
	span.mobileWidget.progress {
		max-width: 60px !important;
	}
	
	.list-item-tags {
		font-size: 0.7em;
		margin-bottom: 0em;
	}
		
	.mobileWidget.mobile-list .list-group-item i.img-thumbnail {
	    font-size: 18px;
	    max-width: 30px;
    	min-width: 30px;
    	height: 32px;
	}
	
	.mobileWidget.mobile-list .list-group-item .img-thumbnail.font-icon {
	   	height: 32px;
	}
	
	.tab-content {
    	padding: 0.5rem 0 0 0 !important; /* das ist ansonsten mit 1rem sehr breit */
	}
}


#explorer-tp-list a.list-group-item:hover,
#pdf-catalogue-download a.list-group-item:hover {
	-webkit-box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 25px 0px rgba(0, 0, 0, 0.2);
}


#pdf-catalogue-download img {
	max-height: 100px;
}

#pdf-catalogue-download {
	margin-bottom: 3em;
	margin-top: 2em;
}

/* #pdf-catalogue-download a.list-group-item { */
/* 	background-color: var(--color-bg-quaternary); */
/* 	color: var(--color-text-light); */
/* } */

/* #pdf-catalogue-download a.list-group-item:hover { */
/* 	background-color: var(--color-special-secondary); */
/* } */

/* Explorer - Suche */

/* In der Katalog-Suche, begrenzen wir Bilder in Suchergebnisen maximal auf die Breite des Suchergebnisses */
#searchResultArea #explorer-tp-list img {
	max-width: 95%;
	height: auto;
}
/* In der Katalog-Suche, begrenzen darf die Beschreibung nicht größer als das Element sein. Zielt auch auf Biler mit komischen Style ab.*/
#searchResultArea #explorer-tp-list .shortDescription {
	overflow-x: hidden;
}

#explorerSearchRow {
	display: flex;
	justify-content: center; 	/* hier auf left umstellen, wenn das Suchfeld links bündig sein soll */
	margin-bottom: 4px;
}

#explorerSearchBar {
	display: grid; 
	grid-template-columns: max-content auto;
}

.explorer-search {
    position: relative;
    width: 30em;			/* vernünftige Länge für das Suchfeld, man schreibt ja keine Romane */
}

#explorerSearchFolderOnly {
	max-width: 20em;		/* der Bereich für die Checkbox des aktuellen Ordners */
}

@media ( max-width : 680px) {
	.explorer-search {
	    width: 100%;
	}
	#explorerSearchBar {
		grid-template-columns: auto;		/* damit das responsiv wird nur 1x auto */
		width: 100%;						/* Am Handy nehmen wir die ganze Breite */
	}
	#explorerSearchFolderOnly {
		max-width: 100%;
	}
}


.explorer-search input {
    height: 60px;
}

.explorer-search .search-icon {
    position: absolute;
    top: 18px;
    left: 16px;
    font-size: 1.6em;
}

.explorer-search button {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
}

.explorerExtendedSearchArea {
	border-bottom: 3px solid var(--color-bg-primary);
	display: flex;
	justify-content: center;	
	width: 100%;
}

.explorerExtendedSearchArea a {
	width: 100%;
}

#folderCardsAreaExplorer {
	margin-bottom: 1em;
}

/* Advanced Search */

#advancedSearchCollapsible legend {
	padding: inherit;
	float: none;
}

/*---------media-queries-----------*/

@media only screen and (min-width: 768px) {
	.explorer-search input {
		text-indent: 45px;
	}
}

@media only screen and (min-width: 992px) {
	
	.ecadia-folder-card:hover .card-body {
		transform: translate(0, -90px);
	}
	
	.ecadia-folder-card .card-body {
		bottom: -90px;
	}
}


/* ------------ END EXPLORER ------------ */


/* ------------ START SPLASH SCREEN ------------ */

.welcome {
	position: absolute;
	top: calc(0px - var(--header-height));
	left: 0;
	height: 100vh;
	width: 100%;
	background-color: var(--color-bg-secondary);
	z-index: 500;
	animation: hide 1s 3s ease forwards;
}

@keyframes hide {
  0% {
    opacity: 1;
	visibility: visible;
  }
  100% {
    opacity: 0;
	visibility: hidden;
  }
}


/* ------------ END SPLASH SCREEN ------------ */


/* ------------ START FILTER LIST ------------ */

input.filter-input {
	margin-bottom: 1em;
}



/* ------------ END FILTER LIST ------------ */


/* ------------ START EVENT LIST ------------ */

/* kleiner Abstand um die einzelnen Tage zu trennen */
#calendarList .eventlist-dayHeader {
	margin-top: 0.5rem;
	background: none;
	border: none;
}

#calendarList .eventlist-dayHeader h5 {
    color: var(--color-header-1);
	font-size: 1.2em;
}


.eventlist-noevent-color.workday {
	background-color: white;
}

.eventlist-noevent-color.holiday {
	background-color: #f9dada;
}

.eventlist-color.workday,
.eventlist-color.weekend,
.eventlist-color.holiday {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
}

.eventlist-noevent-color.weekend {
	background-color: #f1f1f1;
}

/* ------------ END EVENT LIST ------------ */

/* ------------ START inquiryKey.jsp CSS ------------ */

#popupInquiryKeyInput {
	width: 100%;	
	height: 38px;
	border-radius: 5px;
}
  
#InquiryKeyIcon1 {
	float: left; 
	margin-top: 4px;
} 
 
/* ------------ END inquiryKey CSS ------------ */

/* ------------ START examParticipantKey.jsp CSS ------------ */

#examKeyInput {
	width: 100%;	
	height: 38px;
	border-radius: 5px;
}

#examKeyIcon1 {
	float: left; 
	margin-top: 4px;
}

/* ------------ END examParticipantKey.jsp CSS ------------ */



/* ------------ START WIDGETS ------------ */
/* TinyMCE Higlighting übernommen aus Commit c693557c5257592f49e285e7b89137c4dda94440 -------------------------------- */
/* Mobile-Widgets Pflichtfelder leicht gelber Hintergrund, aber nicht bei disable ------------------------------------ */
input:required:not([disabled]), 
textarea:required:not([disabled]), 
textarea:required:not([disabled])+div.tox-tinymce iframe, /* etwas kompliziert, aber so erericht man den Textbereich bei tinymce */
.requiredInput:not(.select2-container-disabled ), 
.requiredInput:not(.select2-container-disabled ) > .select2-choice,
select:required + span .select2-selection {
  background-color: #FFFBDF;
}


/* Der TinyMCE hat in seinem Menü einen grauen Strich, den wollen wir nicht haben, da sich das Menü eh visuell vom Text abhebt */
div.tox .tox-toolbar, div.tox .tox-toolbar__overflow, div.tox .tox-toolbar__primary {
	background-image: none;
}


label.required:before {
	content: '*';
}

span.select2-selection.is-valid {
	border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

span.select2-selection.is-invalid, .is-invalid{
	border-color: #dc3545 !important; /* damit das :valid aus dem bootstrap-Standard überschrieben wird, :valid verlangt halt nur irgendeinen Inhalt */
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e")  !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.select2-selection.is-invalid > span.select2-selection__rendered,
.select2-selection.is-valid > span.select2-selection__rendered {
    background-repeat: no-repeat;
    background-position: right 1.5em top .55em;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.select2-selection.is-invalid .select2-selection__arrow, .select2-selection.is-valid .select2-selection__arrow{
	display:none;
}

label.required:before {
	content: '*';
}

/* Die Row braucht man, damit nur vertikale Tabs auf ihre volle Größe gehen */
.row .nav-tabs .nav-item, .nav-tabs .nav-item > div {
	width: 100%; /*Notwendig um die enthaltenen Texte in der Seitenleiste Menü umzubrechen*/
}
.nav-tabs .nav-link {
	font-size: 12px;
	color: var(--color-text);
	font-weight: 500;
	font-size: 18px;
	padding: 10px 15px;
}

.nav-tabs .nav-link.tab-clickable {
	border: none;
}

.nav-tabs .nav-link:not(.tab-clickable) {
	border-width: 0 0 2px;
}

.nav-tabs .nav-link.active {
	color: var(--color-text-primary);
	border-color: var(--color-bg-primary);
	background-color: var(--color-bg-primary);
}

.nav-tabs .nav-link.active:not(.tab-clickable) {
	border-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, var(--color-bg-primary) 5%, var(--color-bg-primary) 95%, rgba(255,255,255,0) 95%, rgba(255,255,255,0) 100%);
	border-image-slice: 1;
}

.nav-tabs .nav-link:hover:not(.active) {
	background-color: var(--color-bg-secondary-hover);
	border-color: var(--color-text-secondary-hover);
	color: var(--color-text-secondary-hover);
}

.nav-tabs .nav-link:hover  {
	background-color: var(--color-bg-primary-hover);
	border-color: var(--color-text-primary-hover);
	color: var(--color-text-primary-hover);
}

.nav-tabs .nav-link:hover:not(.active), .nav-tabs .nav-link:focus:not(.active) {
	border-color: var(--color-bg-primary);
	border-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, var(--color-bg-primary) 5%, var(--color-bg-primary) 95%, rgba(255,255,255,0) 95%, rgba(255,255,255,0) 100%);
	border-image-slice: 1;
}

/* Time-picker müssen nicht so groß sein- daher hier mal alle standardmäßig etwas kleiner setzen*/
.form-control.MobileTimePicker{
	width: 4rem;
}

/* Date range picker brauchen aber mehr Platz */
.form-control.MobileDatePicker.fp-range {
	width: 16rem;
}



/* Popup beim Erfassen des Datums */
.flatpickr-calendar.hasTime.noCalendar{
	width: 8em;
}

.accordion-container, .accordion  {
	margin-top: 0.5em;
	margin-bottom: 1em;
}

.mobile-list {
	margin-bottom: 1em;
	width: 100%; /* immer die ganze Breite nutzen */
}

.mobile-list-spacing > li {
	margin-bottom: 0.4em;
	border-radius: 4px;
    border-top-width: 1px !important;
}

.accordion-item .accordion-header {
	position: relative;
	margin-top: 0;			/* weil sonst ein Abstand zwischen dem Button und dem Rahmen entsteht; Standard von h3 zurücksetzen */
}

/* Den Margin braucht man, damit der Text der collapsibles nicht in den (evtl. vorhandenen) Zähler reinragt */
.accordion-item .accordion-button > span{
	margin-right: 1.25em;
}

/* kleiner Abstand zwischen den einzelnen Accordions bei den Veranstaltungen */	
#accordionEvents .accordion-item {
	margin-bottom: 1em;
}

.accordion-item .accordion-button::after {
	background-image: none;
	font-family: var(--fa-font-ecadia);
	content: "\f078";
	color: var(--color-text-quaternary);
	background-color: var(--color-bg-quaternary);
	width: 16px;
    text-align: center;
}

/* RS, 15.12.2021 im Colapsible die Anzhal etwas höher anzeigen */
.accordion .ecadia-count-circle {
	right: 50px;
	top: 12px;
	z-index: 50;
}

/* Accordions sind wie im Tooltip angegeben quaternary */
.accordion-item .accordion-button {	
	background-color: var(--color-bg-quaternary);
	color: var(--color-text-quaternary);
}

/* den hover berücksichtigen; die Farben gibts im Theme */
.accordion-item .accordion-button:hover {
    color: var(--color-text-quaternary-hover) !important;
    background-color: var(--color-bg-quaternary-hover) !important;
}

/* auch der Titel ind er Hover-Farbe, weil der sonnst evtl. zu schlecht lesbar ist */
.accordion-item .accordion-button h5:hover {
    color: var(--color-text-quaternary-hover) !important;
}

.accordion-body {
    background-color: var(--color-bg-body);
    color: var(--color-text);
}


.accordion-header .accordion-button:not(.collapsed):hover {
	background-color: var(--color-bg-primary-hover);
	color: var(--color-text-primary-hover);
	box-shadow: 0px 12px 18px -16px var(--color-bg-primary-hover);
}

h3.accordion-header {
	margin-top: 0; /* damit es zwischen Rand und Fläche keinen Abstand gibt */
}


/* Tabs werden Mobile zu Accordions - hier wollen wir aber kein Padding */
.accordion.tab-content {
	padding: 0;
}

/* Das Dreieck bei Dropdowns und bei Accordions was immer hin und her rotiert beim öffnen und schließen*/
.dropdown-toggle[aria-expanded="true"]:after,  .accordion-item .accordion-button[aria-expanded="true"]:after  {
	transform: rotate(180deg); 
}
 
.dropdown-toggle:after, .accordion-item .accordion-button::after { 
	transition: 0.4s; 
}




/* Der Button um in der Partnerauswahl einen MA zu bearbeiten, und die count-info für die Anzahl der NN-Buchungen müssen vor dem Lösch-Icon platziert werden */
#selectedPartnerList .edit-employee, #selectedPartnerList #nnBookingItem .item-count-circle{
	position: absolute;
    bottom: 10px;
    right: 50px;
    font-size: 16pt;
}

#selectedPartnerList .delete-employee {
	position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 16pt;
}

#selectedPartnerList .ecadia-count-circle {
    right: 50px;
    
}

#employeeList1 .list-group-item:not(.d-none),
#employeeList2 .list-group-item:not(.d-none),
#employeeList3 .list-group-item:not(.d-none),
#completePartnerList .list-group-item:not(.d-none),
#selectedPartnerList .list-group-item:not(.d-none) {
	border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-top-width: 1px;
}

#employeeList1 .list-group-item:not(.d-none) ~ .list-group-item:not(.d-none),
#employeeList2 .list-group-item:not(.d-none) ~ .list-group-item:not(.d-none),
#employeeList3 .list-group-item:not(.d-none) ~ .list-group-item:not(.d-none),
#completePartnerList .list-group-item:not(.d-none) ~ .list-group-item:not(.d-none),
#selectedPartnerList .list-group-item:not(.d-none) ~ .list-group-item:not(.d-none) {
    border-top-width: 0px;
}

/* Liste der Mitarbeiter z.B. für Manager im Buchungsprozess */
#componentEmployeeListGrid #leftColumnJoker .row.align-items-start {
    max-height: 600px;
    overflow: auto;
}

#componentEmployeeListGrid #rightColumnJoker .row.align-items-start {
    max-height: 600px;
    overflow: auto;
}

/*MobileTextInput - Passwort */
.passWord-icon {
  float: right;
  margin-left: -25px;
  margin-top: -38px;
  height: 38px;
  position: relative;
  z-index: 2;
  width: 48px;
  text-align: center;
  cursor:pointer;
  background-color: var(--color-bg-quaternary);
  color: var(--color-text-quaternary);
}

/*MobileTextInput - Passwort */
.passWord-icon i{
	width:100%;
}

/* ------------ END WIDGETS ------------ */


/* -------------- START employeeCompetence.jsp -------------- */

.barchart-container {
	min-height: 200px;
}

.summaryTable {
	text-align: right;
}

div#employeeCompetenceContainer div.row:nth-child(2) {
	align-items: center;
}

table.competence-table {
	font-size: 14px;
    max-width: 500px;
}

.competence-icon {
	width: 22px;
}

@media only screen and (min-width: 768px) {
	.radio-sort-div {
	    float: right;
	    margin-top: -26px;
	}
}


/* -------------- END employeeCompetence.jsp -------------- */



/* -------------- START HTMLTABLE2 -------------- */


.dataTables_wrapper .filterResponsive input[type=search] {
	width: 8em;
	
	padding: 0.6em 0.5em 0.5em 34px;
/* 	border-radius: .3125em; */
	border: 1px solid #ddd;
/* 	cursor: pointer; */

	background-image: url('../gifMobile/filter16.png');
	background-repeat: no-repeat;
	background-position: 10px 11px;
}

.filterResponsive {
	float: right;
}

.dataTables_info {
	font-size: 14px;
}

/* Buttons in Zellen mit kleinem Abstand */
.dataTable td .btn {
	top: 3px;
	margin-bottom: 3px;
} 

/* NMA 14.2.24
Es gibt bei HTMLTable2's SubmitButtons. Die werden im Moment mobile nur für Reports mit Aktionen angezeigt. Wir passen hier einen Text an, der vor diesen Buttons angezeigt wird 
*/
div.dataTableArea div.ActionPanel > span {
	margin-top: 20px;
}


/* -------------- END HTMLTABLE2 -------------- */



/* -------------- START Tooltips -------------- */

a.tooltip-icon {
	margin-left: 10px;
}

.tooltip-inner {
    text-align: left;
    background-color: #fefefe;
    color: black;
    box-shadow: 0px 0px 4px black;
    opacity: 1 !important;
}


/* -------------- END Tooltips -------------- */




/* -------------- START SEARCH.JSP -------------- */

.ranking-result-1 {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.ranking-result-0 {
    background-color: lightgray;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}


/* -------------- END SEARCH.JSP -------------- */

/* -------------- START employeelist.jsp -------------- */

/* Ansicht ab Tablets, PCs usw. wegen der Combolist eine fixi groe?e gegeben */
@media (min-width: 600px) {
 .tableEmployeelist {
  width: 50%;
 }
}

/* Ansicht für Handys wegen der Combolist eine fixe Große gegeben */
@media (max-width: 400px) {
.tableEmployeelist {
   width: 100%;
}
}

/* -------------- END employeelist.jsp -------------- */


/* -------------- START competences --------------- */

list-group-item .openCompetenceActions i {
	font-size: 16pt;
}

list-group-item .openCompetenceActions:hover i {
	color: var(--color-text-emphasize);
}

table.competenceListTrainingTable > tbody > tr > td {
	font-size: 0.8em;
}

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

/* -------------- END competences --------------- */


/* *************************************************************************************************** */
/* resourcePlannerMobile.jsp                                                                                          */
/* *************************************************************************************************** */


/* Zusammengefasst die css f?r die fullcalendar (Raum?bersicht, Trainingplanner, Belegungsanzeige (CalendarPartnerView) ---------------------------- */
#calendarResourcePlannerMobile #fc-headerTableWeeks {
	table-layout:fixed;
}

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

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

#calendarResourcePlannerMobile td.fc-resourceName, #calendarResourcePlannerMobile 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;
}

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

/* leider gibt es f?r die Wochentage keine bessere Selektion */
#calendarResourcePlannerMobile .fc td {
	background-color: #ffffff; /* wei?er Hintergrund f?r den Kalender - wie Outlook */
}

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

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

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

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


/* needed for modifying fullcalendar.css file */
#calendarResourcePlannerMobile .fc-view {
	height: 700px;
	position: absolute;
	overflow-y: auto;
}

#calendarResourcePlannerMobile .fc-border-separate th {
	border-right: 1px solid #999999;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
}

#calendarResourcePlannerMobile .fc-border-separate th {
	border-right: 1px solid #999999;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
}

#calendarResourcePlannerMobile .fc-event-title {
	text-shadow: none !important;	
}


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

#calendarResourcePlannerMobile .fc-widget-header, #calendarResourcePlannerMobile  .fc-widget-content {

	border-bottom: 2px solid #aaaaaa;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	
}

#calendarResourcePlannerMobile .fc-view {
	height: 510px;
	position: absolute;
	overflow-y: auto;
}

#exportExcelResourcePlannerMobile{
	margin-left:10px; 
	width:50px;
	float: right;
    margin-bottom: 1em;
    margin-top: -3em;
}
/* *************************************************************************************************** */
/* popupResourceAssignment.jsp                                                                                          */
/* *************************************************************************************************** */
/*Zwischen den beiden Datumsangaben und Uhrzeitangaben der Strich */
#modal_resourceAssignmentDialog label[name=separator]{
    text-align: center;
	margin-top: 10px;
}




/* *************************************************************************************************** */
/* participantHotelneed.jsp                                                                                          */
/* *************************************************************************************************** */


#completeHotelBookingOverview .dot {
	height: 1.25em;
	width: 1.25em;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	margin-bottom: -0.25em;
}
#completeHotelBookingOverview #calendarLegende>div {
	min-width: 9em;
}

#completeHotelBookingOverview .acommodation_background {
	background-color: #f03c35 !important;
}

#completeHotelBookingOverview .acommodation_booked_background {
	background-color: yellow !important;
}

#completeHotelBookingOverview .catering_background {
	background-color: orange !important;
}

#completeHotelBookingOverview .childCare_background {
	background-color: green !important;
}

#completeHotelBookingOverview .training_background, .training_background, .type-bul.event /* wird in eventCalendar.jsp gebraucht */ {
	background-color: #555555 /* schön dunkel grau, damit das gut zu erkennen ist */ !important;
}

#completeHotelBookingOverview .today_background {
	background-color: #fcf8e3 !important;
}

/* Dieses Popup kann nur bestätigt werden oder man verlässt die Seite über den zurück button */
/* Es soll nicht mäglich sein das Popup über x zu schließen, daher zeigen wir es einfach nicht an */
#modal_initialConfirmPopup .btn-close{
	display: none;
}


/* *************************************************************************************************** */
/* popupCompetenceActions.jsp                                                                                          */
/* *************************************************************************************************** */

#modal_popupCompetenceActions button[name=trainingNotRequiredSave] {
	margin-top: 1em;
}

/* *************************************************************************************************** */
/* popupOpenToDo.jsp                                                                                          */
/* *************************************************************************************************** */
#todoPopupButtonContainer button.actionButton{
	width: 100%;
}

/* *************************************************************************************************** */
/* enrollList.jsp                                                                                          */
/* *************************************************************************************************** */
div#enrollListRootContainer button[name='startSearch']{
		 margin: 22px;
}


/* *************************************************************************************************** */
/* approvalEnrollList.jsp                                                                              */
/* *************************************************************************************************** */

#modal_popupApproval #commentForApproveArea {
    background-repeat: no-repeat;
    background-position: 8px 40px;	
}

#modal_popupApproval .employeeRequestColumn p{
	margin:0;
}

/* *************************************************************************************************** */
/* popupTrainerChangeParticipants.jsp                                                                              */
/* *************************************************************************************************** */

#modal_popupTrainerChangeParticipants label[name=popupTrainerChangeParticipantsParticipantInfo] {
	margin-bottom: 2em;
}


/* *************************************************************************************************** */
/* eventParticipantsSignature.jsp                                                                              */
/* *************************************************************************************************** */

#signatureCanvas {
    /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#signatureCanvas {
    border:2px solid #888;
    border-radius:4px;
    position:relative; /* Necessary for correct mouse co-ords in Firefox */
}
.signatureImage{
	
	max-height: 70px;
	width: 200px;
	border: 1px dashed blue;
	cursor: pointer; /* weil man durch klicken erneut unterschreiben kann */
}

/* *************************************************************************************************** */
/* eventParticipants.jsp                                                                              */
/* *************************************************************************************************** */

#eventParticipantsContainer .attendanceButton[disabled=disabled]:hover {
	cursor: default !important;
}

#eventParticipantsContainer .attendanceButton[disabled=disabled] {
	border: 0;
	background-color: transparent !important;
}


/* *************************************************************************************************** */
/* homeworkTrainerParticipantSubmission.jsp                                                                              */
/* *************************************************************************************************** */

#modal_popupSubmission label[for=statusSubmission_3], #modal_popupSubmission label[for=statusSubmission_2], #modal_popupSubmission label[for=statusSubmission_1], #modal_popupSubmission label[for=statusSubmission_0], .SubmissionStatusText{
	width: 100%;
}

#modal_popupSubmission .SubmissionStatusText{
	display: inline-block;
	margin-top: 4px;
}


#modal_popupSubmission label[name=infoLabel]{
	padding-bottom: 10px;
}


/* *************************************************************************************************** */
/* selfServiceDSGVO.jsp                                                                              */
/* *************************************************************************************************** */

.dsgvoRadioText {
	margin-left: 30px;
}

#dsgvoGridRoot div.form-check /*die Radio-Buttons*/{
	margin-bottom: 50px;
}

/* *************************************************************************************************** */
/* translateHelper.jsp                                                                              */
/* *************************************************************************************************** */


#translateHelperTable.itemTable tr:hover,
#translateHelperTable.itemTable tr:hover td {
	background-color: #d0e0f0 !important;	
}

#translateHelperTable.itemTable thead th,
#translateHelperTable.itemTable tbody tr:last-child {
    border-bottom: 1px solid #d6d6d6;
    padding: 4px;
}

#translateHelperTable.itemTable tbody th,
#translateHelperTable.itemTable tbody td {
    border-bottom: 1px solid #e6e6e6;
    padding: 4px;
    vertical-align: middle;
}

#translateHelperTable.itemTable tbody tr:nth-child(odd) td,
#translateHelperTable.itemTable tbody tr:nth-child(odd) th {
    background-color: #eeeeee;
}


/* *************************************************************************************************** */
/* Examen.jsp                                                                              */
/* *************************************************************************************************** */


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

/* damit die Dokumente kein Bullet bekommen */
#examFolderQuestions ul#documentList {
	list-style-type: none !important;
	padding-left: 0 !important;
}

#ExamParticipantSheetMain {
	width: 100%;
}

/* ExamParticipantSheet Formatierung des "Verbleibenden Berabeitungszeit" Infotexts */
#ExamParticipantSheetMain .examRemainingDurationInfo{
	font-size: 1.1rem;	
}

/* ExamParticipantSheet Formatierung der verbleibenden Zeit */
#ExamParticipantSheetMain .examRemainingDurationTime{
	font-size: 1.2rem;
}

table.ExamResultTable {
	margin-top: 10px;
	width: 100%;
}

table.ExamResultTable tr td {
	padding: 4px;
	color: #444444;
	font-size: 12pt;
	border: 1px solid #777777;
}

/* die 2. Spalte mit den Punkten */
table.ExamResultTable tr td:nth-child(2) {
	text-align: right;
	font-family: monospace;	
}


#ExamParticipantSheetMain #examFolderDrawerContainer{
	margin-top: 20px;
	text-align: center;
}

#ExamParticipantSheetMain .dot.answered {
	background-color: #e3f9e7;
}

#ExamParticipantSheetMain .dot.answering, #ExamParticipantSheetMain .dot.answered.answering {
	background-color: #6add79;
}
#ExamParticipantSheetMain .dot.marked.answering, #ExamParticipantSheetMain .dot.answered.marked.answering{
	background-color: #98e067;
}

#ExamParticipantSheetMain .dot.marked,#ExamParticipantSheetMain .marked {
	background-color: #ffff80;
}

#ExamParticipantSheetMain .dot.marked.answered, #ExamParticipantSheetMain .dot.answered.marked {
	background-color: #ffff80;
}


#ExamParticipantSheetMain #textDiv,
#ExamParticipantSheetMain #imgDiv {
	overflow: auto;
}


#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 .dot {
	float: left;
	height: 27px;
	width: 27px;
	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: flex;
  width: 100%;
  flex-flow: row wrap;
  align-content: space-between;
  margin-bottom: -2em;
  justify-content: center;
}

#examFolderDrawer .points {
	float: right;
}


#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;
    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;
    
    /* INhalt zentrieren */
    display: flex;
    align-items: center;
    float: left;
    position: relative;
}


#ExamParticipantSheetMain .dropAreaPicture.dropAreaBorder {
    border: dashed 4px #cccccc;
    border-radius: 20px;
}

#ExamParticipantSheetMain .dragAreaPicture.hide {
  transition: 0.01s;
  transform: translateX(-9999px);
}

#ExamParticipantSheetMain .dropAreaPicture {
    width: 90%;
    height: 80%;
    background-color: transparent;
    position: absolute;
    top: 20%;
    left: 5%;
    padding-top: 20px;
}

#ExamParticipantSheetMain .dropAreaLabel {
	margin: 4px;
	margin: auto;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Checkboxen und Radios im gleichen Style wie die Sortierbaren listen, primarycolor umrandet alles*/
#ExamParticipantSheetMain .examQuestionRadio, #ExamParticipantSheetMain .examQuestionCheckbox {
	width: 100%;
    margin: 0.5em 0;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border-radius: 4px;
}    

#ExamParticipantSheetMain .examQuestionRadio > label, #ExamParticipantSheetMain .examQuestionCheckbox  > label {
    padding: 0.5rem;
    width: 100%;  /*So ist die ganze "zeile" Klickbar f?r die Checkbox */
    height: 100%;  /*So ist die ganze "zeile" Klickbar f?r die Checkbox */
}

#ExamParticipantSheetMain .examQuestionRadio .answerText, #ExamParticipantSheetMain .examQuestionCheckbox .answerText {
	margin-left: 5px;
} 


#ExamParticipantSheetMain .progress .progress-bar.lessTime{
 	background: #ff00c2; 
}

#ExamParticipantSheetMain .progress .progress-bar.lessTime2{
	background: red;
}

/* Der Container f?r die Progressbar, anders gesagt die "Umrandung" */
#ExamParticipantSheetMain .progress{
	height: 24px;
	border: 1px solid;
}

/* Text innerhalb des Fortschrittbalkens */
#ExamParticipantSheetMain .progress-bar-text{
	padding-left: 10px;
}

/* Placeholder beim Sortieren der Listen */
#ExamParticipantSheetMain li.sortable-placeholder {
    list-style-type: none;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    padding: 0.5rem 1rem;
    margin-bottom: 0.5em;
}

/*Bei der Sortierbaren Liste sollen die Elemente nie beim hover "hochploppen"
Das f?hrt beim ziehen eines anderen Elements nur zu Verwirrung */
#ExamParticipantSheetMain .list-group-item:hover {
     transform: none;
     box-shadow: none;
}

/* das Bild beim  Drag&Drop */
#ExamParticipantSheetMain .dragAreaPictureImg {
	max-width:140px;
 	max-height:140px;
 	min-width: 32px;
 	min-height: 32px;
  	z-index: 10; /*Damit wird sichergestellt, das die Bilder vor den jeweiligen Fl?chen sind */
    -webkit-user-drag: none;
    user-select: none;
    display: block;
    margin: auto;
}

#ExamParticipantSheetMain .dragAreaPicture {
	margin: auto;
    user-select: none;
    -webkit-user-drag: element;
}

#ExamParticipantSheetMain [draggable=true] {
  cursor: move;
}

/* Die Auswahllisten in den Lückentexten */ 
#examFolderQuestions .select2{
	width: 20em!important; /* Das muss leider important sein, irgendwo wird das auf witdh auto gestellt und wir müssen das ?berschreiben*/
}

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

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

.examQuestionRankingList {
	margin: 0 auto;
}

.examQuestionRankingList .list-group-item {
	padding: 4px;
	margin-bottom: 8px;
	border-top-width: 1px;
	/*Alternativ: generell abgerundet*/
	/*
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
	*/
}

.examQuestionRankingList .list-group-item:nth-child(2){
	border-top-right-radius: inherit;
	border-top-left-radius: inherit;
}


span.connectionStatusOK, span.connectionStatusNotOK {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50% ;
    width: 16px;
    height: 16px; 
    min-width: 16px; /*Ansonsten gibt es Bildschirmgrößen bei denen das ansonsten verzerrt angezeigt wird */
    min-height: 16px; /*Ansonsten gibt es Bildschirmgrößen bei denen das ansonsten verzerrt angezeigt wird */
	display: inline-block;
	border: 1px solid #999999;
	vertical-align: bottom;
    z-index: 50;
}
span.connectionStatusNotOK {
	background-color: var(--color-bg-danger);
}

span.connectionStatusOK {
	background-color: var(--color-bg-success);
}

/* *************************************************************************************************** */
/* trainerPopup.jsp                                                                              */
/* *************************************************************************************************** */
.trainerPopupImg{
	display: block;
    margin: 0 auto;
    image-orientation: from-image;    
    max-width: 100%;
}

/* *************************************************************************************************** */
/* examEvaluation.jsp                                                                              */
/* *************************************************************************************************** */

#exam-evaluation-container table#participantSheetTable {
		border-collapse: separate;
	border-spacing: 0 2px;
}

#exam-evaluation-container  table#participantSheetTable td {
	border: 1px solid black;
	padding-left: 8px;
	padding-right: 8px;
}

#exam-evaluation-container  td.achievedPointsColumn,
#exam-evaluation-container td.achievablePointsColumn {
	width: 100px;
}

#exam-evaluation-container table#participantSheetTable thead td.topFolder {
	font-weight: bold !important;
	padding: 8px;
	text-align: center;
}

#exam-evaluation-container td.achievablePointsColumn.editableRow p {
	margin-top: 28px;
}

#exam-evaluation-container td.evaluationCommentColumn {
	min-width: 220px;
}

#exam-evaluation-container table#participantSheetTable tbody td.achievedPointsColumn,
#exam-evaluation-container table#participantSheetTable tbody td.achievablePointsColumn {
	text-align: right;
	padding-right: 5px !important;
}

#exam-evaluation-container div.participant-answer {
	background-color: white;
}

#exam-evaluation-container ul.document-download-list {
	list-style-type: none;
	background-color: white;
	padding-left: 15px;
	padding: 8px;
}

#exam-evaluation-container .document-download-list li::before {
    content: "\2B73";
    margin-right: 5px;
}

#exam-evaluation-container textarea.evaluationCommentInput {
	min-height: 150px !important;
	margin-top: 20px;
	margin-bottom: 20px;
}


/* Die Bilder in der Frage dürfen maximal so breit werden wie die Spalte in der sie eingebettet sind */
#exam-evaluation-container .questionText img{
	max-width: 100%;
   	width: auto;
   	height: auto;
}

/* Hier sollen die Listen auf keinen Fall "animiert" sein */
#exam-evaluation-container .list-group-item:hover {
	transform: none;
	box-shadow: none;
}

/* *************************************************************************************************** */
/* inquiryParticipant.jsp                                                                              */
/* *************************************************************************************************** */

#inquiryFormGrid .hidden-page, #inquiryFormGrid div.hidden-condition {
 	display: none;
}

/* Der Container für die Progressbar, anders gesagt die "Umrandung" */
#paginationNavigation .progress{
	height: 24px;
	border: 1px solid;
	background-color: white;
}

.progressBarMobileInquiry {
	width: 20%;	
}

/*Der Balken der den Fortschritt markiert */
#paginationNavigation .progress .progress-bar{
	overflow: visible;
	background-color : lightgrey;
	color: black;
	
}

/* Text innerhalb des Fortschrittbalkens */
#paginationNavigation .progress-bar-text{
	padding-left: 10px;
}

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

/* .matrixTable tbody{ */
/* 	border: none; */
/* } */

/* Matrix-Frage Zelle */
.matrixTable-cell {
	padding-left: 0px;
	padding-right: 0px;
	min-height: 80px;
	min-width: 50px;
	width:100%;
	color: var(--color-text-secondary);
	background-color: var(--color-bg-secondary);
	border-radius:5px;
	text-align:center;
}

.matrixTable-cell:hover {
	color: var(--color-text-secondary-hover);
	background-color: var(--color-bg-secondary-hover);
}

.matrixTable-cell.checked {
	color: var(--color-text-primary);
	background-color: var(--color-bg-primary);
}

.check-matrix-grid {
	gap: 0.5rem;
	grid-template-columns: repeat(var(--col-amount), minmax(0, 1fr));
}

.matrixTable-cell input.form-check-input:checked {
	border-color: var(--color-bg-secondary);
}

.matrixTable-cell .answerText {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/* .matrixTable-cell input{ */
/* 	margin-top: 25px; */
/* } */

/* Bei Umfragen sollen die Checkboxen und Radio-Buttons etwas größer und auffälliger sein */
/* .question_container .form-check.checkbox, .question_container .form-check.radio { */
/*     border: 1px solid #ced4da; */
/*     padding-left: 2em; */
/*     border-radius: 0.25rem; */
/*     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
/* } */

/* Bei Umfragen sollen die Checkboxen und Radio-Buttons etwas größer und auffälliger sein, und dann soll die komplette Fläche klickbar sein */
 .question_container .form-check.checkbox > label, .question_container .form-check.radio > label{
    width: 100%;
}

.matrixTable .highlightRequired, .quest.highlightRequired {
	border: 2px solid  var(--color-bg-danger) !important;
	
}


/* *************************************************************************************************** */
/* employeeTrainingPathAssignment.jsp                                                                              */
/* *************************************************************************************************** */

#trainingPathAssignmentSteps ul#automaticPreregistrationError{
	color: red;
}

/* *************************************************************************************************** */
/* employeeCompetence.jsp                                                                              */
/* *************************************************************************************************** */
#employeeCompetenceContainer .statusTableNumber { text-align: right; }
#employeeCompetenceContainer .sumTable td { font-weight: bold; color: black; }
#employeeCompetenceContainer div.red		{ background-color:red; height:18px; text-align:left; }
#employeeCompetenceContainer div.green 	{ background-color:green; height:18px; }
#employeeCompetenceContainer div.gray 	{ background-color:#AAAAAA; height:18px; text-align:left; }
#employeeCompetenceContainer div.yellow 	{ background-color:yellow; height:18px; text-align:left; }

#employeeCompetenceContainer .trainingPathRow td {
	font-weight: bold;
}

#employeeCompetenceContainer .summaryTable {
	border-collapse: collapse;
}

#employeeCompetenceContainer .summaryTable th {
	color: #0b3378;
	text-align: center;
}

#employeeCompetenceContainer .summaryTable td, .summaryTable th {
	padding: 0.4em .4em 0.4em .4em;
	border: 1px solid #aaaaaa;
	border-collapse: collapse;
	font-size: 0.8em;
}

#employeeCompetenceContainer #chartLegend td {
	font-size: 0.7em;
}

/* #employeeCompetenceContainer input[type=checkbox] img { */
/* 	width: 24px; */
/* 	height: 24px; */
/* } */


/* *************************************************************************************************** */
/* employeeCompetence.jsp                                                                              */
/* *************************************************************************************************** */
#competenceContainer #productListAreaExplorer .img-thumbnail {
   padding: 0;
   background-color: unset;
   border: none;
}


/* *************************************************************************************************** */
/* createInquiryFormTrainer.jsp                                                                              */
/* *************************************************************************************************** */

/* Leider funktionieren die ecadia-Standardklassen f?r klein und gro?e Bildschirme hier nicht richtig. Daher hier selbst gemacht (normalerweise ist display:block)*/
#selectInquiryDiv .large{
	display: inline;
}
/* Auskommentiert fuer Issue #4588 @ilu 
	weil matrix Spalten nur unter Mobile Ansicht ihre Beschreibung angezeigt haben*/
/*#selectInquiryDiv .small{
	display: none;
}*/

#selectInquiryDiv .Xlarge{
	display: none;
}

@media ( max-width :680px) {
	#selectInquiryDiv .large{
		display: none;
	}
	
	#selectInquiryDiv .small{
		display: inline;
	}
}

@media ( min-width :1200px) {
	#selectInquiryDiv .Xlarge{
		display: inline;
	}
}

#selectInquiryDiv .buttonCreateFormElement {
	background-color: white;
}

#selectInquiryDiv .btn-secondary.buttonCreateFormElement:hover {
	background-color: lightgrey;
} 

/* *************************************************************************************************** */
/* employeeCompetenceList.jsp                                                                              */
/* *************************************************************************************************** */

.competenceText {
	text-shadow: none; /* kann man sinst nicht gescheit lesen */
	font-weight: normal; 
}

td.ActiveAssessment {
	background-color: #fef3de !important; /* pastell gelb zum highlighten der aktuellen Spalte */
}

.competenceOptional {
    background-color: #cccccc !important;	
}

.competenceIsAutorization a:first-child, .competenceIsAutorization {
	
	background-image: url("../gifMobile/competenceAutorisationInfo.png") !important;
	background-position: right 2px bottom 2px;
    background-repeat: no-repeat;	
}

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

}

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

.competenceProgressBarCurrentSelfAssessment {
	background: yellow;
	margin: 2px;
	font-size: .7em;
	color: black;
}

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


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

.competenceProgressBarTextOpen {
	font-size: .7em;
	color: black;
	font-weight: bold;
}

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

.competenceSquareWidgetText.competenceSquareEmpty{
	border: 1px solid black;
    width: 32px;
    height: 32px;
}
/* *************************************************************************************************** */
/* myTrainerRequests.jsp                                                                              */
/* *************************************************************************************************** */
#listTrainerRequest p.rejectedTrainerRequest{
	font-size: small;
}

/* *************************************************************************************************** */
/* myCorrespondenceList.jsp                                                                              */
/* *************************************************************************************************** */
table#correspondenceJobTable a {
	color: black;
	text-decoration: none;
	font-weight: inherit !important;
}

table#correspondenceJobTable a:hover {
	color: black;
	text-decoration: underline;
}

/* *************************************************************************************************** */
/* correspondenceJob.jsp                                                                              */
/* *************************************************************************************************** */
#correspondenceJobBody iframe{
	width: 100%;
}

.correspondenceJobBody{
    background-color: rgb(252, 253, 254);
    border-radius: 10px;
    border: 1px solid black;
}

/* *************************************************************************************************** */
/* toDoList.jsp                                                                              */
/* *************************************************************************************************** */

.mobile-list li.toDoListItem .img-thumbnail {
 	max-height: 32px;
}

#todoList .toDoIsLate h1 {
	color: red;	
}

#todoList li.toDoIsLate {
	background-image: url("../gifMobile/deadline32.png");
	background-repeat: no-repeat;
	background-position: right 10px center;	
}

#todoList li.todoHighlight {
	
	background-image: url("../gifMobile/alert32.png");
	background-repeat: no-repeat;
	background-position: right 10px center;	
}

#toDoDateFilterContainer input.filterButton {
	margin-top: 8px;
}

#toDoDateFilterContainer div.form-check{
	margin-top: 35px;
}
 
/* *************************************************************************************************** */
/* cancelEnroll.jsp                                                                              */
/* *************************************************************************************************** */
#cancellationOverviewContainer .successfulCancelation{
	color: green;
}

#cancellationOverviewContainer .unsuccessfulCancelation{
	color: red;
}


/* *************************************************************************************************** */
/* autocomplete von input feldern                                                                      */
/* *************************************************************************************************** */

.autocomplete-result-area {
	position: absolute;
	margin-top: 4px;
	z-index: 5; /* So ist die Autocomplete-Liste über den Suchergebnisen im Explorer. Ansonsten kann es sein, dass man auf ein Ergebnis der Autocomplete-Liste klicken will aber ausversehen ein Suchergebnis öffnet*/
}

/* die results in der schnellsuche sollen etwas breiter sein als das input-feld */
nav.navbar .autocomplete-result-area {
	max-width: 50em !important;
}


li.autocomplete-result-entry img.img-thumbnail {
	height: 32px;
}

/* um über die Pfeiltasten ausgewählten Eintrag hervorzuheben*/
li.autocomplete-result-entry-selected {
	background-color: var(--color-bg-primary)/*var(--bg-body)*/ !important;
	color: var(--color-header-primary);
}
/* *************************************************************************************************** */
/* myinquiryEvaluationList.jsp                                                                              */
/* *************************************************************************************************** */
 
 /* Im PopupQR-Code für den Trainer */
#inquiryQRCode {
	padding: 1em;
	text-align: center;
	
}
	
.participantKeyLabelText{
	font-weight: bold;
	margin-top:25px;
	margin-bottom:25px;	
	margin-right: 5px;
}

.participantKey{
	padding: 5px;
	font-family: 'Courier New', monospace;
	border: 1px solid black;
	border-radius:0.2em;
	margin-top:25px;
	margin-bottom:25px;
}
 

/* *************************************************************************************************** */
/* inquiryEvaluation.jsp                                                                              */
/* *************************************************************************************************** */
/* Die Fragebögen haben eine Umrandung, dann machen wir das hier für die Zusammenfassung auch so*/
#allEvalDiv {
    margin: 0.5em;
    padding: 1em;
    border: 2px solid #888888;
    box-shadow: 4px 4px 4px #999999;
    background-color: white;
}
#singleEvalDiv .singleEval{ 
     min-width: 20px; 
     width: 100%;
 } 
 
#inquiryEvaluationButtonContainer .summaryButton{ 
 	width: 100% 
} 


#singleEvalDiv{
    padding-left: 0.5em;
    width: 100% !important
}



/* *************************************************************************************************** */
/* myDocumentsToRead.jsp                                                                              */
/* *************************************************************************************************** */

li.list-group-item.count-icon-red .item-count {
	color: red;
}

li.list-group-item.count-icon-orange .item-count {
	color: orange;
}

li.list-group-item.count-icon-green .item-count {
	color: green;
}


/* *************************************************************************************************** */
/* TOTP-Popup                                                                              */
/* *************************************************************************************************** */


#inputOtp {
	border: 1px solid #777777;
	border-radius: 0.2em;
    color: blue;
    font-family: monospace;
    font-size: 16pt;
    margin: auto;
    width: 4.5em;
    text-align: center;
}

#mfaSecretField {
	word-break: break-all;
	user-select: all;
	-webkit-user-select: all;
	-moz-user-select: all;
	-ms-user-select: text;
	background-color: #f3f4f5;
	border: 1px solid #777777;
	border-radius: 0.2em;
	padding: 0.5em;
	width: 95%;
	height: 6em;
	overflow:auto;
	font-size: 0.9em; /* dann werden das 3 Zeilen */
}


#logonTab > h3, #newAccountTab > h3, #otherNewAccountTab > h3{
	display: none; /* Stand 26.04.22 wird bei den Tabs das Label auch auf den Container nochmal abgedruckt*/
}

.logonMFAStep1 {
	padding-left: 40px;
	background-repeat:no-repeat;
	background-position: 0px 0px;
	background-image: url('../gifMobile/processStep1.png');
}	


.logonMFAStep1 p:nth-child(1) {
	padding-right: 100px;
	height: 70px; /* damit das Bild ganz sichtbar bleibt */
	background-repeat:no-repeat;
	background-position: right top;
	background-image: url('../gifMobile/qrCodeScan64.png');
}	

	
.logonMFAStep2 {
	padding-left: 40px;
	background-repeat:no-repeat;
	background-position: 0px 0px;
	background-image: url('../gifMobile/processStep2.png');
}	

.logonMFAStep2 p:nth-child(1) {
	padding-right: 100px;
	height: 70px; /* damit das Bild ganz sichtbar bleigt */
	background-repeat:no-repeat;
	background-position: right top;
	background-image: url('../gifMobile/getMFAKey64.png');
}	

/* *************************************************************************************************** */
/* popupSelectWBTLanguage*/
/* *************************************************************************************************** */

#modal_selectWBTLanguage .modal-body, #modal_selectWBTLanguage .mobileRootContainer{
	padding: 0; /* wir wollen, dass die Sprachauswahl so groß wie möglich im Popup ist */
}

/* Um die Flaggen kein Border */
#modal_selectWBTLanguage #languageList .img-thumbnail{
	border: none;
}

#modal_selectWBTLanguage .modal-body{
	overflow-y: clip; /* Stand 13.6.22 wurde sonst eine Scrollbar angezeigt die es nicht braucht*/
}

/* *************************************************************************************************** */
/* trainingProduct.jsp, selfstudy.jsp */
/* *************************************************************************************************** */

/* Schloß-Icon um im Buchen-Button zu signalisieren, dass man sich erst einloggen muss bevor man buchen kann */
.lock-icon {
	background: rgba(255, 255, 255, 0.9);
	padding:0.3rem;
	margin-left:0.3rem;
	margin-bottom: -0.5rem;
	margin-top: -0.5rem;
	border-radius: 50%;
	color: #6c757d;
	
	font-size: .8em;
}



@media only screen and (min-width: 900px) {
	/* Auf großen Bildschirmen soll das Schloß-Icon den Buchen-Button nicht verlängern, der hat genug Platz. Auf dem Handy braucht es aber den Platz */
	.lock-icon {
		margin-right: -1.25rem;
	}
}

.card-header {
	background-color: var(--color-bg-secondary);
	color: var(--color-header-secondary);
 }
 
.text-body {
	color: var(--color-text) !important;
	margin-top : 0.5rem;
	padding : 0.5rem;
	background-color: var(--color-bg-secondary);	
}

.text-body ul, .text-body ol {
	margin-left : 1rem;
}

 .documentTableThumbnail > img {
	padding: 3px;
}
.document-body {
	font-size: small;
}
 
.DocumentListFrame > ul {
	list-style: none;
}
  
.ratingBlock, .forumBlock {
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;
	padding: 15px;
	margin: 5px;
}

#forumforSubjectContainer .row .col-md {
	text-align: right;
}

.productImage {
    box-shadow: 0 2px 5px 1px rgb(0 0 0 / 20%);
    border-radius: 5px;
    border: none;
    margin: 0.5em;
}

.event-box .accordion-flush,
#accordionPanelsRight .accordion-flush {
	margin-top:1em;
	margin-bottom:1em;
}

.event-box .accordion-button,
#accordionPanelsRight .accordion-button {
	padding: 1em;
}


.event-box .list-group-item,
#accordionPanelsRight .list-group-item {
	padding: 5px;
    border-radius: 5px;
}

#accordionPanelsRight .accordion-body {
	margin: 0.5em;
	padding: 0.5em;

}

.accordion-flush .accordion-button.collapsed {
    background-color: var(--color-bg-quaternary);
    color: var(--color-text-quaternary);
}

/* *************************************************************************************************** */
/* myAzubiWeekReport*/
/* *************************************************************************************************** */
.emptyHoursSpan {
	color: red;
}


/* ausgeblendete Forumitems für Moderatoren durchgestrichen anzeigen */
.forumEntryHidden {
	text-decoration: line-through;
}


/* *************************************************************************************************** */
/* myInhouseEventsList*/
/* *************************************************************************************************** */
.eventLink{
	color:blue;
	cursor: pointer;
	text-decoration: underline blue;
}

/* *********************************************************************************************************************/
/*  Theme Vorschau*/
/* *********************************************************************************************************************/
.primaryBGDiv, .secondaryBGDiv, .bodyBGDiv, .tertiaryBGDiv {
	color: black;
	background-color: white;
	border: 1px solid black;
}

/* Im PopupQR-Code für den Trainer */
.inquiryQRCode {
	padding: 1em;
	text-align: center;	
}

/* *************************************************************************************************** */
/* includePopupLogin*/
/* *************************************************************************************************** */

/* Abstände im Popup zum Einloggen etwas anpassen */
#MobilepopupLogon_TabSetLogonTabSet.nav-tabs{
	margin-bottom: 0px;
}

#MobilepopupLogon_TabSetLogonTabSet-accordion.tab-content{
	padding : 0px;
}

#logonTab img.brandLogo {
	max-height: 32px;
    position: absolute;
    top: 0;
    right: 20px;
}


/* *************************************************************************************************** */
/* createNewEvent.jsp*/
/* *************************************************************************************************** */
/* createNewevent.jsp Meldezusätze */
.createNewEvent_TaggedValueGrid {
	padding-top: .5em !important;
}
.createNewEvent_TaggedValueGrid input {
	margin-top: 12px;
}

.createNewEvent_TaggedValueGrid label {
	padding-top: .5em;
}

#createNewEvent_taggedValueGrid  div {
	vertical-align: middle !important;
}

#gridPrice .row{
	vertical-align: middle 
}

/* *************************************************************************************************** */
/* myWBT.jsp*/
/* *************************************************************************************************** */


/* *************************************************************************************************** */
/* eventParticipant.jsp*/
/* *************************************************************************************************** */
.attendanceButton[disabled=disabled]:hover {
    cursor: default !important;
}

.attendanceButton[disabled=disabled] {
	border: 0;
	background-color: transparent !important;
}

/* da ma ein a-Tag im Safari nicht disabeln kann kommt hier dieser Work-Arround; https://stackoverflow.com/questions/2091168/how-to-disable-a-link-using-only-css */
.not-active {
  pointer-events: none;
  cursor: default;
}

/* *************************************************************************************************** */
/* DashboardwidgetmyProfile.jsp*/
/* *************************************************************************************************** */
/* Das kleine Avatarbild soll immer ein perfekter Kreis und keine Elipse sein. Umso weiter wir von einem Quadrat wegkommen im Originalbild umso mehr muss reingezoomt werden */
img.avatar {
	border-radius: 50%;
	height: 100px;
	width: 100px;
	object-fit: cover;
	object-position: center;
}

/* im Handy etwas kleiner */
@media ( max-width :680px) {
	img.avatar {
		height: 70px;
		width: 70px;
	}
}

/* *************************************************************************************************** */
/* DASHBOARD GRID                                                          */
/* *************************************************************************************************** */

.dashboard-grid {
	display: grid;
	gap: 1em;
	grid-auto-rows: auto;
	grid-template-columns: minmax(0, 1fr);
}

/* MEDIUM */
@media (min-width: 768px) {
	.dashboard-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* EXTRA LARGE */
@media (min-width: 1200px) {
	.dashboard-grid {
		grid-auto-rows: 5.0em;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}



.dashboard-tile {
/* 	padding: 20px; */
	grid-column-start: span 1;
	border-radius: 15px;
/* 	min-width: 0px; */
}



.dashboard-tile--inner {
/* 	margin: 1em; */
	padding: 1em;
	border-radius: 15px;
	height: 100%;
	position: relative;
	background-color: var(--color-bg-quaternary);
	color: var(--color-text-quaternary);
}



.dashboard-tile--inner:after {
  content  : "";
  position : absolute;
  z-index  : 25;
  bottom   : 0;
  left     : 0;
  pointer-events   : none;
  background-image : linear-gradient(to bottom, rgba(0,0,0,0), var(--color-bg-quaternary));
  width    : 100%;
  height   : 1em;
}

.dashboard-tile--inner .tile-title {
	color: var(--color-header-quaternary);
}

.dashboard-tile--inner .link-icon {
	float: right;
	opacity: 0.6;
	font-size: 1.2em;
}

.dashboard-tile--inner .dashboard-list {
	margin-top: 1.5em;
}

.dashboard-tile--inner .dashboard-list .list-group-item {
	border-radius: 15px 15px 15px 15px;
	margin-bottom: 0.5em;
	border: 1px solid var(--color-bg-primary);
	background-color: var(--color-bg-body);
	color: var(--color-text);
}

.dashboard-tile--inner .dashboard-list .list-group-item:hover {
	background-color: var(--color-bg-quaternary-hover);
	color: var(--color-text-quaternary-hover);
}


.dashboard-tile--inner .dashboard-list .dashboard-title {
	max-width: 80%;
}

.dashboard-tile--inner .ecadia-count-circle .new-icon {
	position: absolute;
    right: 0px;
    top: 0px;
    text-transform: uppercase;
    font-size: small;
    font-weight: bold;
    padding: 5px 10px;
    background-color: var(--color-bg-primary);
    border-radius: 10px 10px 10px 10px;
    color: var(--color-text-primary);
}

.dashboard-tile--inner .ecadia-count-circle{
	background-color: var(--color-bg-quaternary);
	border: 0px ;
}

.dashboard-tile--inner .dashboard-list-text p {
	margin: 0;
}

.dashboard-date {
	position: absolute;
    right: 5px;
    top: 5px;
    font-size: 10pt;
}

/* das "2 weitere" als Zusatzinfo für den Detail-Button */
.tile-moreInfo {
    position: relative;
    text-align: end;
    padding: 0;
    margin-top: -12px;
	color: var(--color-text-quaternary); /* Farbe der H2-Überschrift, damit das etwas hervorsticht */
}

.tile-moreInfo:empty {
    margin-top: 0; /* leereTags ohne Layoutänderung */	
}

/* für zentrierte Kacheln */
.dashboard-tile .dashboard-tile-center  {
	display: block;
	text-align: center;
}

.dashboard-tile ul li.list-group-item {
	background-color: var(--color-bg-body);
}


/* Änderung für Handy damit die Schrift nicht in die Überschrift reinläuft  -------------------------------------------------------------------------- */
@media ( max-width :680px) {
	.dashboard-date {
	    top: 0px;
	    font-size: 8pt;
	}	
}
/* Die Liste an Dashboardwidgets, die konfigurierbar ist im Dashboard-Admin-Modus */
#dashboardNewEntriesArea{
	max-height: 95vh; /* Den Header muss man immer wegrechenen */
	overflow: auto;
	right: 0; 
	top:var(--header-height); /* Initial direkt unter dem Header positionieren */
	max-width: 350px;
	background-color: var(--color-bg-body);
	z-index: 6; /*Es gibt Kalender im Dashboard die sonst über diese Admin-Liste gelegt werden. Außerdem muss dieses Div über den Buttons im Bearbeitenmodus liegen*/
	cursor: move
}

/* Informationen zu einem Dashboard-Widget */
.dashboardInformationGrid {
	background-color: var(--color-bg-quaternary);
    color: var(--color-text-quaternary);
    border: 3px solid var(--color-text);
	border-radius: 15px;
	
}
/* Bereits im Dashboard konfigurierte Kacheln sind in der Liste zwar vorhanden aber nicht sichtbar */
.dashboardElementInitialHiden{
	display: none;
}

/* Die Elemente die gerade verschoben werden, sind zwar leicht transparent aber liegen über allem anderen */
.dashboardInformationGrid.dragging {
	z-index: 100;
	opacity: 0.8;
}

/* rechts unten den Namen der Kachel anzeigen, nur für Admins -------------------------------------------------------------  */
.tileNameInfo {

	position: absolute;
	right: 2px;;
	bottom: 2px;
	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;
}

/* PIE CHART */

property --percent{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pie {
  --percent:20;
  --b:16px;
  --c:var(--color-bg-primary);
  --w:150px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;
  z-index:39;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--percent)*1%),var(--color-bg-secondary) 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--percent)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

.bottom:after {
	inset:0;
}
	
.topping {
	z-index: 40;
}
.topping:after {
	display:none;
}
.topping:before {
	position: absolute;
   background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--percent)*1%),rgba(0, 0, 0, 0) 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

.animate {
  animation:p 1s .5s both;
}

/* die Farbbox der Legende unter dem Pie */
span.pieLegendColorBox {
	width: 30px;
	height: 12px;
	border: 1px solid #555555;
	display: inline-block;
	margin-right: 6px;
}

span.pieLegendPercent {
	margin-left: 6px;
	margin-right: 12px; /* der Abstand zum nächsten Legendenelement */
 }



@keyframes p {
  from{--p:0}
}

.pie-titlebox {
	display: table; 
	height: 50px; 
	width: 100%; 
	text-align: center
}

.pie-title {
	display: table-cell;
	vertical-align: middle;
}

div.dashboard-tile img.rounded-circle{
	max-width: 100%;
	max-height: 100%;
	width: auto;
    height: auto;
}



#tile-my-learningcoach .tile-title .mobileRootContainer {
	position: absolute;
	right: 15px;
	top: 15px;
}

#dashboardAdminArea .widget-setting {
	display: none;
}

.dashboard-tile.editing {
    cursor: move;
    border: 3px solid var(--color-text);
    position: relative;
    z-index: 1; /* Brauchen wir an der Stelle, damit die Buttons aus anderen Kacheln, nicht in einer anderen Kachel angezeigt werden, wenn sie sich gerade überschneiden */
}

/* Gerade hinzugefügte Elemente die noch nicht gespeichert wurden besonders anzeigen */
.dashboard-tile.editing.nonStoredItem {
    border: 5px dashed var(--color-bg-warning);
}

/* Icon zum Verschieben einer Dashboard-Kachel*/
.dashboard-tile.editing.dragging {
	z-index: 100;
	opacity: 0.8;
}

/* Icon zur Größenänderung einer Dashboard-Kachel*/
.dashboard-tile.editing > .resize-icon {
    position: absolute;
    bottom: 3px;
    right: 5px;
    font-size: 1.25em;
    padding: 5px;
    cursor: se-resize;
    z-index: 5;
    background-color: var(--color-bg-body);
    border-radius: 10px;
}

/* Icon zum Löschen einer Dashboard-Kachel*/
.dashboard-tile.editing > .delete-icon {
    position: absolute;
    bottom: 3px;
    font-size: 1.25em;
    padding: 5px;
    cursor: pointer;
    z-index: 5;
    background-color: var(--color-bg-body);
    border-radius: 10px;
    
}

.dashboard-tile.editing > .edit-icon {
    position: absolute;
    bottom: 3px;
    right: 40px;
    font-size: 1.25em;
    padding: 5px;
    cursor: pointer;
    z-index: 5;
    background-color: var(--color-bg-body);
    border-radius: 10px;
}

.dashboardElementInitialHidden{
	display: none;
}

.dashboard-tile.editing button, .dashboard-tile.editing a {
    pointer-events: none;
}


/* der Forum-Link rechts am Rand beim WBT-Player */
.button-wbt-forum {
    display: block;
    position: fixed;
    top: 30em; /* wird fürs Handy überschrieben */
    transform: rotate(90deg);
    transform-origin: 100% 0 0;
    right: 0;
}

/* der Forum-Link rechts am Rand beim WBT-Player */
.button-wbt-PWA-back {
    display: block;
    position: fixed;
    top: 4px;
    right: 0;
    padding-left: 1em;
    padding-right: 1em;
}

/*um auf dem Dahboard Platz zu sparen, MobileLists erzeugen unnötige <p> Tags */
.dashboard-tile p{
	margin-bottom: 0rem;
}

/* die Kachel DashboardWidgetMyProfile nutz den css.GridContainer, der ansonsten fürdiesen Fall zu großes padding hat */
#PersonalData > div {
	padding: 0;
}


/* *************************************************************************************************** */
/* DASHBOARD DashboardWidgetTimeTracking Kachel Meine Aufwände                                                           */
/* *************************************************************************************************** */
div#tile-effort-list{
	overflow-y: auto
}


/* *************************************************************************************************** */
/* Multi-Carousel                                                                                      */
/* *************************************************************************************************** */

/* die Bilder immer mit etwas Abstand zueinander */
.carousel-multi .carousel-inner img {
	padding: 10px;
}

.carousel-multi .carousel-inner .active,
.carousel-multi .carousel-inner .carousel-item-next,
.carousel-multi .carousel-inner .carousel-item-prev {
    display: flex;
}


/* Standardfall (wird für größere Bildschime im Fogenden überschrieben - mit 2 Bildern */    
.carousel-multi .carousel-inner .carousel-item-end.active,
.carousel-multi .carousel-inner .carousel-item-next {
  transform: translateX(50%);
}

.carousel-multi .carousel-inner .carousel-item-start.active, 
.carousel-multi .carousel-inner .carousel-item-prev {
  transform: translateX(-50%);
}

/* der Link "zum Artikel */
.mobile-carousel .ecadia-card-link {
	position: absolute;
	right: 1em;
	top: -1em;		/* rechts unten im Text-Breeich, also über dem Footer  */
}

/* Sonderfall: 	es gibt kein Bild */	
.mobile-carousel .card .no-image .card-text {
	padding-top: 2em; /* damit das nicht mit dem Datum überlappt */	
}

.mobile-carousel .card-title {
	height: 5em !important; /* 5em entspricht 4 Zeilen Text, dfann wird abgeschnitten - es ist aber auch der Teaser, der soll ja kurz sein */
}

.mobile-carousel .card-footer {
	position: relative; /* weil der Link "zum Artikel" hier eingebettet ist */	
}

.mobile-carousel .card-text {
	height: auto; /* wird ansonsten mit 22px willkürlich hoch gemacht */
}

/* iPad, 3 Bilder */
@media (min-width: 768px) {
    
    .carousel-multi .carousel-inner .carousel-item-end.active,
    .carousel-multi .carousel-inner .carousel-item-next {
      transform: translateX(33.3%);
    }

    
    .carousel-multi .carousel-inner .carousel-item-start.active, 
    .carousel-multi .carousel-inner .carousel-item-prev {
      transform: translateX(-33.3%);
    }
}


/* Desktop , 5 Bilder */
@media (min-width: 1200px) {
    
    .carousel-multi .carousel-inner .carousel-item-end.active,
    .carousel-multi .carousel-inner .carousel-item-next {
      transform: translateX(20%);
    }

    
    .carousel-multi .carousel-inner .carousel-item-start.active, 
    .carousel-multi .carousel-inner .carousel-item-prev {
      transform: translateX(-20%);
    }
}




.carousel-multi .carousel-inner .carousel-item-end,
.carousel-multi .carousel-inner .carousel-item-start { 
  transform: translateX(0);
}

.carousel-multi .carousel-control-prev-icon, .carousel-multi .carousel-control-next-icon {
	background-color: #999999;
}




/* *************************************************************************************************** */
/*Pinnwand                                                         */
/* *************************************************************************************************** */

 .pinnwand-container {
	background: var(--color-bg-body);
	/* linear-gradient(to left bottom,#0087ac4a, #3a4895a8);#0087ac;  linear-gradient(to left bottom,#ffffff, #dbdbdb); */
	min-height: 100vh;
	width: 100%;
	height: 100%;
	margin: 0;
	position: relative;
	
}

.pinnwand-container #stickyContainer {
	background-image: url("cork_background.jpg");
	/*https://pixabay.com/photos/background-cork-board-blank-72250/*/
	height: 1600px;
	position: relative;
	border-style: solid;
	border-width:20px;
	border-image: url(wood.jpg) 30 round; /*https://pixabay.com/de/photos/holz-brett-struktur-bretter-591631/	*/
}

.pinnwand-container .drag {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: grab;
}

.pinnwand-container .sticky {
	/*  background: linear-gradient(to left bottom,  #ffffff, #dbdbdb);	*/
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
	color: #00243f;
	/* 0 0 150px rgba(0, 0, 0, 0.2); */
	
	display: inline-block;
	padding: 1rem;
	position: absolute;
	width: 15rem;
}
.pinnwand-container .sticky .pin{
	left: 0rem;
	top:0rem;
	position: absolute;
	width:1rem;
	height:1rem;
	background-image: url("stecknadel.png");		/*https://pixabay.com/de/illustrations/fehler-textmarker-zeiger-brosche-2997212/*/
}

.pinnwand-container .sticky h3, .pinnwand-container .sticky p {
	/* color: #0065b3; */
	color: #00243f;
	pointer-events: none; 	/*verhindert anklicken von Links*/
}
.pinnwand-container .sticky a {
	pointer-events: auto;

	}

.pinnwand-container .sticky h3 {
	border-bottom: dashed 2px #666;
	margin: 0 0 0.5rem;
	min-height: 2.5rem;
	padding: 0 1.5rem 0.25rem 0;
}

.pinnwand-container .sticky p {
	margin: 0;
	/*height: 1rem;*/
}

.pinnwand-container .sticky .deletesticky {
	color: #666;
	cursor: pointer;
	font-size: 1.5rem;
	position: absolute;
	right: 0.4rem;
	top: 0.8rem;
}

.pinnwand-container #popupImageDiv img {
	object-fit: scale-down;
}

.pinnwand-container .sticky .editsticky {
	color: #666;
	cursor: pointer;
	font-size: 1.5rem;
	position: absolute;
	right: 2.4rem;
	top: 0.8rem;
}

.pinnwand-container .sticky .fa-up-down-left-right{
	color: #666;
	font-size: 1.5rem;
	position: absolute;
	right: 0.6rem;
	bottom: 0.8rem;
}

.pinnwand-container .metadata {
	font-size: 0.8rem
}
.pinnwand-container .highlighted {
	box-shadow : 0 0 40px red
	
}

.pinnwand-container .smallview .sticky {
	padding: 0.4rem;
	position: absolute;
	width: 12rem;
}

.pinnwand-container .smallview .sticky h3 {
	border-bottom: dashed 2px #666;
	margin: 0 0 0rem;
	min-height: 1rem;
	padding: 0 0rem 0rem 0;
}

.pinnwand-container .smallview .sticky .deletesticky {
	font-size: 1rem;
	right: 0.4rem;
	top: 0.4rem;
}

.pinnwand-container .smallview .sticky .editsticky {
	font-size: 1rem;
	right: 1.8rem;
	top: 0.4rem;
}

.pinnwand-container .smallview .metadata {
	font-size: 0.7rem;
	line-height: 0.8rem !important
}

.pinnwand-container .smallview .sticky p {
	font-size: 0rem;
	height: 0.2rem
}

.pinnwand-container .smallview .sticky * {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	line-height: 1.1rem
}

.pinnwand-container .smallview .sticky img {
	width: 3.7rem !important;
	height: 3.7rem !important
}

.pinnwand-container #stickyContainer.smallview {
	border-style: none;
}

.pinnwand-container  #stickiesWithNoPosition {
	width: 1296px;
	position: relative;
	border-style: dashed;
	border-color: var(- -color-bg-primary);
}

.pinnwand-container .largeview #stickyContainer {
	width: 1296px;
}


/**
 * Hier ist der Bereich (2) - ober kam schon mal diese Media-Query -  für die Smartphone-Einstellungen
 *
 */
@media ( max-width :680px) {

	
 	.main-area {
		padding-top: 0; /** den kostbaren Platz nicht verschwenden */
	}
	
	.ecadia-card {
    	margin: 0;
    	padding: 2px;
	}
  
	
	.nav_logo img {
		max-height: 45px;
		max-width: 100px;
	}

	.content ol, .contentul {
		padding-left: 1rem;
	}
	
	.row {
		margin: 0;
	}
	
	/* etwas weniger Rand als beim Desktop um jedes einzelne Element */
     .row > * {
		padding-right: calc(var(--bs-gutter-x) * .1); /* anstelle .5 */
	    padding-left: calc(var(--bs-gutter-x) * .1);
	} 
 
 	/* insgesamt etwas Abstand zum Rahmen, damit das nicht am Handy-Rand klebt */
 	.main-area {
 		padding-left: .2em;
 		padding-right: .2em;
 	}
 	 
	.dashboard-tile--inner {
		padding: 0.7em 0.4em 0.7em 0.4em !important;
	}
	
	 
 	.mobile-list .mt-2 {
    	margin-top: 1rem !important;
	}
	
	/* alles etwas kompakter - default ist 1 */
	p {
	    margin-bottom: 0.5rem;
	}
  
	.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
		padding: 2px;
	} 
	
	/* in einem accordion brauchen wir es nicht und sollte dementsprechend gleich bleiben */
	.accordion-header > .ecadia-count, .accordion-header > .ecadia-count-circle {
	 	position: absolute;
	 	right: 50px;
		top: 12px;
		z-index: 50;
		vertical-align: middle;
		line-height: 20px;
	}
	
	.mobile-list .card {	
		min-height: 0; /* weil die Kacheln alle untereinande sind, sind unterschiedliche Höhen OK */
	}
	
	/* Überschriften insgesamt etwas kleiner */
	.h1, h1 {
 	   font-size: 1.4em;	
	}
	.h2, h2 {
 	   font-size: 1.2em;	
	}
	.h3, h3, .h4, h4 {
 	   font-size: 1.1em;	
	}
	
	.btn-long {
	    padding: .3rem .6rem; /* etwas kompakter*/
	}
	
	.btn-long.buttonWithRightIcon {
    	padding-right: .6rem; /* deutlich kompakter */
	}
	
	.btn {
		font-size: 0.9em;
	}
		
	.accordion-body {
		padding: 0.3em; /* etwas weniger as beim Desktop */
	}

	/* eFeedback - der Fragebogen insgesamt mit weniger padding ----------------------------------------------- */
	/* die Einzelbuttons einer Matrixfrage kompakter */	
	.matrixTable .row .col-md-8,
	.matrixTable .row .col {		
		padding: 0.2em !important;
	}
	
	/* generell den Rahmen kompakter */
	#questions .row .col-12, 
	#questions .row .col {
		padding: 0.2em !important;
	}
	
	/* im Lerncoach-Kachel, der Button für das private Forum - etwas weiter rechts oben */
	.dashboardForumButton {
		top: 0px;
	    position: absolute;
	    right: 5px;
	}
	
	
	.button-wbt-forum {
    	top: 20em;
	}
	/* weitere Regeln zum eFeedback stehen in ecadiaMoble.css */
	
} 

/* Änderung für Handy -------------------------------------------------------------------------- */


li.showCountInListItem {
	padding-right: 2em; /* damit die Texte etc nicht in den count lappen */	
}

/* abgeschlossene WBTs etwas aufhübschen, damit man das gut erkennen kann */
li.WBTListItemClosed  {
	background-image: url('../gifMobile/checkboxChecked.png');
	background-repeat: no-repeat;
	background-position: right 0 bottom 0;
	background-size: 32px;
	
	padding-right: 2em; /* damit die Texte etc nicht ins logo lappen */
}

li.WBTListItemOpen  {
	background-image: url('../gifMobile/checkboxInProgres.png');
	background-repeat: no-repeat;
	background-position: right 0  bottom 0;
	background-size: 32px;
	
	padding-right: 2em; /* damit die Texte etc nicht ins logo lappen */
	
}

.loader {
  border: 8px solid var(--color-bg-quaternary); /* Light grey */
  border-top: 8px solid var(--color-bg-primary); /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  margin: 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* MobileGridContsiner */
.containerGrid {
	display: grid;
	grid-template-columns: max-content auto; /* Standard: 2 Spalten - das typische Label - Input Grid */
}

@media ( max-width :680px) {
	.containerGrid {
		grid-template-columns: 30% auto; /* etwas anders */
	
	
	}
}


/* Tabellenartig etwas padding um die Zellen */
.containerGrid > div {
	padding: 0.2rem 0.4rem 0.2rem 0.4rem;
}

/* Tabelle in Tabelle hat den äußeren Rand nicht */
.containerGrid > div .containerGrid div {
	padding: 0 0.4rem 0.2rem 0;
}

/* Report */
.addFilterButton, .removeFilterButton, .additionalFilterButton {
	margin-bottom: 4px;
}

/* DatePicker */
.MobileDatePicker {
	width: 8em; /* sinnvolle Breite */
	
}

#validDateTrainerAssignmentDocument .MobileDatePicker {
	width: 100%; /* aufgrund von Problemen beim bearbeiten von Dokumenten bei einer Veranstaltung als Trainer
	https://devinternal.ecadia.com/ecadia-developers/ecadia/-/issues/4920 */
	
}

.datePickerToBetween {
	display: none;
}


/* generell etwas Abstand zwischen den Zeilen - sonst sitzen die Widgets direkt aufeinander */
.mobileContainer .row {
	padding-bottom: 4px;
}

.callout {
	display: flex;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    background-color: var(--bs-gray-100);
    border-radius: 0.25rem;
    border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}

.callout-info {
	border-color: var(--color-bg-primary, lightblue);
}

.callout-info > .callout-icon {
	background-color: var(--color-bg-primary, lightblue);
	color: var(--color-text-primary, black);
}

.callout-warning {
	border-color: var(--color-bg-warning, orange);
}

.callout-warning > .callout-icon {
	background-color: var(--color-bg-warning, orange);
	color: var(--color-text-warning, black);
}

.callout-danger {
	border-color: var(--color-bg-danger, red);
}

.callout-danger .callout-icon {
	background-color: var(--color-bg-danger, red);
	color: var(--color-text-danger, black);
}

.buttonFocusedBorder {
	border: 1px solid;
	border-color: #6edff6;
}

.mobileDefaultButtons button {
	margin-left: 0.5em;
}

/* -- Carousel ----------------------------------------------------------------------------------------------------- */

/* Den Teaser nicht abschneiden, sieht blöd aus, zumal genügend pPlatz da ist */
.mobile-carousel .card-body > h5.card-title {
	height: auto;
}
	
ul.MobileButtonList{
	list-style: none;
}

ul.MobileButtonList li{
	display: flex;
	align-items: center;
}

/* die Varante mit einfachen Bullets - die sind eher klein */
i.MobileButtonList{
	color: var(--color-text-link);	/* in der Regel hat die Zeile eine Kink */
	font-size: 5pt;
	top: 1px;
	left: -15pt;
	position: relative;
}

/* explizi Icons, die sich größer, sonst erkennt man nichts */
i.MobileButtonListWithIcon {
	color: var(--color-text-link);	/* in der Regel hat die Zeile eine Kink */
	display: inline-block;
	width: 15px;
	vertical-align: top;
	left: -15pt;
	position: relative;
}


.passwordGuidelineInvisible{
	display: none;
}

div.PasswordCircleCheck{
	float: right;
	margin-right: 50px;
	margin-top: -35px;
	color: green;
}