:root {
  --omd-navy: #102f35;
  --omd-teal: #1f6670;
  --omd-mint: #e8f4f2;
  --omd-paper: #ffffff;
}

body,
main.view,
main.view > md-content {
  background: radial-gradient(circle at 15% 10%, #e7f3f1 0, transparent 34%),
              linear-gradient(145deg, #f8fbfb 0%, #eaf2f1 100%) !important;
}

#loginContent {
  border: 1px solid rgba(16, 47, 53, .08);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(16, 47, 53, .16) !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(--omd-navy), var(--omd-teal));
  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, .96);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
  box-sizing: border-box;
  max-width: 390px;
  padding: 22px 26px;
  width: 82%;
}

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

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

#loginContent md-button.md-fab {
  background: var(--omd-teal) !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(--omd-teal) !important;
}

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

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

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

  #loginContent .sg-logo img {
    max-width: 360px;
  }
}