html, body {
  margin: 0 !important;
  min-height: 100% !important;
  background:
    radial-gradient(circle at top left, rgba(120, 18, 24, 0.28), transparent 32%),
    radial-gradient(circle at bottom right, rgba(80, 10, 14, 0.20), transparent 28%),
    linear-gradient(135deg, #09090b 0%, #141016 45%, #1d0c11 100%) !important;
}

body,
main.view,
main.view md-content,
main.view .md-content {
  background: transparent !important;
}

main.view {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

main.view > md-content.ng-cloak {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  overflow: visible !important;
}

#loginContent {
  width: min(1360px, calc(100vw - 48px)) !important;
  min-height: 700px !important;
  margin: 0 auto !important;
  background: rgba(15, 13, 17, 0.94) !important;
  border: 1px solid rgba(209, 163, 92, 0.24) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42) !important;
}

.sg-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(20, 18, 20, 0.96), rgba(27, 18, 21, 0.93)),
    url("../img/felt-transp.png") center center / cover no-repeat !important;
  padding: 44px 36px !important;
}

.sg-logo > div[layout="row"] {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sg-logo .hide.show-gt-md {
  display: none !important;
}

.sg-logo img {
  max-width: 540px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.35));
}

.housevo-title {
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  color: #d1a35c !important;
  margin-top: 16px !important;
  text-align: center !important;
}

.sg-login {
  background: linear-gradient(135deg, #181922 0%, #1d1c29 35%, #241821 100%) !important;
  color: #f5ead7 !important;
  padding: 26px 32px !important;
}

.sg-login-content {
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
}

.sg-login,
.sg-login label,
.sg-login .md-input-container label,
.sg-login .md-select-value,
.sg-login .md-select-value span,
.sg-login .md-switch,
.sg-login .md-label,
.sg-login .password-lost-link,
.sg-login a {
  color: #f5ead7 !important;
}

.sg-login md-icon,
.sg-login .material-icons,
.sg-login .md-select-icon {
  color: #d1a35c !important;
}

.sg-login input,
.sg-login textarea {
  color: #ffffff !important;
  caret-color: #d1a35c !important;
}

.sg-login .md-input {
  border-color: rgba(209, 163, 92, 0.30) !important;
}

.sg-login .md-input-container:not(.md-input-invalid).md-input-focused label,
.sg-login .md-input-container:not(.md-input-invalid).md-input-has-value label {
  color: #d1a35c !important;
}

.sg-login .md-input-container.md-input-focused .md-input,
.sg-login .md-input-focused .md-input {
  border-color: #d1a35c !important;
}

.sg-login .md-button.md-fab {
  background: #8f2130 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

.sg-login .md-button.md-fab:hover {
  background: #a52b3c !important;
}

.sg-login .md-button.md-icon-button {
  color: #d1a35c !important;
}

.sg-login md-switch .md-thumb {
  background-color: #d8d1c7 !important;
}

.sg-login md-switch.md-checked .md-thumb {
  background-color: #d1a35c !important;
}

.sg-login md-switch .md-bar {
  background-color: rgba(209, 163, 92, 0.22) !important;
}

@media (max-width: 959px) {
  main.view {
    padding: 12px !important;
  }

  #loginContent {
    width: calc(100vw - 24px) !important;
    min-height: auto !important;
    border-radius: 12px !important;
  }

  .sg-logo {
    padding: 24px 16px !important;
  }

  .sg-logo img {
    max-width: 340px !important;
  }

  .housevo-title {
    font-size: 24px !important;
  }

  .sg-login {
    padding: 18px 16px !important;
  }
}