.base {
  height: 100vh;
}
.base .background {
  background: url("/img/background-login.jpg") no-repeat center center #150E37;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 620px;
}
.base .login {
  background: #ededf0;
  width: 620px;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
}
@media (max-width: 756px) {
  .base .login {
    width: 100%;
    padding: 24px;
  }
}
.base .login .content {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
}
.base .login .content .logo {
  padding: 20px 0;
  margin: 0 auto;
  border: none;
  display: flex;
  text-decoration: none;
  width: 210px;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

input[type=text],
input[type=password] {
  border-radius: 16px;
  border: solid 1px #DBD9E6;
  background: #fff;
  position: relative;
  font-weight: 300;
  height: 56px;
  margin: 15px 0 0;
  display: block;
  width: 100%;
  padding: 0 15px;
  font-size: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type=text].medium,
input[type=password].medium {
  width: 50%;
}
input[type=text].error,
input[type=password].error {
  border-color: #ff000d;
}
input[type=text].question,
input[type=password].question {
  transition: padding-top 0.2s ease, margin-top 0.2s ease;
  overflow-x: hidden;
}
input[type=text].question.confirmed,
input[type=password].question.confirmed {
  padding: 17px 15px 0;
}
input[type=text].question + label,
input[type=password].question + label {
  display: block;
  position: relative;
  white-space: nowrap;
  height: 0;
}
input[type=text].question + label > span,
input[type=password].question + label > span {
  font-weight: 300;
  margin: 0;
  position: absolute;
  color: #78838a;
  font-size: 0.875rem;
  top: -38px;
  left: 16px;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}
input[type=text].question:focus + label > span, input[type=text].question:not([value=""]) + label > span,
input[type=password].question:focus + label > span,
input[type=password].question:not([value=""]) + label > span {
  top: -46px;
  font-size: 0.75rem;
}
input[type=text].question.error + span.text-error,
input[type=password].question.error + span.text-error {
  opacity: 1;
  max-height: 35px;
}
input[type=text].question + span.text-error,
input[type=password].question + span.text-error {
  opacity: 0;
  max-height: 0;
}

span.text-error {
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #ff000d;
  overflow: hidden;
  display: block;
  line-height: 20px;
  transition: all 0.2s ease-out;
}

.pass {
  position: relative;
}
.pass a {
  position: absolute;
  right: 0;
  top: 10px;
  height: 35px;
  display: block;
  border-left: solid 2px #d7d9db;
  width: 50px;
  text-align: center;
  font-size: 1.125rem;
  padding-top: 8px;
  color: #5c646e;
  z-index: 1;
}
.pass a:hover {
  color: #f33c45;
  text-decoration: none;
}

.recover {
  font-size: 0.875rem;
  text-align: right;
  margin: 15px 0 30px;
}

.center {
  text-align: center;
  font-size: 0.875rem;
  color: #848c98;
  margin: 30px 0;
}

.button {
  margin: 0 auto;
  position: relative;
  display: block;
}
.button.medium {
  font-size: 1.125rem;
  min-width: 290px;
}

.error-login,
.success-login {
  border-radius: 3px;
  background-color: #ff000d;
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 12px;
}

.success-login {
  background-color: #13ce51;
}

a.customer {
  background: #fff;
  border: solid 1px #DBD9E6;
  display: block;
  padding: 12px 20px 12px 12px;
  border-radius: 12px;
  margin: 15px 0 0;
}
a.customer .small-1 {
  text-align: right;
}
a.customer i {
  color: #848c98;
}
a.customer:hover {
  text-decoration: none;
}
a.customer:hover i {
  color: #f33c45;
}
a.customer .photo {
  position: relative;
  width: 32px;
  height: 32px;
  background: #dbdbdb;
  border-radius: 60px;
  margin-right: 15px;
  overflow: hidden;
  padding: 0;
}
a.customer .photo figure {
  overflow: hidden;
  text-align: center;
  height: 100%;
  width: 100%;
  margin: 0;
  font: 0/0 a;
}
a.customer .photo figure:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}