/*===================================================
--------------------LARGE DEVICES LIKE TABLETS------------
=====================================================*/
@media screen and (max-width: 1200px) {

}



/*===================================================
-------------------TABLETS-------------------------
=====================================================*/
@media screen and (max-width: 1024px){


}


/*===================================================
--------------------MEDIUM  DEVICES-------------
=====================================================*/
@media screen and (max-width: 768px) {
    body{
        overflow-x: hidden;
    }
    .col-lg-12{
        margin: 0 !important;
        padding: 0 !important;
    }
    .row{
        margin: 0 !important;
        padding: 0 !important;
    }
    .container{
        padding: 0 !important;
    }
    .t_dash{
        display: flex;
        flex-direction: column;
    }
    .t_dash_l{
        width: 100%;
    }
    .t_dash_r{
        margin-top: 10px;
        width: 100%;
        margin-left: 0px;
        padding: 5px;
    }
        .nav-links li {
        display: none;

    }
    .sms_logo{
        margin-left: 1rem;
    }
    .top_header_title{
        margin-right: 1rem;
    }



    .burger{
        display: block;
    }
    .dropdown_burger{
        display: none;
    }

    /*dashboard_container*/
    .dashboard_top{
        display: flex;
        flex-direction: column;
    }
    .dashboard_container{
        display: flex;
        flex-direction: column;
        padding: 10px;
        width: 100%;
        background-color: var(--bg-body);
    }
    .dashboard_sidebar{
        width: 100%;
    } 
    .side_header{
        display: none;
    }  
    .chart_side{
        display: none;
    }
    .dashboard_content{
        width: 100%;
    } 
    .top_cards{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .top_card{
        overflow: hidden;
        height: auto;
    }
    .income_wrapper{
        display: flex;
        flex-direction: column;
    }
    .income_left{
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }
    .dashboard_content_active .income_left{
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }
    .income_side_top{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        width: 100%;
        height: auto;
    }
    .income_side_btm{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }
    .income_side_btm canvas{
        display: inline-block;
        width: 100%;
    }
    .income_container{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        margin-top: 10px;

    }
    .income_desc{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap:  10px;
    }
    .atendance{
        display: flex;
        flex-direction: column;
    }
    .atendance_left{
        display: block;
        position: relative;
        width: 100%;
        margin: 0;
    }
    .atendance_right{
        display: block;
        position: relative;
        width: 100%;
        margin: 0;
        margin-top: 10px;
    }
    .atendance_left canvas{
        width: 100%;
        display: inline-block;
    }

    .atendance_right canvas{
        width: 100%;
        display: inline-block;

    }
    footer{
        margin: 0 10px;
    }
    .footer_wrapper{
        display: grid;
    }
    .b_history{
        bottom: 10px;
        left: 10px;
    }
    .hamburger{
        display: block;
    }
    .side_content{
        display: none;
    }
    .side_nav{
        display: none;
    }
    .side_nav_mobile{
        display: grid;
        margin-top: 3.5rem;
        position: absolute;
        background: var(--bg-box);
        box-shadow: 0 0 45px 0 rgba(0, 0, 0, .6);
        width: 94.5%;
        /*width: inherit;*/
        height: auto;
        z-index: 99;
        transition: all 1s linear;
        animation: growDown 400ms ease-in-out forwards;
        transform-origin: top center;
    }
    .side_content_hidden{
        transition: all 1s ease;
        opacity: 0;
    }
    .side_content_mobile{
        display: grid;
        /*overflow-y: scroll;*/
        /*overflow-y: hidden;*/
        margin-top: 3.5rem;
        position: absolute;
        background: var(--bg-box);
        box-shadow: 0 0 45px 0 rgba(0, 0, 0, .6);
        width: 94.5%;
        height: 75vh;
        z-index: 99;
        transition: all 1s linear;
        animation: growDown 400ms ease-in-out forwards;
        transform-origin: top center;

    }
    .dropdown_content{
        transform: translateX(-100%);
    }
    .dropdown_content_mobile{
        background: var(--bg-box);
        width: 94.5%;
        height: 85vh;
        z-index: 99.5;
        transition: all 1s linear;
        animation: growDown 400ms ease-in-out forwards;
        transform-origin: top center;
        position: fixed;
        margin: 0;
        /*padding: 0 0 8vh 0 ;*/
        padding: 1rem;
        left: 0px;
        top: 10.5vh;
        background-color: var(--bg-box);
        box-shadow: var(--box-shadow);
        border: 1px solid var(--border);
        border-radius: var(--border-radius);
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 5px;
        align-items: center;
        justify-content: space-around;
        transition: transform 0.5s ease-in;
        margin: 0 10px;
    }
    .dropdown_content_mobile>.dropdown_tag{
        display: flex;
        align-items: center;
        background-color: var(--bg-box);
        padding: .5rem;
        border-radius: var(--border-radius);
        border-bottom: 1px solid var(--border);
        text-decoration: none;
        color: var(--color);
        font-weight: 400;
    }
    .dropdown_content_mobile>.dropdown_tag:last-child{
        background: var(--bg-blue);
        color: white;
    }
    .breadcrumb{
        display: none;
    }
    .welcome{
        display: none;
    }
    .teacher_list{
        overflow-x: scroll;
    }
    .student_list{
        overflow-x: scroll;
    }
    .actions_center{
        display: none;
    }
    .controls_mobile{
        display: flex;
    }

    .create_form form .form_content{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .message_container{
        width: 100%;
        margin: 0 10px;
        height: 70vh;
    }
    .timeline_info{
        width: 100%;
        overflow-x: scroll;
    }
    .upload_content_left{
        width: 50%;
        margin: 10px;
    }
    .fee_content_right{
        width: 100%;
    }
    .fee_content_left{
        width: 100%;
     }
    .timeline_cards{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .events_content_cards{
        grid-template-columns: repeat(1, 1fr);
    }
    .events_wrapper{
        grid-template-columns: repeat(1, 1fr);
    }
    .profile_container{
        display: flex;
        flex-direction: column;
    }
    .profile_left{
        width: 100%;
        margin-bottom: 20px;
    }
    .profile_right{
        width: 100%;
        margin-bottom: 20px;
    }
    .notifications_container{
        display: flex;
        flex-direction: column;
    }
    .msg_content{
        display: flex;
        flex-direction: column;
    }
    .msg_content_left{
        width: 100%;
        margin: 0;
    }
    .msg_content_right{
        width: 100%;
        margin: 0;
    }
    .student_container{
        overflow-x: hidden;
    }
    .notice_board_wrapper{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .notice_board_left{
        width: 100%;
    }
    .notice_board_right{
        width: 100%;
    }
    .performance_container{
        display: flex;
        flex-direction: column;
    }
    .performance_container_left{
        width: 100%;
        margin: 0;
    }
    .performance_container_right{
        width: 100%;
        margin-top: 10px;
    }
    .msg_content_right h4{
        font-size: 12px;
    }
    .msg_tabs h2{
        font-size: 13px;
    }
    /*dashbord_content*/
    /*.dashbord_content{
        position: relative;
        display: flex;
        align-items: center;
    }
    .content_header{
        position: fixed;
        z-index: 100;
        width: 94%;
    }
    .student_container{
        position: relative;
        top: 40px;
    }*/
    /*dashbord_content*/
    .content_header{
        display: flex;
    }
    .top_nav_active, .toggle_nav, .top_nav{
        display: none;
    }
    .side_burger, .side_burger_active{
        display: none;
    }

    .page_loader{
        display: flex;
        z-index: 99;
        position: fixed;
        justify-content: center;
        align-items: center;
        top: 9.9vh;
        right: 0;
        background: var(--bg-body);
        /*background: red;*/
        width: 100%;
        height: 90.1vh;
    }
    .page_loader img{
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
    .page_loader {
        font-size: 15px;
        color: var(--bg-blue);
    }
    .download_container{
        grid-template-columns: repeat(1, 1fr);
    }

    .payment_cards{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 5px;
        margin-top: 5px;
    }
    .fee_container{
        display: flex;
        flex-direction: column;
    }
    .fee_container_left,
    .fee_container_right{
        width: 100%;
        margin: 0;
    }
    .fee_container_right{
        margin-top: 20px;
    }
    .upload_content{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .upload_content_left,
    .upload_content_right{
        width: 100%;
        margin: 5px 0;
    }
    .upload_group_container_btm button,
    .learning_content form button{
        border-radius: none;
    }
    .err_container,.suc_container{
        margin: 0 10px !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
    }
    .err_header, .suc_header, .pend_header{
        left: 0;
        margin: 0 10px !important;
        width: 100% !important;
        max-width: 95% !important; 

    }
    .modal{
        padding-top: 10px 10px;
    }
    .modal-content, .pay_modal_content{
        width: 100%;
        height: 100% auto;

    }
    .modal-content{
        overflow-x: scroll !important;
    }
    .fancy_loader{
        right: 10px;
        bottom: 10px;
    }

    .edit_container,
    .filtered_data{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 15px 10px 0px 10px;
        grid-gap: 10px;
        font-size: 13px;
    }
    .edit_all_container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 15px 10px 0px 10px;
        grid-gap: 10px;
        font-size: 13px;
    }
    .web_page{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .web_form{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .div_form_right{
        width: 100%;
    }
    .div_form_left{
        width: 100%;
    }
    .home_slider_img{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .img_card img{
        
        width: 100%;
    }

    .about_c_g{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
    }
    .about_c img{
        width: 100%;
        height: 200px;
        border-radius: var(--border-radius-half);
    }
    .home_slider_img .img_card img{
        height: 140px;
    }

    .images_edit_cards{
        display: grid ;
        grid-template-columns: repeat(1, 1fr);
        margin: 10px 0 !important;
        grid-row-gap: 10px;
    }

}

/*===================================================
--------------------SMALL DEVICES-------------
=====================================================*/
@media screen and (max-width: 400px){

}