.main-report-div {
    padding: 10px;
    .title-div {
        display: flex;
        margin: 15px 0 20px;
        justify-content: space-between;
        .back-btn {
            display: flex;
            align-items: center;
            button {
                background: none;
                color: #968bdb;
                border: none;
                font-size: 16px;
                cursor: pointer;
                span {
                    vertical-align: bottom;
                    font-size: 20px;
                }
            }
            img {
                width: 35px;
                border-radius: 100%;
                height: 35px;
                margin: 0 15px 0 10px;
            }
            label {
                display: block;
                font-size: 20px;
                color: #d7779b;
                font-weight: 500;
                letter-spacing: 0.5px;
            }
        }
         .print {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .master-class {
            width: 60%;
            align-items: center;
            justify-content: center;
            display: flex;
            h2 {
                font-size: 20px;
                margin: 0;
                color: #968bdb;
                font-weight: 100;
                padding: 0 20px;
                margin: 0 20px;
                border-right: 1px solid;
                span {
                    color: #d7779b;
                }
            }
            span {
                cursor: pointer;
            }
        }
        .headerlogo {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            label {
                font-size: 14px;
                color: #7673a7;
                font-weight: 500;
                letter-spacing: 0.3px;
                margin-right: 10px;
            }
            select {
                background: #fff;
                padding: 10px;
                border-radius: 5px;
                border: 1px solid #000000;
                width: 60%;
                box-sizing: border-box;
                color: #000;
                font-size: 14px;
            }
        }
    }
    .main-div {
        display: flex;
        min-height: 50px;
        .study-progress {
            width: 70%;
            border: 1px solid #21275f;
            height: calc(100vh - 88px);
            overflow: auto;
            margin-right: 15px;
            .div-head {
                display: flex;
                border-bottom: 1px solid #97979742;
                span {
                    padding: 10px;
                    font-size: 16px;
                    color: #d7779b;
                    font-weight: 500;
                    width: 95%;
                }
                .bg-span {
                    width: 4%;
                    background: #25305f63;
                    padding: 0;
                }
            }
            .div-body {
                &::-webkit-scrollbar {
                    width: 5px;
                    height: 5px;
                }
                /* Track */
                &::-webkit-scrollbar-track {
                    border-radius: 10px;
                }
                /* Handle */
                &::-webkit-scrollbar-thumb {
                    background: #adb3fd7a;
                    border-radius: 10px;
                }
                .assessments {
                    display: flex;
                    .assessments-title {
                        width: 4%;
                        background: #25305f63;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        span {
                            transform: translate(0%, 0px) rotate(-90deg);
                            display: block;
                            text-align: center;
                            color: #d7779b;
                            white-space: nowrap;
                            font-weight: 500;
                        }
                    }
                    .assessments-body {
                        width: 96%;
                    }
                }
                .flashcards {
                    display: flex;
                    .assessments-title {
                        width: 4%;
                        background: #25305f63;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        span {
                            transform: translate(0%, 0px) rotate(-90deg);
                            display: block;
                            text-align: center;
                            color: #d7779b;
                            white-space: nowrap;
                            font-weight: 500;
                        }
                    }
                    .assessments-body {
                        width: 96%;
                    }
                }
                .practice {
                    display: flex;
                    .assessments-title {
                        width: 4%;
                        background: #25305f63;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        span {
                            transform: translate(0%, 0px) rotate(-90deg);
                            display: block;
                            text-align: center;
                            color: #d7779b;
                            white-space: nowrap;
                            width: 106px;
                            font-weight: 500;
                        }
                    }
                    .assessments-body {
                        width: 96%;
                    }
                }
                .main-details {
                    display: flex;
                    .assessments-title {
                        width: 4%;
                        background: #25305f63;
                    }
                    .assessments-body {
                        width: 96%;
                    }
                }
                .main-details,
                .assessments,
                .flashcards {
                    border-bottom: 1px solid #97979742;
                }
                .exam-detail {
                    display: flex;
                    border-bottom: 1px solid #21275f;
                    .student-names {
                        width: 50%;
                        display: flex;
                        border-right: 1px solid #21275f;
                        &:last-child {
                            border: none;
                        }
                        span {
                            color: #c2b8ff;
                            padding: 5px 10px;
                        }
                        .overdue {
                            color: #dc6e43;
                            font-size: 13px;
                            border: none;
                        }
                        .border-0 {
                            border-right: 0 !important;
                        }
                        .rank {
                            padding: 0;
                        }
                        .ranks {
                            text-align: center;
                            width: 12%;
                            border-right: 1px solid #21275f;
                        }
                        .totle-score {
                            color: #d7779b;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
        .activity-taracker {
            width: 30%;
            height: calc(100vh - 88px);
            border: 1px solid #21275f;
            overflow: auto;
            .div-head {
                display: flex;
                border-bottom: 1px solid #97979742;
                span {
                    padding: 10px;
                    font-size: 16px;
                    color: #d7779b;
                    font-weight: 500;
                }
            }
            .task-div-body {
                &::-webkit-scrollbar {
                    width: 5px;
                    height: 5px;
                }
                /* Track */
                &::-webkit-scrollbar-track {
                    border-radius: 10px;
                }
                /* Handle */
                &::-webkit-scrollbar-thumb {
                    background: #adb3fd7a;
                    border-radius: 10px;
                }
                .main-div {
                    .date {
                        position: relative;
                        padding: 5px 20px 5px 5px;
                        text-align: end;
                        width: 23%;
                        background: #25305f69;
                        border-right: 1px solid #97979747;
                        span {
                            display: block;
                            color: #7875ac;
                            font-size: 13px;
                        }
                        .done-task {
                            position: absolute;
                            right: -9px;
                            top: 10px;
                            z-index: 111;
                            line-height: 0;
                        }
                        &:after {
                            position: absolute;
                            content: "";
                            top: 11px;
                            right: -6px;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: #21275f;
                            border: 1px solid #979797;
                        }
                    }
                    .task-name {
                        width: 70%;
                        p {
                            margin: 0;
                            padding: 5px 5px 5px 15px;
                            font-size: 13px;
                            color: #7875ac;
                            .task-color {
                                color: #d7779b;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 1000px) {
    .main-report-div {
        .main-div {
            display: block;
            .study-progress {
                width: 100%;
                margin-bottom: 20px;
            }
            .activity-taracker {
                width: 100%;
                .task-div-body {
                    .main-div {
                        display: flex;
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 676px) {
    .main-report-div {
        .title-div {
            .master-class {
                h2 {
                    font-size: 12px;
                }
            }
        }
    }
}

@media only screen and (max-width:676px) {
    .main-report-div {
        .title-div {
            .master-class {
                h2 {
                    font-size: 12px;
                }
            }
        }
    }
}