.cg-table {
    width: 100%;
    box-shadow: var(--shadow-xs);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--border-radius-lg);
    /* cg-text-md-regular */
    font-family: var(--font-display);
    font-size: var(--text-md-regular-size);
    line-height: var(--text-md-regular-line);
    font-weight: 400;
    vertical-align: middle;
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
}

.cg-table thead th, .cg-table thead{
    color: var(--color-black);
    vertical-align: top;
    word-break: keep-all;
    padding: var(--spacing-2) var(--spacing-2);
    /* cg-text-lg-medium */
    font-family: var(--font-display);
    font-size: var(--text-lg-medium-size);
    line-height: var(--text-lg-medium-line);
    font-weight: 500;
    /* stick to top while scrolling */
    position: sticky;
    top: 0;
    background-color: var(--color-table-header);
    z-index: 10;
}


.cg-table tbody tr {
    background-color: var(--color-white);
    padding: var(--spacing-2) var(--spacing-2);
    border-color: var(--color-gray-300);
    border-style: solid;
    border-width: 0;
    word-break: break-all;
}

tbody, td, tfoot, th, thead, tr {
    border-color: var(--color-gray-300);
    border-style: solid;
    border-width: 0;
}

.table-hover> tbody> tr:hover{
    background-color:var(--color-table-hover);
}

.scrollable-table {
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
    border-radius: var(--border-radius-lg);
}

/* TODO: club following into one class */
.roles-list-scrollable, .scrollable-manual-items-list,
.lifts-list-scrollable, .items-with-box-size-scrollable, .robots-list-scrollable,
.element-list-scrollable {
    overflow-y: auto;
    overflow-x: auto;
    max-height: 60vh;
    border-radius: var(--border-radius-lg);

}

.logs-list-scrollable, .loaded-boxes-list-scrollable {
    overflow-y: auto;
    overflow-x: auto;
    max-height: 63vh;
    border-radius: var(--border-radius-lg);
}

.recently-used-boxes-list-scrollable {
    overflow-y: auto;
    overflow-x: auto;
    max-height: 56vh;
    border-radius: var(--border-radius-lg);
}

.scrollable-logs, .items-stock-management-table-scrollable{
    overflow-y: auto;
    overflow-x: auto;
    max-height: 70vh;
    border-radius: var(--border-radius-lg);
}

.restricted-items-list-scrollable {
    overflow-y: auto;
    overflow-x: auto;
    max-height: 50vh;
    border-radius: var(--border-radius-lg);
}

/* Additional classes */
.cg-error-row {
    background-color: var(--color-error-100) !important;
    color: var(--color-error-800) !important;
}

.cg-success-row {
    background-color: var(--color-success-50) !important;
    color: var(--color-success-800) !important;
}