body{
  margin:0;
  color:#6a6f8c;
  background: white;
  font:600 16px/18px 'Open Sans',sans-serif;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center
}

*,
:after,
:before{
  box-sizing:border-box
}

.clearfix:after,
.clearfix:before{
  content:'';
  display:table
}

.clearfix:after{
  clear:both;
  display:block
}

a{
  color:inherit;
  text-decoration:none
}

.logo{
  background: rgb(56, 72, 109)
  width: 100%;
  padding: 15px 0px;
}

.login-wrap{
    width: 350px;
    height: 300px;
    margin: auto;
    position: relative;
    
  
}

.login-html{
  width:100%;
  position:absolute;
  padding:30px 30px;
}

.login-html .tab,
.login-form .group .label,
.login-form .group .button{
  text-transform:uppercase;
  color:#222;
}

.login-form .group{
  margin-bottom:15px;
}

.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
  width:100%;
  color:#fff;
  display:block;
}

.login-form .group .input{
  color:#222;
}

.login-form .group .input,
.login-form .group .button{
  border:none;
  padding:8px 15px;
  border-radius:25px;
 background: rgb(239, 239, 239);
}

.login-form .group input[data-type="password"]{
  text-security:circle;
  -webkit-text-security:circle;
}

.login-form .group .label{
  color:#aaa;
  font-size:12px;
}

.login-form .group .button{
  background:#1a7bc4;
  cursor: pointer;
}

.hr{
  height:2px;
  margin:26px 0 21px 0;
  background:rgba(255,255,255,.2);
}

.foot-lnk{
  text-align:center;
  color: #9ea1b1;
}

::placeholder{
   color: #9ea1b1;
}
::-webkit-input-placeholder{
   color: #9ea1b1;
}
:-moz-placeholder{
   color: #9ea1b1;
}
::-moz-placeholder{
   color: #9ea1b1;
}
:-ms-input-placeholder {
   color: #9ea1b1;
}