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

.modal-header {
	border-bottom: 0;	
}

#login_submit {
    margin: 10px;
}

#login_reset_pw {
    margin: 10px;
}

.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.btn-group>.btn:nth-child(n+3), .btn-group>:not(.btn-check)+.btn {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    margin-left: 1px;
}

.bs-actionsbox .btn-group>.btn-group:not(:first-child), .bs-actionsbox .btn-group>.btn:not(:first-child) {
    margin-left: -1px;
}

/****************************************/
/********* CHECKBOX LIST ****************/
/****************************************/
    
/********************************************
 *   GRID LAYOUT FÜR DIE LISTE
 ********************************************/
ul.ks-tasks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* Zwei Spalten */
  row-gap: 10px;      /* Verringert den vertikalen Abstand */
  column-gap: 20px;   /* Lässt den horizontalen Abstand unverändert */
  list-style: none;
  padding: 20px;
  margin: 0;
}

/* Pseudo-Element, das die rechte Zelle der ersten Zeile belegt */
ul.ks-tasks::after {
  content: "";
  grid-column: 2 / 3;  /* Besetzt die rechte Spalte */
  grid-row: 1;        /* In der ersten Reihe */
  /* Da der Inhalt leer ist, sorgt dies nur dafür, dass die Zelle als belegt gilt */
}

/* Globaler Steuerungseintrag: soll alleine in einer Zeile stehen (über beide Spalten) */
.task-item-fake {
  grid-column: 1 / 2;
  border: 2px solid var(--accent);
  border-radius: 4px;
  padding: 5px 15px;
  background: #f9f9f9;
  transition: border-color 0.3s ease;
}

/* Übrige Task-Einträge */
.task-item {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 5px 15px;
  background: #f9f9f9;
  transition: border-color 0.3s ease;
}

/********************************************
 *   TASK-INHALT (TITLE, SUBTITLE & ACTIONS)
 ********************************************/
.task-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Linke Spalte: Titel und Subtitel */
.task-left {
  display: flex;
  flex-direction: column;
}

.task-title {
  font-size: 18px;
  margin: 0;
}

.task-subtitle {
  font-size: 16px;
  color: var(--accent);
  margin: 5px 0 0;
}

/* Rechte Spalte: Aktionsbuttons und Fehlertext für Auswahl */
.task-actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.task-actions {
  display: flex;
  gap: 10px;
  position: relative;
}

/********************************************
 *   CHECKBOXEN & ICONS
 ********************************************/
.task-actions input[type="checkbox"] {
  display: none;
}

.task-actions label {
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: relative;
}

.lbl-done::before,
.lbl-fault::before {
  font-family: "FontAwesome";
  font-size: 32px;
  color: #aaa;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: color 0.3s ease;
}

.lbl-done::before {
  content: "\f00c";
}

.lbl-fault::before {
  content: "\f00d";
}

input.done:checked + label.lbl-done::before {
  color: #52de97;
}

input.fault:checked + label.lbl-fault::before {
  color: #de5252;
}

/********************************************
 *   STATUS-FARBEN
 ********************************************/
.task-item.green-border {
  border-color: #52de97;
}

.task-item.green-border .task-title {
  text-decoration: line-through;
  color: #bfbfbf;
}

.task-item.red-border {
  border-color: #de5252;
}

/********************************************
 * KOMMENTAR- & FILEUPLOAD-BEREICH (GLEICH GROß)
 ********************************************/
/* Container: standardmäßig ausgeblendet */
.comment-upload-container {
  display: none;
  gap: 10px;
  align-items: stretch; /* sorgt dafür, dass alle Kinder gleich hoch sind */
  margin-top: 10px;
}

/* Bei rotem Zustand (red-border) einblenden */
.task-item.red-border .comment-upload-container {
  display: flex;
}

/* Kommentarfeld und Datei-Upload-Feld: gleiche Höhe & flexible Breitenaufteilung */
.fault-comment,
.condition_check_file_input {
  flex: 1;
  height: 60px;  /* Feste Höhe; anpassbar */
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.fault-comment {
  min-width: 40%;
}

/* Da dein Dateiupload-Feld per HTML mit .condition_check_file_input versehen ist,
   wird es hier gestylt. Da es meistens unsichtbar bleibt und ein benutzerdefiniertes Label angezeigt wird,
   wird der eigentliche Input versteckt. */
.condition_check_file_input {
  display: none;
}

/* Wrapper für den benutzerdefinierten File-Upload-Bereich (Label & Dateiname) */
.file-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;  /* entspricht der Höhe der Felder */
}

.condition_check_file_input_label,
.condition_check_file_name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

.condition_check_file_input_label {
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.condition_check_file_name {
  font-size: 14px;
  color: #333;
}

/********************************************
 *   FEHLERHERVORHEBUNG & FEHLERMELDUNGEN
 ********************************************/
.error-border {
  border: 2px solid red !important;
}

.error-message-select,
.error-message-comment {
  color: red;
  font-size: 14px;
  margin-top: 5px;
  display: none;
}



/****************************************/
/************ SUCC MODAL ****************/
/****************************************/

.success-checkmark {
    width: 80px;
    height: 115px;
    margin: 0 auto;
}

.success-checkmark .check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid var(--accent-dark);
}

.success-checkmark .check-icon::before {
    top: 3px;
    left: -2px;
    width: 30px;
    transform-origin: 100% 50%;
    border-radius: 100px 0 0 100px;
}

.success-checkmark .check-icon::after {
    top: 0;
    left: 30px;
    width: 60px;
    transform-origin: 0 50%;
    border-radius: 0 100px 100px 0;
    animation: rotate-circle 4.25s ease-in;
}

.success-checkmark .check-icon::before, .success-checkmark .check-icon::after
{
    content: "";
    height: 100px;
    position: absolute;
    background: #FFFFFF;
    transform: rotate(-45deg);
}

.success-checkmark .check-icon .icon-line {
    height: 5px;
    background-color: var(--accent-dark);
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}

.success-checkmark .check-icon .icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
}

.success-checkmark .check-icon .icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
}

.success-checkmark .check-icon .icon-circle {
    top: -4px;
    left: -4px;
    z-index: 10;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid var(--accent);
}

.success-checkmark .check-icon .icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: #FFFFFF;
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg); /* Safari & Chrome */
        -moz-transform: rotate(-45deg); /* Firefox */
        -ms-transform: rotate(-45deg); /* Internet Explorer */
        -o-transform: rotate(-45deg);
    }
    5% {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg); /* Safari & Chrome */
        -moz-transform: rotate(-45deg); /* Firefox */
        -ms-transform: rotate(-45deg); /* Internet Explorer */
        -o-transform: rotate(-45deg);
    }
    12% {
        transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg); /* Safari & Chrome */
        -moz-transform: rotate(-405deg); /* Firefox */
        -ms-transform: rotate(-405deg); /* Internet Explorer */
        -o-transform: rotate(-405deg);
    }
    100% {
        transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg); /* Safari & Chrome */
        -moz-transform: rotate(-405deg); /* Firefox */
        -ms-transform: rotate(-405deg); /* Internet Explorer */
        -o-transform: rotate(-405deg);
    }
}
@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}
@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}