table {
    overflow: hidden;
    width: 100%;
    margin: 16px 0;
    border: 2px solid var(--border-container-small);
    border-radius: 12px;
}

th,
td {
    padding: 16px 32px;
    color: var(--text-color);
    overflow-wrap: break-word;
}


th {
    text-align: left;
}

/* thead th {
    background-color: #55608f;
} */

tbody tr:hover {
    background-color: rgb(from var(--flicker-light) r g b / 0.9);
}

tbody td {
    position: relative;
}

table:hover {
    border: 2px solid var(--border-container-small);
    box-shadow: 0 0 20px var(--border-container-small);
}

tbody td:hover:before {
    position: absolute;
    top: -9999px;
    right: 0;
    bottom: -9999px;
    left: 0;
    content: "";
    background-color: rgb(from var(--flicker-dark) r g b / 0.55);
    z-index: -1;
}


@media screen and (max-width: 768px) {
thead {
        display: none;
    }

    table, tbody, tr, td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    tr {
        border: 2px solid var(--border-container-small);
        border-radius: 8px;
        overflow: hidden;
    }

    tr:not(:last-child) {
        margin-bottom: 16px;
    }

    td {
        position: relative;
        padding: 16px;
        min-height: 50px;
        text-align: left;
        border-bottom: 1px dashed var(--flicker-light);
    }

    td:last-child {
        border-bottom: none;
    }

    td::before {
        content: attr(data-label);
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: calc(45% - 24px);
        font-weight: bold;
        color: var(--title-color);
        text-align: left;
    }

    tbody tr:hover {
        background-color: transparent;
    }

    tbody td:hover:before {
        background-color: unset;
    }

    table:hover {
        border: 2px solid var(--border-container-small);
        box-shadow: none;
    }
}