.login-widget .login-top {
  position: relative;
  background-image: url('/images/backgrounds/browse_illustration.png');
  background-color: #007CE0;
  background-size: 400px;
  background-position: 15px -97px;
  background-repeat: no-repeat;
  height: 145px;
  width: 100%;
}
.login-widget .login-top .login-photo {
  background-color: #007CE0;
  width: 105px;
  height: 105px;
  border-radius: 57.5px;
  border: 5px solid #fff;
  position: absolute;
  top: 87.5px;
  left: 50%;
  transform: translate(-50%, 0);
}
.login-widget .login-top .login-photo #login-photo-default {
  top: 16px;
}
.login-widget .login-top .login-photo #login-photo-default .fa-user {
  color: white;
  font-size: 60px;
}
.login-widget .login-top .login-photo img {
  height: 100%;
  width: 100%;
  border-radius: 57.5px;
}
.login-widget .login-top .close {
  float: right;
  margin-top: 20px;
}
.login-widget #hdx-login-form {
  background-color: #eeeeee;
}
.login-widget #hdx-login-form .login-content {
  width: 100%;
  padding: 57.5px 15px 20px;
}
.login-widget #hdx-login-form .login-content .username-text {
  font-family: 'Gotham-Bold', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  line-height: 23px;
  letter-spacing: 0.01em;
}
.login-widget #hdx-login-form .login-content .email-text {
  font-family: 'Gotham-Book', sans-serif;
  font-display: block;
  font-weight: 400;
  font-size: 14px;
}
@media (max-width: 320px) {
  .login-widget .login-top,
  .login-widget .login-content {
    width: unset;
    max-width: 100%;
  }
}