:root {
  --webmail-ink: #19324f;
  --webmail-blue: #315b8a;
  --webmail-aqua: #9dd7cf;
  --webmail-paper: #ffffff;
}

body,
main.view,
main.view > md-content {
  background: radial-gradient(circle at 14% 8%, #dcecf4 0, transparent 35%),
              linear-gradient(145deg, #f8fafc 0%, #edf3f7 100%) !important;
}

#loginContent {
  border: 1px solid rgba(25, 50, 79, .09);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(25, 50, 79, .17) !important;
  margin: clamp(24px, 8vh, 90px) auto;
  max-height: 620px;
  max-width: 920px;
  min-height: 520px;
  overflow: hidden;
}

#loginContent .sg-logo {
  align-items: center;
  background: linear-gradient(150deg, var(--webmail-ink), var(--webmail-blue));
  display: flex;
  justify-content: center;
}

#loginContent .sg-logo > div {
  justify-content: center;
  width: 100%;
}

#loginContent .sg-logo .md-flex {
  display: none !important;
}

#loginContent .sg-logo img {
  background: rgba(255, 255, 255, .97);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  max-width: 360px;
  padding: 22px 28px;
  width: 80%;
}

#loginContent .sg-login {
  background: var(--webmail-paper) !important;
  color: var(--webmail-ink) !important;
}

#loginContent .sg-login-content {
  margin: auto;
  max-width: 390px;
  padding: 54px 46px;
}

#loginContent md-button.md-fab {
  background: var(--webmail-blue) !important;
}

#loginContent button[aria-label="About"] {
  visibility: hidden;
}

#loginContent md-input-container.md-input-focused label,
#loginContent md-input-container.md-input-focused md-icon,
#loginContent md-switch.md-checked .md-label {
  color: var(--webmail-blue) !important;
}

#loginContent md-input-container.md-input-focused .md-input {
  border-color: var(--webmail-blue) !important;
}

@media (max-width: 959px) {
  #loginContent {
    border-radius: 0;
    margin: 0;
    max-height: none;
    min-height: 100%;
  }

  #loginContent .sg-logo {
    min-height: 190px;
  }
}