body, html {
    height: 100%;
    margin: 0 auto;
  }
  
  .bg-image {
    min-height: calc(100vh - 0px);
    padding-top:0px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .login-card {
        width: 50vh;
        filter: blur(0px);
        background: rgb(255, 255, 255); /* Fallback color */
        background: rgba(255, 255, 255, 0.2); /* Black background with 0.5 opacity */
        -webkit-filter: blur(0px);
        .login-full-width {
            width: 100%;
            justify-content: center;
        }
        opacity: 0.9;
        filter: alpha(opacity=50);
        mat-card-header {
          justify-content: center;
        }
        mat-card-actions {
          display: flex;
          justify-content: center;
        }
    }
  }

  canvas {
    display: block;
  // vertical-align: bottom;
  }

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  
  // background: linear-gradient(to right, rgb(132, 227, 240), rgb(237, 153, 248));
  background-image: url("./../../assets/images/login-drone1.jpg");
  // background-color: #b61924;
  // background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}