/* =========================
   1599px (xxl)
========================= */
@media (max-width: 1599px) {
    .label-short label:first-child {
        font-size: 0;
    }

    .label-short label:first-child input {
        font-size: initial;
    }

    .label-short label:first-child::after {
        content: "Emergency WhatsApp";
        font-size: 14px;
        vertical-align: middle;
    }

    .label-short label:last-child {
        font-size: 0;
    }

    .label-short label:last-child input {
        font-size: initial;
    }

    .label-short label:last-child::after {
        content: "Same as Phone";
        font-size: 14px;
        vertical-align: middle;
    }
}
/* =========================
   1399px (xxl)
========================= */
@media (max-width: 1399px) {
    .profile-main-info h1 {
        font-size: 26px;
    }    

    .card-grid-cols-350,
    .card-grid-cols-250,
    .card-grid-cols-200,
    .card-grid-cols-150,
    .card-grid-cols-7,
    .card-grid-cols-2,
    .card-grid-cols-3,
    .card-grid-cols-4,
    .card-grid-cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid-cols-responsive {
        grid-template-columns: repeat(3, 1fr);
    }     

    .reportlists {
        grid-template-columns: repeat(3, 1fr);
    }

    #universal_from .card-grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    table.table-striped th:last-child,
    table.table-striped td:last-child {
        position: relative !important;
    }

    .inner-tabs {
        padding: 5px 5px 15px;
    }

    .inner-tab {
        padding: 8px 25px;
    }
    
    .profile-topbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px 20px;
    }

    .profile-usersec {
    display: flex;
    grid-column: 1 / span 4;
    grid-row: 1 / span 1;
    padding-bottom:15px;
    border-bottom: solid 1px var(--text-grey);
    width: 100%;
    }

    .profile-barcode-area {
    display: flex;
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
    margin-left: 0;
    width: 100%;
    }

    .profile-topbar:not(:has(.profile-siblings-area)) .profile-barcode-area {
    grid-column: 1 / span 4;
    }

    .profile-siblings-area {
    margin-left: 0;
    grid-column: 3 / span 2;
    grid-row: 2 / span 1;
    min-width: auto;
    padding-left: 20px;
    }

    .siblings-box {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    }

    .siblings-slider-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    }

    .profile-meta {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 15px 20px;
    }

    .switch-inline-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px 0;
    padding: 20px 20px 20px !important;
    line-height: normal;
    }

    .attendance-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    }

    .attendance-box {
    flex: 1 1 140px;
    min-width: 100%;
    }

    .timetable-grid {
        grid-template-columns: max-content repeat(5, minmax(140px, 1fr)) !important;
    }

    .staffinfo-box .staffleft-cvr {
    display: flex;
    gap: 15px;
    flex-direction: column;
    }

    .staffleft-content .staff-info .staff-info-item {
    display: flex;
    }

    .staffinfo-box .staffsub-info {
    justify-content: flex-start;
    }

    .staffleft-content .staff-info .staff-info-item .staff-info-text {
    width: 100%;
    }
    
    .pluscolmn .onefield {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px 20px;
    margin-bottom: 10px;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid var(--border);
    }
    
    .pluscolmn .onefield .col-md-4 {
    width: 100%;
    }

    #input-type .col20 {
    flex: 1;
    min-width: 300px;
    }       

    .mailbox-controls .attendance-radio-cvr {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-direction: column;
    }

    .courses-list .card-grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .checkbox-inline-grid {
        display: flex;
        flex-wrap: wrap;
        gap:10px;
    }
    
    .checkbox-inline-grid .checkbox-inline {
        margin-left: 0;
    }
    
    .full-width-container .col-md-2,
.full-width-container .col-md-10 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.tablists {
    display: -webkit-box;
    overflow-x: auto;
    }

    .tablists li {
    width: auto;
    }

    .tablists li a {
    display: flex;
    padding: 6px 34px 6px 15px;
    }

    .tablists li a .arrow-icon {
    right: 0px;
    }

    .box-body-table {
        min-width: 500px;
}
.paymethode > .row .col-md-10 {
    width: 75% !important;
}

.paymethode > .row .col-md-2 {
    width: 25% !important;
}
.paymethode > .row .col-md-9 {
    width: 70% !important;
}

.paymethode > .row .col-md-3 {
    width: 30% !important;
}
.task-item {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
.task-actions {
    justify-content: flex-end !important;
}
.stuexam-summary{
        display:flex;
        flex-wrap:wrap;
    }

    .stuexam-summary-box{
        width:50%;
        flex:0 0 50%;
        padding:20px;
        border-bottom:1px solid var(--border);
    }

    .stuexam-summary-box:nth-child(even)::after{
        display:none;
    }

    .stuexam-summary-box:nth-last-child(-n+2){
        border-bottom:none;
    }

    .stuexam-summary-label{
        font-size:16px;
    }

    .stuexam-summary-value{
        font-size:34px;
    }

    .stuexam-summary-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .table.student-list th:nth-child(2),
    .table.student-list td:nth-child(2) {
    /* min-width: 210px !important; */
    white-space: normal !important;
    }

    .table.student-list th {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    word-wrap: normal !important;
}
}

/* =========================
   1199px (xl)
========================= */
@media (max-width: 1199px) { 
    .table.student-list th:nth-child(2),
    .table.student-list td:nth-child(2) {
    min-width: 210px !important;
    white-space: normal !important;
    }   
    .min-w-lg-990 {
        min-width: 1200px;
    }

    .profile-meta {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 15px 20px;
    }
    
    .nav-tabs-custom .card-grid-cols-2 {
        grid-template-columns: repeat(1, 1fr);
    }

    .profile-main-info h1 {
        font-size: 24px;
    }

    .container-main {
        max-width: 100vw;
    }

    .main-content-area {
        flex-direction: column;
        gap: 0px;
    }

    .main-right {
        min-width: 0px;
        max-width: 100vw;
        margin-top: 0;
    }

    .teacher-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }

    .criteria-grid {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }

    .timetable-grid {
        grid-template-columns: 140px repeat(6, 1fr);
        padding: 20px;
    }

    .card-grid-cols-350,
    .card-grid-cols-250,
    .card-grid-cols-200,
    .card-grid-cols-150,
    .card-grid-cols-7,
    .card-grid-cols-2,
    .card-grid-cols-3,
    .card-grid-cols-4,
    .card-grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-grid-cols-3 .asigngrid-3 {
    grid-column: span 2;
    }

    .card-grid-cols-4 .asigngrid-4 {
    grid-column: span 2;
    }

    .card-grid-cols-responsive {
        grid-template-columns: repeat(2, 1fr);
    }    

    .reportlists {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid-cols-2.onefield {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    table.table-striped th:last-child,
    table.table-striped td:last-child {
        position: relative !important;
    }

    .switch-inline-grid {
    display: grid;
        grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px 0;
    padding: 20px 20px 20px !important;
    line-height: normal;
    }

    .switch-inline-grid .switch-inline {
    margin-bottom: 20px;
    display: flex;
    border-left: none !important;
    padding: 0px;
    }

    .timetable-grid {
        padding: 15px !important;
        grid-template-columns: max-content repeat(5, minmax(100px, 1fr)) !important;
    }    

    .smd-card-body .timetable-grid.timetable-student-grid {
        padding: 15px !important;
        grid-template-columns: max-content repeat(5, minmax(100px, 1fr)) !important;
    }

    .class-subject {
    font-size: 14px;
    gap: 8px;
    display: block;
    line-height: normal;
    align-items: baseline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    }

    .class-subject i {
    font-size: 14px;
    top: 2px;
    right:4px;
    position:relative;
    }

    .class-cell {
    padding: 10px 10px;
    }

    .class-teacher {
    font-size: 14px;
    }

    .class-teacher i {
    font-size: 14px;
    top: 1px;
    right:1px;
    position:relative;
    }

    .class-room {
    display: flex;
    flex-direction: column;
    }
    
    div.dataTables_wrapper div.dataTables_filter input {
    min-width: 250px;
    }

    .staffinfo-box .staffleft-cvr {
    display: flex;
    gap: 15px;
    flex-direction: column;
    }

    .staffleft-content .staff-info .staff-info-item {
    display: flex;
    }

    .staffinfo-box .staffsub-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    }

    .staffleft-content .staff-info .staff-info-item .staff-info-text {
    width: 100%;
    }

    .staffinfo-box .staffsub-text {
    width: 100%;
    }


.profile-actions {
    width: 100%;
    display: flex;
    place-content: center flex-start;
    gap: 8px;
    align-items: center;
}

.profile-actions .left {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
}
.profile-actions .left a:nth-child(1) {
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(2) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(3) {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(5) {
    grid-column: 3 / span 2;
    grid-row: 2 / span 1;
    width: 100%;
}



.mailbox-controls .attendance-radio-cvr {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    flex-direction: column;
}

.mailbox-controls .onefieldbtn .col-md-2,
.mailbox-controls .onefieldbtn .col-md-10 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.innerboxpb .box {
    margin-bottom:10px;
}
.box {
       margin-bottom: 10px;
    }
.paymethode > .row .col-md-10 {
    width: 65% !important;
}

.paymethode > .row .col-md-2 {
    width: 35% !important;
}
.paymethode > .row .col-md-9 {
    width: 60% !important;
}

.paymethode > .row .col-md-3 {
    width: 40% !important;
}

.stuexam-summary{
        display:flex;
        flex-wrap:wrap;
    }

    .stuexam-summary-box{
        width:50%;
        flex:0 0 50%;
        padding:20px;
        border-bottom:1px solid var(--border);
    }

    .stuexam-summary-box:nth-child(even)::after{
        display:none;
    }

    .stuexam-summary-box:nth-last-child(-n+2){
        border-bottom:none;
    }

    .stuexam-summary-label{
        font-size:16px;
    }

    .stuexam-summary-value{
        font-size:34px;
    }

    .stuexam-summary-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }
}


/* =========================
   991px (lg)
========================= */
@media (max-width: 991px) {
    .min-w-lg-990 {
        min-width: 1200px;
    }
    .nav-tabs-custom>.nav-tabs {
    width: 100%;
    display: -webkit-box;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--tab-border);
    overflow-x: auto;
    padding: 5px 5px 15px;
    }

    .tablists {
    display: -webkit-box;
    overflow-x: auto;
    }

    .tablists li {
    width: auto;
    }

    .tablists li a {
    display: flex;
    padding: 6px 34px 6px 15px;
    }

    .tablists li a .arrow-icon {
    right: 0px;
    }

    .profile-container {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }
    
    .timetable-grid {
        grid-template-columns: 120px repeat(6, minmax(140px, 1fr));
        overflow-x: auto;
    }

    table.table-striped th:last-child,
    table.table-striped td:last-child {
        position: relative !important;
    }

    .profile-topbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px 20px;
        padding: 15px 20px;
    }

    .profile-usersec {
    display: flex;
    grid-column: 1 / span 4;
    grid-row: 1 / span 1;
    padding-bottom:15px;
    border-bottom: solid 1px var(--text-grey);
    width: 100%;
    }

    .profile-barcode-area {
    display: flex;
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
    margin-left: 0;
    width: 100%;
    }

    .profile-siblings-area {
    margin-left: 0;
    grid-column: 3 / span 2;
    grid-row: 2 / span 1;
    min-width: auto;
    padding-left: 20px;
    }

    .siblings-box {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    }

    .siblings-slider-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    }

    .profile-meta {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 15px 20px;
    }

    .profile-barcode-area,
    .profile-siblings-area {
        margin-left: 0px;
    }

    .personal-info-grid,
    .personal-info-grid-2 {
        grid-template-columns: 1fr 1fr;
    }

    .personal-info-address-grid {
        grid-template-columns: 1fr;
    }

    .profile-actions {
    gap: 5px;
    }

    .attendance-cards {
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    .attendance-box {
        min-width: 120px;
        padding: 0.8rem 0.7rem;
    }

    .legend {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    }

    .container {
        width: 100%;
        padding: 12px 2vw 32px;
    }

    .document-row {
        gap: 12px;
    }

    .document-card {
        padding: 14px 10px 14px 8px;
    }

    
    table.table-striped th:last-child,
    table.table-striped td:last-child {
        position: relative !important;
    }

    .staffinfo-box .staffleft-cvr {
        flex-direction: column;
        margin-bottom: 15px;
    }

    .filters-container {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        min-width: 100%;
    }

    .sidebar-column {
        order: 2;
    }

    .main-column {
        order: 1;
    }

    .day-content {
        min-height: 500px;
    }

    .cell-dot {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .mediarow .card-grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    }

    .staffinfo-box .staffleft-cvr {
        display: flex;
        gap: 0px;
        flex-direction: column;
        margin-bottom: 15px;
    }

    .filters-container {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        min-width: 100%;
    }

    .QRcode-attendance-container {
        flex-direction: column;
    }

    .QRcode-header h1 {
        font-size: 2.2rem;
    }

    .QRcode-scan-section,
    .QRcode-profile-section {
        min-width: 100%;
    }

    .QRcode-instruction-list {
        flex-direction: column;
    }

    .course-details-layout {
        grid-template-columns: 1fr;
    }

    .purchase-header {
        flex-direction: column;
        text-align: center;
    }

    .report-summary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: dense;
    }

    .summary-box.dark {
        grid-column: span 2;
    }

    .personal-info-field {
        margin-bottom: 10px;
    }

    .onefield {
        display: flex;
        gap: 15px;
        width: 100%;
        flex-direction: column;
        align-items: flex-end;
    }

    .onefield .col-md-2,
    .onefield .col-md-3,
    .onefield .col-md-4,
    .onefield .col-md-6,
    .onefield .col-md-7,
    .onefield .col-md-8,
    .onefield .col-md-9 {
        width: 100%;
    }

    .onefield .btn {
        float: right;
    }

    .attendance-table-container {
        padding: 0;
    }

    .attendance-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    }

    .attendance-box {
    min-width: 100%;
    padding: 10px 20px;
    }
    
    .box-fees {
        margin-bottom: 15px;
    }

    .switch-inline-grid {
    display: grid;
        grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px 0;
    padding: 20px 20px 20px !important;
    line-height: normal;
    }


.profile-actions {
    width: 100%;
    display: flex;
    place-content: center flex-start;
    gap: 8px;
    align-items: center;
}

.profile-actions .btn:nth-child(1) {
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
    width: 100%;
}

.profile-actions .left {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
}
.profile-actions .left a:nth-child(1) {
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(2) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(3) {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(5) {
    grid-column: 3 / span 2;
    grid-row: 2 / span 1;
    width: 100%;
}     

.mailbox-controls .onefieldbtn {
    display: flex;
    align-items: flex-end;
    margin-bottom: 0;
    flex-direction: column;
    gap: 10px;
}

.mailbox-controls .onefieldbtn .col-md-2,
.mailbox-controls .onefieldbtn .col-md-10 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.mailbox-controls .attendance-radio-cvr {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    flex-direction: column;
}
.mailbox-controls .attendance-radio-cvr .attendance-radio-group {
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-bottom: 15px;
}

.mailbox-controls .attendance-radio-cvr .attendance-radio-group .attendance-radio-label {
    flex: 1;
}

.mailbox-controls .attendance-radio-cvr .attendance-radio-group .attendance-radio-label i {
    margin: 0px;
    line-height: 0;
}

    .attendance-radio-label {
    padding: 6px 10px;
    }

    .form-oneline .onefield div {
        padding:0 !important;
    }

.files-grid {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}
    .checkbox-inline-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
        gap:10px;
        justify-content: space-between;
    }
.student-bar {
    padding: 15px !important;
}

.student-bar > table > tbody > tr > td:nth-child(1) {
    width: 30%;
}

.student-bar > table > tbody > tr > td:nth-child(2) {
    width: 70%;
}

.student-bar .student-info-table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.student-bar .student-info-table > tbody > tr > .label-cell {
    width: 100% !important;
    grid-column: 1 / span 2;
    grid-row: 1;
}

.student-bar .student-info-table > tbody > tr > .value-cell {
    width: 100% !important;
    grid-column: 1 / span 2;
    grid-row: 2;
}
.data-table td {
    white-space: break-spaces !important;
}
.select-type-row {
    display: flex !important;
    align-items: flex-end;
}

#group_form > .box-footer .pull-sm-left {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

#group_form > .box-footer .pull-sm-left .radio-inline {
    margin: 0 5px 12px 0 !important;
}

#group_form > .box-footer .pull-sm-left #schedule_div {
    width: 140px !important;
}

#group_form > .box-footer .pull-sm-left .mt-sm-1 {
    margin-top: 0 !important;
}
    
#group_form > .box-footer .pull-sm-left .submit_group {
    margin: 4px;
}

#group_form > .box-footer .row {
    flex: 1 1 auto;
}

#payment_gateway > .h-75vh {
    height: auto;
}
.paymethode > .row .col-md-10 {
    width: 100% !important;
}

.paymethode > .row .col-md-2 {
    width: 100% !important;
}

.paymethode > .row .col-md-9 {
    width: 100% !important;
}

.paymethode > .row .col-md-3 {
    width: 100% !important;
}

.paymethode .box-body > .pay-radio {
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0;
    line-height: normal;
}

.paymethode .box-body > .pay-radio.checkbox,.radio {
    position: relative;
    margin: 0;
}

.paymethode .box-body > .pay-radio .checkbox+.checkbox, .radio+.radio {
    margin-top: 0;
}
.stuexam-summary{
        display:flex;
        flex-wrap:wrap;
    }

    .stuexam-summary-box{
        width:50%;
        flex:0 0 50%;
        padding:20px;
        border-bottom:1px solid var(--border);
    }

    .stuexam-summary-box:nth-child(even)::after{
        display:none;
    }

    .stuexam-summary-box:nth-last-child(-n+2){
        border-bottom:none;
    }

    .stuexam-summary-label{
        font-size:16px;
    }

    .stuexam-summary-value{
        font-size:34px;
    }

    .stuexam-summary-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }
}


/* =========================
   767px (md)
========================= */
@media (max-width: 767px) { 
    .personal-info-grid,
    .personal-info-grid-2 {
        grid-template-columns: 1fr;
    }

    .status-item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    }

    #universal_from .card-grid-cols-4 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    margin-right: -5px !important;
    margin-left: -5px !important;
    }

    .reportlists {
        grid-template-columns: repeat(1, 1fr);
    }

    .switch-inline-grid .radio-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    }

    .switch-inline-grid .radio-group .radio-inline {
    padding: 0px;
    margin: 0px;
    } 

    #header_search_form {
        display: none;
    }

    .document-row {
        flex-direction: column;
        gap: 14px;
        grid-template-columns: repeat(1, 1fr);
    }

    .document-card {
        min-width: 0px;
    }

    .welcome-content {
        flex-direction: row;
    }

    .welcome-card {
        flex-direction: row;
    }

    .document-card {
        min-width: 0px;
    }

    th,
    td {
        padding: 8px;
        font-size: 13px;
    }

    .report-summary {
        flex-direction: column;
    }

    .attendance-cards {
        flex-direction: column;
        gap: 0.6rem;
    }

    .attendance-box {
        width: 100%;
    }

    .legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    }

    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-modes,
    .salary-breakdown,
    .stats-container,
    .video-grid,
    .courses-grid,
    .teacher-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .filter-options {
        width: 100%;
        justify-content: space-between;
    }

    .QRcode-scan-section,
    .QRcode-profile-section {
        min-width: 100%;
    }

    .QRcode-header h1 {
        font-size: 2rem;
    }

    .course-list-item {
        flex-direction: column;
    }

    .list-course-image {
        width: 100%;
        height: 120px;
    }

    .main-right {
        padding: 0px;
    }

    .timeline-wrapper {
    top: 0;
    }

    .timeline-timeline {
    padding: 10px 0px 0px;
    }

    .timeline-line {
    display: none;
    }

    .timeline-month {
    display: block;
    align-items: center;
    left: 0;
    width: 100%;
    text-align: center;
    }

    .timeline-event {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: column;
    }

    .timeline-left {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
    }

    .timeline-arrow {
    display: none;
    }

    .timeline-card {
    display: flex;
    gap: 16px;
    flex-direction: column;
    }
    
    .timeline-card-actions {
    justify-content: flex-end;
    }

    .transport-container {
        padding: 16px 6px;
    }

    .transport-route-section,
    .transport-info-section {
        padding: 14px 8px;
    }

    .transport-info-grid {
        flex-direction: column;
        gap: 10px;
    }

    .transport-info-card {
        min-width: 0px;
        padding: 12px 10px;
    }

    .hostel-details-card {
        padding: 16px 6px;
    }

    .hostel-details-row {
        flex-direction: column;
        gap: 0px;
        padding: 0px;
    }

    .hostel-details-row::before,
    .hostel-details-row::after {
        display: none;
    }

    .hostel-details-item {
        margin-bottom: 22px;
    }

    .hostel-details-item:last-child {
        margin-bottom: 0px;
    }

    .timetable-header {
        display: none;
    }

    .tab-navigation {
        display: block;
    }

    .day-card {
        display: none;
    }

    .day-card.active {
        display: block;
        border-width: medium;
        border-style: none;
        border-color: currentcolor;
        border-image: initial;
        box-shadow: none;
        background: transparent;
    }

    .day-card.active .day-header {
        display: none;
    }

    .day-card.active .mobile-day-title {
        display: block;
    }

    .day-card.active .day-content {
        padding: 0px;
        min-height: auto;
    }

    .timetable-grid {
        display: block;
        padding: 15px;
    }

    .class-subject {
        font-size: 14px;
    }

    .class-teacher {
        font-size: 12px;
    }

    .period-card {
        border-radius: 0.75rem;
        padding: 1rem;
        margin-bottom: 0.75rem;
    }

    .subject-header {
        align-items: center;
        margin-bottom: 0.75rem;
    }

    .subject-icon {
        font-size: 1rem;
    }

    .subject-name {
        font-size: 0.9375rem;
    }

    .period-details {
        gap: 0.5rem;
    }

    .period-detail-row {
        font-size: 0.875rem;
        gap: 0.5rem;
    }

    .period-detail-icon {
        font-size: 0.875rem;
        width: 1rem;
    }

    .not-scheduled {
        padding: 3rem 1rem;
        gap: 0.75rem;
    }

    .not-scheduled-icon {
        font-size: 3rem;
    }

    .not-scheduled-badge {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .page-title {
        font-size: 2rem;
    }

    .stats-container {
        flex-direction: column;
    }

    .route-content {
        padding: 1.5rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .pickup-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .todo-container {
        border-radius: 20px;
    }

    .todo-title {
        font-size: 26px;
    }

    .todo-title i {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    /* .add-btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
    } */

    .tasks-container {
        padding: 20px;
    }

    .task-item {
        padding: 16px;
        gap: 12px;
    }

    .task-content {
        width: 100%;
    }

    .task-details {
        flex-wrap: wrap;
        gap: 10px;
    }

    .task-title {
        font-size: 15px;
        padding-right: 40px;
    }

    .new-task-form {
        margin: 0px 15px 15px;
        padding: 20px;
    }

    .payment-modes {
        flex-direction: column;
    }

    .payment-mode {
        min-width: 100%;
    }

    .teacher-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-card h3 {
        font-size: 1.8rem;
    }

    .filter-options {
        width: 100%;
        justify-content: space-between;
    }

    .price-price-card {
        padding: 20px;
    }

    .price-card-value {
        font-size: 28px;
    }

    .QRcode-header h1 {
        font-size: 2rem;
    }

    .QRcode-section-content {
        padding: 20px;
    }

    .QRcode-scanner-placeholder {
        min-height: 250px;
        padding: 30px 15px;
    }

    .QRcode-scanner-icon {
        font-size: 3.5rem;
    }

    .QRcode-profile-image {
        width: 150px;
        height: 150px;
    }

    .QRcode-success-message {
        left: 20px;
        right: 20px;
        transform: translateY(-150%);
    }

    .QRcode-success-message.show {
        transform: translateY(0px);
    }

    .onefield {
        display: flex;
        gap: 15px;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .onefield .col-md-2,
    .onefield .col-md-3,
    .onefield .col-md-4 {
        width: 100%;
    }

    .onefield .btn {
        float: right;
    }

    .courses-grid {
        grid-template-columns: 1fr;
    }

    .course-list-item {
        flex-direction: column;
    }

    .list-course-image {
        width: 100%;
        height: 120px;
    }

    .view-options {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .filter-options {
        width: 100%;
        justify-content: space-between;
    }

    .payment-actions {
        flex-direction: column;
    }

    .video-actions {
        flex-direction: column;
    }

    .reports-card-item {
        border-right-width: medium;
        border-right-style: none;
        border-right-color: currentcolor;
        border-bottom: 1px solid rgb(238, 242, 248);
        width: 100%;
    }

    .reports-card-item:last-child {
        border-bottom-width: medium;
        border-bottom-style: none;
        border-bottom-color: currentcolor;
    }

    .reports-summary .reports-card-grid {
        flex-direction: column;
    }

    .profile-topbar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        padding: 15px;
    }

    .profile-usersec {
    display: flex;
    grid-column: 1 / span 4;
    grid-row: 1 / span 1;
    padding-bottom:15px;
    border-bottom: solid 1px var(--text-grey);
    flex-direction: column;
    align-items: center;
    align-content: center;
    }

    .profile-user-img {
    margin: 0 0 20px 0;
    }

    .profile-barcode-area {
    display: flex;
    grid-column: 1 / span 3;
    grid-row: 2 / span 1;
    margin-left: 0;
    width: 100%;
    padding-bottom:15px;
    border-bottom: solid 1px var(--text-grey);
    }

    .profile-siblings-area {
    margin-left: 0;
    grid-column: 1 / span 3;
    grid-row: 3 / span 1;
    border-left: none;
    min-width: auto;
    display: block;
    padding-left: 0;
    }

    .siblings-box {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    }

    .siblings-slider-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    }

    .profile-meta {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 15px 20px;
    width: 100%;
    margin: 0;
    margin-top: 20px;
    }

    .profile-main-info {
    align-items: center;
    width: 100%;
    }

    .profile-actions {
    align-items: center;
    justify-content: left;
    }

    .attendance-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    }

    .attendance-box {
    min-width: 100%;
    padding: 10px 20px;
    }    
    
    .dataTables_wrapper {
        text-align: right;
    }

    .dataTables_wrapper div:nth-child(2) {
        /* width: 100%; */
        display: inline-flex;
        flex-direction: row-reverse;
    }

    div.dataTables_wrapper div.dataTables_filter label {
        margin-left: 0 !important;
        width: 100% !important;
        margin-bottom:15px;
    }    
    
    div.dataTables_wrapper div.dataTables_filter input {
        width: 100% !important;
    }

    .res-label {
    padding-top: 7px;
    }

    .switch-inline-grid {
    grid-template-columns: repeat(2, 1fr);
    }

    .switch-inline-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    }

    .mediarow .card-grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    }

    .staffinfo-box .staffleft-cvr {
        display: flex;
        gap: 0px;
        flex-direction: column;
        margin-bottom: 15px;
    }

    .staffinfo-box .staffsub-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    }

    .staffinfo-box .staffsub-info .staffsub-text {
    text-align: center;
    display: flex;
    justify-content: center;
    }

    .attentable .attendance-radio-option.late {
        flex-direction: row;
    }
    
    .dataTables_wrapper div:nth-child(2) {
        /* flex-direction: row; */
    }
    .scroll-area-16 {
    max-height: 100vh;
    overflow: hidden !important;
}
.panel-default>.panel-heading {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
}
.panel-default>.panel-heading h4 {
    display: flex;
}
.panel-default>.panel-heading a.btn {
    padding: 7px 8px;
    margin-left: 7px;
}
.panel-body-header {
    display: flex;
    place-content: center space-between;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
}
.panel-body-header .sort-action {
    justify-content: flex-end;
}
.panel-title a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.res-header {
    display: flex;
    place-content: center space-between;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
}
.res-header .searchbar-table {
    width: 100%;
}
.res-header .rt-buttons {
    display: inline-grid;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: baseline;
    float: right;
}
.sortable-item .list-group-item-sort {
    background-color: transparent !important;
    border: none;
    padding: 0;
}
.header-top .school-header {
    width: 100%;
}
.header-top .school-header .school-details h1 {
    font-size: 20px !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0;
}
.header-top .school-header .school-details p {
    font-size: 12px;
}
.header-top .term-badge {
    font-size: 14px !important;
    padding: 8px 10px;
    border-radius: 18px;
}
/* Header */
table.scale-table {
    min-width: 100% !important;
}

table.scale-table > thead > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

table.scale-table > thead > tr > th:first-child {
    grid-column: 1;
    white-space: normal !important;
    width: auto;
}

table.scale-table > thead > tr > th:last-child {
    grid-column: 2;
    white-space: normal !important;
    width: auto;
}

/* Body */
table.scale-table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

/* Left Side */
table.scale-table > tbody > tr > td:nth-child(1){
    grid-column:1;
    grid-row:1;
    font-weight:700;
}

table.scale-table > tbody > tr > td:nth-child(2){
    white-space: normal !important;
    grid-column:1;
    grid-row:2;
}

table.scale-table > tbody > tr > td:nth-child(3){
    grid-column:1;
    grid-row:3;
}

/* Right Side */
table.scale-table > tbody > tr > td:nth-child(4){
    grid-column:2;
    grid-row:1;
    font-weight:700;
}

table.scale-table > tbody > tr > td:nth-child(5){
    white-space: normal !important;
    grid-column:2;
    grid-row:2;
}

table.scale-table > tbody > tr > td:nth-child(6){
    grid-column:2;
    grid-row:3;
}

table.scale-table > tbody > tr > td{
    width:auto !important;
    padding:3px 6px;
    white-space:normal;
}
table.subject-master-table{
    width: 100%;
    table-layout:fixed;
    border-collapse:collapse;
}

/* Header */
table.subject-master-table > thead {
    display:none;
}
table.subject-master-table > thead > tr{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
}

table.subject-master-table > thead > tr > th{
    width:auto !important;
    white-space:normal;
}

/* Hide Achievement & Effort headers */
table.subject-master-table > thead > tr > th:nth-child(3),
table.subject-master-table > thead > tr > th:nth-child(4){
    display:none;
}

table.subject-master-table > tbody {
    display: table-caption;
}
/* Body Rows */
table.subject-master-table > tbody > tr:not(.remarks-row){
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
}

table.subject-master-table > tbody > tr:not(.remarks-row) > td{
    width:100% !important;
    padding:4px 6px;
    white-space:normal;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent2);
}

/* Subject */
table.subject-master-table > tbody > tr:not(.remarks-row) > td:nth-child(1){
    grid-column:1;
    grid-row:1;
    display: grid;
}

table.subject-master-table > tbody > tr:not(.remarks-row) > td:nth-child(1)::before{
    content:"Subject";
    display:block;
    font-size:11px;
    font-weight: 600;
    text-transform:uppercase;
    color: var(--label);
}

/* Teacher */
table.subject-master-table > tbody > tr:not(.remarks-row) > td:nth-child(2){
    grid-column:2;
    grid-row:1;
    display: grid;
}

table.subject-master-table > tbody > tr:not(.remarks-row) > td:nth-child(2)::before{
    content:"Teacher";
    display:block;
    font-size:11px;
    font-weight: 600;
    text-transform:uppercase;
    color: var(--label);
}

/* Achievement */
table.subject-master-table > tbody > tr:not(.remarks-row) > td:nth-child(3){
    grid-column:1;
    grid-row:2;
    display: grid;
}

table.subject-master-table > tbody > tr:not(.remarks-row) > td:nth-child(3)::before{
    content:"Achievement";
    display:block;
    font-size:11px;
    font-weight: 600;
    text-transform:uppercase;
    color: var(--label);
}

/* Effort */
table.subject-master-table > tbody > tr:not(.remarks-row) > td:nth-child(4){
    grid-column: 2;
    grid-row: 2;
    display: grid;
}

table.subject-master-table > tbody > tr:not(.remarks-row) > td:nth-child(4)::before{
    content:"Effort";
    display:block;
    font-size:11px;
    font-weight: 600;
    text-transform:uppercase;
    color: var(--label);
}

/* Remarks */
table.subject-master-table > tbody > tr.remarks-row{
    display:block;
    padding:0;
}

table.subject-master-table > tbody > tr.remarks-row > td{
    display:block;
    width:100% !important;
    padding:8px;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}
table.obs-master-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
}

/* Header */
table.obs-master-table > thead{
    display:none;
}

table.obs-master-table > tbody{
    display:table-caption;
}

/* Body Rows */
table.obs-master-table > tbody > tr:not(.obs-remarks-row){
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
}

table.obs-master-table > tbody > tr:not(.obs-remarks-row) > td{
    width:100% !important;
    padding:4px 6px;
    white-space:normal;
    display:grid;
    font-size:13px;
    font-weight:600;
    color:var(--accent2);
}

/* Observation */
table.obs-master-table > tbody > tr:not(.obs-remarks-row) > td:nth-child(1){
    grid-column:1;
    grid-row:1;
}

table.obs-master-table > tbody > tr:not(.obs-remarks-row) > td:nth-child(1)::before{
    content:"Observation";
    display:block;
    font-size:11px;
    font-weight: 600;
    text-transform:uppercase;
    color: var(--label);
}

/* Assessment */
table.obs-master-table > tbody > tr:not(.obs-remarks-row) > td:nth-child(2){
    grid-column:2;
    grid-row:1;
}

table.obs-master-table > tbody > tr:not(.obs-remarks-row) > td:nth-child(2)::before{
    content:"Assessment";
    display:block;
    font-size:11px;
    font-weight: 600;
    text-transform:uppercase;
    color: var(--label);
}

/* T1 */
table.obs-master-table > tbody > tr:not(.obs-remarks-row) > td:nth-child(3){
    grid-column:1 / span 2;
    grid-row:2;
}

table.obs-master-table > tbody > tr:not(.obs-remarks-row) > td:nth-child(3)::before{
    content:"T1";
    display:block;
    font-size:11px;
    font-weight: 600;
    text-transform:uppercase;
    color: var(--label);
}

/* Remarks */
table.obs-master-table > tbody > tr.obs-remarks-row{
    display:block;
    padding:0;
}

table.obs-master-table > tbody > tr.obs-remarks-row > td{
    display:block;
    width:100% !important;
    padding:8px;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:break-word !important;
}

table.summary-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
}

/* Hide Header */
table.summary-table > thead{
    display:none;
}

table.summary-table > tbody{
    display:table-caption;
}

/* Body */
table.summary-table > tbody > tr{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5px;
}

table.summary-table > tbody > tr > td{
    width:100% !important;
    padding: 0 !important;
    white-space:normal;
    display: flex;
    gap: 5px;
    font-size: 16px;
    font-weight: 700;
    color: #795548;
    border: 1px solid #795548;
    justify-items: stretch;
    flex-direction: column;
    align-items: stretch;
    text-align: center !important;
}

/* Total Points */
table.summary-table > tbody > tr > td:nth-child(1)::before{
    content:"Total Points";
    background: #795548;
    color:var(--white);
    padding:4px 6px;
    text-align:center;
    font-size:11px;
    text-transform:uppercase;
    font-weight:600;
}

/* Percentage */
table.summary-table > tbody > tr > td:nth-child(2)::before{
    content:"Percentage";
    background: #795548;
    color: var(--white);
    padding:4px 6px;
    text-align:center;
    font-size:11px;
    text-transform:uppercase;
    font-weight:600;
}

/* Division */
table.summary-table > tbody > tr > td:nth-child(3)::before{
    content:"Division";
    background: #795548;
    color:var(--white);
    padding:4px 6px;
    text-align:center;
    font-size:11px;
    text-transform:uppercase;
    font-weight:600;
}

/* Rank */
table.summary-table > tbody > tr > td:nth-child(4)::before{
    content:"Rank";
    background: #795548;
    color:var(--white);
    padding:4px 6px;
    text-align:center;
    font-size:11px;
    text-transform:uppercase;
    font-weight:600;
}
.select-type-row {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 10px 20px;
}
.select-type-row .col-lg-2 {
        grid-column: 1 / -1;
        grid-row: 999; /* Sabse last me chala jayega */
    }
.select-type-row {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 10px 20px;
}
.select-type-row .col-lg-2 {
        grid-column: 1 / -1;
        grid-row: 999; /* Sabse last me chala jayega */
    }
#bulkmail .onefield {
    gap: 0;
}
.select-type-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 0;
    width: 100%;
    align-items: flex-end;
}
.select-type-row .col-lg-2 {
    display: flex;
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    }
.select-type-row .col-md-3:nth-child(2) {
    display: grid;
    grid-column: 1 / span 4;
    grid-row: 1 / span 1;
    width: 100%;
    }
.select-type-row .col-md-3:nth-child(3) {
    display: grid;
    grid-column: 1 / span 4;
    grid-row: 2 / span 1;
    width: 100%;
    }
.compose-form > .box-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.compose-form > .box-footer .btn {
    margin: 15px 0 0 0 !important;
    float: right;
}
.compose-form > .box-footer .pull-sm-left {
    width: 100%;
    display: block;
}
.compose-form > .box-footer .pull-sm-left #schedule_div {
    width: 100% !important;
}
/*================================================================*/
#group_form > .box-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
#group_form > .box-footer .submit_group {
    margin: 15px 0 0 0 !important;
    float: right;
}
#group_form > .box-footer .pull-sm-left {
    width: 100%;
    display: block;
}
#group_form > .box-footer .pull-sm-left #schedule_div {
    width: 100% !important;
}
.att-type-label {
    margin-bottom: 10px !important;
}
.paymethode .box-body > .pay-radio {
    grid-template-columns: repeat(3, 1fr);
}
.form-horizontal > .box-footer.p0{
    padding: 15px 15px 0 !important;
}
.card-grid-cols-350,
    .card-grid-cols-250,
    .card-grid-cols-200,
    .card-grid-cols-150,
    .card-grid-cols-7,
    .card-grid-cols-2,
    .card-grid-cols-3,
    .card-grid-cols-4,
    .card-grid-cols-6 {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        display: flex;
        flex-direction: column;
    }

    #universal_from .card-grid-cols-4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    margin-right: -5px !important;
    margin-left: -5px !important;
    }

    .card-grid-cols-responsive {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        display: flex;
        flex-direction: column;
    }
.stuexam-summary{
        display:block;
    }

    .stuexam-summary-box{
        width:100%;
        flex:none;
        padding:18px 20px;
        border-bottom:1px solid var(--border);
    }

    .stuexam-summary-box:last-child{
        border-bottom:none;
    }

    .stuexam-summary-box::after{
        display:none;
    }

    .stuexam-summary-icon{
        width:55px;
        height:55px;
        font-size:22px;
    }

    .stuexam-summary-label{
        font-size:15px;
    }

    .stuexam-summary-value{
        font-size:30px;
        line-height:1.2;
    }

}


/* =========================
   575px (sm)
========================= */
@media (max-width: 575px) {
    
    .switch-inline-grid .radio-group {
    grid-template-columns: repeat(1, 1fr);
    }

    .smd-card-title-bln {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .smd-card-title-bln h3 {
    font-size: 18px;
    }

    .personal-guardian-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .personal-guardian-img .avatar {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .personal-guardian-name {
        margin-top: 6px;
    }

    .profile-topbar {
        padding: 8px 2px;
    }

    .card {
        padding: 12px 4px 8px;
    }

    .inner-tab {
        font-size: 0.97rem;
        padding: 10px 12px;
        white-space: nowrap;
    }

    main {
        padding: 0.7rem 0.2rem;
    }

    .attendance-cards {
        flex-direction: column;
    }

    .modal {
        max-width: 100%;
        border-radius: 8px;
    }

    .comment-form {
        flex-direction: column;
    }

    .btn-send {
        width: 100%;
    }

    .summary-cards {
        grid-template-columns: 1fr;
    }

    .tab-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.125rem;
    }

    .upload-box {
        padding: 24px 4px 20px;
    }

    .doc-icon {
        width: 38px;
        height: 38px;
        margin-right: 10px;
    }

    .doc-actions {
        margin-left: 8px;
        gap: 6px;
    }

    .doc-actions .action-btn {
        width: 32px;
        height: 32px;
    }

    .todo-title {
        font-size: 26px;
    }

    .route-content {
        padding: 1rem;
    }

    .pickup-details {
        flex-direction: column;
        gap: 0.5rem;
    }

    body {
        align-items: flex-start;
        min-height: 100vh;
    }

    .todo-container {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    /* .add-btn {
        position: absolute;
        right: 20px;
        top: 25px;
    } */

    .todo-stats {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .stat-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .stat-value {
        font-size: 20px;
    }

    .task-item {
        padding: 14px;
    }

    .task-title {
        font-size: 14px;
    }

    .task-date,
    .task-priority {
        font-size: 12px;
    }

    .due-date-warning {
        font-size: 12px;
    }

    .action-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .form-actions {
        flex-direction: column;
    }

    .todo-footer p {
        font-size: 12px;
        line-height: 1.4;
    }

    .staffinfo-box {
        padding: 20px;
    }

    .staffleft-box {
        width: 100px;
        height: 100px;
    }

    .stafficons {
        gap: 15px;
    }

    .stafficons a {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .price-card-value {
        font-size: 30px;
    }

    .QRcode-header h1 {
        font-size: 1.8rem;
    }

    .QRcode-header p {
        font-size: 1rem;
    }

    .QRcode-section-title {
        padding: 15px 20px;
        font-size: 1.1rem;
    }

    .QRcode-scan-button {
        padding: 12px 24px;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }

    .QRcode-audio-controls {
        flex-direction: column;
        align-items: center;
    }

    .QRcode-audio-btn {
        width: 100%;
        justify-content: center;
    }

    .report-summary {
        display: flex;
    }

    .notice-board-container {
        padding: 30px 10px 10px;
    }

    .notice-board {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        padding: 10px;
    }

    .profile-topbar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px 0;
        padding: 15px;
    }

    .profile-usersec {
    display: flex;
    grid-column: 1 / span 3;
    grid-row: 1 / span 1;
    padding-bottom:15px;
    border-bottom: solid 1px var(--text-grey);
    flex-direction: column;
    align-items: center;
    align-content: center;
    }

    .profile-user-img {
    margin: 0 0 20px 0;
    }

    .profile-barcode-area {
    display: flex;
    grid-column: 1 / span 3;
    grid-row: 2 / span 1;
    margin-left: 0;
    width: 100%;
    padding-bottom:15px;
    border-bottom: solid 1px var(--text-grey);
    }

    .profile-siblings-area {
    margin-left: 0;
    grid-column: 1 / span 3;
    grid-row: 3 / span 1;
    border-left: none;
    min-width: auto;
    display: block;
    padding-left: 0;
    }

    .siblings-box {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    }

    .siblings-slider-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    }

    .profile-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 20px;
    }

    .profile-main-info {
    align-items: center;
    }

    .profile-actions {
    align-items: center;
    justify-content: left;
    }
    
    .languagebox .filter-option {
    font-size: 0;
    }

    .languagebox .filter-option .flag-icon {
    font-size: 14px;
    }

    .attendance-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    }

    .attendance-box {
    min-width: 100%;
    padding: 10px 20px;
    }

    .legend {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    width: 100%;
    }

    .multiselect-container label.checkbox {
    display: block;
    }

    .staffleft-content .staff-info .staff-info-item {
    display: flex;
    flex-wrap: nowrap;
    }

    .staffleft-content .staff-info .staff-info-item .staff-info-text {
    width: 100%;
    }

    .switch-inline-grid {
    grid-template-columns: repeat(1, 1fr);
    }

    .feesmodal-footer {
    display: flex;
    text-align: right;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    }
    
    .feesmodal-footer span {
    display: flex;
    text-align: right;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    }

.attentable .atten-input {
    width: 150px;
}

.attentable .atten-note {
    width: 200px;
}

.mailbox-controls .attendance-radio-cvr .attendance-radio-group {
    grid-template-columns: repeat(2, 1fr);
}

.mailbox-controls .onefieldbtn .col-md-2,
.mailbox-controls .onefieldbtn .col-md-10 {
    width: 100%;
    max-width: 100%;
}

.header {
    padding: 15px !important;
}

.header-top table.school-header {
    table-layout: fixed;
}

.header-top table.school-header > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px 0;
}

.header-top table.school-header > tbody > tr > td:nth-child(1) {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
}

.header-top table.school-header > tbody > tr > td:nth-child(2) {
    width: 100%;
    grid-column: 1 / span 2;
    grid-row: 2;
}

.header-top table.school-header > tbody > tr > td:nth-child(3) {
    width: 100%;
    grid-column: 2 / span 1;
    grid-row: 1;
}

.header-top .school-header .school-details h1 {
    font-size: 18px !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0;
}

.header-top .school-header .school-details p {
    font-size: 11px;
}

.header-top .term-badge {
    font-size: 14px !important;
    padding: 8px 10px;
    border-radius: 18px;
    margin-top: 5px;
}
.student-bar {
    padding: 15px !important;
}

.student-bar > table > tbody > tr {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.student-bar > table > tbody > tr > td:nth-child(1) {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 !important;
}

.student-bar > table > tbody > tr > td:nth-child(2) {
    width: 100%;
    padding: 0 !important;
}

.student-bar .student-info-table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.student-bar .student-info-table > tbody > tr > .label-cell {
    width: 100% !important;
    grid-column: 1 / span 2;
    grid-row: 1;
}

.student-bar .student-info-table > tbody > tr > .value-cell {
    width: 100% !important;
    grid-column: 1 / span 2;
    grid-row: 2;
}
.advisor-table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.meta-table {
    padding: 5px 15px !important;
}
.meta-box {
    width: 100% !important;
}
.meta-box:first-child {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 2px dashed #ddd;
}
.main-content {
    padding: 10px 15px !important;
}
.system-note {
    padding: 15px !important;
}
.signature-footer {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    padding: 0 15px 15px !important;
}
.signature-footer .teacher-signature:nth-child(1) {
    display: flex;
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    width: 100%;
}
.signature-footer .print-date:nth-child(2) {
    display: flex;
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}
.signature-footer .teacher-signature:nth-child(3) {
    display: flex;
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    width: 100%;
}
.teacher-signature .sig-line {
    width: 100% !important;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.notice-action-buttons {
    width: 100%;
    display: block;
    gap: 5px;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: right;
}
.notice-action-buttons .click-hint {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    text-align: left;
}
.box-body-table {
    min-width: 240px;
}
.paymethode .box-body > .pay-radio {
    grid-template-columns: repeat(1, 1fr);
}

.radio-group {
    gap:10px;
    display: flex;
    flex-direction: column;
}
.profile-head-inner.profile-head-res {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.document-download-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    padding: 15px;
}
.document-download-info {
    font-size: 14px;
    color: var(--accent2);
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.5;
    text-align: center;
}
.stuexam-question-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}
.stuexam-points-badge {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 14px;
    gap: 10px;
    padding: 10px 15px;
}
.stuexam-options {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
}
.stuexam-summary-box{
        gap:12px;
        padding:15px;
    }

    .stuexam-summary-icon{
        width:48px;
        height:48px;
        font-size:20px;
    }

    .stuexam-summary-label{
        font-size:14px;
    }

    .stuexam-summary-value{
        font-size:24px;
    }

.input-group .input-group-btn:nth-child(1) {
    width: 100%;
    display: block;
    flex-direction: column;
    border-radius: 0;
    height: 52px;
}
.input-group .input-group-btn:nth-child(1) .btn {padding: 15px;width: 100%;}
.input-group .input-group-btn:last-child {
    vertical-align: bottom;
}
.dual-list .list-group-item {
    padding: 8px 10px;
    display: flex;
    gap: 10px;
    line-height: normal;
    position: relative;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.dual-list .list-group .btn-danger {
    position: relative;
    width: 100%;
    right: 0;
}
}

/* =========================
   375px (sm)
========================= */
@media (max-width: 375px) {
.btnprint .form-group.pull-right a {
    font-size: 13px !important;
}
.btnprint .btn {
    margin-top: 10px !important;
}
.date-display {
    font-size: 14px m !important;
}

.mailbox-controls .attendance-radio-cvr .attendance-radio-group {
    grid-template-columns: repeat(1, 1fr);
}
    .profile-meta {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px 20px;
    }
    
    div.dataTables_wrapper div.dataTables_length select {
    width: 50px !important;
    padding: 0 !important;
    }

.profile-actions {
    width: 100%;
    display: flex;
    place-content: center flex-start;
    gap: 8px;
    align-items: center;
}

.profile-actions .left {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    width: 100%;
    align-items: baseline;
}
.profile-actions .left a:nth-child(1) {
    grid-column: 1 / span 4;
    grid-row: 5 / span 1;
    width: 100%;
    margin: 0;
}
.profile-actions .left button:nth-child(2) {
    grid-column: 1 / span 4;
    grid-row: 1 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(3) {
    grid-column: 1 / span 4;
    grid-row: 2 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(4) {
    grid-column: 1 / span 4;
    grid-row: 3 / span 1;
    width: 100%;
}
.profile-actions .left button:nth-child(5) {
    grid-column: 1 / span 4;
    grid-row: 4 / span 1;
    width: 100%;
}
.course-wrap .box-header .modal-btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
}

table.subject-master-table > tbody > tr:not(.remarks-row){
    display:flex;
    flex-direction: column;
}
table.obs-master-table > tbody > tr:not(.obs-remarks-row){
    display:flex;
    flex-direction: column;
}
.data-table th.head-col {
    white-space:normal !important
}
table.summary-table > tbody > tr{
    display:flex;
    flex-direction: column;
}
.label-short > div {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
}
.label-short label:last-child {
    justify-content: flex-end;
}
#payment_gateway > .h-75vh {
    height: 300px !important;
}
.paymethode .box-body > .pay-radio {
    grid-template-columns: repeat(1, 1fr);
}
}

.mobile-timetable {
        display:none;
}
@media (max-width:768px){
.mobile-timetable {
        display:block;
}


    .timetable-grid{
        display:block;
        background:none;
        box-shadow:none;
        padding:0;
    }

    .desktop-timetable{
        display:none;
    }

    .day-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    }
    
    .time-header,
    .time-cell {
        display:none;
    }

    .mobile-day-card{
        background:var(--white);
        border-radius:12px;
        margin-bottom:20px;
        overflow:hidden;
        border:1px solid #e5e7eb;
    }

    .mobile-day-title{
        display:block;
        padding:15px;
        font-size:18px;
        font-weight:600;
        text-align:center;
        color:var(--white);
    }

    .mobile-day-content{
        padding:15px;
    }

    .mobile-period{
        border:1px solid #e5e7eb;
        border-radius:10px;
        padding:12px;
        margin-bottom:12px;
        background:var(--white);
    }

    .class-time {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding-bottom: 8px;
    }

    .class-teacher{
        width:auto;
        white-space:normal;
    }

    .class-room {
    display: flex;
    flex-direction: row;
    align-items: center;
    }

    .mobile-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.mobile-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.class-cell {
    min-width: 100%;
    flex-shrink: 0;
    padding: 0px;
    box-sizing: border-box;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    background: rgba(0,0,0,0.8);
}

.slider-arrow.prev {
    left: 5px;
}

.slider-arrow.next {
    right: 5px;
}

/* Modern Slider Controls */
.day-slider-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 6px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: absolute;
    right: 0;
}

/* Modern Arrow Buttons */
.day-slider-controls .slider-arrow {
    border: none;
    color: var(--accent2);
    width: 26px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    line-height: 1;
    position: relative;
    overflow: hidden;
    background: var(--grey5);
    transform: scale(1.1);
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
}

.day-slider-controls .slide-counter {
    line-height:1;
    margin:0 5px;
}

/* Hover Effects */
.day-slider-controls .slider-arrow:hover {
    background: var(--primary-green);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.day-slider-controls .slider-arrow:active {
    transform: scale(0.9);
}

/* Ripple effect on click */
.day-slider-controls .slider-arrow::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s ease;
}

.day-slider-controls .slider-arrow:active::after {
    opacity: 1;
    transform: scale(2);
}
}
/* .switch-inline-grid {
    grid-template-columns: repeat(1, 1fr);
} */