/*——————————————- 2. Aussehen —————————————————*/
html, body, .ui-page-theme-a, input, select, body, .ui-mobile label, .ui-select,
.ui-btn, .ui-mini .ui-btn, .ui-mini .ui-input-text input, .ui-mini .ui-input-search input, .ui-input-text.ui-mini input,
.ui-input-search.ui-mini input, .ui-mini textarea.ui-input-text, textarea.ui-mini, pre {
font-size: 16px; /* Allgemeine Einstellung für Schriftgröße */
font-family: sans-serif; /* Allgemeine Einstellung für Schriftart */
text-shadow: none; /* Allgemeine Einstellung für Schriftschatten */
}

.ui-page-theme-a, body, .ui-mobile label, pre, .ui-page.ui-page-theme-a a,
.ui-page.ui-page-theme-a a:hover, .ui-page.ui-page-theme-a a:visited, .ui-page.ui-page-theme-a a:active {
color: #000000; /* Allgemeine Einstellung für Schriftfarbe */
}

.angemeldet {
background-color: #667d00; /* Hintergrundfarbe für Kurse bei denen der Kunde angemeldet ist */
color: #FFFFFF; /* Schriftfarbe für Kurse bei denen der Kunde angemeldet ist */
}

.free {
background-color: #ACE550; /* Hintergrundfarbe für buchbare Kurse */
color: #000000; /* Schriftfarbe für buchbare Kurse */
}

.almostFull {
background-color: #ACE550; /* Hintergrundfarbe für fast augebuchte Kurse */
color: #000000; /* Schriftfarbe für fast augebuchte Kurse */
}

.wait {
background-color: #FACB32; /* Hintergrundfarbe für Kurse bei denen sich der Kunde im Wartepool befindet */
color: #000000; /* Schriftfarbe für Kurse bei denen sich der Kunde im Wartepool befindet */
}

.full {
background-color: #c71010; /* Hintergrundfarbe für ausgebuchte Kurse */
color: #FFFFFF; /* Schriftfarbe für ausgebuchte Kurse*/
}

.grey {
background-color: #acacac; /* Hintergrundfarbe für Kurse die als nicht buchbar hinterlegt sind */
color: #000000; /* Schriftfarbe für Kurse die als nicht buchbar hinterlegt sind */
}

.group td{
font-weight: bold; /* Schriftstärke für Gruppierungsüberschrift */
padding: 2px .3em 1px .3em; /* Innenabstand für Gruppierungsüberschrift */
font-size: 100%; /* Schriftgröße für Gruppierungsüberschrift */
}
.group {
background-color: #6f6f6e;; /* Farbe für Gruppierungsüberschrift */
color: #ffffff; /* Schriftfarbe für Gruppierungsüberschrift */
cursor: default; /* Cursor für Gruppierungsüberschrift */
}

.even {
background-color: #f2f3f4 !important; /* Hintergrundfarbe für Zeilen in Kursliste (gerade) */
color: #000000; /* Schriftfarbe für Zeilen in Kursliste (gerade) */
}

.odd {
background-color: #fbfbfb !important; /* Hintergrundfarbe für Zeile in Kursliste (ungerade) */
color: #000000; /* Schriftfarbe für Zeile in Kursliste (ungerade) */
}

.KursListe #grid th {
background-color: #ededed; /* Hintergrundfarbe für Tabellenkopf in der Kursliste */
color: #000000; /* Schriftfarbe für Tabellenkopf in der Kursliste */
border-bottom: 1px solid #9d9d9d; /* Farbe, Breite und Art des unteren Randes des Tabellenkopfes in der Kursliste */
border-top: 1px solid #dddddd; /* Farbe, Breite und Art des oberen Randes des Tabellenkopfes in der Kursliste */
}

.KursListe #grid td.courseImage, .KursListe #grid th.courseImage, .KursListe #grid div.courseImage, #courseImageTester {
width: 0rem; /* Breite für Bilder in der Kursliste (Agenda- und Listenansicht) */
}
.KursListe #grid td.courseImage, .KursListe #grid div.courseImage, #courseImageTester {
height: 0rem; /* Höhe für Bilder in der Kursliste (Agenda- und Listenansicht) */
}

.KursListe #grid th[data-name=“Kursname“], .KursListe #grid td[data-name=“Kursname“] {
width: 130px; /* Breite des Kursnamen in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
.KursListe #grid th[data-name=“WannUndZeitraum“], .KursListe #grid td[data-name=“WannUndZeitraum“] {
width: 130px; /* Breite der Zeitangabe in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
.KursListe #grid th[data-name=“Ort“], .KursListe #grid td[data-name=“Ort“] {
width: 110px; /* Breite des Ortes in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
.KursListe #grid th[data-name=“TeilnehmerAnzahl“], .KursListe #grid td[data-name=“TeilnehmerAnzahl“] {
width: 70px; /* Breite der Plätze in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
.KursListe #grid th[data-name=“Status“], .KursListe #grid td[data-name=“Status“] {
width: 130px; /* Breite des Status in der Kursliste (Nur Agenda- und Listen-Ansicht) */
}
/* Wenn Summe aller obigen Breiten größer ist als die Gerätebreite, dann wird die Agenda- und Listen-Ansicht als Tabelle angezeig. Wenn nicht dann in Kompaktansicht. */
.KursListe #grid .group {
width: 570px; /* Breite der Gruppierungsüberschriften in der Kursliste (Nur Agenda- und Listen-Ansicht). Muss der Summe der obigen Breiten entsprechen. */
}

.Kalender #calendarContent td .kurstermin, .Kalender .leftHeader td {
height: 8rem; /* Höhe von Kursterminen in der Kalender Ansicht */
}
.Kalender .leftHeader tr td .rotate {
width: 8rem; /* Hier muss die selbe zahl wie bei der Regel darüber angegeben werden damit das Abschneiden von zu langen Tageszeittexten korrekt funktioniert */
}

.Wochentage #calendarContent td .kurstermin, .Wochentage .leftHeader td {
height: 10rem; /* Höhe von Kursterminen in der Wochentage Ansicht */
}
.Wochentage .leftHeader tr td .rotate {
width: 10rem; /* Hier muss die selbe zahl wie bei der Regel darüber angegeben werden damit das Abschneiden von zu langen Tageszeittexten korrekt funktioniert */
}

#calendarPre td {
width: 6rem; /* Mindest-Breite von Kursterminen in der Kalendar und Wochentage Ansicht */
}

#grid.liste td {
padding-top: 3px; /* Abstand einer Zeile nach oben in der Kursliste */
padding-bottom: 3px; /* Abstand einer Zeile nach unten in der Kursliste */
}
#grid.liste tr td:first-child {
padding-left: 5px; /* Mindestabstand zwischen der ersten Spalte in der Kursliste und dem linken Rand der Tabelle */
}
#grid.liste tr td:last-child {
padding-right: 5px; /* Mindestabstand zwischen der letzten Spalte in der Kursliste und dem rechten Rand der Tabelle */
}

.ui-page.ui-page-theme-a #filtern .ui-select .ui-btn, .ui-page.ui-page-theme-a #filtern .ui-checkbox .ui-btn, #filtern .filternContent .auswahlfeld {
background-color: rgb(255, 255, 255); /* Hintergrundfarbe für Filter im Filtern-Block */
border-color: #e8e8e8; /* Rahmenfarbe für Filter im Filtern-Block */
}
#filtern .filternContent .auswahlfeld.selected, #filtern .filternContent .auswahlfeld.selected:hover {
background: #e0e0e0; /* Hintergrundfarbe für aktive Buttons im Filtern-Block */
border-color: #c3c3c3; /* Rahmenfarbe für aktive Buttons im Filtern-Block */
}
.ui-page.ui-page-theme-a #filtern .ui-btn:hover, #filtern .filternContent .auswahlfeld:hover {
background-color: #f3f3f3; /* Hintergrundfarbe für Buttons im Filtern-Block sobald sich die Maus darüber befindet */
color: #000000; /* Schriftfarbe für Buttons im Filtern-Block sobald sich die Maus darüber befindet */
border-color: #c3c3c3; /* Rahmenfarbe für Buttons im Filtern-Block sobald sich die Maus darüber befindet */
}

.auswahlfeld, .ui-page.ui-page-theme-a .ui-select .ui-btn, .ui-page.ui-page-theme-a .ui-checkbox .ui-btn {
background-color: #f6f6f6; /* Hintergrundfarbe für Auswahlfelder */
color: #000000; /* Schriftfarbe für Auswahlfelder */
border-color: #dddddd; /* Rahmenfarbe für Auswahlfelder */
border-width: 1px; /* Breite des Rahmens für Auswahlfelder */
border-radius: 0.0rem; /* Rundungsradius des Rahmens für Auswahlfelder */
}

.ui-page.ui-page-theme-a .ui-btn {
background-color: #f6f6f6; /* Hintergrundfarbe für Buttons */
color: #000000; /* Schriftfarbe für Buttons */
border-color: #9d9d9d; /* Rahmenfarbe für Buttons */
border-width: 1px; /* Breite des Rahmens für Buttons */
border-radius: 0.4rem; /* Rundungsradius des Rahmens für Buttons */
}

.ui-page.ui-page-theme-a .ui-btn:hover, .auswahlfeld:hover {
background-color: #e9e9e9; /* Hintergrundfarbe für Buttons sobald sich die Maus darüber befindet */
color: #000000; /* Schriftfarbe für Buttons sobald sich die Maus darüber befindet */
border-color: #d2d2d2; /* Rahmenfarbe für Buttons sobald sich die Maus darüber befindet */
}

.auswahlfeld.selected {
background: #e0e0e0; /* Hintergrundfarbe für aktive Buttons */
border-color: #c3c3c3; /* Rahmenfarbe für aktive Buttons */
}

.border, .ui-input-text, .ui-page.ui-page-theme-a .ui-body-inherit {
background-color: #f6f6f6; /* Hintergrundfarbe für Textfelder */
color: #333333; /* Schriftfarbe für Textfelder */
border-color: #dddddd; /* Rahmenfarbe für Textfelder */
border-width: 1px; /* Breite des Rahmens für Textfelder */
}

.ui-input-text input::placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}
.ui-input-text input::-webkit-input-placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}
.ui-input-text input:-moz-placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}
.ui-input-text input::-moz-placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}
.ui-input-text input:-ms-input-placeholder {
color: #000000; /* Schriftfarbe von Platzhaltern in Textfeldern */
opacity: 1; /* Deckkraft von Platzhaltern in Textfeldern */
}

.ui-btn.ui-checkbox-off.ui-btn-a:after, .ui-btn.ui-checkbox-off:after {
background-color: #cccccc; /* Hintergrundfarbe für Formularfelder zum Ankreuzen (wenn nicht angekreuzt) */
}
.ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-btn.ui-checkbox-on:after {
background-color: #cccccc; /* Hintergrundfarbe für Formularfelder zum Ankreuzen (wenn angekreuzt) */
}

.leftHeader .wannheader td {
background: linear-gradient(#dedede, rgba(222, 222, 222, 0) 80%); /* Hintergrundfarbe der Tageszeit-Zelle in der Kalender und Wochentage Ansicht */
}

.leftHeader {
background-color: rgba(222, 222, 222, 0.4); /* Hintergrundfarbe der restlichen Tageszeit-Spalte in der Kalender und Wochentage Ansicht */
}

#calendarPre td, .leftHeader tr:first-child td {
height: 2.7rem; /* Höhe der Datums-Spalte in der Kalendar und Wochentage Ansicht*/
background-color: #dedede; /* Hintergrundfarbe der Datumsspalte in der Kalender und Wochentage Ansicht */
border-bottom: 1px solid black; /* Rahmenbreite, Rahmenart und Rahmenfarbe für den unteren Rand der Datumsspalte in der Kalender und Wochentage Ansicht */
}

#calendarContent {
background-color: rgba(255, 255, 255, 0.3); /* Hintergrundfarbe der leeren Zellen in der Kalender und Wochentage Ansicht */
}

#calendarContent td.kurstermin {
font-size: 80%; /* Schriftgröße bei Kursterminen in der Kalender und Wochentage Ansicht */
}

#calendarContent td.kurstermin, #calendar .kursname:before, #calendar .kursort:before, #calendar .kursname:after, #calendar .kursort:after {
background-color: #f5f5f5; /* Hintergrundfarbe bei Kursterminen in der Kalender und Wochentage Ansicht */
color: #000000; /* Schriftfarbe bei Kursterminen in der Kalender und Wochentage Ansicht */
}

#calendarContent td.kurstermin:hover, #calendarContent td.kurstermin:hover .kursname:before, #calendarContent td.kurstermin:hover .kursort:before, #calendarContent td.kurstermin:hover .kursname:after, #calendarContent td.kurstermin:hover .kursort:after {
background-color: #dedede; /* Hintergrundfarbe bei Kursterminen in der Kalender und Wochentage Ansicht sobald sich die Maus darüber befindet */
}

#calendarContent td.kurstermin, .leftHeader td, tr.hideTimespan td {
box-shadow: inset 0 -0.25rem 0 0 #e4e4e4; /* Rahmenbreite und Rahmenfarbe für den unteren Rand bei Kursterminen in der Kalender und Wochentage Ansicht */
}

#calendarContent td, #calendarPre td {
border-right: 1px solid black; /* Rahmenbreite, Rahmenart und Rahmenfarbe für den rechten Rand bei Spalten in der Kalender und Wochentage Ansicht */
}

.wannheader td {
border-top: 1px solid black; /* Rahmenbreite, Rahmenart und Rahmenfarbe für den oberen Rand bei Zeilen mit Tageszeit in der Kalender und Wochentage Ansicht */
}

#calendarPre td.hideWeekday {
width: 0rem; /* Breite der Spalten für gefilterter Wochentage in der Kalender und Wochentage Ansicht */
}

.Kalender tr.hideTimespan td, .Wochentage tr.hideTimespan td {
height: 0rem; /* Höhe der Tageszeit-Zeile wenn es keine Termine für diese Tageszeit gibt (Werte kleiner 2rem blenden leere Tageszeit-Zeilen aus) */
}
.Kalender .leftHeader tr.hideTimespan td .rotate, .Wochentage .leftHeader tr.hideTimespan td .rotate {
width: 0rem; /* Hier muss die selbe zahl wie bei der Regel darüber angegeben werden damit das Abschneiden von zu langen Tageszeittexten korrekt funktioniert */
}

#filtern .ui-collapsible-content {
padding: .6em .5em .3em .5em; /* Abstand nach oben, rechts, unten, links der Filter zum Filter-Container */
background: #ffffff; /* Hintergrundfarbe des Filter-Containers */
}

span.errorMessage {
background-color: #f2dede; /* Hintergrundfarbe für Fehlermeldungen */
color: #a94442; /* Schriftfarbe für Fehlermeldungen */
padding: .5rem; /* Abstand nach Oben/Rechts/Unten/Links vom Text zum Rand der Fehlermeldungsbox */
border-radius: .4em; /* Radius des Randes der Fehlermeldungsbox */
}

span.successMessage {
background-color: #dff0d8; /* Hintergrundfarbe für Erfolgsmeldungen */
color: #3c763d; /* Schriftfarbe für Erfolgsmeldungen */
padding: .5rem; /* Abstand nach Oben/Rechts/Unten/Links vom Text zum Rand der Erfolgsmeldungsbox */
border-radius: .4em; /* Radius des Randes der Erfolgsmeldungsbox */
}

.isKursleiter {
color: red; /* Schriftfarbe für „Kursleiter“ Hinweis bei Kursen bei denen man Kursleiter ist in Kalender/Wochentage Ansicht */
}

/* Nächsten Kommentar entfernen um die maximale Höhe der „Registrieren/Profil“-Seite nicht zu begrenzen */
/*
.Profile .content {
max-height: 100%;
}
*/

/* Nächsten Kommentar entfernen um die maximale Höhe der „Kurs buchen“, „Kursinfo“, „Kursliste“-Seite nicht zu begrenzen (Agenda-Ansicht ausgenommen) */
/*
.setMaxHeight.Wochentage, .setMaxHeight.Liste, .setMaxHeight.Kalender, .KursBuchen .content, .Kurs .content, .Ort .content {
max-height: 100%;
}
*/

/* Nächsten Kommentar entfernen um Ort Filter auf der „Kursliste“-Seite immer anzuzeigen */
/*
#ort {
display: table-row !important;
}
#ort td:nth-child(3) {
display: none;
}
*/

/* Kommentar entfernen um auf der meine Kurse Seite Filtern/Suchen/Sortieren auszublenden
#meineKurse #control, #meineKurse #grid_filter {
display: none !important;
}
*/

/* Kommentar entfernen um auf der mein Wartepool Seite Filtern/Suchen/Sortieren auszublenden
#meinWartepool #control, #meinWartepool #grid_filter {
display: none !important;
}
*/

/* Kommentar entfernen um „Buchen“/“Stornieren“ Buttons auf der Kurs-Seite hinter statt vor der Terminliste anzuzeigen
.callToActionMitte {
display: none;
}
.callToActionUnten {
display: block;
}
*/

/* Kommentar entfernen um „Buchen“/“Stornieren“ Buttons auf der Kurs-Seite hinter und vor der Terminliste anzuzeigen
.callToActionUnten {
display: block;
}
*/

/* Datepicker Einstellungen */
.datepicker-container {
font-size: 14px;
color: black;
background-color: #ccc;
}

.datepicker-dropdown {
border: 1px solid #ccc;
-webkit-box-shadow: 1px 1px 6px #ccc;
box-shadow: 1px 1px 6px #ccc;
}

.datepicker-top-left,
.datepicker-top-right {
border-top-color: #fff;
}

.datepicker-top-left:before,
.datepicker-top-left:after,
.datepicker-top-right:before,
.datepicker-top-right:after {
border-top: 0;
}

.datepicker-top-left:before,
.datepicker-top-right:before {
border-bottom-color: #fff;
}

.datepicker-top-left:after,
.datepicker-top-right:after {
border-bottom-color: #fff;
}

.datepicker-bottom-left,
.datepicker-bottom-right {
border-bottom-color: #fff;
}

.datepicker-bottom-left:before,
.datepicker-bottom-left:after,
.datepicker-bottom-right:before,
.datepicker-bottom-right:after {
border-bottom: 0;
}

.datepicker-bottom-left:before,
.datepicker-bottom-right:before {
border-top-color: #fff;
}

.datepicker-bottom-left:after,
.datepicker-bottom-right:after {
border-top-color: #fff;
}

.datepicker-panel > ul > li {
background-color: #fff;
}

.datepicker-panel > ul > li:hover {
background-color: #e6f2ff;
}

.datepicker-panel > ul > li.muted,
.datepicker-panel > ul > li.muted:hover {
color: #999;
}

.datepicker-panel > ul > li.highlighted {
color: #39f;
}

.datepicker-panel > ul > li.highlighted:hover {
color: #39f;
}

.datepicker-panel > ul > li.picked,
.datepicker-panel > ul > li.picked:hover {
background-color: #e6f2ff;
}

.datepicker-panel > ul > li.disabled,
.datepicker-panel > ul > li.disabled:hover {
color: #ccc;
background-color: #fff;
}

.datepicker-panel > ul > li.disabled.highlighted,
.datepicker-panel > ul > li.disabled:hover.highlighted {
background-color: #e6f2ff;
}

.datepicker-panel > ul > li[data-view=’years prev‘],
.datepicker-panel > ul > li[data-view=’year prev‘],
.datepicker-panel > ul > li[data-view=’month prev‘],
.datepicker-panel > ul > li[data-view=’years next‘],
.datepicker-panel > ul > li[data-view=’year next‘],
.datepicker-panel > ul > li[data-view=’month next‘],
.datepicker-panel > ul > li[data-view=’next‘] {
font-size: 18px;
}

.datepicker-panel > ul[data-view=’week‘] > li,
.datepicker-panel > ul[data-view=’week‘] > li:hover {
background-color: #fff;
}