@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
    @import url('/_SupportMedia/FontAwesome/css/font-awesome.min.css');

    body, html
    {
	    font-family: 'Roboto', 'Segoe UI', Calibri, Tahoma, Arial, Helvetica, sans-serif;
	    font-size: 15px;
	    color: #454545;
	    line-height: 1.4;
	    margin: 0;
        background: #f1f1f1;
        height: 100%;
        overflow: hidden;
    }



    .loginContainer {
        width:530px;
        background: #fff;
        box-shadow: 0px 9px 45px -5px rgba(0,0,0,0.15);
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        margin: 0 auto;

    }


    .loginContent {padding: 40px 70px;}


    #main {padding:30px 0 10px 15px;}

    .headerLogo { width: 450px; margin: 0 auto; cursor: default; }
    .headerLogoIcon { width: 70px; float: left;  margin: -10px 10px; /*animation: animation-rotate 10000ms linear infinite;*/}
    .headerLogoIcon img { width: 100%; }
    .headerLogoText1 {font-size: 16px; font-weight: 400; margin: 9px 0 3px 0; color: #4fb0cc; line-height: 1; margin-top: 16px;}
    .headerLogoText2 {font-size: 30px; font-weight: 300; color: #2c5172; white-space: nowrap; letter-spacing: -.5px; line-height: 1;}


    @keyframes animation-rotate {
      100% {
        transform: rotate(360deg);
      }
    }


    /*
    textbox {
        font-family: 'Roboto', 'Segoe UI', Calibri, Tahoma, Arial, Helvetica, sans-serif;
	    font-size: 15px;
        color: #454545;
        background: #f7f7f7;
        padding: 8px 20px;
    }
    */

    input[type=text], input[type=password] {
        outline: none;
        height: 32px;
        border: 0px solid #fff;
        /*
        border-top: 0px;
        border-right: 0px;
        border-left: 0px;
        border-bottom: 1px solid #ccc;
        */
        font-family: 'Roboto', 'Segoe UI', Calibri, Tahoma, Arial, Helvetica, sans-serif;
	    font-size: 17px;
        color: #454545;
        background: #f7f7f7;
        padding: 8px 10px 8px 35px;
        width: calc(100% - 45px);
        font-weight: 300;
        
    }

    input[type=submit] {
        outline: none;
        border: 0px solid #fff;
        font-family: 'Roboto', 'Segoe UI', Calibri, Tahoma, Arial, Helvetica, sans-serif;
	    font-size: 17px;
        color: #fff;
        background: #4cbcea;
        padding: 15px 20px;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: all .15s ease;
        font-weight: 300;
    }

    input[type=submit]:hover {
        background: #2c5172;
    }


    .login {
        position: relative;
        margin-bottom: 5px;
    }
    .loginControl {
        width:100%;
    }

    label{
        display: none;
    }


    #UserLogin_UserNameRequired, #UserLogin_PasswordRequired {
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    #UserLogin_UserNameRequired:before, #UserLogin_PasswordRequired:before {
        display: block;
        background: #f7f7f7;
        color: #f75656;
        border-left: 3px solid #f75656;
        height: 48px;
        width: 32px;
        line-height: 45px;
        position: absolute;
        text-align: center;
        top: 0px;
        left: -3px;
        font-family: fontawesome;
    }
    #UserLogin_UserNameRequired:before {
        content: '\f2be';
    }
    #UserLogin_PasswordRequired:before {
        content: '\f023';
        font-size: 17px;
    }



        .fa {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 48px;
            width: 32px;
            text-align: center;
            line-height: 45px;
            overflow: hidden;
            color: #a2acb5; 
        }
        .fa-lock {
            font-size: 17px; 
        }




        ::-webkit-input-placeholder { color: #bcc2c9; } /* WebKit, Blink, Edge */
        :-moz-placeholder { color: #bcc2c9; opacity: 1; } /* Mozilla Firefox 4 to 18 */
        ::-moz-placeholder { color: #bcc2c9; opacity:  1; } /* Mozilla Firefox 19+ */
        :-ms-input-placeholder { color: #bcc2c9 !important; } /* Internet Explorer 10-11 */
        ::-ms-input-placeholder { color: #bcc2c9 !important; } /* Microsoft Edge */






    .error {
        position: relative;
        color:#9e0b0f; 
        background: #ffecec; 
        padding:5px 4px 4px 40px;
        font-size:12px;
        line-height: 30px;
        text-transform: uppercase;
        margin-bottom: 15px; 
        font-weight: 500;
    }

    .error:before {
        display: block;
        padding: 5px 4px 4px 4px;
        background: #f75656;
        color: #fff;
        width: 24px;
        line-height: 30px;
        position: absolute;
        text-align: center;
        top: 0px;
        left: 0px;
        font-family: fontawesome;
        content: '\f06a';
        font-size: 16px;
    }


input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #f7f7f7 inset;
}





/*


    
        
input {font-family:Segoe UI, Tahoma, Sans-Serif; font-size:12px;color:#404040}


.loginContainer .loginContent {background: #ececec; padding:2px 5px; overflow: auto;}
.loginContainer .round_span3 {background: #ececec; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 3px;}
.loginContainer .round_span2 {background: #ececec; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 2px;}
.loginContainer .round_span1 {background: #ececec; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 1px;}

.loginControl {width:100%; *width:85%;}

div.login {padding: 2% 4% 2% 4%; background-color:#ffffff; font-size:12px}

#UserLogin_LoginButton { width:120px; height:27px; color:#404040; font-family:Segoe UI, Calibri, Tahoma, Arial,Helvetica, sans-serif; font-size:14px; line-height:14px;}
#LoginButton { width:120px; height:27px; color:#404040; font-family:Segoe UI, Calibri, Tahoma, Arial,Helvetica, sans-serif; font-size:14px; line-height:14px;}


#main {margin-bottom:10px;}





*/