html,
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background-color: var(--page-bg);
  color: #212529;
}

body.app-page {
  display: flex;
  flex-direction: column;
}

.page-heading {
  text-align: center;
  margin-bottom: 2rem;
}

.page-heading h2 {
  color: var(--primary);
  font-weight: 600;
}

.page-heading p {
  color: #6c757d;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--text-body);
}

/* Padding */
.p-6 {
  padding: 6rem !important;
}
.p-7 {
  padding: 7rem !important;
}
.p-8 {
  padding: 8rem !important;
}
.p-9 {
  padding: 9rem !important;
}
.p-10 {
  padding: 10rem !important;
}

.pt-6 {
  padding-top: 6rem !important;
}
.pt-7 {
  padding-top: 7rem !important;
}
.pt-8 {
  padding-top: 8rem !important;
}
.pt-9 {
  padding-top: 9rem !important;
}
.pt-10 {
  padding-top: 10rem !important;
}

.pb-6 {
  padding-bottom: 6rem !important;
}
.pb-7 {
  padding-bottom: 7rem !important;
}
.pb-8 {
  padding-bottom: 8rem !important;
}
.pb-9 {
  padding-bottom: 9rem !important;
}
.pb-10 {
  padding-bottom: 10rem !important;
}

.pl-6 {
  padding-left: 6rem !important;
}
.pl-7 {
  padding-left: 7rem !important;
}
.pl-8 {
  padding-left: 8rem !important;
}
.pl-9 {
  padding-left: 9rem !important;
}
.pl-10 {
  padding-left: 10rem !important;
}

.pr-6 {
  padding-right: 6rem !important;
}
.pr-7 {
  padding-right: 7rem !important;
}
.pr-8 {
  padding-right: 8rem !important;
}
.pr-9 {
  padding-right: 9rem !important;
}
.pr-10 {
  padding-right: 10rem !important;
}

.px-6 {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}
.px-7 {
  padding-left: 7rem !important;
  padding-right: 7rem !important;
}
.px-8 {
  padding-left: 8rem !important;
  padding-right: 8rem !important;
}
.px-9 {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}
.px-10 {
  padding-left: 10rem !important;
  padding-right: 10rem !important;
}

.py-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-7 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}
.py-8 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}
.py-9 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}
.py-10 {
  padding-top: 10rem !important;
  padding-bottom: 10rem !important;
}

/* Margin */
.m-6 {
  margin: 6rem !important;
}
.m-7 {
  margin: 7rem !important;
}
.m-8 {
  margin: 8rem !important;
}
.m-9 {
  margin: 9rem !important;
}
.m-10 {
  margin: 10rem !important;
}

.mt-6 {
  margin-top: 6rem !important;
}
.mt-7 {
  margin-top: 7rem !important;
}
.mt-8 {
  margin-top: 8rem !important;
}
.mt-9 {
  margin-top: 9rem !important;
}
.mt-10 {
  margin-top: 10rem !important;
}

.mb-6 {
  margin-bottom: 6rem !important;
}
.mb-7 {
  margin-bottom: 7rem !important;
}
.mb-8 {
  margin-bottom: 8rem !important;
}
.mb-9 {
  margin-bottom: 9rem !important;
}
.mb-10 {
  margin-bottom: 10rem !important;
}

.ml-6 {
  margin-left: 6rem !important;
}
.ml-7 {
  margin-left: 7rem !important;
}
.ml-8 {
  margin-left: 8rem !important;
}
.ml-9 {
  margin-left: 9rem !important;
}
.ml-10 {
  margin-left: 10rem !important;
}

.mr-6 {
  margin-right: 6rem !important;
}
.mr-7 {
  margin-right: 7rem !important;
}
.mr-8 {
  margin-right: 8rem !important;
}
.mr-9 {
  margin-right: 9rem !important;
}
.mr-10 {
  margin-right: 10rem !important;
}

.mx-6 {
  margin-left: 6rem !important;
  margin-right: 6rem !important;
}
.mx-7 {
  margin-left: 7rem !important;
  margin-right: 7rem !important;
}
.mx-8 {
  margin-left: 8rem !important;
  margin-right: 8rem !important;
}
.mx-9 {
  margin-left: 9rem !important;
  margin-right: 9rem !important;
}
.mx-10 {
  margin-left: 10rem !important;
  margin-right: 10rem !important;
}

.my-6 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}
.my-7 {
  margin-top: 7rem !important;
  margin-bottom: 7rem !important;
}
.my-8 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}
.my-9 {
  margin-top: 9rem !important;
  margin-bottom: 9rem !important;
}
.my-10 {
  margin-top: 10rem !important;
  margin-bottom: 10rem !important;
}

@media (min-width: 576px) {
  /* Padding */
  .p-sm-6 {
    padding: 4rem !important;
  }
  .p-sm-7 {
    padding: 5rem !important;
  }
  .p-sm-8 {
    padding: 6rem !important;
  }
  .p-sm-9 {
    padding: 7rem !important;
  }
  .p-sm-10 {
    padding: 8rem !important;
  }

  .pt-sm-6 {
    padding-top: 4rem !important;
  }
  .pt-sm-7 {
    padding-top: 5rem !important;
  }
  .pt-sm-8 {
    padding-top: 6rem !important;
  }
  .pt-sm-9 {
    padding-top: 7rem !important;
  }
  .pt-sm-10 {
    padding-top: 8rem !important;
  }

  .pb-sm-6 {
    padding-bottom: 4rem !important;
  }
  .pb-sm-7 {
    padding-bottom: 5rem !important;
  }
  .pb-sm-8 {
    padding-bottom: 6rem !important;
  }
  .pb-sm-9 {
    padding-bottom: 7rem !important;
  }
  .pb-sm-10 {
    padding-bottom: 8rem !important;
  }

  .pl-sm-6 {
    padding-left: 4rem !important;
  }
  .pl-sm-7 {
    padding-left: 5rem !important;
  }
  .pl-sm-8 {
    padding-left: 6rem !important;
  }
  .pl-sm-9 {
    padding-left: 7rem !important;
  }
  .pl-sm-10 {
    padding-left: 8rem !important;
  }

  .pr-sm-6 {
    padding-right: 4rem !important;
  }
  .pr-sm-7 {
    padding-right: 5rem !important;
  }
  .pr-sm-8 {
    padding-right: 6rem !important;
  }
  .pr-sm-9 {
    padding-right: 7rem !important;
  }
  .pr-sm-10 {
    padding-right: 8rem !important;
  }

  .px-sm-6 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  .px-sm-7 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
  .px-sm-8 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .px-sm-9 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
  }
  .px-sm-10 {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
  }

  .py-sm-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .py-sm-7 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .py-sm-8 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .py-sm-9 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
  .py-sm-10 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }

  /* Margin */
  .m-sm-6 {
    margin: 4rem !important;
  }
  .m-sm-7 {
    margin: 5rem !important;
  }
  .m-sm-8 {
    margin: 6rem !important;
  }
  .m-sm-9 {
    margin: 7rem !important;
  }
  .m-sm-10 {
    margin: 8rem !important;
  }

  .mt-sm-6 {
    margin-top: 4rem !important;
  }
  .mt-sm-7 {
    margin-top: 5rem !important;
  }
  .mt-sm-8 {
    margin-top: 6rem !important;
  }
  .mt-sm-9 {
    margin-top: 7rem !important;
  }
  .mt-sm-10 {
    margin-top: 8rem !important;
  }

  .mb-sm-6 {
    margin-bottom: 4rem !important;
  }
  .mb-sm-7 {
    margin-bottom: 5rem !important;
  }
  .mb-sm-8 {
    margin-bottom: 6rem !important;
  }
  .mb-sm-9 {
    margin-bottom: 7rem !important;
  }
  .mb-sm-10 {
    margin-bottom: 8rem !important;
  }

  .ml-sm-6 {
    margin-left: 4rem !important;
  }
  .ml-sm-7 {
    margin-left: 5rem !important;
  }
  .ml-sm-8 {
    margin-left: 6rem !important;
  }
  .ml-sm-9 {
    margin-left: 7rem !important;
  }
  .ml-sm-10 {
    margin-left: 8rem !important;
  }

  .mr-sm-6 {
    margin-right: 4rem !important;
  }
  .mr-sm-7 {
    margin-right: 5rem !important;
  }
  .mr-sm-8 {
    margin-right: 6rem !important;
  }
  .mr-sm-9 {
    margin-right: 7rem !important;
  }
  .mr-sm-10 {
    margin-right: 8rem !important;
  }

  .mx-sm-6 {
    margin-left: 4rem !important;
    margin-right: 4rem !important;
  }
  .mx-sm-7 {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
  }
  .mx-sm-8 {
    margin-left: 6rem !important;
    margin-right: 6rem !important;
  }
  .mx-sm-9 {
    margin-left: 7rem !important;
    margin-right: 7rem !important;
  }
  .mx-sm-10 {
    margin-left: 8rem !important;
    margin-right: 8rem !important;
  }

  .my-sm-6 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
  }
  .my-sm-7 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
  }
  .my-sm-8 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
  }
  .my-sm-9 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
  }
  .my-sm-10 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important;
  }
}

/* Headings */
h1 {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: 0.9rem;
}

h3 {
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.3;
  margin-bottom: 0.8rem;
}

h4 {
  font-weight: 600;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  line-height: 1.35;
  margin-bottom: 0.7rem;
}

h5 {
  font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

h6 {
  font-weight: 500;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.45;
  margin-bottom: 0.5rem;
}

/* Paragraphs */
p {
  font-weight: 400;
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.6;
  margin-bottom: 1rem;
}