@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,560;9..144,680&family=Outfit:wght@400;500;600&display=swap");

body.login-page.grocery-login {
  min-height: 100vh;
  margin: 0;
  background-color: #1b3a24;
  background-image: url("../img/grocery-login-bg.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Outfit", "Segoe UI", sans-serif;
}

body.login-page.grocery-login:before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 38, 22, 0.18) 0%, rgba(16, 38, 22, 0.46) 100%);
  pointer-events: none;
}

body.login-page.grocery-login .login-box {
  width: 420px;
  margin: 7vh auto 48px;
  position: relative;
  z-index: 1;
}

body.login-page.grocery-login .login-logo {
  margin-bottom: 18px;
}

body.login-page.grocery-login .login-logo a {
  color: #f7f3ea;
}

body.login-page.grocery-login .login-logo img {
  max-height: 74px;
  width: auto;
  background: rgba(255, 252, 246, 0.94);
  padding: 10px 18px;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(16, 32, 18, 0.28);
}

body.login-page.grocery-login .login-box-body {
  background: rgba(255, 252, 246, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 26px;
  padding: 28px 26px 18px;
  color: #2c3b2e;
  box-shadow: 0 28px 64px rgba(16, 32, 18, 0.34);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

body.login-page.grocery-login .login-box-body:before {
  content: "";
  display: block;
  height: 7px;
  margin: -28px -26px 22px;
  background: linear-gradient(90deg, #2f7d32 0%, #8bc34a 42%, #f4b942 72%, #e85d4c 100%);
}

body.login-page.grocery-login .grocery-kicker {
  margin: 0 0 6px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 11px;
  font-weight: 600;
  color: #5d8a4a;
}

body.login-page.grocery-login .login-box-msg {
  margin: 0;
  padding: 0 8px 4px;
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  font-weight: 560;
  line-height: 1.15;
  color: #1d3a24;
}

body.login-page.grocery-login .grocery-note {
  margin: 0 0 18px;
  text-align: center;
  color: #667566;
  font-size: 14px;
}

body.login-page.grocery-login .login-box-body .form-group {
  margin-bottom: 14px;
}

body.login-page.grocery-login .login-box-body .form-control {
  height: 48px;
  border-radius: 14px;
  border: 1px solid #d5e0d2;
  background: #fff;
  box-shadow: none;
  color: #243126;
  font-size: 15px;
}

body.login-page.grocery-login .login-box-body .form-control:focus {
  border-color: #3d8b40;
  box-shadow: 0 0 0 3px rgba(61, 139, 64, 0.16);
}

body.login-page.grocery-login .form-control-feedback {
  height: 48px;
  line-height: 48px;
  color: #6d9164;
}

body.login-page.grocery-login .btn.btn-primary {
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: #2f7d32;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 22px rgba(47, 125, 50, 0.28);
}

body.login-page.grocery-login .btn.btn-primary:hover,
body.login-page.grocery-login .btn.btn-primary:focus,
body.login-page.grocery-login .btn.btn-primary:active {
  background: #256628;
}

body.login-page.grocery-login .login-box-body a {
  color: #2a6b32;
  font-weight: 600;
}

body.login-page.grocery-login .login-box-body a:hover {
  color: #1d4e24;
}

body.login-page.grocery-login .login-box-body form .row [class*="col-"] {
  float: none;
  width: 100%;
  text-align: center;
}

body.login-page.grocery-login .login-box-body form .pull-right {
  float: none !important;
  text-align: center;
}

body.login-page.grocery-login .login-box-body form .row br {
  display: none;
}

body.login-page.grocery-login .login-box-body p[style] {
  color: #8a9788;
  font-style: normal !important;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-top: 8px;
}

body.login-page.grocery-login .box-body {
  margin-top: 14px;
  padding: 16px;
  background: rgba(255, 252, 246, 0.94);
  border-radius: 20px;
  color: #2c3b2e;
  box-shadow: 0 16px 36px rgba(16, 32, 18, 0.22);
}

body.login-page.grocery-login .box-body .table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

body.login-page.grocery-login .box-body .btn-info {
  border: 0;
  border-radius: 10px;
  background: #2f7d32;
}

@media (max-width: 768px) {
  body.login-page.grocery-login {
    background-attachment: scroll;
  }

  body.login-page.grocery-login .login-box {
    width: 92%;
    margin-top: 28px;
  }

  body.login-page.grocery-login .login-box-msg {
    font-size: 24px;
  }
}