#card {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

#cardBody {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

#UserCard {
    margin-top: 1.5rem !important;
}


/* extra icons */
.trash-icon {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    color: #777;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 999;
    pointer-events: none;

    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trash-icon.visible {
    opacity: 1;
}

#trash.hover {
    background-color: red;
    color: white;
}


/* das drag and drop kanbanboard */
.kanban-board {
    border-radius: 15px;
}

.kanban-wrapper {
    overflow-x: auto;
    padding-bottom: 10px;
}

#myKanban {
    display: flex;
    gap: 15px;
    min-width: max-content;
}

.jqx-kanban-item {
    background-color: white;
    overflow: visible !important;
}

.jqx-kanban-item,
.jqx-kanban-column-content {
    overflow: visible !important;
}

.jqx-kanban-item-text {
    padding: 10px !important;
}

.jqx-kanban-item-footer {
    display: none !important;
}

.jqx-kanban-item-avatar {
    display: none;
}

.jqx-kanban-column {
    border-style: none !important;
}

.jqx-kanban-column-header {
    padding: 10px !important;
    border-style: none !important;
}

#kanban a {
    color: #344767;
    text-decoration: none;
}

#kanban a:hover {
    color: #344767;
    text-decoration: none;
}

.jqx-kanban-column-hide {
    display: block !important;
}

#watermark {
    display: none !important;
}

.tooltip-custom {
    position: absolute;
    display: none;
    max-width: 300px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* kanban styling */
/* .ticket-item {
    position: relative;
    padding-left: 10px;
    border-left: 5px solid #ccc;
}

.ticket-item[data-color] {
    border-left-color: currentColor;
} */


/* roadmap */

/* #gantt {
    overflow-x: auto;
    position: relative;
    width: 100%;
    white-space: nowrap;
} */

#ganttchart {
    height: 100% !important;
    min-width: 100% !important;
}

#ganttchart .jqx-gantt-split-right {
    overflow-x: auto;
    overflow-y: hidden;
}

#ganttBtn {
    display: flex;
    margin-top: 20px;
    margin-right: 40px;
    margin-left: auto;
}

.jqx-tab-label-container {
    display: none !important;
}

.jqx-timeline-cell {
    border:0.5px solid #b4b4b4;
}

.jqx-timeline-row {
    border: none !important;
}

#timelineSplitterItem .deinElement {
    width: 100%;
}


/* Container des Popups */
.popup-container {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    width: 200px;
    text-align: center;
    position: absolute;
    z-index: 1000;
    font-family: Arial, sans-serif;
}

/* Popup-Titel */
.popup-title {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

/* Buttons im Popup */
.popup-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Gemeinsame Styles für Buttons */
.popup-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Bearbeiten Button */
.edit-btn {
    background-color: #4CAF50;
    color: white;
}

.edit-btn:hover {
    background-color: #45a049;
}


/* Löschen Button */
.delete-btn {
    background-color: #f44336;
    color: white;
}

.delete-btn:hover {
    background-color: #e53935;
}


/* navbar */
.navbar-main {
    margin-top: 16px;
}

/* dark mode */
.dark-version body {
    background-color: #051139 !important;
    color: #fff !important;
}

/* sidebar darkmode */
.dark-version .nav-link.active {
    background-color: #334175 !important;
    color: #fff;
    opacity: 0.8;
}

/* kanban */
.dark-version .jqx-kanban-column-header {
    background-color: #334175;
    color: #fff;
}

.dark-version .jqx-kanban-item {
    background-color: #263361;
}

.dark-version .jqx-kanban-column {
    background-color: #111C44;
    border-color: #111C44;
}

.dark-version .jqx-kanban-column-container {
    background-color: #111C44;
    border-color: #111C44;
}

.dark-version .tooltip-custom {
    background: #263361;
    border-color: #334175;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.dark-version .tooltip-custom strong {
    color: #fff;
}

.dark-version .form-control {
    background-color: #263361;
    color: #fff;
}

.dark-version .form-select {
    background-color: #263361;
    color: #fff;
}

.dark-version #headerBackground {
    background-color: #213786 !important;
}

/* Weißes Zahnrad-Icon im Darkmode */
.dark-version .fixed-plugin-button {
    color: #ffffffb6 !important;
}

.dark-version .fixed-plugin-button.show {
    background: #1a2035;
}

.dark-version #ticketFeld {
    background-color: #213786 !important;
}

.dark-version #ticketProgress {
    background-color: #213786 !important;
}

.dark-version .text-white {
    color: #fff !important;
    /* opacity: 2 !important; */
}

.dark-version .text-xs {
    color: #fff !important;
    opacity: 0.7 !important;
}

.dark-version .fixed-plugin-button {
    background-color: #27335f !important;
}

/* Select2 Dark Mode Styles */
.dark-version .select2-container--default .select2-selection--multiple,
.dark-version .select2-container--default .select2-selection--single {
    background-color: #263361;
    color: #fff;
}

.dark-version .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #334175;
    border-color: #435185;
    color: #fff;
}

.dark-version .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    border-right-color: #435185;
}

.dark-version .select2-container--default .select2-search--inline .select2-search__field {
    color: #fff;
}

.dark-version .select2-container--default .select2-results__option {
    background-color: #263361;
    color: #fff;
}

.dark-version .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #334175;
}

.dark-version .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #435185;
    color: #fff;
}

.dark-version .select2-dropdown {
    background-color: #263361;
    border-color: #334175;
}

.dark-version .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: #435185;
    color: #fff;
}

/* Placeholder color */
.dark-version .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: #8898aa;
}

.dark-version .btn-primary {
    background-color: #35488b !important;
    color: #fff !important;
}

.dark-version input[type="number"] {
    background-color: #35488b !important;
    color: #fff !important;
}

.dark-version .navbar {
    background-color: #111C44 !important;
}

.dark-version .modal-content {
    background-color: #111C44 !important;
}

/* gantt darkmode */
.dark-version .jqx-gantt {
    background-color: #111C44 !important;
    color: #ffffff !important;
}

.dark-version .jqx-container {
    background-color: #111C44 !important;
    color: #ffffff !important;
}

.dark-version .jqx-grid-cell-content:hover {
    background-color: #334175 !important;
    color: #ffffff !important;
}

.dark-version .sticky {
    background-color: #334175 !important;
    color: #ffffff !important;
}

.dark-version .jqx-timeline-view-cell {
    background-color: #334175 !important;
    color: #ffffff !important;
}

.dark-version .g-sidenav-pinned {
  background: #334175 !important;
}

/* .dark-version div[hover], */
.dark-version tr[hover] {
    /* background-color: #3e4c80 !important; */
    background-color: #111C44 !important;
    color: #ffffff !important;
}

.dark-version .jqx-timeline-view-cells {
    background-color: #334175 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.dark-version .jqx-timeline-view-details {
    background-color: #334175 !important;
    color: #ffffff !important;
}

.dark-version .jqx-gantt-chart-popup-window-editor {
    background-color: #111C44 !important;
    color: #ffffff !important;
}

.dark-version .jqx-content {
    background-color: #111C44 !important;
}

.dark-version .jqx-footer {
    background-color: #111C44 !important;
}

.dark-version .jqx-popup-window-button {
    background-color: #111C44 !important;
}

.dark-version .jqx-gantt-chart-popup-window-editor {
    background-color: #111C44 !important;
}

.dark-version .jqx-button {
    background-color: #334175 !important;
}

/* darkmode Datatable */
.dark-version .dt-paging-button,
.dark-version div.dt-container .dt-paging .dt-paging-button {
    color: #ffffff !important;

}

.dark-version .dt-input {
    border-color: #111C44 !important;
    background-color: #111C44 !important;
    color: #ffffff !important;
}