.main-content {
    gap: 1.5rem;
}

/** tab-nav **/
.tab-nav {
    display: flex;
    flex-direction: row;
    padding: .5rem;
    gap: 2.5rem;
}
.tab-nav-item {
    font-size: 1.1rem;
    color: #333;
}


.tab-nav-item.active {
    color: #0a8be1;
    font-weight: bold;
}
.tab-nav-item:hover {
    color: #0a8be1;
    font-weight: bold;
}



.problem-sheet-list {
    display: flex;
    flex-direction: column;

    gap: 2rem;
}


.problem-sheet-item {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 2rem;
}
.problem-sheet-item:last-child {
    border-bottom: none;
}

.problem-sheet-cover {
    width: 25%;
    height: 10.625rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    

    
}


.problem-sheet-cover .title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #555;
    
}

.problem-sheet-cover .total-count {
    font-size: 1.2rem;
    color: #666;
}


.problem-sheet-title {
    font-weight: bold;
    display: flex;
    flex-direction: row;
    gap: .5rem;
}


.problem-sheet-info-title {
    display: flex;
    flex-direction: row;
    font-size: .875rem;
}

.problem-sheet-info-title .label {
    padding: 0rem 0.5rem;
    border-radius: 5px;
}


.problem-sheet-info-title .label.video-course-label {
    color: #333;
    border: 1px solid #333;

}
.problem-sheet-info-title .label.live-class-label {
    color: red;
    border: 1px solid red;

}

.problem-sheet-info {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    
}





.progress-bar {
    width: 70%;
    height: 5px;
    background-color: #eee;
    border-radius: 5px;

    display: flex;
    flex-direction: row;
}

.progress-bar-fill {
    background-color: #2ecc71;
    border-radius: 5px;
}