.st-red-frame{
  border: solid 2px #ff0000;
}
.st-green-frame{
  border: solid 1px #00ff00;
}
.editEvent {
  border: solid 4px green;
}

.moduleTitleHeader{
  font-style:  underline;
  font-size: 24px;
  color:orange;
  height: 100%;

}

/* styles for Module Menue */

.menueItem {
  font-weight: bold;
  padding: 20 px;
}

.menueItem:hover {
  border-bottom: solid 2px rgb(255, 128, 0);
  padding: 20px;
  color: #cccccc;
}

.menueItem:active {
  border-bottom: solid 2px rgb(255, 128, 0);
  font-weight: bold;
  padding: 20 px;
}

.menueItemChosen {
  font-weight: bold;
  color: #ff0000;
}


/* various font styles for a clean display*/
.additionalInfo{
  font-size: 8px;
  color: grey
}

.basicChoice {
  font-size: 10px;
  color: black
}

.choiceLink {
  font-size: 10px;
  color: black
}
.choiceLink:hover {
  font-size: 10px;
  border-bottom: solid 2px orange;
  color: black
}


/* style elements for the banner */

.grid-container {
display: grid;
background-color: black;
color: #ffa500;
grid-template: 50px / auto auto auto auto;
z-index: 99;
position: sticky;
top: 0;
height: 3em; 
column-gap: 5px;

}

.align-middle {
vertical-align: middle;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}


/* selection action is a style to diyplay an area where the user can make a selection, e.g. to assign a right */
.selectionMenue {
  border-bottom: solid 3px black;
}
.selectionAction {
 font-size: 9px;
 color: black;
 margin-left: 20px;
 margin-right:20px;
 padding: 2em;
 }
.selectionHead{
  font-weight: bold;
  font-size: 10px;
  color: black;
  background-color: burlywood;
}

.cardSubHeader {
  font-size: 10px;
  font-weight: bold;
 color: black;
}

/* calendar colors*/

.cal-blue {  color: blue;}
.cal-red{  color: red;}
.cal-green{  color: green;}
.cal-teal{  color: teal;}
.cal-brown{color: maroon;}
.cal-purple{    color:purple;}
.cal-deep-pink{  color: deeppink;}
.cal-dark-orange{  color: darkorange;}
.cal-turquoise{  color: turquoise;}
.cal-rosy-brown{  color: rosybrown;}
.cal-slate-grey{  color: slategrey;}
.cal-golden-rod{  color: goldenrod;}
.cal-deepskyblue {  color: #0bffff;}
.cal-chocolate {  color: #d2691e;}
.cal-chartreuse{  color: #66cd00;}
.cal-indianred{  color: #cd5c5c;}
.cal-burlywood4 {  color: #8B7355;}
.cal-cerulean { color: #007BA7; }
.cal-coralred { color: #FF4040; }
.cal-tealgreen { color: #008080; }
.cal-marigold { color: #EAA221; }
.cal-amethyst { color: #9966CC; }
.cal-fern { color: #4F7942; }
.cal-saffron { color: #F4C430; }
.cal-indigodye { color: #00416A; }
.cal-raspberry { color: #E30B5C; }
.cal-slateblue { color: #6A5ACD; }
.cal-pumpkin { color: #FF7518; }
.cal-moss { color: #8A9A5B; }
.cal-skyblue2 { color: #87CEEB; }
.cal-perugold { color: #CD853F; }
.cal-magentarose { color: #FF00AF; }
.cal-olive { color: #808000; }
.cal-navydeep { color: #001F3F; }
.cal-deepcyan { color: #008B8B; }
.cal-brick { color: #B22222; }
.cal-sand { color: #C2B280; }
.cal-steel { color: #4682B4; }
.cal-lavenderdeep { color: #7F6A93; }
.cal-mint { color: #3EB489; }
.cal-peach { color: #FFCBA4; }
.cal-royal { color: #4169E1; }
.cal-crimson { color: #DC143C; }
.cal-limeleaf { color: #7FFF00; }
.cal-aubergine { color: #580F41; }
.cal-cinnamon { color: #7B3F00; }
.cal-denim { color: #1560BD; }
.cal-orchid { color: #DA70D6; }
.cal-turquoise { color: #40E0D0; }
.cal-goldenrod2 { color: #DAA520; }
.cal-rose { color: #FF007F; }
.cal-seagreen { color: #2E8B57; }
.cal-ochre { color: #CC7722; }
.cal-burntorange { color: #CC5500; }
.cal-cobalt { color: #0047AB; }
.cal-petrol { color: #005F6A; }
.cal-wine { color: #722F37; }
.cal-skygray { color: #778899; }
.cal-mossdeep { color: #556B2F; }
.cal-seablue { color: #006994; }
.cal-plumb { color: #8E4585; }
.cal-sunflower { color: #FFC512; }
.cal-iceberg { color: #71A6D2; }
.cal-pistachio { color: #93C572; }
.cal-graphite { color: #2F4F4F; }
.cal-azure { color: #007FFF; }
.cal-cranberry { color: #9E003A; }
.cal-forestgreen2 { color: #228B22; }
.cal-copper { color: #B87333; }
.cal-lapislazuli { color: #26619C; }
.cal-salmon { color: #FA8072; }
.cal-lavenderblush { color: #FFF0F5; }
.cal-chartreuse2 { color: #7FFF00; }
.cal-periwinkle { color: #CCCCFF; }
.cal-scarlet { color: #FF2400; }
.cal-apricot { color: #FBCEB1; }
.cal-aquamarine { color: #7FFFD4; }
.cal-charcoal { color: #36454F; }
.cal-sienna { color: #A0522D; }
.cal-bordeaux { color: #5C0120; }
.cal-malachite { color: #0BDA51; }
.cal-cobaltblue { color: #0047AB; }
.cal-sunset { color: #FAD6A5; }
.cal-honey { color: #FFC30B; }
.cal-rosewood { color: #65000B; }



/* end calendar colors */

/****NavbarLink****/

.procedu-navbar-link {
  color: #cccccc;
  font-weight: bold;
  text-decoration: none;
 

}

.procedu-navbar-link:hover {
  color: whitesmoke;
  text-decoration: underline;
  font-weight: bold;
  

}

.procedu-navbar-link:active {
  color: whitesmoke;
  text-decoration: underline;
  font-weight: bold;
  

}





.event-summary{
  font-weight: bold;
  font-style: underline;
  font-size: 12px;
}

.event-info{
  font-size: 12px;
}

.event-info-icon{
  font-size: 12px;
}

.calendar-month-header{
  font-size: 18px;
  border-bottom: solid 4px black;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  background-color: rgba(255,165,0,0.1);
  color: black;
}

/** info div **/
.infoBox {
  top: 40%; 
  left: 15%;
  width: 70%;
  height: 200px;
  position: fixed;
  border: solid 4px orange;
  background-color: #dddddd;
  border-radius: 8px;
}

.infoBoxLink {
  font-size: 10px;
  color: black;
  text-decoration: underline
}
.infoBoxLink:hover {
  font-size: 10px;
  color: orange;
  text-decoration: underline
}


/**** loading animation****/

.middle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.bar {
  width: 10px;
  height: 50px;
  background: #fff;
  display: inline-block;
  transform-origin: bottom center;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  /*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
  animation: loader 1.2s linear infinite;
}
.bar1 {
  animation-delay: 0.1s;
}
.bar2 {
  animation-delay: 0.2s;
}
.bar3 {
  animation-delay: 0.3s;
}
.bar4 {
  animation-delay: 0.4s;
}
.bar5 {
  animation-delay: 0.5s;
}
.bar6 {
  animation-delay: 0.6s;
}


@keyframes loader {
  0% {
    transform: scaleY(0.1);
    background: orange;
  }
  50% {
    transform: scaleY(1);
    background: yellowgreen;
  }
  100% {
    transform: scaleY(0.1);
    background: transparent;
  }
}



/*  Texts */

.warning {
  border-left: solid 4px #ff0000;
}

.warning-text {
  color: #ff0000;
}
.ok-text{
  color: black;
}
/* Änderung bei bootstrap **/
.text-procedu-banner {
  color: rgb(255, 128, 0);
} 

.text-procedu-title-orange {
  color: rgb(255, 128, 0);
  font-size: larger;
  font-weight: bold;
} 



.text-procedu-warning{
  color: rgb(255, 0, 0);
}

.text-procedu-grey {
  color: rgb(80,80,80);
}



/* buttons - Änderungen bei bootstrap*/

.btn-success {
  background-color: rgb(255, 128, 0);
  color: black;
  font-weight: bold;
  border: none;
}

.btn-success:hover {
  background-color: grey;
  color: black;
  font-weight: bold;
  border: none;
}

.btn-outline-primary {
  --bs-btn-color: rgb(255, 128, 0);
  --bs-btn-border-color: #rgb(255, 128, 0);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(255, 128, 0);
  --bs-btn-hover-border-color: #rgb(255, 128, 0);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(255, 128, 0);
  --bs-btn-active-border-color: rgb(255, 128, 0);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #rgb(255, 128, 0);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgb(255, 128, 0);
  --bs-gradient: none;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgb(255, 128, 0);
  --bs-btn-border-color: rgb(255, 128, 0);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(255, 128, 0);
  --bs-btn-hover-border-color: rgb(255, 128, 0);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(255, 128, 0);
  --bs-btn-active-border-color: rgb(255, 128, 0);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgb(255, 128, 0);
  --bs-btn-disabled-border-color: rgb(255, 128, 0);
}


/** Änderungen bei bootstrap **/
/* custom-bootstrap-overrides.css */

.form-check-input:checked {
  background-color: rgb(255, 128, 0); /* dein Orange */
  border-color: rgb(255, 128, 0);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);
  border-color: rgb(255, 128, 0);
}

.form-check-input:active {
  filter: brightness(95%);
}


/** Änderungen bei Bootstrap **/
/** positioniere Fenster mittig ***/

.center-screen {
  
  display: flex;
  flex-direction: column; /* optional, für vertikale Elemente */
  justify-content: center; /* vertikal zentrieren */
  align-items: center;     /* horizontal zentrieren */
}




/* tableheader for sortable table */
.sorthead {
  background-color: orange;
  color: black;
  font-weight: bold;
  font-size: 12px;
  border: none;
}
.sorthead:hover {
  background-color: orange;
  color: black;
  font-weight: bold;
  font-size: 12px;
  border-bottom: 2px solir red;
}

/* modal css */

  .skorx-modal {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 9999;
  }

  .skorx-modal-content {
    position: absolute;
    top: 10%;
    left: 10%;
    transform: translate(0px);
    background-color: #fefefe;
    padding: 10px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    max-height: 80%;
    overflow: auto;
    
  }

  

  .skorx-modal-title {
    font-weight: bold;
    font-size: 18px;
    color: black;
    border-bottom: 2px solid orange;
  }

  .skorx-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background-color: #fff;
    cursor: pointer;
  }

  .skorx-close:hover,
  .skorx-close:focus {
    color: red;
    text-decoration: none;
  }


  @media only screen and (min-width: 992px) {
    .skorx-modal-content {
      min-width: 80%;
    }
  }


 #dropZone.hover {
  border-color: blue;
 }

  #dropZone {
  transition: border-color 0.2s ease;
}



/* Responsive Grid für Module */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem; /* 20px; nach Geschmack anpassen */
  align-items: stretch; /* sorgt für gleich hohe Grid-Zellen */
}

/* Karten selbst als Flex-Container: Inhalt streckt sich gleichmäßig */
.module-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Bildbereich: konstante Höhe + sauberes Zuschneiden */
.module-grid .card .card-image img {
  width: 100%;
  height: 180px;          /* 160–220px je nach Look */
  object-fit: cover;
}

/* Inhalt füllt den Raum zwischen Bild und Actions */
.module-grid .card .card-content {
  flex: 1 1 auto;
}

/* Actions an den unteren Rand „kleben“ */
.module-grid .card .card-action {
  margin-top: auto;
}

/* Optional: etwas kompaktere Titel-Overlays auf Bildern */
.module-grid .card .card-title {
  line-height: 1.2;
}




.report-entry-page {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 120px);
}

.report-entry-sidebar {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.form-switch .form-check-input.report-open-filter-switch:checked {
  background-color: #fd7e14 !important;
  border-color: #fd7e14 !important;
}





.form-switch .form-check-input.report-open-filter-switch:focus {
  border-color: #fd7e14 !important;
  box-shadow: 0 0 0 .25rem rgba(253, 126, 20, .25) !important;
}

/** Darstellung für Berichtseingabe **/

.report-entry-page-wrapper {
  width: 100%;
  max-width: 100%;
}

.report-entry-page {
  width: 100%;
  max-width: 100%;
}

/** Darstellunhg Berichtsausgabe komplett **/

.report-subject-column {
    width: 38px;
    min-width: 38px;
    padding: 0.25rem;
    vertical-align: bottom;
}

.report-subject-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1;
}