html,
body {
  min-height: 100%;
  margin: 0 !important;
  background: #06131f !important;
  background-image: none !important;
}

body::before,
body::after,
#root::before,
#root::after,
.app::before,
.app::after,
main::before,
main::after {
  background: none !important;
  background-image: none !important;
}

body,
#root,
.app,
main,
[class*="page" i],
[class*="screen" i] {
  background-image: none !important;
}

@media (min-width: 1024px) {
  body {
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  #root,
  .app,
  main,
  [class*="page" i],
  [class*="screen" i],
  [class*="login" i],
  [class*="auth" i] {
    min-height: 100vh !important;
  }

  form,
  .card,
  [class*="card" i],
  [class*="panel" i],
  [class*="box" i] {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
  }

  h1,
  .brand,
  .logo,
  [class*="brand" i],
  [class*="logo" i] {
    position: fixed !important;
    left: 50% !important;
    top: calc(50% - 78px) !important;
    transform: translateX(-50%) !important;
    z-index: 25 !important;

    width: 224px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;

    font-size: 30px !important;
    line-height: 1 !important;
  }

  h1::before,
  .brand::before,
  .logo::before,
  [class*="brand" i]::before,
  [class*="logo" i]::before {
    content: "" !important;
    position: absolute !important;
    right: -22px !important;
    bottom: calc(100% + 8px) !important;

    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    margin: 0 !important;

    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    mix-blend-mode: normal !important;
  }
}

@media (min-width: 1024px) {
  h1,
  .brand,
  .logo,
  [class*="brand" i],
  [class*="logo" i] {
    top: calc(50% - 118px) !important;
  }
}

@media (min-width: 1024px) {
  h1,
  .brand,
  .logo,
  [class*="brand" i],
  [class*="logo" i] {
    top: calc(50% - 146px) !important;
  }

  h1::before,
  .brand::before,
  .logo::before,
  [class*="brand" i]::before,
  [class*="logo" i]::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
  }
}