/* page margins and padding */
.layout-max-container, main {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
}

.layout-max-x, main > * {
  max-width: min(1440px, 90rem);
  width: 100%;
  box-sizing: border-box;
}

.layout-padding-x, main > * {
  padding-left: 2rem;
  padding-right: 2rem;
}

.layout-padding-y, main > * {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.layout-form-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  gap: 2rem;  
  max-width: 36rem;
}

.layout-form-sections {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 2rem;  
  max-width: 36rem;
}

.layout-form-page .separator {
  border-top: 1px solid var(--color-gray2);
  width: 100%;
}

.layout-form-list, .actions-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .layout-padding-x, main > * {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .layout-padding-y, main > * {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* spacing */
.ml-0-25 {
  margin-left: 0.25rem;
}

.ml-0-5 {
  margin-left: 0.5rem;
}

.ml-0-75 {
  margin-left: 0.75rem;
}

.ml-1 {
  margin-left: 1rem;
}

.ml-2 {
  margin-left: 2rem;
}

.mr-0-25 {
  margin-right: 0.25rem;
}

.mr-0-5 {
  margin-right: 0.5rem;
}

.mr-0-75 {
  margin-right: 0.75rem;
}

.mr-1 {
  margin-right: 1rem;
}

.mr-2 {
  margin-right: 2rem;
}

.mb-0-25 {
  margin-bottom: 0.25rem;
}

.mb-0-5 {
  margin-bottom: 0.5rem;
}

.mb-0-75 {
  margin-bottom: 0.75rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-1-5 {
  margin-bottom: 1.5rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mt-0-125 {
  margin-top: 0.125rem;
}

.mt-0-25 {
  margin-top: 0.25rem;
}

.mt-0-5 {
  margin-top: 0.5rem;
}

.mt-0-75 {
  margin-top: 0.75rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-1-5 {
  margin-top: 1.5rem;
}

.mt-2 {
  margin-top: 2rem;
}

.ml-0-25 {
  padding-left: 0.25rem;
}

.pl-0-5 {
  padding-left: 0.5rem;
}

.pl-0-75 {
  padding-left: 0.75rem;
}

.pl-1 {
  padding-left: 1rem;
}

.pl-2 {
  padding-left: 2rem;
}

.pr-0-25 {
  padding-right: 0.25rem;
}

.pr-0-5 {
  padding-right: 0.5rem;
}

.pr-0-75 {
  padding-right: 0.75rem;
}

.pr-1 {
  padding-right: 1rem;
}

.pr-2 {
  padding-right: 2rem;
}

.pb-0-25 {
  padding-bottom: 0.25rem;
}

.pb-0-5 {
  padding-bottom: 0.5rem;
}

.pb-0-75 {
  padding-bottom: 0.75rem;
}

.pb-1 {
  padding-bottom: 1rem;
}

.pb-1-5 {
  padding-bottom: 1.5rem;
}

.pb-2 {
  padding-bottom: 2rem;
}

.pt-0-125 {
  padding-top: 0.125rem;
}

.pt-0-25 {
  padding-top: 0.25rem;
}

.pt-0-5 {
  padding-top: 0.5rem;
}

.pt-0-75 {
  padding-top: 0.75rem;
}

.pt-1 {
  padding-top: 1rem;
}

.pt-1-5 {
  padding-top: 1.5rem;
}

.pt-2 {
  padding-top: 2rem;
}

.inline-block {
  display: inline-block;
}

.block {
  display: block;
}

/* flex box */
.flex {
  display: flex;
}

.flex.col {
  flex-direction: column;
}

.flex.row {
  flex-direction: row;
}

.flex.row-to-col-1024 {
  flex-direction: row;
}

@media screen and (max-width: 1024px) {
  .flex.row-to-col-1024 {
    flex-direction: column;
  }
}

.flex.row-to-col-768 {
  flex-direction: row;
}

@media screen and (max-width: 768px) {
  .flex.row-to-col-768 {
    flex-direction: column;
  }
}

.flex.justify-center {
  justify-content: center;
}

.flex.space-between {
  justify-content: space-between;
}

.flex.align-start {
  align-items: flex-start;
}

.flex.align-center {
  align-items: center;
}

.flex.align-baseline {
  align-items: baseline;
}

.flex-grow {
  flex-grow: 1;
}

.gap-0-125 {
  gap: 0.125rem;
}

.gap-0-25 {
  gap: 0.25rem;
}

.gap-0-5 {
  gap: 0.5rem;
}

.gap-0-75 {
  gap: 0.75rem;
}

.gap-1 {
  gap: 1rem;
}

.gap-1-5 {
  gap: 1.5rem;
}

.gap-2 {
  gap: 2rem;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.max-width-48 {
  max-width: 48rem;
}

.nowrap {
  white-space: nowrap;
}

.width-100 {
  width: 100%;
  box-sizing: border-box;
}