html {
    overflow: hidden;
}

body {
    background-color: var(--background-color);
    color: var(--font-color);
    margin: 0;
}

/* KANBAN OBJECTS */
::-webkit-color-swatch {
    background: none;
    border: none;
    border-color: transparent;
    border-radius: var(--border-radius);
}

#board-modal {
    z-index: 57 !important;
}

#board-modal-color {
    background: none;
    border: none;
    border-color: transparent;
}

#kb-board-overview {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--line-color);
    overflow: hidden;
    position: relative;
    transition: height 0.5s ease-in-out, background-color 0.4s linear;
}

#kb-board-overview.collapsed {
    height: 0;
}

#kb-meta-board-container.collapsed {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#kb-board-overview.collapsed + #kb-board-overview-description #kb-add-board {
    display: none;
}

/* #kb-meta-board-overview-description:not(:hover) #kb-add-meta-board {
    display: none
}

#kb-board-overview-description:not(:hover) #kb-add-board {
    display: none
} */

#kb-board-wrapper {
    position: relative;
}

#kb-meta-board-wrapper {
    position: relative;
}

.kb-board-overview-filter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    backdrop-filter: saturate(20%) brightness(120%);
    pointer-events: none;
}

#kb-board-overview-description {
    position: relative;
    transition: box-shadow 0.2s ease-in-out, background-color 0.4s linear;
    display: flex;
    padding: 8px;
    justify-content: center;
    background-color: var(--line-color);
    color: white;
    align-items: center;
    border-bottom-right-radius: var(--border-radius);
    cursor: pointer;
    user-select: none;
}

#kb-board-overview-description:hover {
    box-shadow: var(--box-shadow);
}

#kb-meta-board-overview-description {
    position: relative;
    transition: box-shadow 0.2s ease-in-out, background-color 0.4s linear;
    display: flex;
    padding: 16px;
    justify-content: baseline;
    background-color: var(--line-color);
    color: white;
    align-items: center;
    cursor: pointer;
    user-select: none;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

#kb-meta-board-overview-description:hover {
    box-shadow: var(--box-shadow);
}

#kb-meta-board-overview-description-text {
    font-weight: bold;
    color: white;
    z-index: 1;
    text-shadow: 0 0 2px black;
}

#kb-meta-board-overview-filter {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*backdrop-filter: blur(3px);*/
}

#kb-board-info, #kb-board-subscribe {
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease, filter 0.2s ease;
    margin: 4px;
    z-index: 5;
}

#kb-board-info:hover #kb-board-info-info-icon {
    display: none;
}

#kb-board-info:not(:hover) #kb-board-info-pen-icon {
    display: none;
}

#kb-board-subscribe {
    left: 48px;
    opacity: 0.4;
}

#kb-board-overview-description.subscribed #kb-board-subscribe {
    opacity: 1;
    color: var(--yellow);
    filter: brightness(120%);
}

#kb-board-info:hover, #kb-board-subscribe:hover {
    box-shadow: var(--box-shadow);
    filter: brightness(120%);
}

#kb-board-info:hover #info-panel {
    opacity: 1;
}

#info-panel-achor {
    position: relative;
}

#info-panel {
    opacity: 0;
    position: absolute;
    left: 12px;
    top: 28px;
    width: 200px;
    float: right;
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

#info-panel-caption {
    font-weight: bold;
    color: var(--line-color);
}

#info-panel-content {
    display: flex;
    flex-direction: column;
}

.info-panel-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.info-panel-row-caption {
    color: var(--line-color);
}

.info-panel-row-value {
    color: var(--yellow);
}

#kb-add-board {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    background-color: var(--line-color);
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out, filter 0.2s ease;
    filter: saturate(70%);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    aspect-ratio: 1/1;
    margin-top: 4px;
    margin-bottom: 4px;
    position: absolute;
    right: 8px;
    top: -4px;
    bottom: 4px;
    z-index: 2;
    overflow: hidden;
}

#kb-add-board:hover,
#kb-add-meta-board:hover {
    filter: saturate(100%);
    box-shadow: var(--box-shadow);
}

#kb-board-container,
#kb-meta-board-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 16px);
    /* overflow: hidden; */
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 150px;
}

#kb-board-container:not(:empty) {
    padding: 8px;
}

#kb-meta-board-container {
    transition: height 0.5s ease-in-out, padding 0.5s ease-in-out, background 0.4s linear;
    padding: 8px;
}

#meta-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#meta-board-body {
    display: flex;
    flex-wrap: wrap;
}

#kb-add-meta-board {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out;
    background-color: var(--primary-color-dark);
    width: 30px;
    height: 30px;
}

.kb-meta-board-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease-in-out, filter 0.2s ease;
    user-select: none;
    cursor: pointer;
    white-space: normal;
    text-align: center;
    text-overflow: ellipsis;
    padding: 8px;
    margin: 8px;
    width: 150px;
    height: 70px;
    border-radius: var(--border-radius);
    filter: saturate(20%);
    z-index: 2;
    background-color: rgb(245, 245, 245);
    color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/* .kb-meta-board-button::before {
    position: absolute;
    content: "";
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-width: 10px;
    border-color: inherit;
    border-style: solid dashed;
    border-radius: var(--border-radius);
} */

.kb-meta-board-button:hover {
    box-shadow: var(--box-shadow);
    filter: saturate(80%);
}

.kb-meta-board-button.selectedMetaBoard {
    box-shadow: var(--box-shadow);
    filter: saturate(100%);
}

.kb-meta-board-button::after {
    border-width: 0;
    bottom: 0;
    transition: border-width 0.2s ease-in-out, bottom 0.2s ease-in-out;
}

.kb-meta-board-button-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    z-index: 1;
    text-shadow: 0 0 2px black;
}

.kb-board-button {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.2s ease-in-out, box-shadow 0.2s ease, flex-grow 0.2s ease;
    color: white;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px;
    flex-grow: 1;
    margin: 4px;
    border-radius: var(--border-radius);
    filter: saturate(30%);
    z-index: 2;
}

.kb-board-button:hover {
    filter: saturate(50%);
}

.kb-board-button.selectedBoard {
    box-shadow: var(--box-shadow);
    flex-grow: 30;
    filter: saturate(100%);
}

.kb-board-button.unavailable {
    background-color: gray;
    filter: saturate(0%) brightness(40%);
}

.kb-board-button.hidden {
    opacity: 0.3;
}

.kb-meta-board-button.hidden {
    opacity: 0.3;
}

.kb-input {
    margin-top: 8px;
    margin-left: 8px;
}

#kb-wrapper {
    flex: 1;
    display: flex;
    position: relative;
    padding-top: 16px;
    overflow-x: auto;
    overflow-y: hidden;
}

#kb-category-container {
    display: flex;
    white-space: nowrap;
    padding-bottom: 20px;
    padding-right: 16px;
}

.kb-category {
    width: var(--kb-category-width);
    text-align: left;
    margin-left: var(--medium-margin);
    margin-right: var(--medium-margin);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    padding: 8px;
}

.kb-category-header {
    position: relative;
    height: 30px;
}

.kb-category-header-text {
    position: absolute;
    bottom: 0;
    display: table-cell;
    vertical-align: bottom;
    font-weight: bold;
    width: var(--kb-category-width);
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-category-content {
    max-height: calc(100% - 50px);
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: -8px;
    padding-left: 8px;
    padding-right: 8px;
}

.kb-category-footer {
    margin-top: var(--small-margin);
}

.kb-category-footer-btn {
    color: var(--secondary-font-color);
    width: 100%;
    transform: translateZ(0);
}

.kb-category-footer-btn:hover {
    cursor: pointer;
    filter: brightness(80%);
    transition: filter 0.2s ease-in-out;
}

/* DRAG */
.drag {
    position: absolute;
    z-index: 18;
    pointer-events: none;
}

.placeHolder {
    border: 5px dashed var(--secondary-font-color);
    border-radius: var(--border-radius);
    user-select: none;
    padding: var(--small-margin);
    margin-top: var(--medium-margin);
    margin-bottom: var(--medium-margin);
    opacity: 0.2;
}

.preview,
.previewCategory,
.previewChecklistItem {
    background-color: var(--kb-item-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: var(--small-margin);
    margin-top: var(--medium-margin);
    margin-bottom: var(--medium-margin);
    opacity: 0.2;
}

.previewCategory {
    float: left;
    width: var(--kb-category-width);
    background-color: var(--primary-color);
}

.kb-item-header {
    font-weight: bold;
    /* white-space: nowrap; */
    white-space: pre-wrap;
    width: 100%;
    overflow: hidden;
    /* text-overflow: ellipsis; */
}

.kb-item-checklist-info {
    width: 100%;
    height: 4px;
    border-radius: var(--border-radius);
    transition: height 0.2s;
}

.kb-item-checklist-progress {
    background-color: inherit;
    box-shadow: var(--box-shadow);
    height: 100%;
    width: 0px;
    transition: width 0.2s;
    filter: brightness(150%);
    border-radius: var(--border-radius);
}

.kb-item-content {
    word-wrap: break-word;
    white-space: normal;
}

.kb-item-footer {
    width: 100%;
    display: flex;
    justify-content: end;
    gap: 8px;
    margin-top: 4px;
}

.kb-item-deadline {
    font-size: 10px;
    align-self: flex-end;
    color: var(--line-color);
}

.kb-item-due-now {
    color: var(--red);
    font-weight: bold;
    font-size: 12px;
}

.kb-item-due-soon {
    color: var(--orange);
    font-weight: bold;
}

.kb-item-deadline-complied {
    color: var(--green);
    font-weight: bold;
}

.kb-item-deadline-complied::after {
    content: " ✓";
}

.kb-item-deadline-not-complied {
    color: var(--gray);
    font-weight: bold;
}

.kb-item-deadline-not-complied::after {
    content: " ✗";
}

.kb-item-comment-count {
    margin-left: auto;
    background-color: var(--primary-color);
    color: var(--primary-font-color);
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 50%;
    border-bottom-right-radius: 2px;
    font-size: 10px;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.kb-item:hover .kb-item-comment-count {
    opacity: 1;
}

#kb-add-category {
    min-width: var(--kb-category-width);
    max-width: var(--kb-category-width);
    height: 100px;
    line-height: 100px;
    padding: var(--medium-margin);
    margin-right: var(--medium-margin);
    box-shadow: var(--box-shadow);
    color: var(--secondary-font-color);
    font-size: 36px;
    text-shadow: 1px 1px 2px;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    cursor: pointer;
    opacity: 0.4;
    transition: transform 0.2s ease-in-out;
    border-radius: var(--border-radius);
    margin-top: calc(var(--medium-margin) + 30px);
    display: none;
    margin-bottom: 30px;
}

#kb-add-category:hover {
    transform: scale(1.03);
}

/* MODALS */
.modal,
.sub-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    visibility: hidden;
}

.modal {
    z-index: 55 !important;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-modal {
    z-index: 60 !important;
    backdrop-filter: blur(2px);
}

#select-category-modal {
    z-index: 56 !important;
}

.modal-content {
    position: absolute;
    width: 80%;
    max-height: 70%;
    display: flex;
    flex-direction: column;
    background-color: #fefefe;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    animation-name: animatetop;
    animation-duration: 0.4s;
    overflow: hidden;
    transition: scale 0.2s ease, opacity 0.2s ease;
}

.modal:not([style*="visible"]) .modal-content {
    scale: 0.6;
    opacity: 0;
}

.modal-header {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    padding: var(--medium-margin);
    background-color: var(--primary-color);
    color: var(--primary-font-color);
}

.modal-body {
    padding: var(--medium-margin);
    overflow: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    width: calc(100% - var(--medium-margin));
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    padding: var(--small-margin);
    padding-bottom: var(--medium-margin);
}

.modal-button {
    width: 80px;
    float: left;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--primary-color);
    color: var(--primary-font-color);
    padding: var(--small-margin);
    margin-left: var(--small-margin);
    margin-right: var(--small-margin);
    text-align: center;
    transition: filter 0.2s ease-in-out, transform 0.2s ease;
    user-select: none;
}

.modal-button:hover {
    filter: brightness(90%);
    transform: scale(1.03);
    cursor: pointer;
}

.modal-button-ok {
    background-color: var(--green);
}

.modal-button-cancel {
    background-color: var(--red);
}

.sub-modal-content {
    position: absolute;
    top: 10%;
    background-color: #fefefe;
    margin-left: 45%;
    margin-right: 15%;
    width: 40%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.sub-modal-header {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    padding: var(--medium-margin);
    background-color: var(--primary-color);
    color: var(--primary-font-color);
}

.sub-modal-body {
    padding: var(--medium-margin);
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.display-div {
    margin-top: var(--small-margin);
    margin-bottom: var(--small-margin);
    box-shadow: var(--box-shadow);
    padding: var(--small-margin);
    border-radius: var(--border-radius);
}

@keyframes animatetop {
    from {
        margin-top: -300px;
        opacity: 0;
    }

    to {
        margin-top: 0;
        opacity: 1;
    }
}

.dropdown {
    width: 200px;
    border-color: var(--primary-color);
    border-width: 2px;
    padding: 2px;
}

.dropdown option:hover,
.dropdown option:checked {
    color: var(--primary-font-color);
    background-color: var(--primary-color);
}

.dropdown:focus {
    outline: none;
}

.flag-extended,
#item-modal-flag-add,
#item-display-modal-flag-add {
    display: inline-block;
    min-width: 100px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 25px;
    background-color: var(--primary-color);
    color: var(--primary-font-color);
    text-align: center;
    transition: opacity 0.2s ease-in-out;
    user-select: none;
    margin: 4px;
}

#item-display-modal-header-wrapper {
    display: flex;
    gap: 8px;
}

#item-display-modal-created-by {
    font-size: 0.7rem;
    color: var(--line-color);
    align-self: end;
}

.mitarb-extended {
    display: inline-block;
    height: 21px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 25px;
    background-color: var(--primary-color);
    color: var(--primary-font-color);
    text-align: center;
    transition: opacity 0.2s ease-in-out;
    user-select: none;
    margin: 4px;
}

.flag-extended:hover,
.mitarb-extended:hover {
    opacity: 0.8;
}

.flag-input,
.mitarb-input,
#flag-add {
    display: flex;
    border-radius: 25px;
    color: var(--primary-font-color);
    padding: 8px;
    padding-left: 16px;
    padding-right: 16px;
    transition: opacity 0.2s ease-in-out;
    user-select: none;
    margin-top: var(--small-margin);
    box-sizing: border-box;
}

.flag-input:hover,
.mitarb-input:hover {
    opacity: 0.8;
}

.mitarb-input-text {
    display: inline-block;
}

.flag-input,
.mitarb-input,
.flag-extended,
.mitarb-extended,
#item-modal-flag-add,
#item-modal-mitarb-add,
#item-display-modal-flag-add,
#item-display-modal-mitarb-add {
    box-shadow: var(--box-shadow);
}

.flag-input-input,
.flag-input-text {
    display: flex;
    align-self: flex-start;
}

.select-overlay {
    display: flex;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    align-self: flex-end;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: auto;
    padding-left: var(--small-margin);
}

.selected-flag,
.selected-mitarb {
    outline: 2px solid var(--green);
}

.selected-flag .select-overlay,
.selected-mitarb .select-overlay {
    opacity: 1;
}

#flag-add {
    background-color: var(--primary-color);
    text-align: center;
    cursor: pointer;
    opacity: 0.4;
    justify-content: center;
    margin-top: var(--medium-margin);
}

#flag-add:hover {
    opacity: 1;
}

.mitarb {
    display: inline-block;
    width: 21px;
    padding: 12px;
    border-radius: 50px;
    background-color: var(--primary-color);
    text-align: center;
    color: var(--primary-font-color);
    transition: opacity 0.2s ease-in-out;
    user-select: none;
    margin: 4px;
}

#item-modal-flag-container {
    float: left;
    margin-right: 8px;
}

#item-modal-flag-add,
#item-display-modal-flag-add {
    cursor: pointer;
    margin: 0;
    margin-top: 4px;
    margin-bottom: 4px;
    opacity: 0.4;
}

#item-modal-flag-add:hover,
#item-display-modal-flag-add:hover {
    opacity: 1;
}

#item-modal-mitarb-container {
    float: left;
    margin-right: 8px;
}

#item-modal-mitarb-add,
#item-display-modal-mitarb-add {
    cursor: pointer;
    margin: 0;
    margin-top: 4px;
    margin-bottom: 4px;
    opacity: 0.4;
}

#item-modal-mitarb-add:hover,
#item-display-modal-mitarb-add:hover {
    opacity: 1;
}

/* INPUT */
.input-div,
.input-group {
    margin-top: var(--small-margin);
    margin-bottom: var(--small-margin);
}

.input-div,
.input-div-small {
    box-shadow: var(--box-shadow);
    padding: var(--small-margin);
}

.input-group {
    display: table;
}

.input-div-small {
    display: inline-block;
    margin-right: var(--small-margin);
}

.input-box,
.input-box-small,
.input-date,
.input-textarea {
    outline-style: none;
    border: none;
    padding: 0;
    box-sizing: border-box;
}

.input-box,
.input-date {
    height: var(--input-height);
}

.input-box {
    width: calc(100% - var(--small-margin));
}

.input-box-small {
    height: var(--input-height);
}

.input-date {
    height: var(--input-height);
    outline-style: none;
    border: none;
}

.input-textarea {
    width: calc(100% - var(--small-margin));
    height: var(--input-height);
    min-height: var(--input-height);
    max-height: 250px;
    resize: none;
}

.input-hint {
    font-size: 10px;
    color: var(--secondary-font-color);
}

.input-error {
    border: 1px solid var(--red);
}

/* CONTEXT MENU */
#context-menu-flags,
#context-menu-items,
#context-menu-boards,
#context-menu-meta-boards,
#context-menu-categories,
#context-menu-checklist,
#context-menu-comment {
    position: fixed;
    z-index: 10000;
    width: 150px;
    background: var(--primary-color);
    color: var(--primary-font-color);
    border-radius: var(--border-radius);
    display: none;
}

#context-menu-flags.visible,
#context-menu-items.visible,
#context-menu-boards.visible,
#context-menu-meta-boards.visible,
#context-menu-categories.visible,
#context-menu-checklist.visible,
#context-menu-comment.visible {
    display: block;
}

.context-item {
    padding: 8px 10px;
    cursor: pointer;
    border-radius: inherit;
    user-select: none;
}

.context-item:hover {
    opacity: 0.8;
}

#context-menu-flags-color-picker,
#context-menu-items-color-picker {
    position: absolute;
    left: 0px;
    top: -8px;
    width: 0px;
    height: 0px;
    opacity: 0;
}

/* ITEM */
.kb-item {
    /* position: relative; */
    font-size: 14px;
    background-color: var(--kb-item-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    cursor: pointer;
    user-select: none;
    padding: var(--small-margin);
}

.kb-item:first-child {
    margin-top: var(--medium-margin);
}

.kb-item:last-child {
    margin-bottom: var(--medium-margin);
}

.kb-item + .kb-item {
    margin-top: var(--medium-margin);
    /* margin-bottom: var(--big-margin); */
}

.color-picker + .kb-item {
    margin-top: -5px;
}

.checklist_done {
    transition: filter 0.2s ease-in-out;
    backdrop-filter: brightness(80%);
}

.checklist_done:hover {
    backdrop-filter: brightness(100%);
}

.checklist_done:not(.vt-ctx-elevated)::after {
    position: absolute;
    content: "100%";
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: soft-light;
    backdrop-filter: brightness(85%);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: opacity 0.2s ease;
    opacity: 1;
}

.checklist_done:hover::after {
    opacity: 0;
}

/* .checklist_done {
    position: relative;
}

.checklist_done::after {
    position: absolute;
    content: '100%';
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: soft-light;
    backdrop-filter: brightness(85%);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: opacity 0.2s;
    opacity: 1;
} 

.checklist_done:hover::after {
    content: '';
    backdrop-filter: none;
    opacity: 0;
} */

.item-flag {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 25px;
    background-color: var(--primary-color);
    color: var(--primary-font-color);
    text-align: center;
    user-select: none;
    margin-right: var(--small-margin);
    margin-top: var(--small-margin);
    font-size: 14px;
    box-shadow: var(--box-shadow);
}

.item-flag-collapsed {
    max-height: 0px;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
}

.item-mitarb {
    display: inline-block;
    height: 22px;
    padding-top: 3px;
    width: 25px;
    border-radius: 25px;
    background-color: var(--primary-color);
    color: var(--primary-font-color);
    text-align: center;
    transition: margin-left 0.2s ease-in-out;
    user-select: none;
    font-size: 14px;
    margin-top: var(--small-margin);
    box-shadow: var(--box-shadow);
    margin-left: -8px;
}

.kb-item:hover .item-mitarb {
    margin-left: 2px;
}

.kb-item-flag-container {
    display: block;
    white-space: normal;
    width: 100%;
}

.kb-item-flag-container + .kb-item-content {
    margin-top: var(--small-margin);
}

.kb-item-mitarb-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.display-item {
    min-width: 100px;
    min-height: 21px;
    border: 1px dashed var(--line-color);
    border-radius: var(--border-radius);
    padding: 4px;
    overflow: hidden;
}

.display-item.disabled {
    color: gray;
}

.display-div-icon {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 4px;
    align-items: center;
}

.display-div-icon .display-item {
    flex: 1;
}

.display-div-icon svg:hover {
    cursor: pointer;
    color: var(--line-color);
}

.container-wrapper {
    display: flex;
    flex-wrap: wrap;
}

/* COMMENTS */
#display-modal-body {
    padding: var(--medium-margin);
    padding-bottom: 0;
    display: flex;
    /* height: 70vh; */
    justify-content: space-between;
    position: relative;
    /* overflow-x: scroll;
    overflow-y: hidden; */
    transition: height 0.4s ease;
}

#display-modal-tabs {
    display: none;
    width: 100%;
}

.display-modal-tab {
    flex: 1;
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
}

.display-modal-tab.selected {
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary-color);
}

#item-display-modal.file-extended #display-modal-body {
    /* height: calc(60vh - 58px - 32px); */
}

#item-display-modal.file-extended #display-modal-footer {
    height: 132px;
    padding: var(--medium-margin);
    margin-top: 23px;
}

#display-modal-body > div {
    min-width: 260px;
}

#item-display-modal.file-extended #file-extend {
    background-color: var(--red);
}

#file-extend {
    position: absolute;
    bottom: 16px;
    right: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    opacity: 0.4;
    box-shadow: var(--box-shadow);

    transition: opacity 0.2s ease;
}

#file-extend:hover {
    cursor: pointer;
    opacity: 1;
}

#display-modal-footer {
    border-top: 1px solid gray;
    height: 0px;
    padding: var(--medium-margin);
    margin-top: 23px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    transition: height 0.4s ease, padding 0.4s ease, margin 0.4s ease;
}

#file-drop-zone {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 16px);
    height: 125px;
    border: 3px dashed gray;
    border-radius: var(--border-radius);
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 125px;
}

#file-drop-zone::after {
    position: absolute;
    content: "Dateien";
    opacity: 0.3;
    color: gray;
    font-weight: bold;
    right: 8px;
    top: 4px;
}

.file {
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 100px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    filter: saturate(20%);
    transition: filter 0.2s ease-in-out;
}

.file:hover {
    filter: saturate(100%);
}

.file::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

.file:hover::after {
    content: "📥";
    font-size: 1.5rem;
    opacity: 0.8;
    z-index: 1;
}

.file-image {
    position: relative;
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.file-name {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
}

#display-modal-info {
    display: flex;
    flex-direction: column;
    width: 30%;
    /* height: calc(100% - 16px); */
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: var(--small-margin);
    padding-right: var(--small-margin);
    padding-bottom: var(--small-margin);
}

#display-modal-comment-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35%;
    /* max-height: 100%; */
    margin-right: var(--medium-margin);
}

#display-modal-further-section {
    display: flex;
    flex-direction: column;
    width: 35%;
    margin-right: var(--medium-margin);
    background-color: inherit;
    transition: background-color 0.2s ease-in-out;
    border-radius: var(--border-radius);
}

#display-modal-further-section.editmode {
    background-color: #f8f0ee;
}

#display-modal-further-section.elevated {
    z-index: 26;
}

#display-modal-further-section.elevated .checklist-item {
    display: none;
}

#display-modal-further-section.elevated .checklist-preview-item {
    display: flex;
}

#display-modal-further-section.elevated .display-modal-checklist-button {
    display: none;
}

#display-modal-further-section.elevated .display-modal-checklist-spacer {
    display: none;
}

#display-modal-further-section.elevated #copy-checklist-button {
    display: flex;
}

#display-modal-checklists-wrapper {
    display: none;
    position: absolute;
    z-index: 25;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(4px);
}

#display-modal-checklists-body::before {
    color: var(--line-color);
    font-size: 0.7rem;
    padding: 8px;
    content: "Für Vorschau klicken";
}

#display-modal-checklists-body {
    position: absolute;
    left: 70%;
    top: 200px;
    width: 20%;
    min-height: 53px;
    max-height: 55%;
    background-color: var(--background-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    overflow-y: scroll;
}

.checklist-copy-item {
    margin: 8px;
    padding: 8px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: filter 0.2s ease-in-out;
    cursor: pointer;
}

.checklist-copy-item:hover {
    filter: brightness(110%);
}

.checklist-copy-item.selected-preview {
    outline: 2px solid var(--green);
}

#display-modal-further-header {
    display: flex;
    justify-content: space-between;
}

#display-modal-checklist-title {
    display: flex;
}

#display-modal-options-wrapper {
    display: flex;
    flex-direction: row;
}

.display-modal-checklist-spacer {
    width: 16px;
}

.display-modal-checklist-ui {
    display: flex;
    flex-direction: row;
}

#display-modal-checklist-ui1 {
    display: none;
}

#display-modal-checklist-ui1.visible {
    display: flex;
}

#display-modal-checklist-ui2 {
    display: none;
}

#display-modal-checklist-ui2.visible {
    display: flex;
}

.display-modal-checklist-button,
#copy-checklist-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: var(--primary-color);
    color: var(--primary-font-color);
    border-radius: 8px;
    font-weight: bold;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    user-select: none;
    margin-left: 8px;
    transition: filter 0.2s ease-in-out;
}

.display-modal-checklist-button:hover,
#copy-checklist-button:hover {
    filter: brightness(120%);
}

#copy-checklist-button {
    display: none;
    background-color: var(--green);
}

.shared {
    position: relative;
    animation: pulse-anim 3s ease-in-out infinite;
}

@keyframes pulse-anim {
    0% {
        box-shadow: 0px 0px 10px 1px var(--green);
    }

    50% {
        box-shadow: 0px 0px 10px 4px var(--green);
    }

    100% {
        box-shadow: 0px 0px 10px 1px var(--green);
    }
}

@keyframes user-pulse-anim {
    0% {
        box-shadow: 0px 0px 7px 1px var(--primary-color);
    }

    50% {
        box-shadow: none;
    }

    100% {
        box-shadow: 0px 0px 7px 1px var(--primary-color);
    }
}

.shared::after {
    position: absolute;
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--green);
    border-radius: var(--border-radius);
    opacity: 0.8;
}

.shared:hover::after {
    display: none;
}

#display-modal-tm-link {
    align-self: flex-end;
}

#display-modal-tm-link:hover {
    filter: brightness(110%);
}

#display-modal-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#display-modal-checklist-copy-accept {
    display: none;
    background-color: var(--green);
}

#display-modal-checklist-list {
    display: none;
    margin-left: 8px;
    width: 100%;
}

#display-modal-checklist-add:hover,
#display-modal-checklist-copy:hover,
#display-modal-checklist-clear:hover {
    opacity: 0.8;
}

#checklist-content {
    display: flex;
    flex-direction: column;
}

#display-modal-checklist-body {
    margin-top: 8px;
    padding-bottom: 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

.checklist-item,
.checklist-preview-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    margin: 6px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    z-index: 21;
    background-color: var(--background-color);
}

.responsible::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: var(--border-radius);
    pointer-events: none;
}

.responsible:not(.striked)::after {
    animation: user-pulse-anim 3s ease-in-out infinite;
}

.checklist-item-responsible-flag {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow);
    position: absolute;
    right: -42px;
    width: 20px;
    top: 0;
    bottom: 0px;
    opacity: 1;
    padding-left: 8px;
    padding-right: 8px;
    user-select: none;
    transition: opacity 0.2s ease-in-out, bottom 0.2s ease-in-out;
    background-color: var(--background-color);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.checklist-item {
    transition: margin-right 0.2s ease-in-out;
}

.drag .checklist-item-responsible-flag {
    display: none;
}

.hasResponsible.striked .checklist-item-responsible-flag {
    display: none;
}

.hasResponsible:not(.striked) {
    margin-right: 42px;
}

.checklist-preview-item {
    display: none;
    user-select: none;
}

.checklist-item-flag {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 10px;
    left: 0;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    transition: width 0.2s;
    user-select: none;
    box-shadow: var(--box-shadow);
    backdrop-filter: brightness(10);
}

.checklist-item-flag:hover {
    width: 40px;
}

.checklist-item-flag-name {
    opacity: 0;
    transition: opacity 0.2s;
}

.checklist-item-flag:hover .checklist-item-flag-name {
    opacity: 1;
}

.checklist-item-name {
    margin-left: 20px;
    margin-right: 20px;
    word-wrap: break-word;
    hyphens: auto;
    max-width: calc(100% - 70px);
}

.checklist-item.striked .checklist-item-name {
    color: gray;
    text-decoration: line-through;
}

.checklist-item-edit {
    display: none;
    box-sizing: border-box;
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 70px);
    background-color: inherit;
    padding: 0;
    border-radius: 0;
}

.checklist-item-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 1px solid black;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 4px;
    font-size: 18px;
}

.checklist-item.striked .checklist-item-checkbox {
    color: gray;
    outline-color: gray;
}

.checklist-item.striked .checklist-item-checkbox:after {
    content: "✓";
}

.checklist-item-checkbox:hover {
    opacity: 0.6;
}

.checklist-deadline {
    position: absolute;
    top: 0;
    left: 29px;
    font-size: 0.6rem;
    color: var(--line-color);
}
.checklist-deadline:not(:empty)::before {
    content: "Frist: ";
}

.checklist-deadline.due-soon {
    color: var(--yellow);
}

.checklist-deadline.due-now {
    color: var(--red);
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
}

#display-modal-comment-history {
    display: flex;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 8px;
    flex-direction: column;
}

#display-modal-comment-ui {
    position: static;
    display: flex;
    /* margin-top: auto; */
    margin-bottom: 8px;
}

#display-modal-comment-input {
    display: flex;
    background-color: var(--background-color-dark);
    padding: 8px;
    height: 75px;
    align-items: flex-end;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom: 2px solid var(--primary-color);
}

#display-modal-comment-send {
    display: flex;
    width: 65px;
    height: 61.11px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 16px;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    background-color: var(--primary-color);
    color: var(--primary-font-color);
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.2s ease;
}

#display-modal-comment-send:hover {
    box-shadow: var(--box-shadow);
}

.comment {
    display: flex;
    padding: 8px;
    margin: 8px;
    flex-direction: column;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    width: 80%;
    color: white;
    background-color: var(--line-color);
}

.comment-self {
    display: flex;
    margin-left: auto;
    background-color: var(--primary-color);
    color: var(--primary-font-color);
}

.comment-header {
    display: flex;
    justify-content: space-between;
}

.comment-name {
    display: flex;
    font-weight: bold;
}

.comment-time {
    display: flex;
    font-size: 12px;
    opacity: 0.4;
}

.comment-content {
    display: flex;
    margin-top: 4px;
}

.select-board-header,
.select-category {
    padding: var(--small-margin);
    user-select: none;
}

.select-board-wrapper.search-found {
    background-color: black;
}

.select-board-wrapper.search-found .select-board-header {
    opacity: 1;
}

.select-board-wrapper.search-found .select-category.search-found {
    opacity: 1;
}

.select-category {
    cursor: pointer;
    color: white;
    background-color: var(--line-color);
    transition: opacity 0.2s ease-in-out;
    opacity: 0.8;
}

.select-category:hover {
    opacity: 1;
}

.select-board-header {
    color: white;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    opacity: 0.8;
}

.select-board-header:hover {
    opacity: 1;
}

.select-board-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#select-category-modal {
    z-index: 21;
}

#select-category-body {
    display: flex;
    flex-direction: column;
    gap: var(--small-margin);
    overflow: auto;
    margin-top: var(--medium-margin);
}

#order-table {
    width: 100%;
    border-collapse: collapse;
}

.order-row {
    border: 1px solid var(--line-color);
}

.order-cell {
    width: 50%;
    padding: 8px;
}

.order-header {
    font-weight: bold;
}

.order-board {
    padding: 8px;
    display: inline-block;
    color: var(--primary-font-color);
    border-radius: var(--border-radius);
    background: red;
    width: auto;
}

.order-input {
    float: right;
    display: none;
}

.order-updown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.order-btn {
    display: flex;
    margin-top: 2px;
    margin-bottom: 2px;
    color: var(--primary-font-color);
    background-color: var(--primary-color);
    transform: translateZ(0);
    border: none;
    border-radius: var(--border-radius);
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 4px;
    padding-bottom: 4px;
    border: 1px solid var(--primary-color);
}

.order-btn:hover {
    cursor: pointer;
    filter: brightness(80%);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.order-btn-down {
    box-sizing: border-box;
    color: var(--secondary-font-color);
    background-color: white;
}

.modal-input {
    width: 100%;
    outline-style: none;
    border: none;
    padding: 0;
    box-sizing: border-box;
    background-color: inherit;
    color: inherit;
    border-radius: 0;
}

textarea.modal-input {
    min-width: 100%;
    max-width: 100%;
}

#archive-list {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 16px;
    padding-top: 8px;
}

.archive-item {
    display: flex;
    flex-direction: row;
    padding: 8px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 8px;
    align-items: center;
}

.archive-item-header {
    display: flex;
    flex-direction: row;
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 8px;
    justify-content: space-between;
    font-weight: bold;
}

.archive-item-type {
    flex: 1;
}

.archive-item-name {
    flex: 1;
}

.archive-item-date {
    flex: 1;
}

.archive-item-by {
    flex: 1;
}

.archive-item-unarchive {
    flex: 0;
    margin-right: 8px;
    min-width: 30px;
    background-color: #97c776;
}

.archive-item-delete {
    flex: 0;
    min-width: 30px;
    background-color: #c78076;
}

.archive-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 8px;
}

.archive-item-btn:hover {
    background-color: lightgray;
}

#kb-archive {
    position: fixed;
    bottom: -18px;
    right: 0;
    margin-right: 20px;
    width: 40px;
    height: 40px;
    font-size: 25px;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: #e3e287;
    color: white;
    transition: bottom 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    z-index: 5;
    overflow: hidden;
}

#kb-archive:hover {
    bottom: 0;
    background-color: #c6c577;
}

#kb-create-request {
    position: fixed;
    bottom: -18px;
    right: 72px;
    background-color: var(--primary-color);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    color: white;
    transition: bottom 0.2s ease, background-color 0.2s ease;
    z-index: 5;
    cursor: pointer;
}

#kb-create-request:hover {
    bottom: 0;
    background-color: var(--primary-color-dark);
}

#create-request-count {
    position: absolute;
    top: -8px;
    left: -8px;
    background-color: var(--red);
    border-radius: 100000px;
    padding: 4px;
}

#create-request-count:empty {
    display: none;
}

#request-modal-content {
    background: none;
    width: 60%;
    left: 20%;
    height: 47%;
    overflow: visible;
}

#request-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: none;
}

.request-card:nth-child(2) {
    bottom: -5px;
    right: -5px;
    left: 5px;
    top: 5px;
    display: block !important;
    z-index: 24;
    opacity: 0.7;
}

.request-card:nth-child(3) {
    bottom: -10px;
    right: -10px;
    top: 10px;
    left: 10px;
    display: block !important;
    z-index: 23;
    opacity: 0.5;
}

#request-content .request-card:not(:first-child) {
    display: none;
}

.request-card {
    z-index: 25;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: auto;
}

#request-accept {
    position: absolute;
    bottom: -70px;
    left: 0;
    background-color: var(--green);
    color: white;
    padding: 16px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    user-select: none;
    transition: filter 0.2s ease-in-out;
    cursor: pointer;
}

#request-accept:hover {
    filter: brightness(110%);
}

#request-deny {
    position: absolute;
    bottom: -70px;
    right: 0;
    background-color: var(--red);
    color: white;
    padding: 16px;
    border-radius: var(--border-radius);
    opacity: 0.2;
    box-shadow: var(--box-shadow);
    user-select: none;
    transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
    cursor: pointer;
}

#request-deny:hover {
    opacity: 1;
    filter: brightness(110%);
}

.request-info {
    border: 1px solid var(--line-color);
    border-radius: var(--border-radius);
    margin: 8px;
    padding: 8px;
}

.request-info-hint {
    font-size: 0.8rem;
    color: var(--line-color);
}

/* .request-info-value {

} */

#kb-body {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    user-select: none;
}

#kb-body.disabled {
    display: block;
}

#kb-body::after {
    position: absolute;
    content: "Verbinde...";
    padding: 8px;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--yellow);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.disabled {
    backdrop-filter: blur(2px) grayscale(100%);
}

#ui {
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
}

#navbar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42px;
    background-color: var(--primary-color);
    color: white;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: width 0.2s ease-in-out;
    overflow: hidden;
}

#navbar.extended {
    width: 200px;
}

#navbar:not(.extended) #kb-logo {
    height: 0px;
    opacity: 0;
}

#kb-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    transition: height 0.2s ease-in-out, opacity 0.1s ease-in-out;
    overflow: hidden;
    background-color: var(--primary-color-dark);
    opacity: 1;
}

#kb-logo-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--line-color);
}

#nav-top-buttons {
    display: flex;
    flex-direction: column;
}

#nav-bot-buttons {
    display: flex;
    flex-direction: column;
}

.nav-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
    height: 42px;
    background-color: var(--primary-color);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    user-select: none;
}

.nav-button:hover {
    filter: brightness(115%);
}

.nav-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    max-width: 42px;
}

.nav-button-text {
    flex: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#nav-settings {
    background-color: var(--primary-color-light);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

#kb-ui {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 42px;
    overflow: hidden;
}

#profile-modal-color {
    background: none;
}

#input-div-pin {
    overflow: hidden;
    height: 0px;
    transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out;
    opacity: 0;
}

#input-div-pin.visible {
    height: 46px;
    opacity: 1;
}

#display-modal-done {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#display-modal-done-name {
    margin-right: 8px;
    color: var(--line-color);
}

#display-modal-done-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--line-color);
    /* aspect-ratio: 1/1; */
    border-radius: var(--border-radius);
    min-height: 24px;
    max-height: 24px;
    min-width: 24px;
    max-width: 24px;
    content-visibility: hidden;
    cursor: pointer;
    background-color: var(--primary-color);
}

#display-modal-done-checkbox:hover {
    background-color: var(--primary-color-light);
}

#display-modal-done-checkbox.checked {
    content-visibility: visible;
}

#loading-screen.visible {
    opacity: 1;
    pointer-events: all;
}

#loading-screen {
    z-index: 5000;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    background-color: var(--background-color);
    pointer-events: none;
}

.spinning {
    animation: spin 4s linear infinite;
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.select-meta-board-btn {
    padding: 16px;
    border-radius: var(--border-radius);
    margin: 8px;
    transition: filter 0.2s ease;
    cursor: pointer;
}

.select-meta-board-btn:hover {
    filter: brightness(110%);
}

#progress-bar {
    position: absolute;
    height: 28px;
    z-index: 1000;
    background-color: var(--green);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    pointer-events: none;
    transition: width 0.2s linear, opacity 0.2s ease-in-out;
    opacity: 1;
}

#progress-bar.done {
    opacity: 0;
}

#progress-bar::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    animation: move 2s linear infinite;
    background-size: 150px 150px;
}

#progress-bar::after {
    position: absolute;
    padding: 4px;
    content: "Wird hochgeladen...";
    right: 8px;
    color: white;
    opacity: 0.6;
    overflow: hidden;
    white-space: nowrap;
}

@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 150px 150px;
    }
}

#profile-modal-tmcode {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#tmcode-input {
    flex-grow: 1;
}

#tmcode-input.generated {
    background-color: var(--green);
}

#tmcode-generate {
    padding: 8px;
    margin-right: 8px;
    margin-left: 8px;
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out;
}

#tmcode-generate:hover {
    box-shadow: var(--box-shadow);
}

/* #user-modal {

} */

#datetime-picker {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
}

#filter-modal-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

#filter-search-trough {
    margin-right: 8px;
    margin-left: 16px;
}

#filter-search-by {
    margin-left: 8px;
    margin-right: 8px;
}

#filter-input {
    background-color: var(--line-color);
    color: white;
    flex: 1;
}

#filter-regex-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    margin-right: 16px;
}

#filter-result {
    display: flex;
    flex-wrap: wrap;
    /* max-height: 50vh; */
    overflow-y: auto;
}

.filter-item {
    font-size: 14px;
    background-color: var(--kb-item-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    cursor: pointer;
    user-select: none;
    padding: var(--small-margin);
    margin: var(--small-margin);
    max-width: 15rem;
    flex: 1;
}

.filter-item-header {
    font-weight: bold;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-item-content {
    word-wrap: break-word;
    white-space: normal;
}

.color-picker {
    /* position: absolute; */
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
    transform: translateY(-15px);
}

#select-category-search {
    display: flex;
    align-items: center;
    justify-content: center;
}

#select-category-search-input {
    width: 100%;
}

#select-category-modal-body {
    height: 100vh; /* trigger max height */
}

.flag-picker, .mitarb-picker, .priority-picker {
    display: flex;
    flex-direction: column;
    padding: 8px;
    position: absolute;
    top: 0;
    right: -234px;
    width: 234px;
    min-height: 50px;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    gap: 8px;
}

.flag-container-list, .mitarb-container-list, .priority-container-list {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
    gap: 6px;
}

.priority-picker-priority {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 16px;
    background: none;
    color: var(--font-color);
    border: 1px solid var(--font-color);
}

.flag-picker-flag, .mitarb-picker-mitarb, .priority-picker-priority {
    margin: 0;
    box-shadow: none;
    position: relative;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.flag-picker-flag:hover, .mitarb-picker-mitarb:hover, .priority-picker-priority:hover {
    opacity: 1;
    cursor: pointer;
}

.flag-picker-flag.picked, .mitarb-picker-mitarb.picked, .priority-picker-priority.picked {
    opacity: 1;
}

.flag-picker-flag.picked::after, .mitarb-picker-mitarb.picked::after, .priority-picker-priority.picked::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 18px;
    content: "✓";
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flag-picker-flag.filtered, .mitarb-picker-mitarb.filtered {
    display: none;
}

.flag-picker-search, .mitarb-picker-search {
    background-color: inherit;
}

.flag-container-caption, .mitarb-container-caption, .priority-container-caption {
    font-weight: bold;
}

.fm-backdrop {
    visibility: hidden;
    z-index: 99997;
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.15;
    user-select: none;
}

.fm-backdrop.visible {
    visibility: visible;
}

.fm-elevated {
    position: relative;
    z-index: 99998;
    filter: none !important;
}

.board-input {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background-color: inherit;
    color: inherit;
}

.notification {
    animation: outline-grow 1.5s ease-in-out infinite;
    opacity: 1 !important;
    filter: none !important;
}

.notification-comment .kb-item-comment-count {
    animation: outline-grow 1.5s ease-in-out infinite;
    opacity: 1 !important;
    filter: none !important;
    background-color: var(--red);
    color: white;
}

.notification-checklist .kb-item-checklist-icon {
    animation: outline-grow 1.5s ease-in-out infinite;
    opacity: 1 !important;
    filter: none !important;
    background-color: var(--red);
    color: white;
    border-radius: var(--border-radius);
    padding: 0 4px;
}

@keyframes outline-grow {
    0% {
        box-shadow: 0px 0px 5px 1px var(--red);
    }

    50% {
        box-shadow: 0px 0px 5px 2px var(--red);
    }

    100% {
        box-shadow: 0px 0px 5px 1px var(--red);
    }
}