* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: arial;
}

body {
  background: #ddd;
}


.login {
  width: 350px;
  padding: 40px 30px;
  background: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.login__logo{  
    margin: 0 0 30px 0;
    text-align: center;
}

.login__group {
  position: relative;
  margin-bottom: 15px;
}

.login__control {
  width: 100%;
  height: 50px;
  border: none;
  padding: 5px 7px 5px 15px;
  background: #fff;
  color: #666;
  border: 2px solid #ddd;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.login__control:focus, .login__control:focus + .fa {
  border-color: #009899;
  color: #009899;
}

.login__icon {
  position: absolute;
  right: 15px;
  top: 17px;
  color: #999;
}

.login--iswrong {
  -moz-animation: wrong-log 0.3s;
  -webkit-animation: wrong-log 0.3s;
  animation: wrong-log 0.3s;
}

.login--iswrong .login__control, .login--iswrong .login__control + .fa {
  border-color: #ed1c24;
  color: #ed1c24;
}

.login__btn {
  background: #009899;
  dispaly: inline-block;
  width: 100%;
  font-size: 16px;
  height: 50px;
  color: #fff;
  text-decoration: none;
  border: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
}

.toggle-password-block{  
  float: right;
}
.toggle-password-block label{
    font-size: 12px;
    color: #8a8585;
    vertical-align: top;
}
.toggle-password-block input[type="checkbox"]{
    margin-top: -2px;
}

.alert {
  display: none;
  font-size: 12px;
  color: #f00;
  float: left;
  margin: -5px 0 5px 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

@-moz-keyframes wrong-log {
  0%, 100% {
    left: 0px;
  }
  20% , 60% {
    left: 15px;
  }
  40% , 80% {
    left: -15px;
  }
}
@-webkit-keyframes wrong-log {
  0%, 100% {
    left: 0px;
  }
  20% , 60% {
    left: 15px;
  }
  40% , 80% {
    left: -15px;
  }
}
@keyframes wrong-log {
  0%, 100% {
    left: 0px;
  }
  20% , 60% {
    left: 15px;
  }
  40% , 80% {
    left: -15px;
  }
}

.footer{  
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #201f1f;
    margin: 0 auto;
    padding: 10px 0;
    color: #fff;
}
.footer__wrapper
{
      text-align: center;
}
.footer__text
{
    font-size: .7rem;
}
.footer__list
{
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer__icon
{
    display: inline-block;
    margin: 0 5px;
    font-size: .7rem;
}
.footer__icon i
{
    color: #fff;
}