/* css */
@import url(font-awesome.css);

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
	  overflow-y: auto;
}

input::after,
input::before { box-sizing:border-box; }
#landing-content { background:url(../images/hero.jpg) no-repeat 50% 50%;  background-size:cover; background-attachment:fixed; position: fixed; height: 100%; width: 100%; overflow: hidden;}

h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; font-weight:600; }

.login_wrap h2 { text-align:center; font-size:35px; line-height:36px; margin-bottom:20px; font-family: 'Roboto', sans-serif; font-weight:400; color:#fff; }
.login_wrap p { text-align:center; font-family: 'Roboto', sans-serif; font-weight:400; font-size:14px; color:#fff; line-height:20px; float:left;width:100%;}
.login_wrap .outer_layer{background-color:rgba(199, 199, 199, 0.63);border-radius:2px;padding:14px;box-sizing:border-box;margin-top:30px;display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;float:left;width:100%;}
.login_wrap .outer_layer .logo + form{float:left;flex:1;}
.login_wrap { width:660px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);   }
.login_wrap .logo { float:left; position:relative; background-color: rgb(0, 0, 0); padding:24px; display:flex;align-items:center;justify-content:center;}
.login_wrap .logo img { display:block; width:100%; height:auto; }
.login_wrap .logo a { display:block; width:190px;}

.login_form {width:100%; min-height:195px; box-sizing:border-box; border-radius:2px; padding:24px; float:right; position:relative; background-color: rgba(0, 0, 0, 0.68);}

.login_form .form-group { position:relative; position:relative; }
.login_form .form-group + .form-group { margin-top:20px; }
.login_form .form-group input { height:40px; }
.login_form .form-group .control-label { position: absolute; top:9px; pointer-events: none; padding-left: 10px; z-index: 1; color: #fff; font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 400; -webkit-transition: all 0.28s ease; transition: all 0.28s ease; }
.login_form .form-group .bar { position: relative; border-bottom: 0.0625rem solid rgba(153,153,153,0.5); display: block; }
.login_form .form-group .bar::before { content: ''; height: 0.125rem; width: 0; left: 50%; bottom: -0.0625rem; position: absolute; background: #fcaf17; -webkit-transition: left 0.28s ease, width 0.28s ease; transition: left 0.28s ease, width 0.28s ease; z-index: 2; }
.login_form .form-group input { display: block; background: none; padding: 10px 10px; font-family: 'Roboto', sans-serif; font-weight:400; font-size: 14px; border-width: 0; border-color: transparent; line-height:40px; width: 100%; color:#d8d8d8; -webkit-transition: all 0.28s ease; transition: all 0.28s ease; box-shadow: none; }

.login_form .form-group input:focus { font-family: 'Roboto', sans-serif; font-weight:400; color:#d8d8d8; outline: none; }
.login_form .form-group input:focus ~ .bar::before { width: 100%; left: 0; }
.login_form .form-group input:focus ~ .control-label, .login_form .form-group input:valid ~ .control-label { color: gray; font-size: 0.8rem; left: 0; top: -15px; }

.login_form button[type=button] { position:absolute; top:0;right:-38px; bottom:0;margin:auto 0; display:flex;justify-content:center;align-items:center; z-index:3; width:80px; height:80px; border-radius:50%; background-color:#005aab; border:6px solid rgba(0,0,0,0.2); transition:background 0.3s linear 0s; /*font-family: 'Roboto', sans-serif; font-weight:400; font-size:14px; color:#fff; text-transform:uppercase;*/}
.login_form button[type=button]:hover { background-color:#004482; }
.login_form button[type=button] i { font-size:38px;  color:#fff; } 
.login_form button.disabled[type=button]{pointer-events:none;cursor:default;}

.login_form .ajax_message { font-family: 'Roboto', sans-serif; font-weight:400; font-size:15px; color:#FD3C43; line-height:20px; text-decoration:none; margin-top:14px; display:inline-block; margin-left:10px; /*text-align:center;*/width:100%}
.login_form .instruction_message { font-family: 'Roboto', sans-serif; font-weight:400; font-size:14px; color:#fcaf17; line-height:20px; text-decoration:none; margin-top:14px; display:inline-block; margin-left:10px; }
.login_form .redirecting_message {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #35B38C;
    line-height: 20px;
    text-decoration: none;
    margin-top: 14px;
    display: inline-block;
    margin-left: 10px;
}

.copyright { margin-top:20px; text-align:center; color:rgba(255,255,255,0.5); font-size:13px; }

button.button:focus {
    outline: none;
}
.key_login{
  -webkit-transition: margin-left .2s ease-in-out;
  transition: margin-left .2s ease-in-out;
  margin-left:0px;}
.login_form button[type=button]:hover .key_login {
/*  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);*/
  margin-left:20px;
}
/*-webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;*/
  


.dider_icon { width:40px; position:absolute; right:-27px; top:0;bottom:0;margin:auto 0; z-index:1; display:flex;justify-content:center;align-items:center;}
.dider_icon img { display:block; width:100%; height:auto; }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.dider_icon img.rotate {
   position: absolute;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;

}


.data_import{}
.data_import img{width:450px; display:block; margin:0 auto}
.data_import p{font-family: 'Capriola', serif;Font-Size: 25px; Font-weight:normal; text-align:center; text-transform:uppercase}

.import { width:100%; text-align:center;font-family: 'Capriola', serif;Font-Size: 16px; Font-weight:normal; }
.bt01{width:auto;
height:auto;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
background: #0052b0; /* Old browsers */
background: -moz-linear-gradient(top,  #0052b0 0%, #004a9e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #0052b0 0%,#004a9e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #0052b0 0%,#004a9e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0052b0', endColorstr='#004a9e',GradientType=0 ); /* IE6-9 */
cursor:pointer;
border:none;
padding:6px 19px 6px 17px;
font-size:18px;
border-radius:2px;
cursor:pointer;
box-shadow: 0 1px 2px #CCC;
color:#fff;
}
.bt01:hover{
background: #004a9e; /* Old browsers */
background: -moz-linear-gradient(top,  #004a9e 0%, #0052b0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #004a9e 0%,#0052b0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #004a9e 0%,#0052b0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004a9e', endColorstr='#0052b0',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;}/* CSS Document */

/* Alerts */
.alert {
  padding: 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    margin-bottom: 15px;
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
}
.alert-danger {
  color: #f44336;
  background-color: #ffcdd2;
  border-color: #ef9a9a;
 /* display:none;*/
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #c9e2b3;
}

@media (max-width: 767px) {

#landing-content { position:inherit; top:inherit; left:inherit; padding-top:15px; padding-bottom:15px; }
.login_wrap { width:85%; position: inherit; top: inherit; left: inherit; transform: none; margin:0 auto; display:block;} 
.login_wrap .logo{ display:block; width:100%; margin-bottom:15px; box-sizing:border-box;}
.login_wrap .logo a{ margin:0 auto;}
.dider_icon { top:182px; right:43%;}
.login_form{ width:100%;}

/* Captcha CSS Start */
.g-recaptcha{float:left;width:100%;}
.g-recaptcha > div{float:left;width:100%!important;}
.g-recaptcha iframe{width:100%!important;}
/* Captcha CSS End */
}