
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;

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

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

                /*&:before,
                &:after {
                    display: none;
                    content: "";
                }*/

                /*.create-button {
                    right: 14px;
                }*/

                /*border-top-right-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);*/
            }
        }

        > div {
            padding-left: @table-cell-padding;
            position: relative;
            line-height: 28px;
            height: 100%;
            //width: ~"calc(100% - 7px)";
            background-color: var(--label-default-bg);

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

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

        /*> div:before,
        > div:after {
            content: " ";
            display: inline-block;
            width: 0;
            height: 0;
            border-top-width: 14px;
            border-left-width: 15px;
            border-bottom-width: 14px;
            border-right-width: 0;
            border-color: var(--label-default-bg);
            border-style: solid;
            position: absolute;
        }

        > div:before {
            left: ~"calc(100%)";
            z-index: 2;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }

        > div:after {
            border-left-color: transparent;
            left: ~"calc(100% + 2px)";
        }*/
    }

    th.group-header {
        &.group-header-success {
            > div {
                background-color: var(--brand-success);
                /*&:before {
                    border-left-color: var(--brand-success);
                }*/
            }
        }
        /*&.group-header-before-success {
            > div:after {
                border-color: var(--brand-success) var(--brand-success) var(--brand-success) transparent;
            }
        }*/

        &.group-header-danger {
            > div {
                background-color: var(--brand-danger);
                /*&:before {
                    border-left-color: var(--brand-danger);
                }*/
            }
        }
        &.group-header-before-danger {
            /*> div:after {
                border-color: var(--brand-danger) var(--brand-danger) var(--brand-danger) transparent;
            }*/
        }

        &.group-header-warning {
            > div {
                background-color: var(--brand-warning);
                /*&:before {
                    border-left-color: var(--brand-warning);
                }*/
            }
        }
        &.group-header-before-warning {
            /*> div:after {
                border-color: var(--brand-warning) var(--brand-warning) var(--brand-warning) transparent;
            }*/
        }

        &.group-header-primary {
            > div {
                background-color: var(--brand-primary);
                /*&:before {
                    border-left-color: var(--brand-primary);
                }*/
            }
        }
        &.group-header-before-primary {
            /*> div:after {
                border-color: var(--brand-primary) var(--brand-primary) var(--brand-primary) transparent;
            }*/
        }

        &.group-header-info {
            > div {
                background-color: var(--brand-info);
                /*&:before {
                    border-left-color: var(--brand-info);
                }*/
            }
        }
        &.group-header-before-info {
            /*> div:after {
                border-color: var(--brand-info) var(--brand-info) var(--brand-info) transparent;
            }*/
        }
    }

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

        padding-top: @padding-base-horizontal;

        > div {
            height: 100%;
        }

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

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

        .group-column-list {
            min-height: 100px;
        }

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

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

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

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

                .field {
                    overflow-wrap: break-word;
                    word-wrap: break-word;
                    font-size: @font-size-base;
                    overflow: hidden;

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

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

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

                    }
                }
            }
            div:last-child > .form-group {
                margin-bottom: 0;
            }

            .panel-body {
                padding: @table-cell-padding;
            }

            .item-menu-container {
                margin-top: -10px;
                margin-right: -10px;

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

            margin-bottom: 0;

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

        margin-bottom: @padding-base-horizontal;

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

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

.list-kanban {
    overflow: hidden;

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

    > .kanban-columns-container {
        margin-left: -@padding-base-horizontal;
        margin-right: -@padding-base-horizontal;
        > table {
            border-collapse: separate;
            border-spacing: @padding-base-horizontal 0;
        }
    }

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

    .kanban-head-container {
        //box-shadow: var(--default-box-shadow);
    }

    .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: @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: 28px;
                        .kanban-group-label {
                            display: inline-block;
                            max-width: ~"calc(100% - 15px)";
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        &:hover {
                            .kanban-group-label {
                                max-width: ~"calc(100% - 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;
            }
        }
    }
}
