/*scroll*/

.top-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    height: 18px; /* Height for scrollbar area */
    display: block;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    /* Optional: Add border for better visibility */
    /* border: 1px solid #dee2e6; */
}

.main-scroll {
    overflow: auto;
    min-height: 300px; /* Adjust height based on your content */
    width: 100%;
    /* Border to separate it visually */
    /* border: 1px solid #dee2e6; */
}

.scroll-content {
    display: block;
    width: max-content;
    min-width: 100%;
    direction: inherit;
}

#top-scroll-content {
    direction: ltr;
    height: 1px;
}

/* main content should remain RTL for table layout */
#main-scroll-content {
    direction: rtl;
}

/*.scroll-content {*/
    /* The actual width is set by JS (setTopScrollWidth). Keep block layout so width assignment works. */
    /*display: block;
    height: 1px;
}*/

.placeholder {
    height: 1px; /* Ensure no vertical scrolling in the top scrollbar */
}


.top-scroll::-webkit-scrollbar,
.main-scroll::-webkit-scrollbar {
    width: 20px; /* Vertical scrollbar width */
    height: 15px; /* Horizontal scrollbar height */
}

.top-scroll::-webkit-scrollbar-thumb,
.main-scroll::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
}

.top-scroll::-webkit-scrollbar-track,
.main-scroll::-webkit-scrollbar-track {
    background-color: #e0e0e0;
}

/*scroll*/