div.list-kanban > div > table {
    width: 100%;
    table-layout: fixed;

    user-select: none;

    th.group-header {
        font-weight: normal;
        color: var(--text-white-color);
        position: relative;
        padding: 0;
        margin: 0;
        overflow: hidden;


        &:last-child {
            > div {
                width: 100%;
            }
        }

        > div {
            padding-inline-start: var(--table-cell-padding);
            position: relative;
            line-height: var(--28px);
            height: 100%;
            background-color: var(--label-default-bg);

            .create-button {
                float: right;
                position: relative;
                right: var(--6px);
                color: var(--text-white-color);
                padding: 0 var(--4px);
                &:hover,
                &:active {
                    color: var(--text-white-color);
                }

                > .fas {
                    vertical-align: middle;
                }
            }

            border-radius: var(--border-radius);
        }
    }

    th.group-header {
        &.group-header-success {
            > div {
                background-color: var(--brand-success);
            }
        }

        &.group-header-danger {
            > div {
                background-color: var(--brand-danger);
            }
        }

        &.group-header-warning {
            > div {
                background-color: var(--brand-warning);
            }
        }

        &.group-header-primary {
            > div {
                background-color: var(--brand-primary);
            }
        }

        &.group-header-info {
            > div {
                background-color: var(--brand-info);
            }
        }
    }

    td.group-column {
        vertical-align: top;

        padding-top: var(--padding-base-horizontal);

        > div {
            height: 100%;
        }

        .show-more a {
            margin: 0 auto var(--8px);
            display: block;
            height: var(--20px);

            > span {
                top: var(--minus-4px);
                color: @text-muted;
                position: relative;
            }
        }

        .group-column-list {
            min-height: var(--100px);
            margin-bottom: var(--padding-base-horizontal);
        }

        .group-column-list.drop-active {
            height: ~"calc(100%)";
        }

        .group-column-list.drop-hover {
            border-top: var(--2px) solid @gray-light;
        }
    }

    .item {
        .panel {
            .form-group {
                margin-bottom: var(--3px);

                .field-right-align {
                    text-align: right;
                }

                .field {
                    overflow-wrap: break-word;
                    word-wrap: break-word;
                    font-size: var(--font-size-base);
                    overflow: hidden;

                    &.field-large {
                        font-size: var(--font-size-large);
                        color: var(--gray);

                        &.text-muted {
                            color: var(--text-muted-color);
                        }
                    }

                    &.text-muted {
                        > a {
                            color: var(--text-muted-color);
                        }

                    }

                    a.link {
                        .link-content-color();
                    }
                }
            }
            div:last-child > .form-group {
                margin-bottom: 0;
            }

            .panel-body {
                padding: var(--table-cell-padding);
            }

            .item-menu-container {
                margin-top: var(--minus-10px);
                margin-right: var(--minus-10px);

                .dropdown-toggle:focus:focus-visible {
                    outline: none;
                }
            }

            margin-bottom: 0;

            .field span {
                user-select: none;
            }
        }

        margin-bottom: var(--padding-base-horizontal);

        &.ui-sortable-helper {
            cursor: grabbing;
            a {
                cursor: grabbing;
            }
        }
    }
}

.list-kanban-container {
    overflow-x: auto;
    overflow-y: hidden;

    // Fixes a dragging issue in Safari. https://github.com/espocrm/espocrm/issues/3447
    -webkit-user-select: none;
}

.list-kanban {
    overflow: hidden;

    // To prevent item shadows from being obscured.
    //padding-right: 3px;

    > .kanban-columns-container {
        margin-left: calc(0rem - var(--padding-base-horizontal));
        margin-right: calc(0rem - var(--padding-base-horizontal));
        > table {
            border-collapse: separate;
            border-spacing: var(--padding-base-horizontal) 0;
        }
    }

    .kanban-head-placeholder {
        height: var(--28px);
    }

    .kanban-head-container.sticked {
        position: fixed;
        top: 0;
        z-index: 4;
        overflow: hidden;
        background-color: var(--body-bg);
    }
}

@supports (display: grid) {
    div.list-kanban > div.kanban-columns-container,
    div.list-kanban > div.kanban-head-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        > table {
            display: block !important;
            border-collapse: unset;
            border-spacing: unset;
            > tbody,
            > thead {
                display: block !important;
                tr.kanban-row {
                    tbody, thead, td, th {
                        display: block !important;
                    }
                    display: grid !important;
                    grid-column-gap: var(--padding-base-horizontal);
                    grid-auto-columns: 1fr;
                    > td, th {
                        grid-row: 1;
                        min-width: 0;
                    }
                }
            }

        }
    }

    div.list-kanban > div.kanban-head-container {
        border-radius: var(--border-radius);
        > table {
            > thead {
                tr.kanban-row {
                    overflow: hidden;
                    > th {
                        overflow: visible;
                        min-width: 0;
                        max-height: var(--28px);
                        .kanban-group-label {
                            display: inline-block;
                            max-width: ~"calc(100% - var(--15px))";
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-weight: 500;
                        }

                        &:hover {
                            .kanban-group-label {
                                max-width: ~"calc(100% - var(--30px))";
                            }
                        }

                        &:first-child {
                            border-top-left-radius: var(--border-radius);
                            border-bottom-left-radius: var(--border-radius);
                        }

                        &:last-child {
                            border-top-right-radius: var(--border-radius);
                            border-bottom-right-radius: var(--border-radius);
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: @screen-sm-min) and (hover: hover) {
    .list-kanban {
        .item {
            .item-menu-container .dropdown-toggle {
                visibility: hidden;
            }

            .item-menu-container > .open .dropdown-toggle {
                visibility: visible;
            }
        }

        .item:hover {
            .item-menu-container .dropdown-toggle {
                visibility: visible;
            }
        }

        .item.ui-sortable-helper {
            .item-menu-container .dropdown-toggle {
                visibility: hidden;
            }
        }
    }
}