/* xs */
@media (max-width: 767px) {
  html, body {
    height: 100% !important;
  }
  #app {
    height: 100vh;
  }
  #login-box {
    border: 1px solid #d3d3d3;
  }
  #login-box img {
    width: 451px;
    height: 182px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  #login-form-wrap {
    background-color: #f53834;
    width: 475px;
    padding: 50px 50px;
    color: white;
  }
  .login-header {
    margin-bottom: 30px;
  }
  #password, #email {
    border: 0.2rem solid rgba(241, 240, 240, 0.5019607843);
    background-color: #ff646b;
    color: white;
    padding-left: 33px;
  }
  #btn-login {
    background-color: #f8fafc !important;
    color: #f53734 !important;
    border-radius: 50px !important;
  }
  .login-field-icon {
    position: relative;
    top: 34px;
    left: 11px;
  }
  .login-banner {
    display: none;
  }
}
/* sm */
@media (min-width: 768px) and (max-width: 991px) {
  html, body {
    height: 100% !important;
  }
  #app {
    height: 100vh;
  }
  #login-box {
    border: 1px solid #d3d3d3;
  }
  #login-box img {
    width: 451px;
    height: 182px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  #login-form-wrap {
    background-color: #f53834;
    width: 475px;
    padding: 50px 50px;
    color: white;
  }
  .login-header {
    margin-bottom: 30px;
  }
  #password, #email {
    border: 0.2rem solid rgba(241, 240, 240, 0.5019607843);
    background-color: #ff646b;
    color: white;
    padding-left: 33px;
  }
  #btn-login {
    background-color: #f8fafc !important;
    color: #f53734 !important;
    border-radius: 50px !important;
  }
  .login-field-icon {
    position: relative;
    top: 34px;
    left: 11px;
  }
  .login-banner {
    display: none;
  }
}
/* md */
@media (min-width: 992px) and (max-width: 1199px) {
  html, body {
    height: 100% !important;
  }
  #app {
    height: 100vh;
  }
  #login-box {
    border: 1px solid #d3d3d3;
  }
  #login-box img {
    width: 451px;
    height: 182px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  #login-form-wrap {
    background-color: #f53834;
    width: 475px;
    padding: 50px 50px;
    color: white;
  }
  .login-header {
    margin-bottom: 30px;
  }
  #password, #email {
    border: 0.2rem solid rgba(241, 240, 240, 0.5019607843);
    background-color: #ff646b;
    color: white;
    padding-left: 33px;
  }
  #btn-login {
    background-color: #f8fafc !important;
    color: #f53734 !important;
    border-radius: 50px !important;
  }
  .login-field-icon {
    position: relative;
    top: 34px;
    left: 11px;
  }
}
/* lg */
@media (min-width: 1200px) {
  html, body {
    height: 100% !important;
  }
  #app {
    height: 100vh;
  }
  #login-box {
    border: 1px solid #d3d3d3;
    box-shadow: 5px 5px 15px 5px rgba(145, 145, 145, 0.6705882353);
  }
  #login-box img {
    width: 451px;
    height: 182px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  #login-form-wrap {
    background-color: #f53834;
    width: 475px;
    padding: 50px 50px;
    color: white;
  }
  #password, #email {
    border: 0.2rem solid rgba(241, 240, 240, 0.5019607843);
    background-color: #ff646b;
    color: white;
    padding-left: 33px;
  }
  #btn-login {
    background-color: #f8fafc !important;
    color: #f53734 !important;
    border-radius: 50px !important;
    box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.4117647059);
  }
  .remember {
    margin-top: 2rem;
    margin-bottom: 3.5rem;
  }
  .login-header {
    margin-bottom: 30px;
  }
  .login-field-icon {
    position: relative;
    top: 34px;
    left: 11px;
  }
  .forgot-password-link {
    margin-top: 15px;
    color: white;
  }
}