.block_coursesmonitor {
    &::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 0;
        height: 28px;
        width: 36px;
        background-image: url([[pix:block_coursesmonitor|check-circle-broken]]);
        background-size: 17px;
        background-position: center;
        background-repeat: no-repeat;
        background-color: $block-report-ribbon;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }
    .no-coursesmonitor {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        width: 100%;
    }
    .no-coursesmonitor-image {
        max-width: 100%;
        height: 140px;
    }
    .no-coursesmonitor-text {
        color: $filterstext;
    }
    /* In-mustache SVG icons styles */
    .block-icon {
        &.students {
            .pathone,
            .circleone {
                fill: rgba($primary, 0.08);
            }
            .pathone,
            .pathtwo,
            .paththree {
                stroke: $primary;
            }
        }
        &.pending-messages {
            .rectone {
                fill: rgba($primary, 0.08);
            }
            .pathone {
                stroke: $primary;
            }
        }
        &.students-at-risk {
            .pathone {
                fill: rgba($primary, 0.08);
            }
            .pathtwo,
            .paththree {
                stroke: $primary;
            }
        }
        &.low-achievement {
            .pathone {
                stroke: $primary;
            }
        }
    }
    .card-body > .card-text.content {
        container-type: inline-size;
    }
    .status-courses-professor {
        container-type: inline-size;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 2%;
        @container (min-width: 600px) {
            gap: 10px 1.8%;
        }
        @container (min-width: 930px) {
            gap: 10px 1.8%;
        }
        @container (min-width: 1230px) {
            gap: 10px 1.4%;
        }
        @container (min-width: 1570px) {
            gap: 10px 1%;
        }
        .course-card {
            width: 100%;
            margin-top: 6px;
            @container (min-width: 600px) {
                width: 49%;
            }
            @container (min-width: 930px) {
                width: 32.1%;
            }
            @container (min-width: 1230px) {
                width: 23.9%;
            }
            @container (min-width: 1570px) {
                width: 19.2%;
            }
            img {
                height: 46px;
                object-fit: cover;
                margin-bottom: 0;
            }
            h4.course-title {
                color: $graytext !important;
                font-size: 16px !important;
                font-weight: 600 !important;
                margin-top: 12px;
                margin-bottom: 18px;
            }
            ul.course-metrics {
                list-style: none;
                padding-left: 0;
                margin-bottom: 6px;
                li {
                    margin-bottom: 12px;
                    margin-left: 8px;
                    font-size: 13px;
                    display: flex;
                    align-items: baseline;
                    justify-content: flex-start;
                    flex-direction: row;
                    gap: 12px;
                    svg {
                        min-width: 14px;
                    }
                }
            }
            .block-button {
                margin-top: auto;
            }
        }
    }
}
.status-courses-professor-modal {
    .modal-dialog {
        max-width: 640px;
        .modal-header {
            border-bottom: none;
            padding: 24px 36px 0 36px;
            h5.modal-title {
                color: $graytext !important;
            }
        }
        .modal-body {
            padding: 24px 36px 12px 36px;
            ul.performance-details {
                list-style: none;
                padding-left: 0;
                margin-bottom: 18px;
                li {
                    margin-bottom: 12px;
                    margin-left: 0;
                    font-size: 14px;
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    flex-direction: row;
                    gap: 12px;
                    svg {
                        min-width: 20px;
                    }
                }
            }
        }
    }
    /* In-mustache SVG icons styles */
    .block-icon {
        &.calendar-times {
            .pathone {
                fill: rgba($primary, 0.08);
            }
            .pathtwo,
            .paththree {
                stroke: $primary;
            }
        }
        &.x-circle {
            .circleone {
                fill: rgba($primary, 0.08);
            }
            .pathone {
                stroke: $primary;
            }
        }
        &.thumbs-up {
            .rectone {
                fill: rgba($primary, 0.08);
            }
            .pathone {
                stroke: $primary;
            }
        }
        &.alert-circle {
            .circleone {
                fill: rgba($primary, 0.08);
            }
            .pathone {
                stroke: $primary;
            }
        }
    }
}