@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-SemiBold';
  src: url('../fonts/Poppins-SemiBold.TTF');
  src: local("?"), url('../fonts/Poppins-SemiBold.woff') format("woff"), url('../fonts/Poppins-SemiBold.TTF') format("truetype"); 
}


html, body{font-family:Poppins-Regular, Calibri, Arial; font-size:13px; color:#3a3e4c; background-color:#f7f7f7; margin:0; padding:0;  height:90%;}

#container{min-height:100%; position:relative;}
 
.login_panel{height:auto; width: 400px; margin: 0 auto; padding: 100px 0 0;}

.LoginContentWarper{background: #fff;  padding:0 0 30px; width:400px; margin:0; box-shadow:0 0 10px #999; border-radius:5px;}

.LoginContentWarper .formContent{padding: 30px;}

.LoginerrMsg { font-size: 11px; color: #f00; margin: -7px 0 5px 0; width:300px; float: left; position: absolute; font-weight:normal;}

.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:#333; display:block;}

.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:#333; 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: #3a3e4c; padding:8px 20px; margin:15px 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; border-radius:5px;}
.loginmodal-submit:hover {border: 0px; background-color: #e82f2f;}


.LoginSection{font-family:arial; font-size:13px; width:350px; height:390px; margin:auto; position:absolute; left:0; right:0; top:0; bottom:0;}
.LoginFormSection{font-family:arial; font-size:13px; width:100%; height:300px; background:#fff; box-shadow:0 0 10px #999; margin:0 0 20px;}
.LoginLogo{font-size:30px; font-weight:bold; text-align:center; padding:0 0 20px; margin:0; color:#e82f2f;}
.h1{font-size:18px; font-weight:bold; text-align:center; border-bottom:1px solid #ccc; padding:0 0 10px; margin:0 0 50px;}
.LoginSection p{margin:0 0 20px;}

/*--------------- Start Checkbox CSS -------------------- */
.Checkbox{position:relative; padding-left:25px; margin:10px 0; cursor:pointer; font-size:12px; -webkit-user-select:none; -moz-user-select:none;   -ms-user-select:none; user-select:none;	color:#3a3e4c;	font-weight:normal;}
.Checkbox input {position:absolute; opacity:0; cursor:pointer;}
.CheckboxCheckMark{position:absolute; top:0; left:0; height:16px; width:16px; 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:5px; top:1px; width:5px; height:9px; border:solid #16acb3; 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 -------------------- */

.card {
    width: 100%;
    height:75%;
    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: 90%;
    width: 95%;
	padding:20px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
	background:#fff;
}
.card .front {}
.card .back {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
	margin: 0 0 0 20px;
}
.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}


.ForgotPassword{width:auto; color:#3a3e4c; margin:10px 0 0 !important; float:right; text-align:center;}
.ForgotPassword a {text-decoration:none; color: #3a3e4c; cursor:pointer;} 
.ForgotPassword a:hover{color:#e82f2f; text-decoration:underline;}

#footer{position:absolute; bottom:0; width:100%; height:30px; padding:0;}
.footer{text-align:center; font-size:11px;}

@media screen and (max-width: 875px){
.login_panel{background:transparent; margin:0 auto; float:none; position: relative; right: inherit; width:auto;}
.LoginContentWarper{width: 350px; margin:0 auto;}
html, body{height:100%;}
#container{min-height:120%;}
/*.LoginSection{top:-140px;}*/
.col-lg-12{width:100%;}
}

@media screen and (max-width: 768px){
.login_panel{padding: 50px 0 0;}
.loginmodal-submit {width:100%}
/*#container{min-height:150%;}
.LoginLogo{margin:40px 0 0;}*/
}

@media screen and (max-width:640px){
html, body{height:100%;}
#container{min-height:140%;}
/*.LoginSection{top:-110px;}*/
}

@media screen and (max-width: 480px){
#container{min-height:65%;}
/*.LoginSection{top:-90px;}*/
}


@media screen and (max-width: 380px){
.LoginContentWarper{width: 300px;}
.login_panel{padding:20px 0 0;}
#container{min-height:80%;}
/*.LoginSection{top:-90px;}*/
}

@media (max-width:320px){
#container{min-height:90%;}
.LoginSection{/*top:-90px;*/ width:290px;}
}