.import-page {
  min-height: 100vh;
  background-color: hsl(228, 20%, 95.1%);
  padding: 1.5rem 3rem;
}

.import-layout {
  display: flex;
  gap: 1.5rem;
}
.import-layout__sidebar {
  width: 17.5rem;
  flex-shrink: 0;
}
.import-layout__main {
  flex: 1;
  min-width: 0;
}

.import-sidebar-card {
  background-color: hsl(240, 20%, 98%);
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.125s;
}
.import-sidebar-card:hover {
  border-color: hsl(214, 97.6%, 50.6%);
}
.import-sidebar-card--active {
  border-color: hsl(214, 97.6%, 50.6%);
  background-color: rgba(6.08328, 112.637104, 251.97672, 0.04);
}
.import-sidebar-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.import-sidebar-card__name {
  font-size: 0.7525rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-sidebar-card__meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.645rem;
  color: hsl(227, 17%, 50%);
}

.import-detail__title {
  font-size: 1.29rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
  margin: 0 0 1.25rem 0;
}

.import-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.import-header__left {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-shrink: 0;
  width: 17.5rem;
}
.import-header__logo {
  width: 3rem;
  height: 3rem;
}
.import-header__title {
  font-size: 1.29rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
  margin: 0;
  padding-top: 0.5rem;
}
.import-header__logo-link {
  display: flex;
  align-items: center;
}

.import-steps {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.import-steps__step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7525rem;
  font-weight: 700;
  color: hsl(228, 16.7%, 60%);
}
.import-steps__step--active {
  color: hsl(214, 97.6%, 50.6%);
}
.import-steps__step--done {
  color: hsl(151, 82%, 30%);
}
.import-steps__divider {
  color: hsl(226, 17.2%, 74.9%);
  font-size: 0.86rem;
}

.import-card {
  background-color: hsl(240, 20%, 98%);
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 1.5rem 2rem;
  max-width: 45rem;
}
.import-card__title {
  font-size: 1.12875rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
  margin: 0 0 0.25rem 0;
}
.import-card__title--small {
  font-size: inherit;
}
.import-card__subtitle {
  font-size: 0.7525rem;
  color: hsl(227, 17%, 50%);
  margin: 0 0 1.25rem 0;
}

.import-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.import-form--spaced {
  margin-top: 1.5rem;
}
.import-form__group-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.import-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.import-form__group--row {
  flex-direction: row;
  align-items: flex-end;
  gap: 1rem;
}
.import-form__col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.import-form__col--grow {
  flex: 1;
  min-width: 0;
}
.import-form__col--interval {
  width: 6rem;
  flex-shrink: 0;
}
.import-form__label {
  font-size: 0.7525rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
}
.import-form__hint {
  font-size: 0.645rem;
  color: hsl(227, 17%, 50%);
}
.import-form__hint--error {
  color: hsl(349, 83.9%, 46.3%);
}
.import-form__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.import-form__input {
  font-family: "Assistant", "ui-sans-serif", "system-ui", "sans-serif";
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(227, 17%, 50%);
  border-radius: 0.375rem;
  background-color: hsl(240, 20%, 98%);
  color: hsl(228, 20%, 4.9%);
  width: 100%;
}
.import-form__input:focus {
  outline: none;
  border-color: hsl(214, 97.6%, 50.6%);
}
.import-form__input--has-toggle {
  padding-right: 2.5rem;
}
.import-form__input--narrow {
  max-width: 12.5rem;
}
.import-form select.import-form__input {
  cursor: pointer;
}
.import-form__toggle {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: hsl(227, 17%, 50%);
}
.import-form__toggle:hover {
  color: hsl(228, 20%, 4.9%);
}
.import-form__toggle-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.import-form__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.import-form__file {
  font-family: "Assistant", "ui-sans-serif", "system-ui", "sans-serif";
  font-size: 0.7525rem;
  color: hsl(228, 20%, 4.9%);
}

.import-error {
  font-size: 0.7525rem;
  color: hsl(349, 83.9%, 46.3%);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  background-color: hsl(17, 88.6%, 86.3%);
  border-radius: 0.375rem;
}

.import-summary {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background-color: hsl(228, 20%, 95.1%);
  border-radius: 0.375rem;
}
.import-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: 0.7525rem;
  color: hsl(228, 20%, 4.9%);
}
.import-summary--success {
  background-color: rgba(13.77, 139.23, 78.591, 0.1);
  color: hsl(151, 82%, 30%);
  font-weight: 600;
}
.import-summary__label {
  font-weight: 600;
}
.import-summary__label--warning {
  color: hsl(43, 86.3%, 54.1%);
}
.import-summary__value {
  font-weight: 700;
  color: hsl(214, 97.6%, 50.6%);
}

.import-cohort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7525rem;
  margin-top: 1rem;
}
.import-cohort-table th {
  text-align: left;
  padding: 0.375rem 0.625rem;
  font-weight: 700;
  color: hsl(240, 20%, 98%);
  background-color: hsl(274, 90.9%, 38.6%);
}
.import-cohort-table td {
  padding: 0.25rem 0.625rem;
  border-bottom: 1px solid hsl(228, 20%, 95.1%);
  color: hsl(228, 20%, 4.9%);
}
.import-cohort-table tr:hover td {
  background-color: hsl(228, 20%, 95.1%);
}

.import-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7525rem;
  color: hsl(227, 17%, 50%);
  font-weight: 600;
  padding: 0.75rem 0;
}
.import-loading__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid hsl(226, 16.9%, 84.9%);
  border-top-color: hsl(214, 97.6%, 50.6%);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.import-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.import-list-header__title {
  font-size: 1.12875rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
  margin: 0;
}

.import-source-card {
  background-color: hsl(240, 20%, 98%);
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.75rem;
  max-width: 45rem;
}
.import-source-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.import-source-card__name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.import-source-card__type-badge {
  font-size: 0.645rem;
  font-weight: 700;
  padding: 0.0625rem 0.5rem;
  border-radius: 0.375rem;
}
.import-source-card__type-badge--stripe {
  color: hsl(274, 90.9%, 38.6%);
  background-color: rgba(110.359716, 8.95713, 187.90287, 0.1);
}
.import-source-card__type-badge--csv {
  color: hsl(151, 82%, 30%);
  background-color: rgba(13.77, 139.23, 78.591, 0.1);
}
.import-source-card__name {
  font-size: 0.9675rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
  margin: 0;
}
.import-source-card__name--link {
  text-decoration: none;
  color: hsl(214, 97.6%, 50.6%);
}
.import-source-card__name--link:hover {
  color: hsl(214, 98%, 40%);
}
.import-source-card__date {
  font-size: 0.645rem;
  color: hsl(228, 16.7%, 60%);
}
.import-source-card__stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}
.import-source-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.import-source-card__stat-label {
  font-size: 0.645rem;
  font-weight: 600;
  color: hsl(227, 17%, 50%);
}
.import-source-card__stat-value {
  font-size: 0.7525rem;
  font-weight: 700;
  color: hsl(214, 97.6%, 50.6%);
}
.import-source-card__mappings {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.import-source-card__mapping-tag {
  font-size: 0.645rem;
  font-weight: 600;
  color: hsl(274, 90.9%, 38.6%);
  background-color: rgba(110.359716, 8.95713, 187.90287, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
}
.import-source-card__actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid hsl(228, 20%, 95.1%);
}

.import-results__stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.7525rem;
}
.import-results__stat-value {
  font-size: 1.12875rem;
  font-weight: 700;
  color: hsl(214, 97.6%, 50.6%);
}
.import-results__stat-label {
  color: hsl(227, 17%, 50%);
  font-weight: 600;
}

.import-choose {
  max-width: 45rem;
}
.import-choose__options {
  display: flex;
  gap: 1rem;
  margin: 1.25rem 0;
}
.import-choose__option {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  background-color: hsl(240, 20%, 98%);
  border: 2px solid hsl(226, 16.9%, 84.9%);
  border-radius: 0.25rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.125s;
}
.import-choose__option:hover {
  border-color: hsl(214, 97.6%, 50.6%);
}
.import-choose__option-title {
  font-size: 0.9675rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
}
.import-choose__option-desc {
  font-size: 0.7525rem;
  color: hsl(227, 17%, 50%);
}

.import-detail__section {
  margin-bottom: 1.25rem;
}
.import-detail__section--danger {
  border: 1px solid hsl(349, 84%, 90%);
}
.import-detail__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.import-detail__section-actions {
  display: flex;
  gap: 0.5rem;
}
.import-detail__edit-actions {
  display: flex;
  gap: 0.5rem;
}
.import-detail__name-input {
  font-size: 1.29rem;
  font-weight: 700;
  max-width: 25rem;
}
.import-detail__config-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.import-detail__config-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.import-detail__config-label {
  font-size: 0.645rem;
  font-weight: 600;
  color: hsl(227, 17%, 50%);
}
.import-detail__config-value {
  font-size: 0.7525rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
}
.import-detail__empty {
  font-size: 0.7525rem;
  color: hsl(228, 16.7%, 60%);
  margin: 0.5rem 0;
}
.import-detail__mapping-card {
  background-color: hsl(228, 20%, 95.1%);
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
}
.import-detail__mapping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.import-detail__mapping-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
  margin: 0;
}
.import-detail__mapping-actions {
  display: flex;
  gap: 0.5rem;
}
.import-detail__mapping-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.import-detail__mapping-filter {
  font-size: 0.645rem;
  color: hsl(227, 17%, 50%);
}
.import-detail__mapping-project {
  font-size: 0.7525rem;
  font-weight: 600;
  color: hsl(214, 97.6%, 50.6%);
  text-decoration: none;
}
.import-detail__mapping-project:hover {
  color: hsl(214, 98%, 40%);
}
.import-detail__mapping-project--none {
  color: hsl(228, 16.7%, 60%);
}
.import-detail__mapping-form {
  background-color: hsl(228, 20%, 95.1%);
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.import-detail__mapping-form-title {
  font-size: 0.7525rem;
  font-weight: 700;
  color: hsl(228, 20%, 4.9%);
  margin: 0;
}
.import-detail__mapping-filter-row {
  display: flex;
  gap: 1rem;
}

.import-confirm-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(9.996, 10.9956, 14.994, 0.5);
}

.import-confirm {
  background-color: hsl(240, 20%, 98%);
  border-radius: 0.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 1.5rem 2rem;
  max-width: 25rem;
  width: 90%;
}
.import-confirm__message {
  font-size: 0.7525rem;
  color: hsl(228, 20%, 4.9%);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}
.import-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.import-mapping-preview {
  margin-bottom: 1rem;
}
.import-mapping-preview__scroll {
  overflow-x: auto;
  max-width: 100%;
}
.import-mapping-preview .import-cohort-table {
  min-width: 37.5rem;
}

.import-mapping-col-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 7.5rem;
}
.import-mapping-col-header__name {
  font-size: 0.645rem;
  font-weight: 700;
  color: hsl(240, 20%, 98%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-mapping-col-header__select {
  font-size: 0.645rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid hsl(226, 16.9%, 84.9%);
  border-radius: 0.25rem;
  background-color: hsl(240, 20%, 98%);
  color: hsl(228, 20%, 4.9%);
  cursor: pointer;
}
.import-mapping-col-header__select:focus {
  border-color: hsl(214, 97.6%, 50.6%);
  outline: none;
}

.import-mapping-summary {
  margin-bottom: 1rem;
}
.import-mapping-summary__row {
  display: grid;
  grid-template-columns: 10rem 1.25rem 6.25rem 3.75rem 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid hsl(228, 20%, 95.1%);
}
.import-mapping-summary__row:last-child {
  border-bottom: none;
}
.import-mapping-summary__col {
  font-size: 0.7525rem;
  font-weight: 600;
  color: hsl(228, 20%, 4.9%);
}
.import-mapping-summary__arrow {
  color: hsl(228, 16.7%, 60%);
  text-align: center;
}
.import-mapping-summary__field {
  font-size: 0.7525rem;
  font-weight: 700;
  color: hsl(274, 90.9%, 38.6%);
}
.import-mapping-summary__confidence {
  font-size: 0.645rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.375rem;
  text-align: center;
}
.import-mapping-summary__confidence--high {
  color: hsl(151, 82%, 30%);
  background-color: rgba(13.77, 139.23, 78.591, 0.1);
}
.import-mapping-summary__confidence--medium {
  color: hsl(43, 86.3%, 54.1%);
  background-color: rgba(238.964835, 181.7259285, 36.945165, 0.1);
}
.import-mapping-summary__confidence--low {
  color: hsl(349, 83.9%, 46.3%);
  background-color: rgba(217.121535, 19.008465, 55.3291945, 0.1);
}
.import-mapping-summary__reason {
  font-size: 0.645rem;
  color: hsl(228, 16.7%, 60%);
  font-style: italic;
}

.import-price-mapping {
  margin-top: 1rem;
}
.import-price-mapping__loading {
  padding: 1.5rem;
  text-align: center;
  color: hsl(228, 16.7%, 60%);
  font-style: italic;
}
.import-price-mapping__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.import-price-mapping__th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.645rem;
  font-weight: 700;
  color: hsl(227, 17%, 50%);
  border-bottom: 1px solid hsl(226, 16.9%, 84.9%);
}
.import-price-mapping__th--amount {
  width: 7.5rem;
}
.import-price-mapping__th--count {
  width: 6.25rem;
}
.import-price-mapping__row {
  border-bottom: 1px solid hsl(228, 20%, 95.1%);
}
.import-price-mapping__row:last-child {
  border-bottom: none;
}
.import-price-mapping__amount {
  padding: 0.625rem 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.import-price-mapping__count {
  padding: 0.625rem 0.75rem;
  color: hsl(228, 16.7%, 60%);
  font-variant-numeric: tabular-nums;
}
.import-price-mapping__name-cell {
  padding: 0.375rem 0.75rem;
}
.import-price-mapping__name-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  border: 1px solid hsl(226, 16.9%, 84.9%);
  border-radius: 0.25rem;
  background-color: hsl(240, 20%, 98%);
  color: hsl(228, 20%, 4.9%);
}
.import-price-mapping__name-input:focus {
  border-color: hsl(214, 97.6%, 50.6%);
  outline: none;
}
.import-price-mapping__name-input::placeholder {
  color: hsl(226, 17.2%, 74.9%);
  font-style: italic;
}
.import-price-mapping__excluded {
  font-size: 0.645rem;
  color: hsl(228, 16.7%, 60%);
  font-style: italic;
  margin: 0.5rem 0;
}
.import-price-mapping__error {
  color: hsl(349, 83.9%, 46.3%);
  font-size: 0.645rem;
  margin: 0.5rem 0;
}