@font-face 
{
  font-family: 'Poppins-Regular';
  src: url('../fonts/Poppins-Regular.TTF');
  src: local("?"), url('../fonts/Poppins-Regular.woff') format("woff"), url('../fonts/Poppins-Regular.TTF') format("truetype"); 
}

@font-face 
{
  font-family: 'Poppins-Medium';
  src: url('../fonts/Poppins-Medium.TTF');
  src: local("?"), url('../fonts/Poppins-Medium.woff') format("woff"), url('../fonts/Poppins-Medium.TTF') format("truetype"); 
}

body{font-family:Poppins-Regular, Calibri, Arial; font-size:14px; line-height:1.428571429; color:#73879c;  margin:0;}
 
.login_panel{position: fixed; left:600px; height: 100%; width: 490px; margin: 0; padding: 0; z-index: 1;}
/*.LoginBg{background:url(../images/Login_bg.png) no-repeat left top; position:absolute; top:0; left:0; width:100%; height:100%;}*/
.LoginBg {
    width: 450px;
    height: 100%;
    float: left;
    position: fixed;
    top: 0;
    left: 0;
    /*background: url(../images/Login_LeftBg.png) no-repeat right center;*/
    text-align: center;
    background-color: #fafafa;
}
.LoginLeftIcon{margin:80px auto; width:148px; height:148px; float:none;}

/*.LoginBg1{background:#0098d1; width:350px; height:100%; float:left; position:fixed;}
.LoginBg1:after{content:""; border-top:350px solid transparent; border-left:100px solid #0098d1; border-bottom:350px solid transparent; top:0; right:-100px; position:absolute;}*/

.LoginContentWarper {
    padding: 20px 30px 20px;
    width: 430px;
    margin: 100px 8% 0 0;
    border-radius: 5px;
    overflow: hidden;
    float: right;
    border: 0.5px solid #0098d1;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.Login-Logo {width:100%; height:auto; margin:0 0 30px; padding:7px 0; font-size:30px; color:#fff; text-align:center;}
.LoginSubText{font-size:15px; color:#fff; text-align:center;}

.LoginContentWarper h1 {
    font-size: 22px;
    margin: 20px 0 10px;
    padding: 0 0 10px;
    text-align: center;
    color: #0098d1f2;
    font-weight: 700;
}

.LoginerrMsg { font-size: 11px; color: #f00; margin: -5px 0 5px 0; width: 100%; float: left; display: none; position: absolute;}

.Username {height: 44px; width: 100%; margin-bottom: 10px; -webkit-appearance: none; background: transparent; border:none; border-bottom: 1px solid #73879c; padding: 0 8px 0 25px; outline:none; color:#73879c; font-weight: normal;}

.Password {height: 44px; width: 100%; margin-bottom: 10px; -webkit-appearance: none; background: transparent; border:none; border-bottom: 1px solid #73879c; padding: 0 8px 0 25px; outline:none; color:#73879c;font-weight: normal;}

.PassViewIcon .PassView{position:absolute; top:10px; right:25px; cursor:pointer; padding:3px; display:none;}
.PassViewIcon:hover .PassView{display:block;}

.LoginIcon{width:auto; height:auto; margin:10px 0 0; padding:0; float:left; position: absolute; color:#999;}

.loginmodal-submit {border: 0px; color: #fff; text-shadow: 0 1px rgba(0,0,0,0.1); background-color:#0098d1; padding:8px 20px; margin:5px 0 0; font-size: 16px; text-transform:uppercase; outline:none; width:100%; float:left; font-weight:bold; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; cursor:pointer;}
.loginmodal-submit:hover {border: 0px; background-color: #0f81ac;}

.ForgotPassword{width:100%; color:#0098d1; margin:5px 0 0; float:left;}
.ForgotPassword a {text-decoration:none; color: #0098d1; cursor:pointer; font-weight:normal;} 
.ForgotPassword a:hover{color:#016990; text-decoration:underline;}

/*@media screen and (max-width:1920px){
.LoginBg{width:45%;}
}*/
label{margin:0;}
/*--------------- Start Checkbox CSS -------------------- */
.Checkbox{position:relative; padding-left:25px; margin-bottom:10px; cursor:pointer; font-size:14px; -webkit-user-select:none; -moz-user-select:none;   -ms-user-select:none; user-select:none;	color:#555;	font-weight:normal;}
.Checkbox input {position:absolute; opacity:0; cursor:pointer;}
.CheckboxCheckMark{position:absolute; top:2px; left:0; height:14px; width:14px; background-color:#fff; border:1px solid #ccc; border-radius:3px;}
/*.Checkbox:hover input ~ .checkmark {background-color:#ccc;}*/
.Checkbox input:checked ~ .CheckboxCheckMark{background-color: #fff;}
.CheckboxCheckMark:after{content: ""; position:absolute; display:none;}
.Checkbox input:checked ~ .CheckboxCheckMark:after{display:block;}
.Checkbox .CheckboxCheckMark:after{left:4px; top:1px; width:4px; height:8px; border:solid #3a3e4c; border-width:0 2px 2px 0; -webkit-transform:rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.DisabledCheckbox{background:#ccc !important; opacity:0.5; cursor:default;}
/*--------------- End Checkbox CSS -------------------- */

@media screen and (max-width: 875px){
.LoginBg{width:100%; height:100%; float:left; position:fixed; top:0; left:0; background:transparent; background-image:none; text-align:center; display:none;}
.login_panel{background:transparent; margin:0 auto; float:none; position: relative; left:0; right: inherit; width:90%;}
.LoginContentWarper{padding:10px; width: 100%; margin:50px auto; border-radius: 5px; overflow: hidden; float:none; box-shadow:0 0 8px #dcdcdc;}
.LoginLeftIcon{display:none;}
.LoginSubText{display:none;}
.Login-Logo { margin:50px 0 30px; font-size:20px;}
.front .col-lg-12{width:100%; display:block;}
.back .col-lg-12{width:100%; display:block;}
}


@media screen and (max-width: 380px){
.LoginContentWarper h1{font-size:17px;}
}


/*=============================== Start Flip CSS ====================================*/

.card {
    width:100%;
    height:300px;
    /*position: absolute;*/
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}
.card div {
    display: block;
    height: 100%;
    width:100%;
	padding:10px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card .front {background:#fff;}
.card .back {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
	background:#fff;
}
.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}


/*=============================== End Flip CSS ====================================*/