.box {
  height: 80vh;
  background: linear-gradient(to bottom, rgba(185, 5, 4, 0.3), rgba(185, 5, 4, 0.3)), url('../img/background.jpg');
  background-position: center;
  background-size: cover;
}

.login-box {
  background: var(--light);

  width: 100%;

  position: relative;
  translate: -50% -50%;
  left: 50%;
  top: 50%;
}

.design-box,
.form-box {
  height: 70vh;
}

.left-box {
  position: relative;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  height: 80%;
  width: 90%;
}

.form-content {
  position: relative;
  translate: -50% -50%;
  top: 30%;
  left: 50%;
}

.design-img {
  width: 70%;
  position: relative;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
}

button,
input {
  height: 50px;
  border-radius: 13px !important;
}

.toast-header img{
  max-height: 40px;
}
  
.toast-container{
  margin-top: 120px;
}

@media(min-width:492px) {

  .login-box {
    background: var(--white);

    width: 90%;

    position: relative;
    translate: -50% -50%;
    left: 50%;
    top: 50%;
  }

  .left-box {
    position: relative;
    translate: -50% -50%;
    top: 50%;
    left: 50%;
    height: 80%;
    width: 90%;
  }

}

@media(min-width:992px) {
  .left-box {
    position: relative;
    translate: -50% -50%;
    top: 50%;
    left: 70%;
    height: 80%;
    width: 90%;
  }

  .login-box{
    width: 60%;
  }
}