.tab-container
{
    position: relative;
  display: block;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: var(--theme-bdr-radius);
  padding: 50px 50px 50px;
  border: 1px solid var(--theme-bdr-color);
  border-left: 0;
}
/* Tab Links */
.tab-links {
    display: flex;
    border-bottom: 2px solid #ccc;
    overflow:auto;
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    background-color:var(--primary-color);
    border: none;
    margin-right: 5px;
    transition: background-color 0.3s;
}

.tab-button:hover {
    background-color:var(--secondary-color);
}

.tab-button.active {
    background-color:var(--secondary-color);
}

/* Tab Content */
.tab-content {
    margin-top: 20px;
}

.tab-pane {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

/* Show active tab */
.tab-pane.active {
    display: block;
}


/* Style the scrollbar */
::-webkit-scrollbar {
  width: 6px;  /* Set the width of the vertical scrollbar */
  height: 6px; /* Set the height of the horizontal scrollbar */
}

/* Style the scrollbar track (the area the thumb moves within) */
::-webkit-scrollbar-track {
  background: #f1f1f1;  /* Light background color */
}

/* Style the scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background: #888;      /* Darker color for the thumb */
  border-radius: 10px;   /* Rounded corners for the thumb */
}

/* Style the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;      /* Darker color when hovered */
}