@media (max-width: 576px) {
    .app-container {padding: 20px;}
    .app-header .navbar .container-fluid {justify-content: end;}
    #navbarNav {order:2; margin-left:1.5rem;}
    .app-header .notifications-dropdown {max-width: 90vw; width: 100%;}
    .app-content .page-description {padding:30px 0 0}
    #writing-assistance-page .page-description {padding:30px 0}
    .app-content .page-description-tabbed .nav-tabs {margin:20px -15px; display: flex; width: auto; flex-wrap: nowrap; overflow-x: auto;}
    .app-content .page-description-tabbed .nav-tabs .nav-link {padding:10px 15px }
    .call-week-table {max-height:60vh}
    .call-week .cw-time {font-size: var(--text-m);}
    .cw-time {min-width:100px}
    .cw-day {min-width:150px}
    .call-card .table th, .call-card  .table td {padding:5px 10px !important}
    .card .card-body, .card .card-header, .card .card-footer {padding:15px }
    .teacher-profile.teacher-avatar {max-width:100%; aspect-ratio: 1 / 1; width:100%; height:auto}
    .teacher-card .card-footer .btn-group {display:flex; flex-direction: column;}
    .teacher-card .card-footer .btn.w-50 {width:100% !important; border-radius:5px}
    
    #teacherModal .modal-dialog {max-width:100%}
    #teacherModal .nav-tabs {display: flex; width: auto; flex-wrap: nowrap; overflow-x: auto;}

    .toast:not(.show) {
        display: none !important;
        height: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: none;
        opacity: 0;
        visibility: hidden;
    }

}

@media only screen and (max-width:768px) {

    .credits-details {max-width:100%}
}

@media only screen and (max-width:990px) {
    .credits-details {max-width:100%}
}


@media only screen and (max-width:1199px) {
    header {display: flex; flex-direction: column; position: fixed; top:0; left: 0; right: 0; width:100%; z-index:10020}
}