.website-step-indicator .step-count {
  aspect-ratio: 1;
  border: var(--custom-border);
  background-color: var(--disabledcell-color);
}
.website-step-indicator .active-step .step-count {
  color: var(--color-white);
  background-color: var(--theme-color);
}
.website-step-indicator .step-covered {
  color: var(--color-green);
}
.website-step-indicator .step-covered .step-count {
  border: 1px solid var(--color-green);
  color: var(--color-green);
  background-color: var(--color-green-bg);
}

.website-setup-container {
  border-radius: 0.5rem;
  width: 800px;
}
.website-setup-container .website-step-icon {
  aspect-ratio: 1;
  background-color: var(--theme-color-light);
}
.website-setup-container .website-setup-content {
  max-height: 44vh;
  overflow-y: auto;
}
.website-setup-container .website-setup-content .website-template-list,
.event-website-templates {
  display: grid;
  grid-gap: 0.625rem;
  max-width: 50rem;
}
.event-website-templates {
  max-width: unset;
}
.website-setup-container .website-setup-content .website-template-list.item-5,
.event-website-templates.item-5 {
  grid-template-columns: repeat(5, 1fr); /* Creates 5 columns of equal width */
}
.website-setup-container .website-setup-content .website-template-list.item-3,
.event-website-templates.item-3 {
  grid-template-columns: repeat(3, 1fr); /* Creates 5 columns of equal width */
}
.website-setup-container
  .website-setup-content
  .website-template-list
  .template-list-item,
.event-website-templates .template-list-item {
  background-color: var(--color-off-white);
  border-radius: 0.35rem;
  padding: 0.65rem;
  border: var(--custom-border);
}
.event-website-templates .template-list-item {
  padding: unset;
  background-color: var(--color-white);
}
.website-setup-container
  .website-setup-content
  .website-template-list
  .template-list-item.selected,
.event-website-templates .template-list-item.selected {
  border-color: var(--theme-color);
}

.website-setup-container .website-setup-content .active-domain {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;

  background-color: var(--color-off-white);
  border: var(--custom-border);

  .active {
    color: var(--color-green);
  }
}
.website-setup-container .website-setup-content .add-domain {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;

  border: 1px dotted var(--custom-bordercolor);
}
.website-setup-container .website-setup-content .add-domain:hover {
  cursor: pointer;
  border: var(--custom-border);
  font-weight: 500;
}

.website-setup-container
  .website-template-list
  .template-list-item
  .template-preview,
.event-website-templates .template-list-item .template-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.website-setup-container
  .website-template-list
  .template-list-item
  .template-preview
  img,
.event-website-templates .template-list-item .template-preview img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 0.2rem;
}
.event-website-templates .template-list-item .template-preview img {
  border-radius: 0.2rem 0.2rem 0 0;
}

.website-setup-container
  .website-template-list
  .template-list-item
  .template-details,
.event-website-templates .template-list-item .template-details {
  width: 30%;
  width: 100%;
  /* padding: 0.313rem 0.625rem; */
  padding: 0.313rem 0rem;

  display: flex;
  gap: 0.5rem;

  .template-name {
    width: 75%;
  }

  .template-action {
    width: 25%;

    display: flex;
    justify-content: end;
    align-items: center;

    .preview {
      text-decoration: underline;
      color: var(--theme-color);
      cursor: pointer;
    }
  }
}
.event-website-templates .template-list-item .template-details {
  padding: 1rem;
}

.website-template-pages .website-page-list-container .website-page-list-item {
  background-color: var(--color-off-white);
}

.website-section-bar {
  background-color: var(--disabledcell-color);
  border-radius: 0.35rem;

  .active {
    background-color: var(--color-white);
    border-radius: 0.35rem;
  }
}

.event-website-pages {
  background-color: var(--color-white);
  border-radius: 0.5rem;

  .page-item {
    padding: 0.75rem;
    width: 100%;
    display: flex;
    border-bottom: var(--custom-border);

    .title {
      display: flex;
      justify-content: start;
      align-items: center;

      width: 60%;
    }
    .action {
      display: flex;
      justify-content: end;
      align-items: center;
      gap: 0.75rem;

      width: 40%;
    }
    .action.heading {
      justify-content: center;
    }
  }
}

@media screen and (min-width: 1280px) {
  .website-template-pages {
    width: 50rem;
  }
  .event-website-pages {
    .page-item {
      .title {
        width: 20%;
      }
      .last-updated {
        width: 60%;
        display: flex;
        justify-content: start;
        align-items: center;
      }
      .action {
        width: 20%;
      }
    }
  }
}

.add-website-page {
  height: 26px;
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 5px;
}