/* basic tabs styling */
.tabs {
    font-family: Arial, sans-serif;
    max-width: 100%;
    margin: 0 auto;
}

/* tabs container with dynamic width */
.tabs-nav-container {
    overflow-x: auto; /* Enable horizontal scrolling if needed */
    white-space: nowrap; /* Keep single-line view of bookmarks */
}

.tabs-nav {
    display: inline-flex; /* Dynamic width based on content */
    padding: 0;
    margin: 0;
    list-style: none;
}

.container ul.tabs-nav {
    padding: 0;
    margin: 0;
}

.tabs-nav li {
    background-color: var(--background-color-5);
    color: var(--color-1);
    padding: 5px 14px;
    margin: 0 3px 0 0;
    cursor: pointer;
    text-align: center;
    
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid;
    border-color: var(--border-color-4);
    border-bottom: none;
    outline
     
    white-space: nowrap; /* Prevent text from wrapping inside tabs */
}

.tabs-nav li:last-child {
    
}

.tabs-nav li.active {
    background-color: var(--background-color-container);
    color: var(--color-4);
    /* font-weight: bold; */
}

/* Content of tabs with independent width */
.tabs-content {
    margin-top: -1px; /* overlap tabs to optically remove bottom border of tabs */
    padding: 15px 20px 20px 20px;
    border: 1px solid;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-color: var(--border-color);
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}