:root {
  --bs-body-font-family: "Open Sans", sans-serif;

  --brand-50: hsl(203, 100%, 97%);
  --brand-100: hsl(204, 100%, 94%);
  --brand-200: hsl(200, 100%, 86%);
  --brand-300: hsl(198, 100%, 73%);
  --brand-400: hsl(197, 100%, 59%);
  --brand-500: hsl(198, 98%, 48%);
  --brand-600: #0088d2;
  --brand-primary: #006397;

  --input-checked: var(--brand-600);

  --primary-btn-bg: var(--brand-primary);
  --primary-btn-border: var(--brand-primary);
  --primary-btn-hover: var(--brand-600);

  --sh-input-border-color: hsl(208.2, 7.3%, 80%);
}

@keyframes slideFromTop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideFromBottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

body,
button,
input,
select,
textarea {
  font-family: "Open Sans", sans-serif;
}
a {
  color: var(--brand-primary);
  text-decoration: underline;
}

body {
  height: 100%;
}

.btn-track-order {
  border: 1px solid var(--primary-btn-border);
  color: var(--primary);
  border-radius: 6px;
}

.btn-track-order:hover {
  background: var(--primary-btn-bg);
  color: #fff;
}

.btn-sign-in {
  background: var(--primary-btn-bg);
  color: #fff;
}

.btn-sign-in:hover {
  background: var(--primary-btn-hover);
  color: #fff;
}

.form-control,
.form-check-input {
  border-color: var(--sh-input-border-color);
}

.form-check-input:checked {
  background-color: var(--input-checked);
  border-color: var(--input-checked);
}

.sign-in-page {
  background-image: url(../images/authpage_img.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  justify-content: end;
  align-items: center;
  align-content: center;
  overflow: auto;
  padding-inline: 2.5rem;
}

.sign-in-section {
  -webkit-backdrop-filter: blur(1rem) saturate(180%);
  backdrop-filter: blur(1rem);
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.1), hsla(0, 0%, 100%, 0.5) 40%, rgba(255, 255, 255, 0.8)100%);
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.125);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  align-content: space-around;
  justify-content: center;
  padding: 0 2rem;
}
.backdrop-not-supported {
  background-color: rgba(255, 255, 255, 0.7);
}
.login-section .btn-outline-secondary {
  --bs-btn-border-color: var(--sh-input-border-color);
}

.login-card {
  padding: 1rem;
  align-self: center;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: transparent;
  /* box-shadow: 4px 6px 16px hsla(201,91%,20%,0.1), -1px -2px 12px hsla(201,91%,20%,0.1); */

  & .card-header {
    border: none;
    background-color: transparent;
  }
  & .card-footer {
    border: none;
    background-color: transparent;
  }
}

.login-card .card-footer a {
  font-size: 0.875rem;
}

.sign-in-section .footer {
  --bs-border-color: var(--brand-50);

  & .icon {
    color: var(--brand-50);
  }

  & .track-order {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 1440px) {
  .login-card {
    padding: 0;
  }
}
@media screen and (max-width: 1200px) {
  .sign-in-section {
    padding: 0 1rem;
  }
}

@media screen and (max-width: 992px) {
  .sign-in-page {
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .image-section {
    display: none;
  }

  .sign-in-section {
    width: auto;
  }

  .login-card {
    padding: 1rem;
    /* box-shadow: 4px 6px 16px hsla(201, 91%, 20%, 0.1),
      -1px -2px 12px hsla(201, 91%, 20%, 0.1); */
  }
}