table.table-detail{
    font-size: 14px;
    border-radius: 4px;
    /*overflow: hidden; /* Ensure child elements respect the border-radius */

    tbody{
        tr{
            td{
                padding-left: 15px;
                border: 1px solid rgba(0, 0, 0, 0.12);
                border-right: 0px solid transparent;

                &:has(.create-table-cell){
                    padding: 0px;
                }

                &.loading-cell{
                    position: relative;
                    background-color: #f3f4f6; /* Light gray background */
                    pointer-events: none;
                    animation: backgroundFade 2s linear infinite;
                }

                &.loading-cell + td.row-menu {
                    background-color: #f3f4f6; /* Light gray background */
                    pointer-events: none;
                    animation: backgroundFade 2s linear infinite;
                }

                &.loading-cell::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 20px;
                    height: 20px;
                    margin-top: -10px;
                    margin-left: -10px;
                    border: 2px solid var(--sps-blue);
                    border-top-color: transparent;
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                }
            }

            td:last-child{
                border-left: 0px solid transparent;
                border-right: 1px solid rgba(0, 0, 0, 0.12);
            }
        }
    }

    thead{
        tr{
            height: 30px;

            th:first-child{
                border-left: 1px solid rgba(0, 0, 0, 0.12);
            }

            th:last-child{
                border-right: 1px solid rgba(0, 0, 0, 0.12);
            }
        }

        tr:first-child th { border-bottom: 1px solid slategray;  }
        tr:last-child th {
            padding-left: 10px;
            /*position: sticky;*/
            top: 0;
            background-color: #F2F2F2;
            color: #2C2C2D;
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-right: 0px solid transparent;
            border-bottom: 1px solid slategray;
            margin-top: 0px;
            font-size: 12px;
        }

        tr:last-child th:last-child {
            border-left: 0px solid transparent;
            border-right: 1px solid rgba(0, 0, 0, 0.12);
        }
    }
}

table.create-table-cell{
    padding: 10px;
    border-radius: 0px;
    border: 0px solid transparent;

    tbody{
        td{
            padding-left: 15px;
        }
    }

    thead{
        tr:first-child {
            padding-left: 0px;
            border: 0px solid transparent;
            border-bottom: 1px solid slategray;

            td {
                margin-left: 0px;
                padding-left: 0px;
                border: 0px solid transparent;
                text-transform: uppercase;
                color: black;
                font-weight: bold;
            }
        }

        tr:last-child {
            td{
                padding-left: 10px;
                position: sticky;
                top: 0;
                background-color: #F2F2F2;
                color: #2C2C2D;
                border-bottom: 1px solid slategray;
                border-top: 1px solid rgba(0, 0, 0, 0.12);
                margin-top: 0px;
                font-size: 12px;
                font-weight: 600;
            }

            td:first-child {
                border-top: 1px solid rgba(0, 0, 0, 0.12);
                border-left: 1px solid rgba(0, 0, 0, 0.12);
            }

            td:last-child {
                border-top: 1px solid rgba(0, 0, 0, 0.12);
                border-right: 1px solid rgba(0, 0, 0, 0.12);
            }
        }
    }

    tfoot{
        td{
            border: 0px solid transparent;
            align-content: flex-start;
        }
    }
}

.table-title-off{
    margin-left: 0px;
    padding-left: 0px;
    border: 0px solid transparent;
    border-bottom: 1px solid slategray;
    text-transform: uppercase;
    color: black;
    font-weight: bold;
}

tbody.transposed{
    tr td:first-child, tr:last-child td:first-child, td.transposed-title-cell {
        padding-left: 10px;
        position: sticky;
        top: 0;
        background-color: #F2F2F2; color: #2C2C2D;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-right: 1px solid slategray;
        margin-top: 0px;
        font-size: 12px;
    }
}


.cell-border{
    border: 1px solid rgba(0, 0, 0, 0.12)!important;
}

.cell-no-border{
    border: 0px solid transparent!important;
}