@media (min-width: 120px) and (max-width: 1020px) {
    .sidebarUserImage {
        cursor: pointer;
        width: 100%;

        padding: 18px;
    }

    .mainSideBar {

        display: none;

        width: 50vw;
        height: 100vh;
    }

    .mainSideBar div {

        width: 45vw;
    }

    .mainRightBar {

        width: 100%;
    }

    .toggleNavBarMain {

        display: block;
    }

    .loginErrorMessage {

        font-size: 11px;
        padding: 10px;
    }

    .mainDefaultContent {

        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        margin-top: 10vh;
    }

    .MainLogo {

        width: 100%;
    }

    .mainNavbarStyle {

        height: 9vh;
    }

    .MainContentTopStyle {

        width: 100%;
        background-color: #eee;
        height: 90vh;
    }

    .mainAllInputs {

        width: 100%;
        padding: 2px 15px;
    }

    .mainLabelWithInputStyle1 {
        min-width: 130px !important;
        font-size: 14px;

    }

    .inputMainDivStyleForAllStyle1 {
        padding: 5px 0px;
        width: 100% !important;
    }

    .mainContent {
        padding: 70px 20px;
    }

    .pageTitle {
        border-bottom: 1px solid #000;
        margin-bottom: 25px;
        font-size: 35px;
    }

    .mainSchoolDiv {
        width: 100%;
        height: 155px;
        border: 1px solid #000;
        cursor: pointer;
        margin: 7px 0px;
    }



    .mainSchoolDiv .divS1 {

        height: 128px;
    }

    #containerForLogin {

        margin-top: 80px;
        margin-bottom: 140px;
    }


    .mobileName {

        display: initial;
    }

    .desktopName {

        display: none;
    }

    .mainHeaderStyle img {

        margin-right: 15px;
    }

    .aboutMainStyle {

        margin: 0px;
    }

    .loginMainContainer {

        padding: 17px;
    }


    .loginTypeStyle label {

        width: 25%;
    }

    .loginTypeStyle select {

        width: 73%;
    }

    .studentInfoImageMobile {


        display: block;
    }

    .studentInfoImage {


        display: none;
    }

    .tabletFullScreen {


        width: 100% !important;
    }

    .studentInfoImageMobile {


        display: block;
    }

    .studentInfoImage {


        display: none;
    }


    .mainSidebarMenu {
        overflow: scroll;
        height: 233px;
    }

    .responsiveTopBarStatus {
        z-index: 9999 !important;
    }

    .teacherMessageButtonStyle {

        width: 77%;
    }

    .teacherMessageSentTime {

        display: block;
    }



    #viewAfterReleaseResultForStudentModal {
        margin-top: 86px !important;
    }

    #viewAfterReleaseResultForStudentModal .modal-header {
        display: initial !important;
    }

    #viewQuizDetailsForStudentModal {
        margin-top: 86px !important;
    }

    #viewQuizDetailsForStudentModal .modal-header {
        display: initial !important;
    }

    #viewAfterReleaseResultForStudentModalBoth {
        margin-top: 86px !important;
    }

    #viewAfterReleaseResultForStudentModalBoth .modal-header {
        display: initial !important;
    }

    #viewStudentMessageDetailsModal {

        margin-top: 74px;
    }

    #viewStudentInquiryMessageDetailsModal {

        margin-top: 85px;

    }

    .mainStudentContentTop {

        display: table !important;
    }

    #mainAllBatch {
        width: 70% !important;
        display: none;
    }

    .unlockPayment {

        margin-left: 0% !important;

    }

    #mainInstructionsModal {
        margin-top: 42%;

    }

    #feePaymentValue {

        margin-top: 23%;

    }

    #exampleModalSequence {

        margin-top: 21%;
    }

    #studentDetailsForStaff {
        margin-top: 19%;

    }

    #studentDetailsForStaff .modal-body {

        height: 60vh;
        overflow: scroll;
    }

    #viewStudentInquiryMessageDetailsModalMain {

        margin-top: 21%;
    }

    /* .mainStudentContentTop {

        display: none !important;
    } */
    .ocean {

        display: none !important;
    }

    .cursor-outer,
    .cursor-inner {


        display: none;
    }

    #passwordLogin {
        width: 258px !important;
    }
}



/* large screen */

@media (min-width: 1021px) and (max-width: 7021px) {

    .loginTypeStyle label {

        width: 19%;
    }

    .loginTypeStyle select {

        width: 80%;
    }

    #containerForLogin {

        margin-top: 6%;

    }

    .mainSchoolDiv .divS1 {

        height: 137px;
    }

    .mainSchoolDiv {
        width: 100%;
        height: 164px;
        border: 1px solid #000;
        cursor: pointer;
        margin: 10px;
    }

    .pageTitle {
        border-bottom: 1px solid #000;
        margin-bottom: 25px;
        font-size: 35px;
    }



    .mainContent {
        padding: 15px 20px;
    }


    .mainAllInputs {

        width: 100%;
        padding: 2px 15px;
    }

    .mainLabelWithInputStyle1 {
        min-width: 200px !important
    }

    .inputMainDivStyleForAllStyle1 {
        padding: 5px 0px;
        width: 100% !important;
    }




    .MainContentTopStyle {

        width: 100%;
        background-color: #eee;
        height: 90vh;
    }


    .mainNavbarStyle {

        height: 8vh;
    }

    .MainLogo {

        width: 50%;
    }

    .mainDefaultContent {

        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        /* margin-top: 20vh; */
    }


    .sidebarUserImage {
        cursor: pointer;
        width: 100%;

        padding: 18px;
    }

    .mainSideBar {

        display: block ruby;
        width: 10vw;
        height: 100vh;
    }


    .mainRightBar {

        width: 90%;
    }

    .toggleNavBarMain {

        display: none;
    }



    .studentInfoImage {
        height: auto;
        text-align: center;
        border: 1px solid #987;
        margin: 12px 4px;


        margin-top: -15px;
        /* margin-left: 209px; */
        padding: 15px;
        width: 27%;
    }

    .studentInfoImageMobile {


        display: none;
    }

    .studentInfoImage {


        display: block;
    }


    .fullWidthForLargeScreen {
        max-width: 1800px !important;
    }


    .reportBodyContentStyle {
        overflow: scroll;
        height: 520px;
    }

    .teacherMessageButtonStyle {

        width: 85%;
    }

    .teacherMessageSentTime {
        display: flex !important;
    }
}