/* 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),
a:focus-within:not(.nav-link):not(.btn):not(.dropdown-item):not(.nav_link):not(.monthCalendar-dayButton) {
	text-decoration: none;
	color: var(--color-text-primary-hover);
}

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

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


/* Weil es für die Selektion wegen der Barrierefreiheit einen rahmen gibt, diesen immer unsichtbar vorsehen */
.mobileCheckbox, 	
.mobileRadioButton	  {				
	border: 2px solid transparent;
	border-radius: 0.25rem;
	padding: 2px;
}

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,
.mobileCheckbox:focus-within, 	
.mobileRadioButton:focus-within	,
.matrixTableRadio:focus-within,
.inquirySelectionRadio:focus-within,
.inquirySelectionCheckbox:focus-within,
.form-switch:focus-within
 {	

	border-color: var(--color-bg-primary-hover);
	box-shadow: 0 0 0 .15rem var(--color-bg-primary-hover);
	border-radius: 8px;
}

.mobileCheckbox  {
	padding-left: 1.7em; /* RS, 18.03.2025: sehr seltsam, weil sonst die Checkbox durch den eigenen linken Rand 1.5em links übersteht */
}


/*-----------------------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, .btn-label:focus-within {
	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;
}


/************************************************************
* 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 > *:first-child {
	margin-left: .3rem;
}

.list-item-tags {
	float: right;
}

.item-list-tag {
	display: inline-block;	
}

.list-item-subtitle-left {
	padding-top: 6px;
}

.list-item-subtitle {
	display: flex;
    justify-content: space-between;	
}

.list-item-title {
	display: flex;
    justify-content: space-between;	
}

/* Veranstaltungskalender, Liste: das ist die Ampel hinter dem Veranstaltungstermin Wenn man das nicht macht, dann ist er optich zu tief, was blöd aussieht */
#calendarList .list-item-subtitle-left > span {
    top: 7px;
    position: absolute;
    margin-left: 6px;
}

.list-item-subtitle-right {
}

/*

*/

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

.list-group-item:focus,
.list-group-item:focus-within,
.list-group-item a:focus-within {
	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 */
 	word-break: break-word; /* keine Texte, die über die Schaltfäche rausgehen. Dann lieber irgendwo umbrechen */
 	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,
.list-group-item:focus-within h5, .list-group-item:focus-within .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,
.mobileWidget.mobile-list .list-group-item.list-group-item-action.active:focus-within
 {
	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-within {
	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-within {
	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, .btn-success:focus-within {
	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, .btn-danger:within {
	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, .btn-warning:within {
	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 - 55px); /* Die 55px stehen fuer die Headerleisten-Hoehe */
}

#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 {
	border: none;
	box-shadow: none;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.accordion-button:focus {
	/*outline: 2px solid black; /* Oder eine andere Farbe nach Wunsch */
	box-shadow: none; /* Entfernt den Bootstrap-Fokus-Schatten */
}

h2:has(.accordion-button:focus) {
	border: 2.5px solid black;
}

#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;
    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, .ecadia-card:focus-within {
	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 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,
.ecadia-card:focus-within h1,
.ecadia-card:focus-within h2,
.ecadia-card:focus-within h3,
.ecadia-card:focus-within h4,
.ecadia-card:focus-within h5,
.ecadia-card:focus-within 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, .ecadia-folder-card a:focus-within {
	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, .ecadia-folder-card:focus-within {
	-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, .ecadia-folder-card:focus-within img {
	transform: scale(1.1);
}

.ecadia-folder-card:hover .card-text, .ecadia-folder-card:focus-within .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,
#explorer-tp-list a.list-group-item:focus-within,
#pdf-catalogue-download a.list-group-item:focus-within,
#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, .ecadia-folder-card:focus-within .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 ------------ */
/*  Veranstaltungsliste (in der Oberfläche heißt die meistens auch Veranstaltungskalender*/

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

/**
 * Diese Buttons müssen erst über eine Systemvariable showNextNextMonthButton aktiviert werden.
 * Wir wollen aber, dass die Icons speziell aussehen, das machen wir dann hier
 */
#monthList .navigationOnlyItem .img-thumbnail {
	background-color: unset; /* Die sollen wie Fließtext aussehen */
	border: none; /* Die sollen wie Fließtext aussehen */
	font-size: var(--bs-body-font-size);
	height: auto; /*sonst wird die Buttonbar höher als die vorher war / muss */
}

/**
 * Diese Buttons müssen erst über eine Systemvariable showNextNextMonthButton aktiviert werden. Sind ohne diese Einstellung viel zu breit
 */
#monthList .navigationOnlyItem  {
	width: auto;
}


.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,
.dashboard-tile--inner .dashboard-list .list-group-item:focus  {
	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;
}

/* *************************************************************************************************** */
/* Dashboardkachel für den Stundenplan beim Trainer oder Teilnehmer */
/* *************************************************************************************************** */

/*Da macht der Fullcalender ein recht prominente Überschrift rein, die machen wir etwas kleiner, damit sie besser reinpasst in das Gesamtbild*/
div.myTimeTableCalendar  h2.fc-toolbar-title{
	font-size: 1.2em; /*Der Standard für h2 bei uns*/
}

/*Die Navigationsbuttons im Kalender etwas kleiner. Auf dem Dashboard wollen und müssen wir Platz sparen */
div.myTimeTableCalendar  div.fc-header-toolbar .fc-icon{
	font-size: var(--bs-body-font-size);
}
/*Die Kopfzeile im Kalender etwas weniger Abstand nach unten zum Kalender. Auf dem Dashboard wollen und müssen wir Platz sparen */
div.myTimeTableCalendar  div.fc-header-toolbar {
	margin-bottom: 0.5em;
}

/*Das Wort ganztägig im Kalender etwas kleiner */
div.myTimeTableCalendar  span.fc-timegrid-axis-cushion  {
	font-size: 0.75em;
}
/* Die Datumsanzeige mit Wochentag im Header etwas kleiner gemacht, damit auch bei Datumsen wie 11.11 keine Scrollbars auftauchen*/
div.myTimeTableCalendar a.fc-col-header-cell-cushion {
    font-size: 0.9em;
}


/* *************************************************************************************************** */
/*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-200);
    border-radius: 0.25rem;
    border: 0.075rem 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;
}


/* Liste der Passwortregeln in resetPassword.jsp und popupChangePassword.js */
.ruleTextError {
	font-weight: bold;
	color: red;
}
.passwordGuidelineInvisible{
	display: none;
}

/*Damit eigene Zeichen für die Einrückung gesetzt werden können*/
ul.passwordRuleList {
	list-style: none;
	margin-left: 1em;
	color: red;
}


/*ungültige Richtlinien*/
ul.passwordRuleList > li:before {
  	content: 'X  ';
}

/*gültige Richtlinien*/
.passwordGuidelineValid {
	font-weight: normal;
	color: var(--color-text-secondary);
}

ul.passwordRuleList > li.passwordGuidelineValid:before {
  	content: '✓  ';
}



.ecadiaAudio {
	padding-bottom: 0.5em;
}

.radioButtonPriceGroup {
	display: flex;
    justify-content: space-between;	
}

/* das braucht man bei der Auswahl von Alternativpreisen -  aber nicht generell für alle .form-check-label */
.form-check-label {
	/* width: 100%; RS, 25.03.2025: erstmal abgeschltet weil das die Schalter im Bildungskatalog auch betrifft */
}

.exam-progress-bars{
	background-color: #8d8d8d;
}


/*
TWA 20.05.2025 #5637 das hervorheben von Links für die Barrierefreiheit. 
Eine eigene Klasse schien mir unpassend, da es sehr viele stellen gibt und neue links nach möglichkeit automatisch ebenso formatiert werden sollten.
Sollte dies an einer stelle probleme bereiten (weil etwas zb fälschlicherweise kein link ist) lieber ein :not hinzufügen. 
Alternativ wenn gewünscht das Desing anpassen (z. B. den Pfeil entfernen)
Bisherige Exceptions (in der Reihenfolge wie sie notiert sind):
- Buttons
- nav (zb zurück)
- dropdown
- ecadia logo
- nav_link war meine ich für die weiterleitung auf zb die veranstaltungsdaten
- stretched link wird auch für buttons verwendet
*/
a[href]:not(.btn):not(.nav_name):not(.dropdown-item):not(.nav_logo):not(.nav_link):not(.nav-link):not(.stretched-link):not(:where(
  /* exclude hash only links, relative links innerhalb einer seite */
  [href^="#"],
   /* exclude javascript only links */
  [href^="javascript:" i],  
   /* keine Mailing links, da diese bereits hervorgehoben sind*/
  [href^="mailto:"], 
  /*keine weiterleitungen*/ 
  [href^="action"],  
  /* exclude relative but not double slash only links */
  [href^="/"]:not([href^="//"]),
)) {
	text-decoration: underline;
}

/*Siehe darüberliegender Kommentar*/
 a[href]:not(.btn):not(.nav_name):not(.dropdown-item):not(.nav_logo):not(.nav_link):not(.nav-link):not(.stretched-link):not(:where(
  /* exclude hash only links */
  [href^="#"],
   /* exclude javascript only links */
  [href^="javascript:" i],  
   /* keine Mailing links, da diese bereits hervorgehoben sind */
  [href^="mailto:"], 
  /*keine weiterleitungen*/ 
  [href^="action"], 
  /* exclude relative but not double slash only links */
  [href^="/"]:not([href^="//"]),
)):after {
    content: "↗";
    display: inline-block;
    vertical-align: super;
    font-size: x-small;
}

.btn:disabled{
	background-color: #2b2d31;
	border-color: #2b2d31;
}