.container-login{
    overflow:hidden;
}
.common_margin {
    max-width: 1050px !important;
}
@media only screen and (min-width: 1439px){
    .attendance-main .syllabus-image img {
        width: 100px;
    }  
    .main-wrap {
        width: 95%;
    }
    .calendar-main {
        width: 40%; 
    }
    .user-info-row-one {
        width: 100%;
    }
    .outter-pay-wrap {
        width: 34%; 
    }
}  
@media only screen and (min-width: 1440px){
    .container-fluid {
        max-width: 1440px;
    } 
    .ui-datepicker td span, .ui-datepicker td a { 
        height: 44px; 
    } 
    .user-login-section {
        width: 18%; 
        margin-left: 4%;
    }
    .login-wrap-open { 
        padding: 5px 1px;
    }
    .class-tab {
        flex-basis: 25%; 
    }
    .att-subject img {
        width: 25px;
    }
    .my-info-inner { 
        width: 65%;
    }
    .user-info-row-one {
        width: 90%;
    }
    .outter-pay-wrap {
        width: 32%; 
    }
    .noti-wrap-sec-right {
        width: 50%;
    }
}
@media only screen and (min-width: 1500px){
    .calendar-cover .calendar-dates .days .day {
        padding: 4%;
    }
    .container-fluid {
        max-width: 1140px;
    }
    .login-box {
        width: 430px;
    }
    .login-body { 
        padding: 80px 140px; 
    }
    .login-box h3 {
        font-size: 25px;
        margin-bottom: 20px;
    }
    .login-form-row input[type="text"], .login-form-row input[type="password"] { 
        padding: 8px; 
    }
    .header-menu-wrap ul li { 
        font-size: 14px; 
    }
    .header-menu-wrap .join-class-btn { 
        font-size: 14px;
    }
    .login-image {
        width: 40%;
        left: 10%;
        top: 20%;
    }
    video.login-video {
        width: 40%;
        left: 10%;
        top: 20%;
    }
    .container-fluid {
        max-width: 1140px;
        overflow: initial;
    }
    .login-box h3 {
        font-size: 28px; 
    }
    .login-form-row input[type="text"], .login-form-row input[type="password"] { 
        font-size: 15px; 
    }
    .login-form-row label { 
        font-size: 16px; 
    }
    .login-form-row .join-class-btn { 
        font-size: 17px;
    }
    .login-header:after { 
        width: 604px;
        height: 604px; 
        right: -45px;
        bottom: -242px; 
    }
    .att-row { 
        margin-left: 56px;
    } 
}
@media only screen and (min-width: 1600px){
   
    .login-image {
        width: 40%;
        left: 10%;
        top: 20%;
    }
    video.login-video {
        width: 40%;
        left: 10%;
        top: 20%;
    }
    .login-box { 
        margin-left: 36%;
    }
    .container-login .logo-wrap img {
        width: 175px;
    }
} 
@media only screen and (min-width: 1680px){
    .login-image {
        width: 40%;
        left: 10%;
        top: 20%;
    }
    video.login-video {
        width: 40%;
        left: 10%;
        top: 20%;
    }
    .login-box {
        margin-left: 38%;
        margin-top: 5%;
    }
    .container-login .logo-wrap img {
        width: 180px;
    }
}
@media only screen and (min-width: 1920px){
     
    .ui-datepicker td span, .ui-datepicker td a {
        height: 58px;
    }
    .upcoming-section-wrap {
        margin-left: 10px; 
    }
    .upcoming-tab { 
        padding: 24px 20px; 
    }
    .login-box { 
        padding: 55px;
    }
}
@media only screen and (min-width: 2000px){
    .calendar-cover .calendar-dates .days .day {
        padding: 4%;
    }
    .upcoming-section-wrap {
        width: 26%;
    }
    .search-bar-wrap input[type="text"] { 
        width: 51%; 
    }
    .container-fluid {
        width: 1870px;
    } 
   .login-image {
        width: 35%;
        left: 8%;
    }
    video.login-video {
        width: 35%;
        left: 8%;
    }
    .calendar-main {
        width: 56%; 
    }
    .upcoming-section-wrap {
        width: 34%;
    } 
} 
@media only screen and (min-width: 2560px){
    .calendar-cover .calendar-dates .days .day { 
        padding: 5%; 
    } 
    .search-bar-wrap input[type="text"] { 
        width: 51%; 
    } 
    .calendar-main {
        width: 56%;
    }
    .upcoming-section-wrap {
        width: 35%;
    }
}
@media only screen and (max-width:1440px){  
    .login-box {
        margin-left: 32%;
            margin-top: 7%;
    }
    .login-image {
        width: 50%;
        left: 5%;
    }
    video.login-video {
        width: 50%;
        left: 5%;
    }
    .main-wrap {
        width: 96%;
    }
    .grade-wrap {
        margin-bottom: 10px;
    }
    .calendar-main {
        width: 40%; 
    }
  
    .user-info-one-fees p:nth-child(1) {
        width: 23%; 
    }
    ul.sele-sub-opt-two {
        width: 68%;
    }
    .check-syllabus-btn { 
        right: 48px; 
    }
}
@media only screen and (max-width:1440px) and (min-width:1367px){ 
    .login-image {
        width: 50%;
        left: 7%;
    }
    video.login-video {
        width: 35%;
        left: 7%;
    }
    .login-header:after {
        width: 670px;
        height: 670px;
        bottom: -261px;
    }
    .container-login .logo-wrap img{
        width:120px;
    }
}
@media only screen and (max-width:1366px){
     
    .login-box { 
        margin-left: 37%;
    }
    .login-image {
        width: 40%;
        left: 10%;
        top: 20%;
    }
    video.login-video {
        width: 40%;
        left: 10%;
        top: 20%;
    }
    .common_margin { 
        width: 78%; 
    }
}
@media only screen and (max-width:1300px){
    
}
@media only screen and (max-width:1280px){ 
    .user-login-section {
        width: 22%;
        margin-left: 2%;
    }
    .class-tab-img { 
        width: 90px; 
        height: 90px; 
    }
    .join-class-btn { 
        padding: 6px 30px; 
    }
    .todays-assignments-tab-details p {
        font-size: 12px;
    }
    .class-tab-details h6 {
        font-size: 12px; 
    }
    .class-tab-details p {
        font-size: 12px; 
        width: 125px; 
    }
    .grade-wrap img {
        width: 54px;
    }
    .grade-wrap .grade-achieved img {
        width: 50px;
    }
    .grade-progress-bar p { 
        font-size: 13px;  
        margin: 12px 0;
    }
    .main-wrap {
        width: 90%; 
    }
    header { 
        margin-left: 120px;
    } 
    .grade-bar { 
        margin-top: 15px;
    } 
    .assignment-subj {
        margin-right: 25px; 
    }
    .assignmt-detail { 
        font-size: 12px; 
    }
    .assignmt-sub-detail h4 {
        font-size: 13px;
        margin-bottom: 5px;
    }
    .assignmt-sub-detail p {
        font-size: 12px;
    }
    .assignmnt-tab-head h3 {
        font-size: 16px; 
    }
    .todays-assignments-tab-details h4 {
        font-size: 16px;
    }
    .upcoming-subject h4 {
        font-size: 16px;
    }
    .upcoming-subject p {
        font-size: 12px;
    }
    .upcoming-section-wrap {
        margin-left: 30px;
        width: 45%;
    }
    .upcoming-tab img {
        width: 25px;
    }
    .calendar-cover .calendar-dates .days .day { 
        width: 12%;
    }
    .calendar-cover .calendar-btn { 
        font-size: 11pt;
    }
    .syllabus-tab .join-class-btn {
        padding: 6px 18px;
    }
    .syllabus-tab h5 {
        font-size: 13px;
        margin-bottom: 9px;
    }
    .syllabus-main { 
        margin-top: 10px;
    }
    .syllabus-image img {
        width: 34px;
    } 
    .check-syllabus h5 {
        font-size: 13px; 
    } 
    .remark-detail {
        font-size: 12px;
    }
    /****************Teachers flow*******************/
    .upcoming-classes-tab .class-Sec img {
        width: 50px;
    }
    .class-det {
        padding: 10px 10px;
    }
    .calendar-cover {
        padding: 10px; 
    }
    .attendance-main .syllabus-image img {
        width: 50px;
    }
    .attendance-main .syllabus-tab { 
        padding: 15px;
        margin-right: 20px;
    }
    .cleate-assignmt .re-submit-btn .join-class-btn { 
        padding: 6px 18px;
    }
    .cleate-assignmt {
        width: 17%;
    }
    .attendance-main .syllabus-tab {
        width: 17%;
    }
    .assignment-class-main .assignment-subj {
        margin-right: 18px;
        width: 37%;
    }
    .assignmt-submit-head h3 {
        font-size: 14px;
    }
    .assignmt-submit-head p, .assignmt-submit-head span {
        font-size: 12px;
    }
    .assignmt-bott { 
        font-size: 12px; 
    }
    .assignmt-detail {
        font-size: 12px;
    }
    .assignmt-bott {
        font-size: 12px;
    }
    .attendance-list {
        width: 80%; 
    }
    .syllabus-wrap {
        width: 93%;
    }
    .test-wrap { 
        width: 90%;
    }
    .test-tab { 
        width: 48%; 
        margin-right: 12px;
    }
    .login-box { 
        margin-top: 25px;
    }
    .login-image {
        width: 36%;
    }
    video.login-video {
        width: 36%;
    }
    .login-box {
        margin-left: 36%;
        margin-top: 44px;
    } 
    .login-header:after { 
        width: 525px;
        height: 525px;
        bottom: -185px;
    }         
}
@media only screen and (max-width:1280px) and (min-width:1199px){ 
    .login-image {
        width: 44%;
        left: 6%;
    }
    /* video.login-video {
        width: 44%;
        left: 6%;
    } */
    video.login-video {
        width: 33%;
        top: auto;
        bottom: 15%;
    }
}
@media only screen and (max-width:1200px){
  
    .ui-datepicker td span, .ui-datepicker td a { 
        height: 32px;
    }
    .common_margin {
        width: 76%;
    }
    .class-tab {
        flex-basis: 24%; 
    }
}
@media only screen and (max-width:1100px){
    .common_margin {
        width: 74%;
    }
    
}
@media only screen and (max-width:1024px){
    .user-login-section {
        width: 22%; 
        margin-left: 2%;
    }
    header { 
        margin-left: 125px;
    }
    .main-wrap { 
        margin-left: 0px;
    }
    .class-tab-img { 
        width: 80px; 
        height: 80px; 
    }
    .class-tab-details h4 { 
        font-size: 13px; 
    }
    .join-class-btn { 
        padding: 6px 25px; 
    }
    .common-heading {
        font-size: 16px;
        font-weight: 600;
    }
    .todays-assignments-tab-details h4 {
        font-size: 14px;
    }
    .todays-assignments-tab img {
        width: 30px;
    } 
    .logo-name h3 {
        line-height: 20px;
        font-size: 28px;
    }
    .logo-name {
        margin-left: 15px;
    }
    .sideMenu ul li.list { 
        font-size: 13px;
    }
    .sideMenu ul li img {
        margin-right: 17px;
        width: 18px;
    }
    .grade-wrap img {
        width: 35px;
    }
    .grade-wrap .grade-achieved img {
        width: 45px;
    } 
    .view-more-link { 
        font-size: 13px; 
    }
    .grade-wrap { 
        margin: 17px 0;
    } 
    /****************Teachers flow*******************/
    .calendar-cover .calendar-dates .days .day {
        width: 11%;
    }
    .attendance-list {
        width: 88%;
    }
    .test-details {
        padding: 10px;
    }
    .calendar-cover .calendar-dates .days .day { 
        padding: 2%;
    }
    .admission-cover { 
        width: 75%;
    }
    .login-image {
        width: 35%;
    }
    video.login-video {
        width: 35%;
    }
    .login-body { 
        padding: 30px 150px; 
    }
    .login-box-wrap {
        width: 60%; 
    }
    .ui-datepicker td span, .ui-datepicker td a { 
        padding: 14px; 
    }
    .calendar-main {
        width: 60%; 
    }
    .ui-datepicker td span, .ui-datepicker td a {
        height: 43px;
    }
    .ui-datepicker td {
        padding: 15px 0px;
    }
    .main-wrap {
        width: 100%;
    }
    .syllabus-wrap {
        width: 100%;
    }
    .ui-datepicker td {
        padding: 5px 0px;
    }
    .ui-datepicker td span, .ui-datepicker td a {
        height: 48px;
    }
    .login-box { 
        padding: 20px; 
        width: 330px;
        margin-left: 180px;

    }
    .login-form-row {
        margin-bottom: 0px;
    }
    .login-image {
        width: 47%;
    }
    video.login-video {
        width: 47%;
    }
    .login-form-row:last-child { 
        margin-top: 10px;
    }
    .login-box h3 { 
        margin-bottom: 10px;
    }
    .my-grade-sec-one { 
        margin: 0 15px 0 0; 
    }
    .my-grade-sec-one p { 
        font-size: 13px;
    }
    .noti-para-sec p {
    font-size: 13px;
}
.noti-wrap-sec-right-inner p:nth-child(1) { 
    font-size: 13px; 
}
.syllabus-tab { 
    padding: 20px;
}
.syllabus-tab .join-class-btn a {
    color: #fff;
}
.class-tab {
    flex-basis: 27%; 
    margin-bottom: 15px;
}
.class-section-main { 
    justify-content: flex-start; 
}
.main-inner-content {
    width: 100% !important;
}
.common_margin {
    width: 72%;
}
.att-subject img {
    width: 25px;
}
.syllabus-tab .join-class-btn {
    padding: 6px 17px;
}
.login-wrap-open ul li { 
    font-size: 13px; 
}
.my-info-inner { 
    width: 59%;
}
.check-syllabus-btn {
    right: 0px;
    top: 45px;
}
.syllabus-main { 
    flex-wrap: wrap;
}
.syllabus-tab { 
    margin-bottom: 20px;
}
.syllabus-tab { 
    width: 158px;
}
.my-info-inner {
    width: 92%;
}
.user-info-row-one {
    width: 100%;
}
}
@media only screen and (max-width:992px){  
    header { 
        position: relative;
        margin-left: 70px;
        padding: 20px 0 15px;
    }
  
    .search-bar-wrap {
        width: 63%;  
    }
    .user-login-section {
        width: 25%;
        margin-left: 8%;
    } 
    .upcoming-subject h4 {
        font-size: 14px;
    }
    .assignmt-sub-detail h4 {
        font-size: 12px;
        margin-bottom: 10px;
    }
    .date-month-picker {
        font-size: 14px;
    } 
    .syllabus-tab { 
        margin-right: 10px;
        padding: 16px;
    } 
    .down-btn-wrap {
        right: -127px;
    }
    /****************Teachers flow*******************/
    .upcoming-section-wrap {
        margin-left: 17px;
        width: 46%;
    }
    .start-btn-wrap .join-class-btn {
        padding: 6px 15px;
    }
    .class-det h5 {
        font-size: 15px;
    }
    .attendance-main .syllabus-tab {
        width: 16%;
    }
    .syllabus-head .date-month-picker {
        margin-right: 5%;
    }
    .cleate-assignmt {
        width: 22%;
    }
    .assignment-class-main .assignment-subj {
        width: 90%;
    }
    .cleate-assignmt { 
        margin-top: 20px;
    }
    .assignmt-submit-head { 
        padding: 12px 5px;
    }
    .assignment-review-cover .due-date h5 {
        font-size: 11px; 
    }
    .calendar-cover .calendar-dates .days .day {
        padding: 3%;
    }
    .admission-start { 
        justify-content: space-between;
        flex-direction: column-reverse;
    }
    .admission-right img {
        width: 37%;
    } 
    .admission-right {
        margin-bottom: 30px;
    }
    .admission-process-wrap {
        padding: 50px 30px;
    }
    .admission-cover { 
        width: 90%;
    }
    .test-wrap {
        width: 100%;
    }
    .test-footer .join-class-btn {
        padding: 6px 8px;
    }
    .notifications { 
        width: 300px;
    }
    .login-box-wrap {
        width: 100%;
    } 
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
       margin: 8px auto;
    }
    .login-image {
        width: 40%;
    }
    video.login-video {
        width: 50%;
        bottom: 0;
        top: auto;
    }
    .common_margin {
        margin-left: 220px;
    }
    .calendar-main {
        width: 50%;
    }
    .syllabus-tab h5 { 
        margin-bottom: 3px;
    }
    .calendar-cover {
        width: 100%;
    }
    .ui-state-default { 
        margin: 6px auto !important;
    }
    .outter-check { 
        margin: 0px 8px 0 0;
    }
    .sideMenu { 
        width: 180px;
    } 
    .user-login-section {
        width: 29%;
        margin-left: 5%;
    }
    .common_margin {
        margin-left: 208px;
        width: 70%;
    }
    .att-grade-section {
        display: block;
    }
    .att-section-wrap {
        width: 100%;
        margin-bottom: 35px;
    }
    .grade-section-wrap {
        width: 54%;
    }
    .class-section-main { 
        flex-wrap: wrap;
    }
    .class-tab {
        flex-basis: 33%; 
    }
    .syllabus-main { 
        flex-wrap: wrap;
    } 
    .syllabus-wrap {
        width: 100%;
    }
    .syllabus-tab {
        width: 164px;
        margin-bottom: 20px;
        margin-right: 20px;
    }
    .text-info {
        font-size: 14px;
    }
    .syllabus-tab {
    width: 164px;
    margin-bottom: 20px;
    margin-right: 20px;
}
.attendance-table table {
    width: 90% !important;
}
.ui-state-default {
    width: 34px !important;
    height: 34px !important; 
}
.login-box {
    margin-left: auto;
    margin-top: 66px;
}
} 
@media only screen and (max-width:800px){ 
     .calendar-section-wrap {
        display: block;
    }
    .upcoming-section-wrap {
        margin-left: 17px;
        width: 80%;
        margin-top: 35px;
    }
    .common_margin {
        margin-left: 205px;
        width: 70%;
    }
    .class-tab {
        flex-basis: 50%;
    }
    .login-wrap-open ul li a { 
        padding: 2px 5px; 
    }
    .check-syllabus-btn {
        right: 0;
    }
    .ui-state-default {
        margin: 2px auto !important;
    }
    .stud-table-wrap thead th, .stud-table-wrap tbody td {
        padding: 12px;
        font-size: 13px;
    }  
}
@media only screen and (max-width:768px){
    .user-login-section {
        width: 40%;
        margin-left: 2%;
    }
    .search-bar-wrap {
        width: 56%; 
    }
    .class-section-main {
        display: block;
    }
    .class-tab {
        width: 48%; 
        display: inline-block;
        margin-bottom: 10px;
    }
    .todays-assignments-tab { 
        width: 100%;
    }
    .att-grade-section { 
        display: block; 
    }
    .att-section-wrap{
        width: 100%;
    }
    .grade-section-wrap {
        width: 100%;
        margin-top: 20px;
    } 
    .calendar-main {
        flex-basis: 60%;
    }
    .calendar-cover {
        padding: 10px; 
    }
    .calendar-cover .calendar-dates .days .day.label {  
        font-size: 12px;
    } 
    .assignment-main {
        display: block; 
    } 
    .assignment-sub-tab { 
        padding: 10px; 
    }
    .assignment-detail-main {
        width: 100%;
    }
    .class-section-main {
        display: block; 
    }
    .class-tab {
        width: 48%; 
        margin-bottom: 10px;
    } 
    .syllabus-tab {  
        display: inline-block;
        margin-bottom: 20px;
    }
    .breadcrumb-section .breadcrumb-item { 
        font-size: 14px;
    }
    .modal-content {
        width: 80%;
        margin: 30px auto;
    }
    .down-btn-wrap {
        right: auto;
        left: 0;
        bottom: -70px;
    }
    .page-number { 
        margin-bottom: 3px;
    }
    /****************Teachers flow*******************/
    .attendance-main .syllabus-tab {
        width: 43%;
        margin-right: 10px;
    }
    .cleate-assignmt {
        width: 60%;
    }
    .assignmt-submit-head h3 {
        font-size: 13px;
    } 
    .assignment-view {
        width: 83%;
        margin: auto;
    }
    .assignment-review-cover {
        width: 100%;
    }
    .attendance-main .syllabus-image img {
        width: 85px;
    }
    .attendance-list {
        width: 95%;
        padding: 14px;
    }
    .att-name-div {
        font-size: 13px;
    }
    .att-main .att-row { 
        padding: 0 10px; 
    }
    .att-present, .att-absent {
        width: 24%;
    } 
    .calendar-cover .calendar-dates .days .day {
        padding: 4%;
    }
    .admission-cover {
        width: 100%;
    }
    .register-form {
        width: 100%;
    }
    .upload-doc {
        width: 90%;
    }
    .payment-cover {
        display: block; 
    }
    .admission-cover ul.tabs { 
        margin-bottom: 20px;
    } 
    .start-class-wrap {
        width: 46%;
        display: inline-block;
        margin-right: 10px; 
    }
    .test-wrap {
        display: block; 
    }
    .test-tab { 
        width: 100%; 
        margin-right: 20px;
    }
    .test-footer {
        display: block;
        justify-content: space-between;
    }
    .test-footer h5 { 
        margin-bottom: 5px;
    }
    .test-footer h5 { 
        margin-bottom: 8px;
    }
    .notifications {
        width: 250px;
    }
    .login-body {
        padding: 0 0 25px 0;
    }
    .login-header:after { 
        right: -198px; 
    }
    header.login-header {
        padding: 25px 10px;
    }
    .header-menu-wrap ul li { 
        padding: 0 10px;
    }  
    .login-box {
        margin-top: 70px;
    }
    .ui-datepicker td span, .ui-datepicker td a {
        padding: 12px;
    }
    .login-image {
        width: 52%;
    }
    video.login-video {
        width: 52%;
    }
    .sideMenu {
        height: 100%;
        width: 180px;
    }
    .common_margin {
        margin-left: 200px;
        width: 70%;
    }
    .class-tab {
        width: 32%; 
    }
    .todays-assignments-tab { 
        min-height: auto;
    }
    .todays-assignments-tab img {
        width: 55px;
    }
    .syllabus-wrap {
        width: 100%;
    } 
    .syllabus-tab .join-class-btn {
        padding: 6px 4px;
    }
    .syllabus-main form {
        flex-basis: 25%;
    }
    .upcoming-section-wrap {
        flex-basis: 40%;
        width: auto;
    }
    .ui-state-default {
        margin: 2px auto !important;
    }
    .upcoming-tab { 
        padding: 15px 10px;
    }
    .upcoming-subject {
        width: 43%;
        margin-left: 15px;
    }
    .upcoming-date {
        width: 27%; 
    }
    .upcoming-subject { 
        margin-left: 3px;
    }
    .assignment-main {
        display: flex;
    }
    .assignment-subj {
        flex-basis: 40%;
    }
    .assignment-detail-main {
        width: 55%;
    }
    .assignment-subj-calendar .calendar-cover { 
        right: -45px; 
    }
    .assignmt-detail { 
        -webkit-line-clamp: 2; 
    }
    .my-grade-sec-one {
        width: 32%; 
    }
    .noti-wrap-sec {
        display: flex !important;
    }
    .noti-wrap-sec-right {
        width: 90%;
        margin-top: 9px !important;
    }
    .content-last-sec {
        display: block; 
    }
    .content-last-sec li { 
        width: 55%;
    }
    .content-last-sec li:first-child {
        width: 44%;
    }
    .content-last-sec li:nth-child(2) {
        display: block; 
    }
    .content-last-sec li:last-child {
        display: block; 
    }
    .my-info-inner {
        width: 100%;
    }
    .user-info-.mb-4 img {
        width: 155px !important;
    }
    .login-box {
        margin-top: 70px;
        margin-left: 405px;
    } 
    video.login-video {
        /* display: none; */
        bottom: 0;
        top: auto;
    }
    .login-box {
        margin-top: 172px;
        margin-left: auto;
        margin-right: auto;
    }
} 
@media only screen and (max-width:600px){
    .login-box-wrap {
        width: 85%;
        margin: auto;
    }
    .mobileMenu {
        display: block;
        position: absolute;
        top: 18px;
        left: -35px;
        color: #032da1;
        font-size: 27px;
        cursor: pointer;
    } 
    .sideMenu { 
        width: 0; 
        left: -14px;
    }
    .side-menu-open {
        width: 176px;
        left: 0;
    }
    .common_margin {
        margin-left: 38px;
        width: 88%;
    }
    .mobileMenu { 
        left: -28px; 
    }
    main.common_margin {
        margin-left: 22px;
        width: 90%;
    }
    .class-tab-details p { 
        width: 94px;
    }
    .class-tab {
        width: 45%;
    }
    .att-bar { 
        width: 244px; 
    }
    .sideMenu { 
        top: 57px;
    }
    .check-syllabus-btn { 
        right: 0px;
        top: 43px;
    }
    .syllabus-main {
        display: block; 
    }
    .syllabus-tab {
        width: 80%;
    }
    .syllabus-tab .join-class-btn {
        padding: 6px 20px;
    }
    .syllabus-main form { 
        text-align: center;
    }
    .attendance-table table {
        width: 100% !important;
    }
    .attendance-table th, .attendance-table td {
        padding: 5px 6px; 
        font-size: 13px; 
    }
    .calendar-section-wrap {
        display: block;
    }
    .calendar-main {
        width: 100%;
    }
    .user-wrap h5 span { 
        width: 56px;
    }
    .assignment-main {
        display: block;
    }
    .assignment-subj { 
        width: 100%;
    }
    .assignment-detail-main {
        width: 100%;
    }
    .content-heading-sec, .content-heading-sec-two { 
        font-size: 16px;
    }
    .my-grade-sec-one { 
        height: 120px !important; 
    }
    .noti-wrap-sec {
        display: block !important;
    }
    .content-last-sec {
        display: flex !important;
    }
    .assignment-subj-calendar .calendar-cover {
        right: -185px;
    }
    .noti-wrap-sec-right {
        width: 100%; 
    }
    .login-wrap-open ul li a { 
        padding: 2px 2px; 
    }
    .login-wrap-open ul li span {
        margin-right: 4px;
        font-size: 13px;
    }
    .login-wrap-open { 
        padding: 5px 5px;
    }
    .my-info-inner {
        width: 100%;
    }
    .my-info-header li {
        font-size: 14px; 
    }
    .user-info-one { 
        width: 76%; 
    }
    .paid-space {
        margin: 0 0 0 10px;
    }
    .fees-pay-btn { 
        margin: 0 0 0 8px; 
    }
    .user-info-one-fees p:nth-child(1) {
        width: 25%; 
        font-size: 13px;
    }
    .sele-sub-opt-two li { 
        display: block; 
    }
    .outter-pay-wrap {
        width: 90%;
        display: flex;
    }
    .outter-check {
        width: 18px;
        height: 18px;
    }
    .fees-pay-btn { 
        padding: 7px 14px;
    }
    .user-info-one-fees p:nth-child(1) {
        width: 32%; 
    }
    .user-login-head { 
        height: 100%;
    }
    .notification-row .text-white { 
        width: 167px;
    }
    .login-box {
        margin-left: auto;
        margin-top: 200px;
    }
}
@media only screen and (max-width:500px){
    header { 
        margin-left: 35px; 
    }
    .mobileMenu { 
        top: 16px; 
        font-size: 20px;
    }
    .user-wrap img {
        width: 13px;
        margin-right: 5px;
    }
    .user-login-head { 
        padding: 5px 6px;
    }
    .user-wrap h5 {
        font-size: 13px;
    }
    .notification-icon-wrap img {
        width: 13px;
    }
    .search-bar-wrap {  
        width: 52%;
    }
    .search-bar-wrap input[type="text"] { 
        font-size: 12px;
    }
    .user-login-section {
        width: 43%;
        margin-left: 2%;
    }
    .user-wrap h5 span { 
        margin-right: 0px;
    }
    .user-wrap { 
        margin-left: 5px; 
    } 
    .todays-assignments-tab { 
        padding: 10px;
    }
    .att-row {
        display: block;
    }
    .todays-assignments-tab { 
        margin-bottom: 13px;
    }
    .att-bar {
        margin-left: 0;  
        width: 200px;
        margin: 7px 0;
        display: inline-block;
    }
    .att-number { 
        font-size: 12px;
        margin: 0 0 0 4px;
        display: inline-block;
        vertical-align: top;
    }
    .upcoming-tab {  
        padding: 13px 10px;   
        margin-bottom: 13px; 
    }
    .assignment-detail { 
        padding: 15px;
    }
    .assignmt-date {
        font-size: 12px;
    }
    .assignmt-sub-name h5 {
        font-size: 15px;
    }
    .assignmt-sub-name p {
        font-size: 12px;
    }
    .uploaded-assignmnts img { 
        padding: 5px 3px;
    }
    .uploaded-img {
        height: 59px;
    }  
    .modal-content {
        width: 80%;
        margin: 30px auto;
    }
    .main-wrap {
        width: 95%;
    }
    .modal-content .close { 
        font-size: 16px;
    }
    .down-btn-wrap {
        left: 0;
        bottom: -54px;
    }
    .page-number { 
        margin-bottom: 3px;
    }
    /****************Teachers flow*******************/
    .user-wrap h5 span {
        margin-right: 0px;
    }
    .attendance-list .att-row {
        display: flex;
    }
    .attendance-list .join-class-btn {
        padding: 6px 10px;
    }
    .att-heading h5 {
        font-size: 13px;
    }
    .attendance-list { 
        padding: 10px;
    }
    .att-main {
        width: 500px;
    }
    .attendance-list { 
        overflow: auto;
    }
    .att-present, .att-absent {
        width: 28%;
    }
    .upcoming-section-wrap {
        width: 95%;
    }
    .upcoming-classes-tab {
        padding: 0;
    }
    .class-Sec { 
        width: 25%;
    }
    .class-det { 
        width: 75%;
    }
    .calendar-cover .calendar-dates .days .day {
        padding: 2%;
    }
    .admission-right { 
        text-align: center;
    }
    .admission-right img {
        width: 57%;
        margin: auto;
    }
    .join-class-btn { 
        font-size: 13px; 
    }
    .admission-left p {
        font-size: 14px; 
    }
    .admission-left h4 { 
        margin-top: 15px;
    }
    .warning { 
        right: 3px;
        top: 5px;  
        width: 17px;
        height: 17px; 
        font-size: 10px;  
    }
    .register-row {
        width: 100%; 
    }
    .upload-doc label {
        width: 45%;
    }
    .upload-doc {
        width: 100%;
    }
    .admission-cover ul.tabs li {
        padding: 10px 5px;
        font-size: 12px;
        text-align: center;
    }
    .admission-cover { 
        margin: 10px 0;
    }
    .payment-modal .modal-content {
        width: 85%; 
    }
    .payment-modal .modal-content .close { 
        right: -5px;
        top: -27px;  
    }
    .payment-done-cover p { 
        width: 95%; 
    }
    .payment-done-cover { 
        padding: 10px; 
    }
    .payment-modal .modal-dialog {
        max-width: 500px;
        margin: 8.75rem auto;
    }
    .start-class-wrap {
        width: 45%;
        margin: 0 10px 0 0;
    }
    .attendance-main .syllabus-image img {
        width: 70px;
    }
    .upload-doc label.upload-btn { 
        width: 78px; 
    }
    .upload-doc label { 
        font-size: 13px;
    }
    .test-wrap {
        width: 100%;
    }
    .notifications {
        width: 210px;
        right: 0;
        padding: 10px;
    }
    .notifications ul li h5 {
        font-size: 11px;
    }
    .notifications ul li p {
        font-size: 11px; 
    }
    .fa-trash-alt {
        width: 10px;
        font-size: 14px;
    }
    .login-box { 
        width: 100%; 
    }
    .login-header:after {
        right: -99px;
        bottom: -50px;
        width: 255px;
        height: 255px;
    } 
    .header-menu-wrap ul li {
        padding: 0 10px;
        font-size: 13px;
    }
    .header-menu-wrap ul li:last-child {
        margin-top: 12px;
    }
    .login-box {
        padding: 35px 20px;
    }
    .logo-name {
        margin-left: 6px;
    }
    .login-mob-menu {
        display: block;
    }
    .login-mob-menu {
        display: block;
        position: absolute;
        right: 0px;
        color: #032da1;
    }
    .mob-menu {
        position: absolute;
        right: 0;
        width: 160px;
        text-align: left;
        background: white;
        padding:10px 5px;
        border-radius: 8px;
        top: 22px;
        box-shadow: 0px 3px 6px #00000029;
        display: none;
        transition: 0.5s;
    } 
    .mob-menu li .join-class-btn {
        padding: 10px 8px;
        font-size: 12px;
    }
    .mob-menu-open{
        display: block;
        transition: 0.5s;
    }
    .login-box {
        margin-top: 21px;
    }
    .login-image {
        width: 63%;
    }
    video.login-video {
        width: 63%;
    }
    .login-box h3 {
        font-size: 18px; 
    }
    .admission-process-wrap { 
        padding: 28px 30px;
    }
}