@media only screen and (min-width: 280px) and (max-width: 700px) {
    .container.login-container {
        padding: 0px !important;
    }

}


    @media only screen and (min-width : 480px) {

        .login-logo {
            display: flex !important;
        }
    }

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

        .login-logo {
            margin: 50px -11px !important;
        }
    }

    @media only screen and (min-width: 320px) and (max-width: 320px) {
        .login-form {
            margin-top: -38px !important;
        }

        .login-logo {
            margin-top: 7px !important;
        }
    }

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

        .login-logo {
            margin-top: 3px !important;
            margin-bottom: 0px !important;
        }

        .login-form {
            margin-top: 10px !important;
            width: 225px !important;
            height: 196px !important;
            margin-left: 189px !important;
        }

            .login-form .forget {
                margin: -1px auto !important;
            }

        .login-footer {
            position: relative !important;
            width: 38% !important;
            display: flex !important;
            align-items: center !important;
            left: 181px !important;
            margin-top: 45px !important;
        }
    }


    @media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation: landscape) {
        .login-logo {
            margin-top: 4px !important;
            margin-bottom: 0px !important;
        }

        .login-form {
            position: relative !important;
            left: 3px !important;
            height: 185px !important;
        }

        .login-footer {
            margin-top: 0px !important;
            position: absolute !important;
            align-items: center !important;
            display: flex !important;
            width: 31% !important;
            left: 34% !important;
            top: 343px !important;
        }

        .login-form #txtUser {
            margin-top: 8px !important;
        }
    }

    @media only screen and (min-device-width: 320px) and (max-device-width: 533px) and (orientation: landscape) {

        .login-form input, button {
            width: 163px !important;
        }

        .login-form {
            width: 217px !important;
        }

        .login-form {
            left: -8px !important;
            height: 162px !important;
        }

        .login-footer {
            width: 39% !important;
            left: 30% !important;
            top: 306px !important;
        }

        .login-form input, button {
            margin: 5px auto !important;
        }

        .login-form .forget {
            margin: 4px auto !important;
        }
    }

    @media only screen and (min-device-width: 280px) and (max-device-width: 663px) and (orientation: landscape) {
        .login-logo {
            margin-top: 4px !important;
            margin-bottom: 0px !important;
        }

        .login-form input, button {
            width: 123px !important;
            margin: 5px auto !important;
            top: -28px !important;
            position: relative !important;
        }

        .login-form {
            width: 217px !important;
        }

        .login-form {
            left: -8px !important;
            height: 162px !important;
        }

        .login-footer {
            left: 30% !important;
            top: 306px !important;
            margin-top: -42px !important;
            display: flex !important;
            width: 37% !important;
            align-items: center;
        }


        .login-form .forget {
            margin: -27px auto !important;
            padding: 5px 0px !important;
        }
    }

/*@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (orientation: landscape) {

    .login-logo {
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }
    .login-form {
        position: relative !important;
        width: 234px !important;
        left: -10px !important;
        height: 193px !important;
    }
        .login-form #txtUser {
            margin-top: 11px !important;
        }
        .login-form .forget {
            margin: 7px auto !important;
        }

    .login-footer {
        top: 99% !important;
        display: flex !important;
        width: 29% !important;
        left: 35% !important;
        margin-top:0px !important;
    }

}*/

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
    .login-logo {
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }

    .login-form {
        position: relative !important;
        width: 211px !important;
        left: 0px !important;
        height: 193px !important;
    }
    .login-footer {
        top: 302px !important;
        display: flex !important;
        width: 35% !important;
        left: 31% !important;
        margin-top: 0px !important;
    }

}

@media only screen and (min-device-width: 411px) and (max-device-width: 823px) and (orientation: landscape) {
    .login-logo {
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }

    .login-form {
        position: relative !important;
        width: 265px !important;
        left: -8px !important;
        height: 236px !important;
    }

    .login-footer {
        top: 388px !important;
        display: flex !important;
        width: 35% !important;
        left: 31% !important;
        margin-top: 0px !important;
        align-items: center;
    }
    .login-form .forget {
        margin: 11px auto !important;
    }


}

@media only screen and (min-device-width: 240px) and (max-device-width: 240px)  {
    .login-logo {
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }

    .login-form {
        position: relative !important;
        width: 181px !important;
        left: -8px !important;
        height: 153px !important;
    }

    .login-footer {
        top: 298px !important;
        display: flex !important;
        left: -5% !important;
        margin-top: 2px !important;
        align-items: center;
    }

    .login-form .forget {
        margin: 5px auto !important;
        padding: 4px 0px !important;
    }
    .login-form input, button {
        margin: 3px auto !important;
        height: 30px !important;
        width:150px !important;
    }
    input#txtUser {
        margin-top: 6px !important;
    }

}

@media only screen and (min-device-width: 480px) and (max-device-width: 854px) and (orientation: landscape) {

    .login-logo {
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }

    .login-form {
        position: relative !important;
        width: 265px !important;
        left: -8px !important;
        height: 236px !important;
    }

    .login-footer {
        top: 388px !important;
        display: flex !important;
        width: 35% !important;
        left: 31% !important;
        margin-top: 0px !important;
        align-items: center;
    }

    .login-form .forget {
        margin: 11px auto !important;
    }
}


@media only screen and (min-device-width: 320px) and (max-device-width: 533px) and (orientation: landscape) {
    .login-logo {
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }

    .login-form {
        position: relative !important;
        width: 210px !important;
        left: 1px !important;
        height: 149px !important;
    }

    .login-footer {
        top: 388px !important;
        display: flex !important;
        width: 41% !important;
        left: 28% !important;
        margin-top: -90px !important;
        align-items: center !important;
    }

    .login-form .forget {
        margin: -2px auto !important;
    }

}

@media only screen and (min-device-width: 412px) and (max-device-width: 732px) and (orientation: landscape) {
    .login-logo {
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }

    .login-form {
        position: relative !important;
        width: 241px !important;
        left: 1px !important;
        height: 210px !important;
    }

    .login-footer {
        top: 453px !important;
        display: flex !important;
        width: 39% !important;
        left: 28% !important;
        margin-top: -90px !important;
        align-items: center !important;
    }

    .login-form .forget {
        margin: 14px auto !important;
    }
}
@media only screen and (min-device-width: 360px) and (max-device-width: 640px) and (orientation: landscape) {
    .login-logo {
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }

    .login-form {
        position: relative !important;
        width: 214px !important;
        left: 1px !important;
        height: 156px !important;
    }

    .login-footer {
        top: 396px !important;
        display: flex !important;
        width: 39% !important;
        left: 29% !important;
        margin-top: -90px !important;
        align-items: center !important;
    }

    .login-form .forget {
        margin: 6px auto !important;
    }

}

@media only screen and (min-device-width: 384px) and (max-device-width: 640px) and (orientation: landscape) {

    .login-form {
        left: 24px !important;
    }
}







    /*@media only screen and (min-width : 360px) and (max-width : 360px) {
    .login-logo {
        margin-top: 4px !important;
        margin-bottom: 0px !important;
    }
    .login-form {
        position: relative !important; 
        left: -8px !important;
        height: 198px !important;
    }
    .login-footer {
        margin-top: 0px !important;
        position: absolute;
        align-items: center !important;
        display: flex !important;
        width: 31% !important;
        left: 34% !important;
        top: 178px !important;
    }

}
*/

    body {
        margin: auto;
        width: 100%;
        background-image: url("../images/login_bg.jpg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        position: fixed;
        /*background-size:contain;*/
    }

    .login-container {
        height: 100%;
        /*border-right: solid 1px #7EA9B5;
  border-left: solid 1px #7EA9B5;*/
        /*background-color: #fff;
  opacity: .4;*/
        text-align: center;
        position: relative;
    }

    .login-logo {
        margin: 50px auto;
        width: 236px;
        height: 73px;
        background-image: url("../images/logo_login_ar.png");
        background-repeat: no-repeat;
        background-position: top center;
    }

    .login-form {
        margin: auto;
        width: 290px;
        height: 310px;
        background-color: #ffffff;
        border: solid 1px #FCFBF9;
        border-top: solid 1px #134e76;
        /* shadow */
        -webkit-box-shadow: 10px 9px 12px -6px rgba(204,204,204,1);
        -moz-box-shadow: 10px 9px 12px -6px rgba(204,204,204,1);
        box-shadow: 10px 9px 12px -6px rgba(204,204,204,1);
    }

    .login-form {
        margin: auto;
        width: 290px;
        height: 310px;
        background-color: #ffffff;
        border: solid 1px #FCFBF9;
        border-top: solid 1px #134e76;
        /* shadow */
        -webkit-box-shadow: 10px 9px 12px -6px rgba(204,204,204,1);
        -moz-box-shadow: 10px 9px 12px -6px rgba(204,204,204,1);
        box-shadow: 10px 9px 12px -6px rgba(204,204,204,1);
    }


        .login-form .line {
            margin: 0px;
            width: 100.5%;
            height: 5px;
            background-color: #134e76;
        }

        .login-form .lang {
            float: right;
            margin-right: -1px;
            padding-top: 9px;
            width: 35px;
            height: 35px;
            background-color: #134e76;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
        }

            .login-form .lang:hover {
                background-color: #E7E7E7 !important;
                color: #134e76;
            }

        .login-form input, button {
            margin: 10px auto;
            height: 30px;
            width: 200px;
            text-align: center;
            border: solid 1px #E1E1E1;
        }

        .login-form button {
            background-color: #134e76;
            color: #ffffff;
            font-weight: bold;
        }

        .login-form input {
            color: #134e76 -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-repeat: no-repeat;
            background-position: center right;
        }

        .login-form #txtUser {
            background-image: url("../images/user-icon.png");
        }

        .login-form #txtUserM {
            background-image: url("../images/user-icon.png");
        }

        .login-form #txtUser:hover {
            background-image: url("../images/user-icon_ov.png");
        }

        .login-form #txtUserM:hover {
            background-image: url("../images/user-icon_ov.png");
        }

        .login-form #txtPassword {
            background-image: url("../images/pass-icon.png");
        }

        .login-form #txtPasswordM {
            background-image: url("../images/pass-icon.png");
        }

        .login-form #txtPassword:hover {
            background-image: url("../images/pass-icon_ov.png");
        }

        .login-form #txtPasswordM:hover {
            background-image: url("../images/pass-icon_ov.png");
        }

        .login-form input:hover {
            background-color: #134e76;
            color: #ffffff;
        }

        .login-form input:first-child {
            margin-top: 50px;
            margin-left: 35px;
        }

        .login-form .forget {
            margin: 50px auto;
            width: 100.5%;
            padding: 12px 0px;
            background-color: #E7E7E7;
            color: #134e76;
            text-decoration: none;
            font-family: Luma-SemiBold;
        }

    .login-footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        text-align: center;
        font-size: 10px;
        font-weight: bold;
        color: #5E605F;
        margin-top: 110px;
    }

    .tab-logo {
        position: relative;
        margin: 5px auto;
        width: 50px;
        height: 25px;
        background-image: url("../images/tab_logo-page.png");
        background-repeat: no-repeat;
        background-position: top center;
    }

    .login-footer .copyright {
        position: relative;
        margin: 5px auto;
        width: 100%;
        text-align: center;
    }



    /* Custom, iPhone Retina portrait */
    @media only screen and (min-width : 320px) {

        .login-logo {
            display: block;
        }

        .login-form {
            margin-top: 10px;
            width: 290px;
            height: 286px;
        }

            .login-form #txtUser {
                margin-top: 50px;
                margin-left: 35px;
            }

            .login-form #txtUserM {
                margin-top: 30px;
                margin-left: 35px;
            }

            .login-form .forget {
                margin: 50px auto;
            }
    }

    /* Extra Small Devices, Phones landscape */
    @media only screen and (min-width : 480px) {

        .login-logo {
            display: none;
        }

        .login-form {
            margin-top: 10px;
            width: 225px;
            height: 240px;
        }

            .login-form #txtUser {
                margin-top: 20px;
                margin-left: 0px;
            }

            .login-form #txtUserM {
                margin-top: 20px;
                margin-left: 0px;
            }

            .login-form .forget {
                margin: 0px auto;
            }
    }

    /* Small Devices, Tablets portrait */
    @media only screen and (min-width : 768px) {

        .login-logo {
            display: block;
        }

        .login-form {
            margin-top: auto;
            width: 290px;
            height: 286px;
        }

            .login-form #txtUser {
                margin-top: 50px;
                margin-left: 35px;
            }

            .login-form #txtUserM {
                margin-top: 30px;
                margin-left: 35px;
            }

            .login-form .forget {
                margin: 50px auto;
            }
    }

    /* Medium Devices, Desktops landscape */
    @media only screen and (min-width : 992px) {

        .login-logo {
            display: block;
        }

        .login-form {
            margin-top: auto;
            width: 290px;
            height: 286px;
        }

            .login-form #txtUser {
                margin-top: 50px;
                margin-left: 35px;
            }

            .login-form #txtUserM {
                margin-top: 30px;
                margin-left: 35px;
            }

            .login-form .forget {
                margin: 50px auto;
            }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

        .login-logo {
            display: block;
        }

        .login-form {
            margin-top: auto;
            width: 290px;
            height: 286px;
        }

            .login-form #txtUser {
                margin-top: 50px;
                margin-left: 35px;
            }

            .login-form #txtUserM {
                margin-top: 30px;
                margin-left: 35px;
            }

            .login-form .forget {
                margin: 50px auto;
            }
    }