@media (max-width: 370px) {
    #item-display-modal .modal-content {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    #display-modal-body {
        justify-content: center;
    }

    #item-display-modal .modal-content {
        height: 80%;
    }

    #display-modal-footer {
        display: none;
    }

    #display-modal-body > * {
        flex: 1;
    }

	#display-modal-comment-section:not(.visible) {
        display: none;
    }

    #display-modal-body {
        height: 100%;
    }

    #display-modal-further-section:not(.visible) {
        display: none;
    }

    #display-modal-info:not(.visible) {
        display: none;
    }

    #file-extend {
        display: none;
    }

    #display-modal-header-wrapper {
        flex-direction: column;
    }

    #display-modal-header-wrapper > * {
        flex-direction: column;
    }

    #display-modal-done {
        position: absolute;
        top: 4px;
        right: 4px;
        align-items: end;
    }

    #display-modal-done-name {
        display: none;
    }

    #display-modal-tabs {
        display: flex;
    }

    #filter-modal-body {
        flex-direction: column;
    }

    #filter-regex-div {
        display: none;
    }

    #filter-modal .modal-footer {
        margin-top: 16px;
        justify-content: center;
    }

    #preferences-sidebar {
        display: none;
    }

    #preferences-body {
        overflow: auto;
    }

    .archive-item-header {
        display: none;
    }

    .archive-item {
        flex-direction: column;
        align-items: start;
    }

    .archive-text-item {
        position: relative;
        padding: 4px;
        padding-bottom: 1rem;
        border-radius: var(--border-radius);
    }

    .archive-text-item::after {
        position: absolute;
        bottom: 4px;
        left: 4px;
        color: var(--gray);
        font-size: 0.7rem;
    }

    .archive-item-type::after {
        content: "Typ";
    }

    .archive-item-name::after {
        content: "Name";
    }

    .archive-item-date::after {
        content: "Archiviert am";
    }

    .archive-item-by::after {
        content: "Archiviert von";
    }

    .archive-item {
        position: relative;
        padding-bottom: 56px;
    }

    .archive-item-unarchive {
        position: absolute;
        min-width: 24px;
        max-width: 24px;
        min-height: 24px;
        max-height: 24px;
        bottom: 8px;
        right: 48px;
    }

    .archive-item-delete {
        position: absolute;
        min-width: 24px;
        max-width: 24px;
        min-height: 24px;
        max-height: 24px;
        bottom: 8px;
        right: 8px;
    }
}