/* Margin */
.mt-0 {
  margin-top: 0;
}
.mt-025 {
  margin-top: 0.25rem;
}
.mt-05 {
  margin-top: 0.5rem;
}
.mt-075 {
  margin-top: 0.75rem;
}
.mt-1 {
  margin-top: 1rem;
}
.mt-15 {
  margin-top: 1.5rem;
}
.mt-2 {
  margin-top: 2rem;
}
.mt-3 {
  margin-top: 3rem;
}
.mt-4 {
  margin-top: 4rem;
}
.mr-auto {
  margin-right: auto;
}
.mr-0 {
  margin-right: 0;
}
.mr-025 {
  margin-right: 0.25rem;
}
.mr-05 {
  margin-right: 0.5rem;
}
.mr-075 {
  margin-right: 0.75rem;
}
.mr-1 {
  margin-right: 1rem;
}
.mr-15 {
  margin-right: 1.5rem;
}
.mr-2 {
  margin-right: 2rem;
}
.mr-3 {
  margin-right: 3rem;
}
.mr-4 {
  margin-right: 4rem;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-025 {
  margin-bottom: 0.25rem;
}
.mb-05 {
  margin-bottom: 0.5rem;
}
.mb-075 {
  margin-bottom: 0.75rem;
}
.mb-1 {
  margin-bottom: 1rem;
}
.mb-15 {
  margin-bottom: 1.5rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.mb-4 {
  margin-bottom: 4rem;
}
.ml-auto {
  margin-left: auto;
}
.ml-0 {
  margin-left: 0;
}
.ml-025 {
  margin-left: 0.25rem;
}
.ml-05 {
  margin-left: 0.5rem;
}
.ml-075 {
  margin-left: 0.75rem;
}
.ml-1 {
  margin-left: 1rem;
}
.ml-15 {
  margin-left: 1.5rem;
}
.ml-2 {
  margin-left: 2rem;
}
.ml-3 {
  margin-left: 3rem;
}
.ml-4 {
  margin-left: 4rem;
}
.m-center {
  margin: 0 auto;
}

/* Text */
.text--xs {
  font-size: 0.75rem; /* 12px */
}
.text--sm {
  font-size: 0.875rem; /* 14px */
}
.text--md {
  font-size: 1rem; /* 16px */
}
.text--lg {
  font-size: 1.125rem; /* 18px */
}
.text--xl {
  font-size: 1.25rem; /* 20px */
}

/* Flex */
.is-flex {
  display: flex;
}
.is-row {
  display: flex;
  flex-direction: row;
}
.is-column {
  display: flex;
  flex-direction: column;
}
.is-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.is-center--between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.is-center--vertical {
  display: flex;
  align-items: center;
}
.is-justify--between {
  display: flex;
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.fl-gap-025 {
  gap: 0.25rem;
}
.fl-gap-05 {
  gap: 0.5rem;
}
.fl-gap-1 {
  gap: 1rem;
}
.fl-gap-15 {
  gap: 1.5rem;
}

/* Shadow */
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
    0 -3px 3px -2px rgba(0, 0, 0, 0.05);
}
.shadow--sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05),
    0 -3px 3px -2px rgba(0, 0, 0, 0.05);
}
.shadow--md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 -3px 3px -2px rgba(0, 0, 0, 0.05);
}
.shadow--lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 -3px 3px -2px rgba(0, 0, 0, 0.05);
}
.shadow--xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 -3px 3px -2px rgba(0, 0, 0, 0.05);
}
.shadow--xxl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 -3px 3px -2px rgba(0, 0, 0, 0.05);
}

.feedback-scroll--horizontal {
  background: linear-gradient(90deg, var(--white) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(255, 255, 255, 0), var(--white) 70%) 100% 0,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(60, 60, 60, 0.5),
      rgba(60, 60, 60, 0)
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(60, 60, 60, 0.5),
        rgba(60, 60, 60, 0)
      )
      100% 0%;
  background-repeat: no-repeat;
  background-size: 40px 90%, 40px 90%, 8px 90%, 8px 90%;
  background-attachment: local, local, scroll, scroll;
  background-position-y: center;
  background-position-x: 0, 100%, 0px, calc(100% - 1px);
  overflow-x: auto;
}