#table {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

#table-left-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    right: 0;
    right: calc(100% - 18%);
}

#table-container {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
}

.table-column {
    width: 62%;
}

.table-wrapper {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Hide scrollbars in Chrome, Safari, and Opera */
.table-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbars in Firefox */
.table-wrapper {
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbars in Internet Explorer and Edge */
.table-wrapper {
    -ms-overflow-style: none; /* IE and Edge */
}

table.dataTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: var(--secondary-bg-color) !important;
    overflow: hidden;
    user-select: none;
    -webkit-user-drag: none;
}

table.dataTable td {
    padding: 10px !important;
    text-align: center !important;
    border: none !important; /* Remove borders to avoid white spaces */
}

table.dataTable th {
    padding-right: 20px; /* Adjust the value as needed */
    position: relative;
    background-color: var(--secondary-bg-color) !important;
    color: var(--primary-text-color) !important;
}

table.dataTable th::after {
    content: '';
    position: absolute;
    right: 5px; /* Adjust the value as needed */
    top: 50%;
    transform: translateY(-50%);
    width: 10px; /* Adjust the value as needed */
    height: 10px; /* Adjust the value as needed */
    background-size: contain;
    background-repeat: no-repeat;
}

table.dataTable tr:nth-child(odd) {
    background-color: var(--tertiary-bg-color) !important;
}

table.dataTable tr:nth-child(even) {
    background-color: var(--quaternary-bg-color) !important;
}

table.dataTable tr:hover {
    background-color: var(--hover-bg) !important;
}

table.dataTable tbody tr {
    border: none !important; /* Remove borders to avoid white spaces */
}

table.dataTable tbody tr.selected {
    background-color: var(--hover-bg) !important; /* Ensure selected row has the correct background color */
}

/* Hide scrollbars in Chrome, Safari, and Opera */
table.dataTable::-webkit-scrollbar,
table.dataTable tbody::-webkit-scrollbar,
table.dataTable thead::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar,
.dataTables_scroll::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbars in Firefox */
table.dataTable,
table.dataTable tbody,
table.dataTable thead,
.dataTables_scrollBody,
.dataTables_scroll {
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbars in Internet Explorer and Edge */
table.dataTable,
table.dataTable tbody,
table.dataTable thead,
.dataTables_scrollBody,
.dataTables_scroll {
    -ms-overflow-style: none; /* IE and Edge */
}