.box-user-avatar.box-user-small .avatar {
    width: 28px;
    height: 28px;
}

.box-user-avatar.box-user-small .content {
    margin-left: 0;
}
.check-date.expired-date {
    display: flex;
    align-items: flex-start;
}
.check-date.expired-date .text-size-15-rgl {
    color: #DD0D3A;
}
.check-date.expired-date .icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    margin-left: 4px;
}
.block-chart {
    padding: 24px;
}

.list-note-chart {
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px 30px;
}

.item-note-chart {
    display: flex;
    align-items: flex-start;
}

.item-note-chart .circle-color-chart {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
    top: 2px;
}

.item-note-chart .info-item-chart {
    flex: 1;
    margin-left: 8px;
}

.circle-color-chart.color-purple {
    background: #4141A8;
}

.circle-color-chart.color-blue {
    background: #1B84FF;
}

.circle-color-chart.color-yellow {
    background: #F6C000;
}

.circle-color-chart.color-red {
    background: #E44457;
}

.circle-color-chart.color-gray {
    background: #CDD2DD;
}
.wp-detail-class-page .block-table-learning-outcomes {
    width: 100%;
}
.flex-topbar-detail-bt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.list-item-info-bt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 32px;
}

.item-info-bt {
    display: flex;
    align-items: center;
    gap: 0 4px;
}

.item-info-bt .icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}


.bg-icon-yellow {
    background: #F4A21D;
}
.icon.bg-icon-dark {
    background:rgba(58, 84, 97, 1);
}
.bg-icon-blue {
    background: #1BBD69;
}

.bg-icon-purple {
    background: #4141A8;
}
@media  (max-width:767px) {
    .box-title-detail-class {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
@media (min-width:1400px) {
    .wp-detail-class-page .container {
        min-width: 1230px;
    }
}
@media (min-width:992px) and (max-width:1199px){
    .list-note-chart {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
@media (max-width:575px){
    .list-note-chart {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .block-chart {
        padding: 12px;
    }
}