tr.clickable:hover {
    background-color: #EBEAF1;
    cursor: pointer;
}

.kt-portlet .kt-portlet__body.custom-portlet {
    padding: 0;
}

.kt-header--fixed.kt-subheader--fixed.kt-subheader--enabled .kt-wrapper {
    padding-top: 94px;
}

.jEventCal.style1 .month .monthValue {
  color: #000;
  font-weight: normal;
  font-size: 10px;
  position: absolute;
  left: 100%;
  line-height: 20px;
  margin: -6px 0 0 5px;
  text-transform: uppercase;
}

.jEventCal.style1 .todayValue {
  color: #000;
  font-weight: normal;
  font-size: 10px;
  position: absolute;
  left: 0;
  line-height: 20px;
  margin: -15px 0 0 5px;
}

.jEventCal.style1 {
    width: 210px;
    width: 80%;
}

.jEventCal.style1 {
  font-family: Poppins, Helvetica, sans-serif;
  border: 0;
}

.jEventCal.style1 .yearBox {
  padding-top: 20px;
}

.jEventCal.style1 .events .event {
  height: 15px;
  width: 15px;
}

.jEventCal.style1 .events .event.zues {
  border: solid 3px #FFE7BA;
  background-color: #FFE7BA;
}

.jEventCal.style1 .events .event.maintenance {
  border: solid 3px #FFE7BA;
  background-color: #FFE7BA;
}

.jEventCal.style1 .events .event.error {
  border: solid 3px #FD3995;
  background-color: #FD3995;
}

.jEventCal.style1 .events .event.errorfixed {
  border: solid 3px #1dc9b7;
  background-color: #FD3995;
}

.jEventCal.style1 .events .event.today {
  border: dashed 1px #000000;
  border-top-width: 0px;
  border-radius: 0;
  height: 1px;
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.jEventCal.style1 .events .event.today div.eventContainer {
  display: none !important;
}

.jEventCal.style1 .event .eventTitle {
  white-space: nowrap;
  line-height: 15px;
  font-size: 12px;
}
.jEventCal.style1 .event .eventContainer {
  
  position: absolute;
  background-color: #333;
  color: #fff;
  font-weight: 500;
  margin-left: -30px;
  padding: 10px;
  top: -15px;
  left: 0;
  z-index: 2;
}

.jEventCal.style1 .event .eventTitle {
  white-space: normal;
  min-width: 130px;
  display: block;
}

.bootstrap-select .dropdown-toggle .filter-option {
  width: 80%;
}

.bootstrap-select > .dropdown-toggle.btn-light, .bootstrap-select > .dropdown-toggle.btn-secondary {
  max-width: 80%;
}

/* "×" zum Leeren der Auswahl bei Mehrfach-Auswahlfeldern (siehe multiselect-clear.js).
   Position links neben dem Ausklapp-Pfeil (::after am .dropdown-toggle). Nur sichtbar,
   wenn etwas ausgewählt ist (.has-clear wird per JS gesetzt). Farbe je Skin (skin-base /
   skin-classic-dark); Default hier neutral. */
/* Positionskontext nur am generierten Wrapper-DIV (nicht am versteckten <select>,
   das ebenfalls die Klasse .bootstrap-select traegt). */
div.bootstrap-select {
  position: relative;
}
.bootstrap-select .bs-clear-x {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  z-index: 2;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
  padding: 0 4px;
  color: #9aa3b2;
}
.bootstrap-select .bs-clear-x:hover {
  color: #5b6472;
}
.bootstrap-select.has-clear .bs-clear-x {
  display: block;
}
/* Text nicht unter das "×" laufen lassen, wenn es sichtbar ist */
.bootstrap-select.has-clear > .dropdown-toggle .filter-option {
  padding-right: 1.2rem;
}

/* Aufgeklapptes Auswahlmenue ueber den fixen Seitenkopf legen (der hat z-index 97).
   Ist unter dem Feld zu wenig Platz, klappt das Menue nach oben — mit dem Standardwert 95
   verschwanden die obersten Eintraege dahinter und waren weder lesbar noch anklickbar.
   98 bleibt unter Modals (1050) und den Sonder-Overlays des Projekts.
   Zwei Selektoren, weil bootstrap-select "show" je nach Zustand am Wrapper oder am
   Menue setzt. Bewusst auf .bootstrap-select eingegrenzt — Benutzermenue und Glocke
   behalten ihre Stapelreihenfolge. */
.bootstrap-select > .dropdown-menu.show,
.bootstrap-select.show > .dropdown-menu {
  z-index: 98;
}


label > input[type="checkbox"] {
  display: none;
}
label > input[type="checkbox"] + *::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 1rem;
  height: 1rem;
  border-radius: 10%;
  border-style: solid;
  border-width: 0.1rem;
  border-color: gray;
}
label > input[type="checkbox"]:checked + *::before {
  content: "✓";
  color: white;
  text-align: center;
  background: teal;
  border-color: teal;
}
label > input[type="checkbox"]:checked + * {
  color: teal;
}

/*
input[type="checkbox"] {
  display: none;
}

label:before {
  background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 1px solid #035f8f;
  height: 36px;
  width: 36px;
  display: inline-block;
  cursor: pointer;
}

input[type="checkbox"] + label:before {
  content: '';
  background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  border-color: #3d9000;
  color: #96be0a;
  font-size: 38px;
  line-height: 35px;
  text-align: center;
}


input[type="checkbox"]:checked + label:before {
  content: '✓';
}
*/
/*
.form-check {
  margin-top: 20px;
}

[type="checkbox"] {
  position: relative;
  left: 30px;
  top: 0px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 24px;
  line-height: 1.3;
  padding-left:70px;
  position: relative;
  margin-top: -30px;
}
[type="checkbox"] + label:before {
  width: 60px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}
[type="checkbox"] + label:after {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 10;
}
[type="checkbox"]:checked + label:before {
  background-color: #2b8718;
}
[type="checkbox"]:checked + label:after {
  margin: 0 0 0 30px;
}
*/


.fillLevel {
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 40px;
  width: 20%;
  height: 100%;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  text-align: right;
  position: relative;
}

.fillLevel span.desc {
  margin-left: 70px;
}

.fillLevel .low span.desc {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fillLevel .full {
  height: 33.333%;

} 

.fillLevel .med {
  height: 33.333%;

} 

.fillLevel .low {
  height: 33.333%;
}

.fillLevel .full, .fillLevel .med {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000000;
}

.fillLevel.full {
  background-color: green;
}

.fillLevel.med .med, .fillLevel.med .low {
  background-color: yellow;
}

.fillLevel.low .low, .fillLevel.low .low {
  background-color: red;
}

.homebtn.white {
  color: #ffffff;
  font-size: 34px;
}

.signature-pad canvas {
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
  width: 10cm;
  width: 100%;
  max-width: 10cm;
  height: 5cm;
}

.lastKnownState {
  line-height: 1.5;
  text-align: center;
  display: block;
  font-size: 0.8rem;
}

.kt-datatable__cell .kt-user-card-v2 {
  margin-bottom: 4px;
}

.kt-user-card-v2 .stateDesc {
  width: 80px;
  text-align: right;
  margin-right: 8px;
}

.kt-datatable__body .kt-datatable__row--even {
  background-color: rgba(0, 0, 0, 0.01);
}

.kt-datatable__body .kt-datatable__row:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
/* OpenLayers-Karten (Detailseiten): Ein-Finger-Wischen scrollt die Seite,
   die Karte selbst wird mit zwei Fingern bedient (DragPan-Condition im JS).
   !important noetig, da OL touch-action inline am Viewport setzt. */
#mapdiv .ol-viewport {
    touch-action: pan-x pan-y !important;
}

/* Abschnitts-Balken im Benachrichtigungs-Panel (Glocke, _headerTopBar.html.twig).
   Ersetzt einen frueheren Inline-Style: der war von den Skins nicht ueberschreibbar,
   wodurch die Balken im Dunkelmodus weiss blieben und die helle Ueberschrift darauf
   unlesbar war. Werte entsprechen exakt dem bisherigen Inline-Style, der Hellmodus
   sieht also unveraendert aus; die Dunkel-Skins ueberschreiben nur die Flaeche. */
.kt-head--section {
    /* Seitlich exakt wie die Eintraege darunter (Metronic: padding 1.1rem 1.5rem),
       damit die Kanten buendig laufen. Vertikal bewusst schmaler - der Balken soll als
       Trenner wirken und nicht wie ein weiterer Eintrag. */
    padding: .6rem 1.5rem;
    background: #f7f8fa;
}

/* Eintraege im Benachrichtigungs-Panel: kein Querlauf mehr.
   Das Panel ist 320px breit (.dropdown-menu-lg). Der Textblock ist ein Flex-Element und hat
   damit min-width:auto - er kann nicht schmaler werden als sein laengstes zusammenhaengendes
   Wort. Lange Mailadressen in den Cron-Meldungen sprengten dadurch die Panelbreite: waagerechter
   Rollbalken, rechts abgeschnittener Inhalt. min-width:0 erlaubt das Schrumpfen, der Umbruch
   innerhalb langer Woerter verhindert, dass dabei etwas verloren geht. */
.kt-notification .kt-notification__item .kt-notification__item-details {
    min-width: 0;
    overflow-wrap: anywhere;
}
.kt-notification .kt-notification__item .kt-notification__item-icon,
.kt-notification .kt-notification__item > .btn {
    flex-shrink: 0;
}

/* Weiße Kachel hinter QR-Codes — in den dunklen Skins wäre der schwarze Code
   auf transparentem PNG sonst unlesbar/nicht scanbar */
.qrCodeTile {
    background: #ffffff !important;
    padding: 12px;
    border-radius: 6px;
    max-width: 100%;
}