/* Layout Anpassungen */
.copyright {
    padding-bottom: 15px;
}

.nav-menu {
    display: flex;
}
.header-navigation .nav-item-wrapper {
    min-width: unset !important;
    padding-bottom: 0px !important;
}

.job-sidebar-wrapper {
    margin-top: 0px;
}
.show-in-mobile {
        display: none;
    }

/* Status Meldungen */
.typo3-messages {
    padding-left: 0px;
    line-height: 130%;
}
.typo3-messages ul li {
    margin-bottom: 4px;
}
.typo3-messages .alert-message {
    font-weight: normal;
}
.typo3-messages .alert-message-title {
    font-weight: bold;
}

.typo3-messages .alert-success .alert-message {
    color: #00b25a;
}
.typo3-messages .alert-info .alert-message {
    color: #3898EC;
}

.txt-success {
    font-size: 18px;
    font-weight: bold;
    color: #00b25a;
    padding-bottom: 10px;
}

.w-input[disabled], .w-select[disabled] {
    cursor: default;
}
.w-input[disabled]:hover, .w-select[disabled]:hover {
    border-color: #eeeeee;
}

/* Buttons */
.button-primary, input[type="submit"], .btn-primary  {
    padding: 22px 40px; 
    border-radius: 1000px;
    color: #fff;
    line-height: 1.125em;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    background-color: #08a54b; 
    border: 2px solid #08a54b;
    transition: unset;
    transform: none;
    -webkit-transition: unset;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
}
.button-primary:hover, input[type="submit"]:hover, .btn-primary:hover {
    background-color: #444444;
    border: 2px solid #444444;
}
.button-primary.inactive, .btn-primary.inactive {
    background-color: #c6c6c6; 
    border: 2px solid #c6c6c6;
    cursor: default;
}
.button-primary.inactive:hover, .btn-primary.inactive:hover {
    background-color: #c6c6c6; 
}
.button-primary.delete {
    background-color: red; 
}
.button-primary.delete:hover {
    background-color: #c6c6c6; 
}

/* Icons */
.icon-link:before {
    content: ''; 
}
.icon-link {
    display: inline-block; /* Ermöglicht die Verwendung von Breite und Höhe */
    width: 30px; 
    height: 30px;
    background-image: url('../Icons/info.png'); /* Pfad zum Icon-Bild */
    background-repeat: no-repeat; /* Verhindert Wiederholung */
    background-position: center center; /* Position des Icons */
    background-size: contain;
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: #333; /* Textfarbe */
    font-size: 16px; /* Schriftgröße */
}

.icon-link:hover {
    color: #007BFF; /* Textfarbe beim Hover */
}

.icon-link.info {
    background-image: url('../Icons/info.png'); 
}
.icon-link.approve {
    background-image: url('../Icons/approve.png'); 
}
.icon-link.deny {
    background-image: url('../Icons/delete.png'); 
}
.icon-link.waitlist {
    background-image: url('../Icons/waitlist.png'); 
}
.icon-link.edit {
    background-image: url('../Icons/edit.png'); 
}

/* RTE Formatierungsmöglichkeiten */
p.green {
    color: #00b25a;
}
p.mandatory-info {
    font-weight: bold;
}
p.mandatory-info:before {
    content: '!!! ';
    margin-left: -32px;
    font-size: 24px;
    color: #00b25a;
    letter-spacing: 1px;
}

/* Border Item / List Item */
.jobs-grid {
    grid-row-gap: 0px;
}
.card.course {
  padding: 21px 25px 25px 25px;
  margin-bottom: 15px;
  border-radius: 12px;
  -webkit-transition: border-color 300ms ease, -webkit-transform 300ms ease;
  transition: border-color 300ms ease, -webkit-transform 300ms ease;
  transition: transform 300ms ease, border-color 300ms ease;
  transition: transform 300ms ease, border-color 300ms ease, -webkit-transform 300ms ease;
  color: #444;
  text-decoration: none;
}

.card.course:hover {
  /*border-color: #08a54b;*/
  border-color: #e4e4ed; 
  
  color: #444;
}

.card.course.course-details {
    padding-left: 38px;
    padding-right: 38px;
}

.card.course.course-details .course-description p {
    margin-bottom: 20px;
}

.card.course.participation-status {
    font-size: 18px;
    background-color: #08a54b; 
    color: white;
}
.card.course.login {
    background-color: #f4f4f4;
}
.card.course.login.highlighted {
    background-color: #08a54b;
    background-color: rgba(8, 165, 75, 0.3); 
}
.card.course.login.highlighted .button-primary {
    background-color: #444;
    border-color: #444;
}
.button-primary.extrasmall {
  padding: 4px 6px;
  font-size: 16px;
  font-weight: normal;
}

.card.course.person {
    background-color: #f4f4f4;
    padding: 4px;
    margin-bottom: 6px;
}


/* Header allgemein / Header Kurse */
.page-wrapper {
    overflow-x: hidden;
}
.home-header-container {
    background-color: #2b2b2b;
    color: white;
    padding-top: 40px;
    padding-bottom: 40px;
    border-top: 5px solid white; 
    margin-bottom: 30px;
}
.home-header-container .container-default {
    padding-right: 120px;
    
}
.home-header-container h1, .home-header-container h2, .home-header-container h3, .home-header-container p {
    color: white; 
}
.home-header-container.category h1 {
    margin-bottom: 0px;
    font-size: 40px;
}

.pt-training-header {
    margin: 0 auto; /* Zentriert den Container */
    position: relative;

}
.pt-training-header .home-header-container.full-width-div {
    position: relative; /* Ermöglicht absolute Positionierung */
    left: 50%; /* Startet von der Mitte des Containers */
    right: 50%; /* Endet in der Mitte des Containers */
    margin-left: -50vw; /* Verschiebt nach links um die halbe Viewport-Breite */
    margin-right: -50vw; /* Verschiebt nach rechts um die halbe Viewport-Breite */
}
.pt-training-header.search-bar {
    position: relative;
    margin-bottom: 100px;
}
.pt-training-header.search-bar .home-header-container {
    padding-bottom: 80px;
}

.pt-training-header.search-bar form {
    position: absolute; 
    width: 100%;
    bottom: -80px;
}
/*.search-bar-container {
    top: -80px;
}*/
.page-wrapper.home .job-category-filters {
    margin-bottom: 0px;
}
.card.job-category-filters {
    justify-content: start; 
    padding: 22px 32px 22px 32px; 
    
}
.card.job-category-filters .search-submit-field {
    position: relative;
    padding-right: 10px;
}
.button-primary.small.home-jobs-filter-search-button {
    margin-top: 0px;
    top: 6px;
}
.button-primary.extrasmall {
    padding: 4px 8px 4px 8px;
    margin-right: 4px;
}

.course-admin-content .course-info {
    line-height: 120%;
}
.course-admin-content .course-info h5 {
    margin-bottom: 0px;
}
.course-admin-content .course-info .course-data {
    margin-bottom: 0px;
}
.filter-option-container {
    display: flex;
    gap: 10px; 
}
.filter-option-container label {
    margin-bottom: 2px;
    font-weight: 300;
}
.filter-option-container label.filter-name {
    font-weight: bold;
    margin-right: 10px; /* Abstand zwischen Label und Optionen */
    min-width: 150px;
}



/* Kurs Dashboard */
.pt-training .full-width-div {
    position: absolute; /* Macht die Positionierung relativ zum Container möglich */
    left: 0; /* Start bei der linken Bildschirmkante */
    right: 0; /* Ende bei der rechten Bildschirmkante */
    width: 100vw; /* Volle Breite des Viewports */
    margin-left: -50vw; /* Ausgleich, um das Element in der Mitte zu zentrieren */
    left: 50%; /* Element mittig ausrichten */
    padding: 20px;
    box-sizing: border-box; /* Padding wird innerhalb der Breite berücksichtigt */
}

.dashboard-container {
    padding-left: 0px; 
    padding-right: 0px;
}
.split-content.card-job-left { /* Kategorie Item */
    max-width: unset !important; 
}
.image-wrapper.card-job { /* Kategorie Item: Icon */
    min-width: 110px; 
}
.div-colored { /* Kategorie Item: Icon Background */
    position: absolute; /* Ermöglicht präzise Positionierung */
    top: 0;
    left: 0;
    width: 140px; /* Breite von 50px */
    height: 100%; /* Höhe des Containers einnehmen */
    
}
.card.course.category-overview {
    padding-top: 16px; 
    padding-bottom: 16px;
    padding-left: 16px;
}
.card.course.category-overview .image-wrapper.card-job {
    margin-right: 32px; 
}
.card.course.category-overview .card-link-wrapper a {
    padding-right: 10px;
}

/* Kurs Inhalte */
.pt-training a {
    text-decoration: none;
}
.pt-training.course-info h1 {
    font-size: 32px;
}
.pt-training .course-type {
    color: #171728;
    font-size: 22px;
    line-height: 1.273em;
    font-weight: 500;
    margin-bottom: 20px;
    /*
    background-color: #c6c6c6;
    padding: 6px;
    color: #575756;
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: larger;
    font-weight: bold;*/
}
.pt-training ul {
  list-style: none; /* Entfernt die Standardpunkte */
  padding-left: 0px; /* Platz für die Symbole */
}
.pt-training ul li {
  position: relative;
  padding-left: 1.5em; /* Abstand für das Symbol */
}
.pt-training ul li::before {
  content: ""; /* Fügt ein benutzerdefiniertes Symbol ein */
  position: absolute;
  left: 0;
  top: 15px;
  transform: translateY(-50%);
  width: 10px; /* Breite des Rechtecks */
  height: 10px; /* Höhe des Rechtecks */
  background-color: #c6c6c6; /* Farbe des Rechtecks */
}
.pt-training p {
    margin-bottom: 0px;
}

.course-data-container {
    margin-top: 20px;
}
.course-data {
  display: flex; /* Aktiviert Flexbox für die horizontale Anordnung */
  /* align-items: center; Zentriert Elemente vertikal */
  gap: 10px; /* Abstand zwischen Label und Wert */
  margin-bottom: 6px; /* Abstand zwischen den Paaren */
}
.card.course.course-date .course-data{
    display: block;
}

.course-info .label {
  font-weight: bold; /* Hebt das Label hervor */
  min-width: 150px; /* Feste Breite für Labels, damit sie ausgerichtet sind */
}

.course-info .value {
  flex: 1; /* Das Value-Element nimmt den restlichen Platz ein */
  text-align: left; /* Links ausgerichteter Text */
}
.course-info .value p {
    margin-top: 4px; 
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.course-info .value p:first-child {
    margin-top: 0px;
}
.title-info {
    display: block;
    padding-top: 16px; 
    font-weight: bold; 
}

.course-persons-container {
    margin-top: 20px;
    clear: both;
}
.course-persons-container:after {
    clear: both;
}
.course-person {
  float: left;
  display: flex;
  margin-bottom: 6px; 
  margin-right: 20px;
  width: 45%;
}

.course-person .image {
  min-width: 150px;
}

.course-info .name {
    display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Inhalt unten ausrichten */
    
    padding-left: 10px;
    font-size: 22px;
    line-height: 28px;
    font-weight: bold;
    color: #00b25a;
    
    text-align: left; 
}


.course-list-container h3 {
    margin-top: 20px; 
    margin-bottom: 20px;
}
.course-breadcrumb-nav {
    padding-top: 10px; 
    padding-bottom: 30px;
}
.course-breadcrumb-nav a {
    color: unset;
}


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


/* Teilnehmer Liste */
.pt-training .participation-course-info {
    display: flex; 
    width: 100%; 
}
.pt-training .participation-course-info div:first-child {
    padding-right: 14px;
}
.pt-training .participation-course-info div:last-child {
    flex-grow: 1; 
}
.pt-training .txt-status-info {
    font-style: italic;
}


/* Pagination */
.pt-training .pagination-container {
    width: 100%; 
    max-width: 100%; 
}
.pt-training .pagination-container .total-info {
    text-align: right; 
    padding-top: 10px;
}
.pt-training .pagination {
  display: flex;
  flex-wrap: wrap; /* Zeilenumbruch aktivieren */
  list-style: none; 
  padding: 0;
  margin: 10px 0px 10px 0px;
}
.pt-training ul.pagination li::before {
    width: 0px;
    height: 0px;
    background-color: unset;
}
.pt-training ul.pagination li {
    padding-left: 0px;
}
.pt-training .page-item {
  margin: 2px 5px; /* Abstand zwischen den Seitenzahlen */
}

.pt-training .page-link {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #007bff; /* Standardfarbe */
  border: 1px solid #dee2e6; /* Umrandung */
  border-radius: 4px; /* Abgerundete Ecken */
  transition: background-color 0.3s, color 0.3s;
}

.pt-training .page-link:hover {
  background-color: #007bff; /* Hintergrundfarbe bei Hover */
  color: #fff; /* Textfarbe bei Hover */
}

.pt-training .page-item .page-link.active {
  background-color: #007bff; /* Aktive Farbe */
  color: #fff; /* Textfarbe aktiv */
  border-color: #007bff;
}

/* Kurs Admin */
.card.course.admin-participation .status-info {
    min-width: 140px;
}
.card.course.admin-participation .buttons {
    text-align: right; 
    min-width: 160px;
}
.pt-training .supervisor-download {
    text-align: right; 
}
.pt-training .supervisor-download a {
    position: relative;
    top: 16px;
}

.card.course.trainer-participation .buttons {
    text-align: right; 
    
}
.card.course.trainer-participation {
    padding: 8px 4px 4px 4px;
}
.card.course.trainer-participation .status-info[data-attendance="1"], .status-info[data-attendance="1"] {
    color: #08a54b; 
}
.card.course.trainer-participation .status-info[data-attendance="2"], .status-info[data-attendance="2"] {
    color: red; 
}
.status-info.extra-small {
    font-size: 13px;
}

/* Modal Styles */
#training-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: 20px;
    border-radius: 8px;
}

#training-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#training-modal-close {
    float: right;
    cursor: pointer;
    font-size: 18px;
    color: #333;
}

.text-center {
    text-align: center;
}

/* Autocomplete */
.autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-no-suggestion { padding: 2px 5px;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #000; }
.autocomplete-group { padding: 2px 5px; font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }


/* Reports */
ul.report-list li {
    margin-bottom: 0px;
}

    

/* Typo3 Login / Pt Login */
.tx-pt-login label.error {
    min-width: 300px;
}
.frame-type-felogin_login legend {
    display: none;
}

.frame-type-felogin_login {
  overflow: hidden;
  border-style: solid;
  border-width: 1px;
  border-color: #e4e4ed;
  border-radius: 20px;
  background-color: #fff;
  background-color: #f4f4f4;
  box-shadow: 0 7px 14px 0 rgba(8, 15, 52, 0.03);
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
    padding: 21px 25px 25px 25px;
  margin-bottom: 15px;
  border-radius: 12px;
  -webkit-transition: border-color 300ms ease, -webkit-transform 300ms ease;
  transition: border-color 300ms ease, -webkit-transform 300ms ease;
  transition: transform 300ms ease, border-color 300ms ease;
  transition: transform 300ms ease, border-color 300ms ease, -webkit-transform 300ms ease;
  color: #444;
  text-decoration: none;
}

.frame-type-felogin_login input[type="text"], .frame-type-felogin_login input[type="password"] {
    width: 100%;
    margin-top: 8px;
  min-height: 68px;
  margin-bottom: 0px;
  padding-right: 20px;
  padding-left: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: #e4e4ed;
  border-radius: 1000px;
  background-color: #fff;
  -webkit-transition: color 300ms ease, border-color 300ms ease;
  transition: color 300ms ease, border-color 300ms ease;
  color: #171728;
  font-size: 16px;
}

.frame-type-felogin_login p {
    margin-bottom: 10px;
}

.frame-type-felogin_login label[for="tx-felogin-input-logout"] {
    display: inline;
}

@media screen and (max-width: 991px) {
    .header-navigation.logout {
        margin-right: 100px !important; 
        
    }
    .header-navigation.logout .nav-link {
        font-size: 16px;
        color: white;
    }
}

/* Mobile Anpassungen */

@media screen and (max-width: 767px) {
    .course-person {
        width: 100%;
    }
    .home-header-container.category h1, .pt-training.course-info h1 {
        font-size: 24px;
    }
    
    .home-header-container .split-content.card-job-left {
        display: flex; 
        flex-direction: row;
    }
    .home-header-container .image-wrapper.card-job {
        min-width: 70px;
    }

    .home-header-container .container-default {
        padding-left: 18px;
        padding-right: 18px;
    }
    .home-header-container .split-content.card-job-left {
        margin-bottom: 0px;
    }
    .pt-training.course-info .w-col {
        padding-left: 0px; 
        padding-right: 0px;
    }
    p.mandatory-info:before {
        font-size: 16px;
        margin-left: -22px;
    }
    .card.course.course-details {
        padding-left: 28px;
        padding-right: 28px;
    }
    
    

    .vc_col-xs-1, .vc_col-sm-1, .vc_col-md-1, .vc_col-lg-1, 
    .vc_col-xs-2, .vc_col-sm-2, .vc_col-md-2, .vc_col-lg-2,
    .vc_col-xs-3, .vc_col-sm-3, .vc_col-md-3, .vc_col-lg-3, 
    .vc_col-xs-4, .vc_col-sm-4, .vc_col-md-4, .vc_col-lg-4, 
    .vc_col-xs-5, .vc_col-sm-5, .vc_col-md-5, .vc_col-lg-5, 
    .vc_col-xs-6, .vc_col-sm-6, .vc_col-md-6, .vc_col-lg-6, 
    .vc_col-xs-7, .vc_col-sm-7, .vc_col-md-7, .vc_col-lg-7, 
    .vc_col-xs-8, .vc_col-sm-8, .vc_col-md-8, .vc_col-lg-8, 
    .vc_col-xs-9, .vc_col-sm-9, .vc_col-md-9, .vc_col-lg-9, 
    .vc_col-xs-10, .vc_col-sm-10, .vc_col-md-10, .vc_col-lg-10, 
    .vc_col-xs-11, .vc_col-sm-11, .vc_col-md-11, .vc_col-lg-11, 
    .vc_col-xs-12, .vc_col-sm-12, .vc_col-md-12, .vc_col-lg-12  {
        margin-left: 0px;
    }
}

@media screen and (max-width: 479px) {
    .w-col {
        padding-left: 0px; 
        padding-right: 0px;
    }
    .hide-in-mobile {
        display: none; 
    }
    .show-in-mobile {
        display: block;
    }
    .div-colored {
        width: 100%; 
        height: 70px; 
    }
    .div-colored a h3.title.h6-size {
        color: white; 
        margin-left: 70px;
        padding: 16px;
        
    }
    .card.course.category-overview { 
        padding-top: 6px; 
    }
    .dashboard-container .image-wrapper.card-job {
        min-width: 60px;
        margin-bottom: 10px;
    }
    
    .course-person .image {
        min-width: 100px;
    }
    .course-info .name {
        font-size: 18px; 
        line-height: 120%;
    }
    .course-data {
        display: block;
    }
    .header-wrapper {
        padding-top:4px;
        padding-bottom:4px;
    }
    .header-navigation.logout {
        margin-right: 60px !important; 
        
    }
    .header-navigation .nav-item-wrapper {
        padding-top: 0px;
    }
}





/* Allgemeine Tabellenstile */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin: 20px 0;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

/* Tabellenkopf */
.data-table th {
    background-color: #575757;
    color: white;
    padding: 10px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}

/* Tabellenkörper */
.data-table tbody td {
    padding: 5px 10px 5px 10px;
    border-bottom: 1px solid #ddd;
}

/* Wechselnde Hintergrundfarben für Zeilen */
.data-table tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* Heller Grauton */
}

.data-table tbody tr:nth-child(even) {
    background-color: #ffffff; /* Weiß */
}


.strike {
    text-decoration: line-through;
    
}

.import-infos p {
    margin-bottom: 0px;
}


.report-list .person-report-item {
    display: flex;
    gap: 20px;
}
.report-list .person-nr {
    width: 50px;
}
.report-list .person-name, .report-list .person-email  {
    width: 350px;
}
.report-list a {
    color: #171728;
}
.report-list a.highlight-link {
    color: #08a54b;
    font-weight: bold;
}
.report-list span.person-nr {
    min-width: 100px;
}

.btn-secondary {
    border-color: #333333;
}


/* BGF */
.course-list-container.bgf {
    h3 {
        color: #08a54b;
        padding-left: 10px;
    }
    .row {
        background-color: white;
        padding-top: 3px;
        padding-bottom: 2px;
        margin-top: 2px;
        margin-bottom: 2px;
    }
}
.page-wrapper.bgf .home-header-container .container-default {
    padding-right: 10px !important;
}
.jobs-filters-dropdown {
}
.dropdown-nav-link {
    white-space: normal;
}
@media screen and (max-width: 991px) {
    
        .pt-training-header.search-bar.bgf {
            margin-bottom: 10px;
        }

        .pt-training-header.search-bar form.bgf {
            position: relative;
            margin-top: -80px;
            bottom: unset;
        }
   
    
}

@media screen and (min-width: 768px) {
    /*.dashboard-container .w-col:first-child .login-box, .dashboard-container .w-col:nth-child(2) .login-box {
        min-height: 320px;
    }*/
    .dashboard-container .w-col:nth-child(3) .login-box, .dashboard-container .w-col:nth-child(4) .login-box {
        min-height: 300px;
    }
}
.dashboard-container .w-col .login-box img {
    padding-bottom: 8px;
}
.dashboard-container .w-col .login-box p {
    margin-bottom: 8px;
}
.dashboard-container .w-col .login-box .button-primary {
    margin-bottom: 0px;
}