/* 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;
}

.layout-event-card-flex-gap {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.layout-event-card-first-col {
  width: 12rem;
}

@media screen and (max-width: 896px) {
  .layout-event-card-first-col {
    width: 10rem;
  }
}

@media screen and (max-width: 768px) {
  .layout-event-card-first-col {
    width: 7.5rem;
  }
}

@media screen and (max-width: 576px) {
  .layout-event-card-flex-gap {
    gap: 1.5rem;
  }
}

@media screen and (max-width: 432px) {
  .layout-event-card-flex-gap {
    gap: 1rem;
  }
}

@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;
  }
}

/* icons */
.icon-24 {
  height: 24px;
  width: 24px;
  min-height: 24px;
  min-width: 24px;
}

.icon-20 {
  height: 20px;
  width: 20px;
  min-height: 20px;
  min-width: 20px;
}

.icon-16 {
  height: 16px;
  width: 16px;
  min-height: 16px;
  min-width: 16px;
}

.icon-14 {
  height: 14px;
  width: 14px;
}

.icon-12 {
  height: 12px;
  width: 12px;
}

/* 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;
}

.p-0-25 {
  padding: .25rem;
}

.p-0-75 {
  padding: .75rem;
}

.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;
}

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

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

.block {
  display: block;
}

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

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

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

.flex.wrap {
  flex-wrap: wrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.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.align-end {
  align-items: end;
}

.grow {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.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-1-75 {
  gap: 1.75rem;
}

.gap-2 {
  gap: 2rem;
}

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

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

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

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

.nowrap {
  white-space: nowrap;
}

.width-16 {
  width: 16rem;
}

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