body {
    margin:0;
    padding:0;
}
div.backgroundContainer {
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    background-color: whitesmoke;
}

img.backgroundImage {
	display:block;
	position: fixed;
	width: calc(100% - 400px);
	min-height:100%;
	min-width: 400px;
	background-color:whitesmoke;
    pointer-events: none;
}

img.backgroundLogo {
    display:block;
	position: fixed;
	width: 20%;
	max-width:300px;
    bottom:4%;
    left:4%;
	background-color:transparent;
    pointer-events: none;
}

div.loginPanel {
    background-image: url('../Content/images/ffffff/bgright.jpg');
	background-repeat: no-repeat;
	background-attachment: local;
	background-position: bottom;
	background-color: #FFF;
    background-size:cover;
	position: fixed;
	right: 0;  /* ltr */
	float: right;  /* ltr */
	height: 100%;
	width: 400px;
    /*max-width:60%;*/
	margin: 0;
	padding: 0;
	z-index: 1;
    overflow:visible;
	/*overflow-y: auto;
	overflow-x: hidden;*/
}

div.loginPanel:after {
    content: '';
    padding: 0;
    color: #333;
    position: absolute;
    left: -10px; 
    bottom: 0;
    white-space: nowrap; 
    z-index: 9999;
    height:50px;
    width:0;
    border: 0 solid transparent;
    border-right: 10px solid #fff;
    border-top: 16px solid transparent;
}

div.loginContainer {
    width:100%;
    position:absolute;
    top: calc(50% - 135px);
}

div.loginContent {
    width:330px;
    height:auto;
    margin:0;
    margin-left: calc(50% - 165px);
}

span.loginTitle {
    font-weight: 500;
    font-size: 16px;
}

img.loginLogo {
    width:200px;
    margin-left:20px;
    margin-bottom:16px;
    pointer-events: none;
}

.loginCompanyLogo {
    float:right;
    margin: 20px;

}
@media only screen and (min-width: 480px) and (max-width: 1280px) and (orientation: landscape ) {
    .loginCompanyLogo {
        float: left;
        margin: 10px;
    }
}


    footer {
        width: 100%;
        height: 2em;
        margin-left: 6px;
        margin-right: 6px;
        position: absolute;
        bottom: 0;
        border-top: solid 1px #808080;
        font: normal 14px "Open Sans", Arial, Verdana;
    }

    .btnLoginFb, .btnLoginLi {
        width: 100%;
        border: 0;
        margin-bottom: 5px;
        color: white;
        text-align: left;
    }

        .btnLoginFb i, .btnLoginLi i {
            vertical-align: middle;
        }

        .btnLoginFb span, .btnLoginLi span {
            font-size: 1.2em;
            vertical-align: middle;
            font-family: Arial;
            margin-left: 0.4em;
        }

    .btnLoginFb {
        background: #3b5998;
    }

    .btnLoginLi {
        background: #0e76a8;
    }

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


        @media only screen and (max-width: 450px) and (orientation: portrait) {
            div.backgroundContainer {
                background-color: #FFF;
            }

            img.backgroundImage {
                display: none !important;
            }

            footer {
                font-size: 11px;
            }
        }

        .loginPanel {
            align-items: center;
        }

        .loginContainer {
            text-align: center;
            align-items: center;
        }

        .loginContent {
            width: 80% !important;
            height: 150px !important;
            padding: 20px !important;
            margin-left: 40px !important;
        }


        #password {
            width: 100%;
        }

        .form-control {
            width: 88% !important;
            text-align: center;
        }

        fieldset {
            padding: 0 30px 0 30px !important;
        }

        footer {
            text-align: center;
        }
    }

    @media only screen and (max-width: 1280px) and (orientation: landscape) {
        .loginLogo {
            width: 40% !important;
        }

        span.ui-button-text {
            height: 12px !important;
            font-size: 13px !important;
        }

        span.field-validation-error {
            font-size: 14px !important;
        }

        .loginPanel {
            align-items: center;
        }

        .loginContainer {
            text-align: center;
            align-items: center;
        }

        .loginContent {
            width: 100% !important;
            padding: 0px !important;
            margin-left: 0 !important;
        }

        #txtUser {
            height: 100%;
            width: 100%;
        }

        #txtPass {
            height: 100%;
            width: 100%;
        }

        /*
    #password {
        height: 80%;
        width: 100%;
    }
        */

        .form-control {
            width: 88% !important;
            text-align: left;
        }

        fieldset {
            padding: 0 30px !important;
        }

        footer {
            text-align: center;
        }

        .btnLoginFb span, .btnLoginLi span {
            font-size: 1em;
            vertical-align: middle;
            font-family: Arial;
            margin-left: 0.4em;
        }


        span.loginTitle {
            font-weight: 500;
            font-size: 13px;
        }
    }
}