/* ==========================================================================
   Calendars and Charts
   ========================================================================== */

   #calendar {
    width: 100%;
}

@media (max-width: 600px) {
    #calendar {
        width: 80%;
        margin: 0 auto;
    }
}

.chart-container,
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chart-item,
.card-item {
    flex: 1 1 35%;
    min-width: 250px;
    box-sizing: border-box;
}

.userMasteryChartDiv {
    width: 500px;
    height: 500px;
}

.ColumnChartDiv {
    width: 100%;
    height: 500px;
}

.AngularChartDiv {
    width: 500px;
    height: 330px;
}

.SingleClassroomAttendanceChartDiv {
    width: 100%;
    height: 150px;
}

.ClassroomAttendanceChartDiv {
    width: 100%;
    height: 10000px;
}

@media (max-width: 768px) {
    .userMasteryChartDiv {
        width: 360px;
        height: 360px;
    }
    .SingleClassroomAttendanceChartDiv, .attnReport_header, .singleChartInfo {
        display: none;
    }
}