@media (min-width: 980px) {
    /*-----*/
    .custom-bar-chart {
        margin-bottom: 40px;
    }
}




@media (min-width: 768px) and (max-width: 979px) {

    /*-----*/
    .custom-bar-chart {
        margin-bottom: 40px;
    }

    /*chat room*/


}

    @media (max-width: 768px) {
      
        .login-bottom {
            position: relative;
            width: 100%;
            height: auto;
            padding-left: 15px;
        }

        #sidebar.active {
            min-width: 80px;
            max-width: 80px;
            text-align: center;
            margin-left: -80px !important;
        }

        .login-bottom-time h1 {
            font-size: 49px !important;
            color: white !important;
            float: left !important;
            text-align: center;
            height: 100%;
            margin-top: 14px;
            width:100%;
            margin-bottom:-71px;
        }

        .login-bottom-date h1 {
            font-size: 30px !important;
            color: white !important;
            letter-spacing: 3px;
            margin-bottom: 0px;
            margin-top: -56px;
            text-align: center;
            /*margin-left: 67px !important;*/
        }
        .uer-dashboard {
            margin-top: -45px;
            float: left;
            margin-left: 12px;
        }

        .login-bottom-date h4 {
            vertical-align: bottom;
            position: relative;
            height: 100%;
            font-size: 14px !important;
            margin-top: 2px !important;
            color: white;
            /*margin-left: 73px;*/
            margin-bottom: 22px;
            letter-spacing: 2px;
        }

        .login-bottom-time h1    {
            float: left;
            vertical-align: bottom;
            position: relative;
            height: 100%;
            margin-top: 60px !important;
            color: white;
          
        }

       
        .login-bottom-time, .login-bottom-date {
            float: left !important;
            margin-top: 0px !important;
            width: 100%;
            text-align: center;
            height: 100%;
        }

        /*.input-group {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            width: 100%;
            height: 39px !important;
        }*/

        .submit-button {
            height: 39px !important;
            margin-top: -2px;
            margin-left: -16px;
            /*width: 291px;*/
        }

        /* Reappearing the sidebar on toggle button click */
        #sidebar {
            margin-left: 0;
        }

        .form-login {
            max-width: 330px;
            margin-top: 15px !important;
            background-color: transparent;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            font-size: 12px;
        }

        /*.login-bottom-progress {
            float: right;
            width: 77% !important;
            height: 100%;
            margin-right: 46px !important;
            margin-top: 12px !important;
            margin-bottom: -28px !important;
        }*/

        .login-bottom-time hr {
            border: none;
            border-right: 0px solid hsl(0, 0%, 0%) !important;
            height: 80px;
            float: left;
            width: 1px;
            margin-left: 20px;
            margin-right: 20px;
        }

      

        .forgot {
            padding: 10px 12px;
            /*margin-left: 93px !important;*/
            height: 39px !important;
            text-align: center;
        }

        hr.style-two {
            border: 0;
            height: 3px;
            background-image: linear-gradient(to right, rgba(50, 112, 140, 0), rgba(50, 112, 140, 0.75), rgba(50, 112, 140, 0));
            margin-bottom: 17px !important;
            margin-top: 2px !important;
        }

        .btn {
            margin-bottom: 12px !important;
        }
        /* full calendar fix */
        .fc-header-right {
            left: 25px;
            position: absolute;
        }

        .fc-header-left .fc-button {
            margin: 0px !important;
            top: -10px !important;
        }

        .fc-header-right .fc-button {
            margin: 0px !important;
            top: -50px !important;
        }

        .fc-state-active, .fc-state-active .fc-button-inner, .fc-state-hover, .fc-state-hover .fc-button-inner {
            background: none !important;
            color: #FFFFFF !important;
        }

        .fc-state-default, .fc-state-default .fc-button-inner {
            background: none !important;
        }

        .fc-button {
            border: none !important;
            margin-right: 2px;
        }

        .fc-view {
            top: 0px !important;
        }

        .fc-button .fc-button-inner {
            margin: 0px !important;
            padding: 2px !important;
            border: none !important;
            margin-right: 2px !important;
            background-color: #fafafa !important;
            background-image: -moz-linear-gradient(top, #fafafa, #efefef) !important;
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#efefef)) !important;
            background-image: -webkit-linear-gradient(top, #fafafa, #efefef) !important;
            background-image: -o-linear-gradient(top, #fafafa, #efefef) !important;
            background-image: linear-gradient(to bottom, #fafafa, #efefef) !important;
            filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef', GradientType=0) !important;
            -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important;
            -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important;
            box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important;
            -webkit-border-radius: 3px !important;
            -moz-border-radius: 3px !important;
            border-radius: 3px !important;
            color: #646464 !important;
            border: 1px solid #ddd !important;
            text-shadow: 0 1px 0px rgba(255, 255, 255, .6) !important;
            text-align: center;
        }

        .fc-button.fc-state-disabled .fc-button-inner {
            color: #bcbbbb !important;
        }

        .fc-button.fc-state-active .fc-button-inner {
            background-color: #e5e4e4 !important;
            background-image: -moz-linear-gradient(top, #e5e4e4, #dddcdc) !important;
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e4e4), to(#dddcdc)) !important;
            background-image: -webkit-linear-gradient(top, #e5e4e4, #dddcdc) !important;
            background-image: -o-linear-gradient(top, #e5e4e4, #dddcdc) !important;
            background-image: linear-gradient(to bottom, #e5e4e4, #dddcdc) !important;
            filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e5e4e4', endColorstr='#dddcdc', GradientType=0) !important;
        }

        .fc-content {
            margin-top: 50px;
        }

        .fc-header-title h2 {
            line-height: 40px !important;
            font-size: 12px !important;
        }

        .fc-header {
            margin-bottom: 0px !important;
        }

        /*--*/

        /*.chart-position {*/
        /*margin-top: 0px;*/
        /*}*/

        .stepy-titles li {
            margin: 10px 3px;
        }

        /*-----*/
        .custom-bar-chart {
            margin-bottom: 40px;
        }

        /*menu icon plus minus*/
        .dcjq-icon {
            top: 10px;
        }

        ul.sidebar-menu li ul.sub li a {
            padding: 0;
        }

        /*---*/

        .img-responsive {
            width: 100%;
        }

        /*omaima*/

        .login-bottom-progress {
            float: right;
            width: 84% !important;
            height: 100%;
            margin-right:10px!important;
            margin-top: 12px !important;
            margin-bottom: 48px !important;
        }




    }



    @media (max-width: 480px) {

        .notify-row, .search, .dont-show, .inbox-head .sr-input, .inbox-head .sr-btn {
            display: none;
        }

        #top_menu .nav > li, ul.top-menu > li {
            float: right;
        }

        .hidden-phone {
            display: none !important;
        }

        .chart-position {
            margin-top: 0px;
        }

        .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
            background-color: #ccc;
            border-color: #ccc;
        }
    }

    @media (max-width:320px) {
        .login-social-link a {
            padding: 15px 17px !important;
        }

        .notify-row, .search, .dont-show, .inbox-head .sr-input, .inbox-head .sr-btn {
            display: none;
        }

        #top_menu .nav > li, ul.top-menu > li {
            float: right;
        }

        .hidden-phone {
            display: none !important;
        }

        .chart-position {
            margin-top: 0px;
        }

        .lock-wrapper {
            margin: 10% auto;
            max-width: 310px;
        }

        .lock-input {
            width: 82%;
        }

        .cmt-form {
            display: inline-block;
            width: 75%;
        }

        .login-bottom-time h1 {
            float: left;
            vertical-align: bottom;
            position: relative;
            height: 100%;
            margin-top: -12px !important;
            color: white;
        }
        .login-bottom-date h1 {
            font-size: 30px !important;
            color: white !important;
            letter-spacing: 3px;
            margin-bottom: 0px;
            margin-top: -115px;
            text-align: center;
            /*margin-left: 70px !important;*/
        }
      

        .login-bottom-date h4 {
            vertical-align: bottom;
            position: relative;
            height: 100%;
            font-size: 14px !important;
            margin-top: 2px !important;
            color: white;
            /*margin-left: 73px;*/
            margin-bottom: 22px;
            letter-spacing: 2px;
        }

        .login-bottom-time h4 {
            float: left;
            vertical-align: bottom;
            position: relative;
            height: 100%;
            margin-top: 25px !important;
            color: white;
        }


        .login-bottom-time, .login-bottom-date {
            float: left !important;
            margin-top: 50px !important;
            text-align: center;
        }

        /*.input-group {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            width: 100%;
            height: 39px !important;
        }*/

        .submit-button {
            height: 39px !important;
            margin-top: -2px;
            margin-left: -16px;
            width: 100%;
        }

        #sidebar {
            margin-left: 0;
        }

        .form-login {
            max-width: 330px;
            margin-top: 15px !important;
            background-color: transparent;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            font-size: 12px;
        }

        .login-bottom-progress {
            float: right;
            width: 77%;
            height: 100%;
            margin-right: 26px !important;
            margin-top: -34px !important;
            margin-bottom: -9px !important;
        }

        .login-bottom-time hr {
            border: none;
            border-right: 0px solid hsl(0, 0%, 0%) !important;
            height: 80px;
            float: left;
            width: 1px;
            margin-left: 20px;
            margin-right: 20px;
        }

        .switch {
            /*margin-top: 7px !important;
            margin-left: -25px !important;*/
        }

        .forgot {
            padding: 10px 12px;
            margin-left: -30px;
        }
        .ModeLoginPage {
            right: 12px;
        }

        hr.style-two {
            border: 0;
            height: 3px;
            background-image: linear-gradient(to right, rgba(50, 112, 140, 0), rgba(50, 112, 140, 0.75), rgba(50, 112, 140, 0));
            margin-bottom: 17px !important;
            margin-top: 2px !important;
        }

        .btn {
            margin-bottom: 12px !important;
        }
    }


    

    /*Omaima*/

    /*I Pad*/


@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {



    .login-bottom-progress {
        float: right;
        width: 60%;
        height: 100%;
        margin-right: 14px;
    }

}


/*I Phone X */

@media only screen and (device-width : 812px ) and (device-height :375px ) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) {

    .login-bottom {
        position: relative;
        width: 100%;
        height: auto;
        padding-left: 15px;
    }

    #sidebar.active {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }

    .login-bottom-time h1 {
        font-size: 49px !important;
        color: white !important;
        float: left !important;
        text-align: center;
        height: 100%;
        margin-top: 14px;
        width: 100%;
        margin-bottom: -71px;
    }

    .login-bottom-date h1 {
        font-size: 30px !important;
        color: white !important;
        letter-spacing: 3px;
        margin-bottom: 0px;
        margin-top: -56px;
        text-align: center;
        /*margin-left: 67px !important;*/
    }

    .uer-dashboard {
        margin-top: -45px;
        float: left;
        margin-left: 12px;
    }

    .login-bottom-date h4 {
        vertical-align: bottom;
        position: relative;
        height: 100%;
        font-size: 14px !important;
        margin-top: 2px !important;
        color: white;
        /*margin-left: 73px;*/
        margin-bottom: 22px;
        letter-spacing: 2px;
    }

    .login-bottom-time h1 {
        float: left;
        vertical-align: bottom;
        position: relative;
        height: 100%;
        margin-top: 60px !important;
        color: white;
    }


    .login-bottom-time, .login-bottom-date {
        float: left !important;
        margin-top: 0px !important;
        width: 100%;
        text-align: center;
        height: 100%;
    }

    /*.input-group {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            width: 100%;
            height: 39px !important;
        }*/

    .submit-button {
        height: 39px !important;
        margin-top: -2px;
        margin-left: -16px;
        /*width: 291px;*/
    }

    /* Reappearing the sidebar on toggle button click */
    #sidebar {
        margin-left: 0;
    }

    .form-login {
        max-width: 330px;
        margin-top: 15px !important;
        background-color: transparent;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        font-size: 12px;
    }

    /*.login-bottom-progress {
            float: right;
            width: 77% !important;
            height: 100%;
            margin-right: 46px !important;
            margin-top: 12px !important;
            margin-bottom: -28px !important;
        }*/

    .login-bottom-time hr {
        border: none;
        border-right: 0px solid hsl(0, 0%, 0%) !important;
        height: 80px;
        float: left;
        width: 1px;
        margin-left: 20px;
        margin-right: 20px;
    }



    .forgot {
        padding: 10px 12px;
        /*margin-left: 93px !important;*/
        height: 39px !important;
        text-align: center;
    }

    hr.style-two {
        border: 0;
        height: 3px;
        background-image: linear-gradient(to right, rgba(50, 112, 140, 0), rgba(50, 112, 140, 0.75), rgba(50, 112, 140, 0));
        margin-bottom: 17px !important;
        margin-top: 2px !important;
    }

    .btn {
        margin-bottom: 12px !important;
    }
    /* full calendar fix */
    .fc-header-right {
        left: 25px;
        position: absolute;
    }

    .fc-header-left .fc-button {
        margin: 0px !important;
        top: -10px !important;
    }

    .fc-header-right .fc-button {
        margin: 0px !important;
        top: -50px !important;
    }

    .fc-state-active, .fc-state-active .fc-button-inner, .fc-state-hover, .fc-state-hover .fc-button-inner {
        background: none !important;
        color: #FFFFFF !important;
    }

    .fc-state-default, .fc-state-default .fc-button-inner {
        background: none !important;
    }

    .fc-button {
        border: none !important;
        margin-right: 2px;
    }

    .fc-view {
        top: 0px !important;
    }

    .fc-button .fc-button-inner {
        margin: 0px !important;
        padding: 2px !important;
        border: none !important;
        margin-right: 2px !important;
        background-color: #fafafa !important;
        background-image: -moz-linear-gradient(top, #fafafa, #efefef) !important;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#efefef)) !important;
        background-image: -webkit-linear-gradient(top, #fafafa, #efefef) !important;
        background-image: -o-linear-gradient(top, #fafafa, #efefef) !important;
        background-image: linear-gradient(to bottom, #fafafa, #efefef) !important;
        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef', GradientType=0) !important;
        -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important;
        -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important;
        box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important;
        -webkit-border-radius: 3px !important;
        -moz-border-radius: 3px !important;
        border-radius: 3px !important;
        color: #646464 !important;
        border: 1px solid #ddd !important;
        text-shadow: 0 1px 0px rgba(255, 255, 255, .6) !important;
        text-align: center;
    }

    .fc-button.fc-state-disabled .fc-button-inner {
        color: #bcbbbb !important;
    }

    .fc-button.fc-state-active .fc-button-inner {
        background-color: #e5e4e4 !important;
        background-image: -moz-linear-gradient(top, #e5e4e4, #dddcdc) !important;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e4e4), to(#dddcdc)) !important;
        background-image: -webkit-linear-gradient(top, #e5e4e4, #dddcdc) !important;
        background-image: -o-linear-gradient(top, #e5e4e4, #dddcdc) !important;
        background-image: linear-gradient(to bottom, #e5e4e4, #dddcdc) !important;
        filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e5e4e4', endColorstr='#dddcdc', GradientType=0) !important;
    }

    .fc-content {
        margin-top: 50px;
    }

    .fc-header-title h2 {
        line-height: 40px !important;
        font-size: 12px !important;
    }

    .fc-header {
        margin-bottom: 0px !important;
    }

    /*--*/

    /*.chart-position {*/
    /*margin-top: 0px;*/
    /*}*/

    .stepy-titles li {
        margin: 10px 3px;
    }

    /*-----*/
    .custom-bar-chart {
        margin-bottom: 40px;
    }

    /*menu icon plus minus*/
    .dcjq-icon {
        top: 10px;
    }

    ul.sidebar-menu li ul.sub li a {
        padding: 0;
    }

    /*---*/

    .img-responsive {
        width: 100%;
    }

    .login-bottom-progress {
        float: right;
        width: 66% !important;
        height: 100%;
        margin-right: 0px !important;
        margin-top: 12px !important;
        margin-bottom: 48px !important;
    }

    .ModeLoginPage {
        margin-left: 0px;
    }
}


@media only screen and (min-device-width : 375px ) and (max-device-height :812px ) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait){

    .login-bottom-progress {
        float: right;
        height: 100%;
        margin-top: 12px !important;
        margin-bottom: 48px !important;
        width: 97% !important;
        height: 100%;
        margin-right: 4px !important;
    }

    .ModeLoginPage {
        margin-left: -5px;
    }


}


/*Glaxy 5 */
@media screen and (device-width: 360px) and (device-height:640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {

    .login-bottom-progress {
        float: right;
        height: 100%;
        margin-top: 12px !important;
        margin-bottom: 48px !important;
        width: 97% !important;
        height: 100%;
        margin-right: 4px !important;
    }

    .ModeLoginPage {
        margin-left: -5px;
    }


}

 @media screen and (min-device-width: 360px) and (max-device-width: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape){
    .ModeLoginPage {
        margin-left: -5px;
    }
 }


/*I Phone 6/7/8*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){

    .login-bottom-progress {
        float: right;
        height: 100%;
        margin-top: 12px !important;
        margin-bottom: 48px !important;
        width: 97% !important;
        height: 100%;
        margin-right: 4px !important;
    }

    .ModeLoginPage {
        margin-left: -5px;
    }

}


/*I Phone 5/SE*/
@media only screen and (device-width: 320px) and (max-device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {


    .login-bottom-progress {
        float: right;
        width: 100% !important;
        height: 100%;
        margin-right: 0px !important;
        margin-top: 12px !important;
        margin-bottom: 48px !important;
    }

    .login-bottom-time h1{
        margin-left:0px!important;
        margin-bottom:-8px!important;
        float:left;
    }

    .ModeLoginPage {
        margin-left: -5px;
    }

}

@media only screen and (device-width: 568px) and (device-height:320px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

    .login-bottom-progress {
        float: right;
        width: 69% !important;
        height: 100%;
        margin-right: 72px !important;
        margin-top: 12px !important;
        margin-bottom: 48px !important;
    }

    .ModeLoginPage {
        margin-left: -5px;
    }

}


/*Responsive 320 x 670 */

@media only screen and (device-width: 320px) and (max-device-height: 670px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {


    .login-bottom-progress {
        float: right;
        width: 100% !important;
        height: 100%;
        margin-right: 0px !important;
        margin-top: 12px !important;
        margin-bottom: 48px !important;
    }

    .login-bottom-time h1 {
        margin-left: 0px !important;
        margin-bottom: -8px !important;
        float: left;
    }
    .ModeLoginPage {
        margin-left: -15px;
    }
    .ForgetBtn {
        margin-left: -33px;
    }
}

@media only screen and (device-width: 670px) and (device-height:320px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {

    .login-bottom-progress {
        float: right;
        width: 88% !important;
        height: 100%;
        margin-right:-39px !important;
        margin-top: 12px !important;
        margin-bottom: 48px !important;
    }
    .ModeLoginPage {
        margin-left: -5px;
    }
}



/*Desktop responsive */

@media only screen and (min-width:710px) and (max-width:990px){
    .col-md-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 98%;
        flex: 98%;
        max-width: 98%;
    }



}

@media only screen and (min-width:788px) and (max-width:990px) {
    .col-md-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 100%;
        max-width: 100%;
    }
}