.hsr-onboarding-navbar {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.hsr-onboarding-navbar__wrapper {
  width: 730px;
  height: 56px;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: 8px;
}

.hsr-wrapper__list {
  padding: 0px 16px;
  height: inherit;
  margin: 0;
  display: flex;
  align-items: center;
}

.hsr-list__item {
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: $gray-base;
  padding: 16px 24px;
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;

  svg {
    margin-right: 5px;

    path {
      fill: $gray-base;
    }

  }
}

.hsr-active {
  color: $primary-purple;
  border-bottom: $primary-purple 1px solid;

  svg {
    margin-right: 5px;

    path {
      fill: $primary-purple;
    }

  }

}

.hsr-onboarding {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin-top: 32px;
}

.hsr-onboarding__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
}

.hsr-onboarding__description {
  font-size: $text-font-size;
  font-weight: 400;
}

.hostinger.hsr-onboarding p {
  color: $paragraph-color;
  margin-top: 8px;
  line-height: 24px;
}

.hsr-onboarding-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}

.hsr-onboarding-step {
  background-color: #FFFFFF;
  width: 730px;
  display: flex;
  border: 1px solid #DADCE0;
  border-radius: 8px;
  flex-direction: column;
  margin-top: 8px;
}

.hsr-onboarding-step--status {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px $light-purple solid;
  margin-right: 10px;
  border-radius: 50%;
}

.hsr-onboarding-step--status.completed {
  background-image: url("../images/completed.svg");
  height: 20px;
  width: 20px;
  background-size: contain;
  border: none;
}


.hsr-onboarding-step--title h4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  height: 57px;
  flex: 1;
}

.hsr-onboarding-step--title {
  border-bottom: 1px #DADCE0 solid;
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: relative;
  cursor: pointer;
}

.hsr-onboarding-step--body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.hsr-onboarding-step--body__title {
  display: flex;
  align-items: center;
}

.hsr-onboarding-step--body__content a {
  text-decoration: none;
  color: $primary-purple;
  font-weight: bold;
}

.hsr-onboarding-step--body__title h4 {
  font-size: $text-font-size;
}

.hsr-onboarding-step--body__content {
  flex: 1;
  margin-bottom: 16px;
}

.hsr-onboarding-step--body__content p {
  text-align: left;
  font-size: $text-font-size;
}

.hsr-onboarding-step--body__counter {
  color: $primary-purple;
  font-size: $text-font-size;
  font-weight: bold;
  border: 1px $light-purple solid;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.hsr-onboarding-step--expand {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  transform: rotate(.5turn);
}

.hsr-onboarding-step--expand:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 8px;
  width: 12px;
  background-image: url("../images/expand-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.hsr-onboarding-step--expand:hover {
  background: linear-gradient(0deg, rgba(103, 61, 230, 0.08), rgba(103, 61, 230, 0.08)), #FFFFFF;
}

.hsr-onboarding-step--expand.open {
  transform: rotate(1turn);
}

.hsr-onboarding-step--content {
  display: none;
  padding: 24px;
}

.hsr-onboarding-step--content.open {
  display: block;
}

.hsr-onboarding-step--footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media only screen and (max-width: 768px) {
  .hsr-onboarding-step {
    width: 80%;
  }

  .hsr-publish-modal .hsr-publish-modal--body {
    width: 70%;
  }
}

/*modal */
.hsr-modal {
  display: none;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hsr-modal.open {
  display: flex;
}

.hsr-publish-modal--body {
  display: flex;
  background-color: #FFFFFF;
  z-index: 999999;
  width: 600px;
  height: 560px;
  border: 1px solid #DADCE0;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
}

.hsr-publish-modal--body h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
}

.hsr-publish-modal--footer {
  margin-top: 24px;
  display: none;
}

.hsr-publish-modal--footer.show {
  display: block;
}

.hsr-publish-overlay {
  background: #000;
  opacity: 0.7;
  filter: alpha(opacity=70);
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  min-width: 100vw;
  min-height: 100vh;
}

.hsr-success:after {
  content: url("../images/success-circular-loader.svg");
  width: 28px;
  height: 28px;
}

.hsr-circular {
  animation: rotate 2s linear infinite;
  height: 48px;
  width: 48px;
  margin: 0 auto 24px auto;
  overflow: hidden;
}

.hsr-learn-page-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.hsr-page-container-wrapper {
  width: 100%;
  max-width: 730px;
}
.hsr-tutorial-wrapper {
  margin-top: 24px;
  width: 100%;
  max-width: 730px;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: 8px;
}

.hsr-wrapper-header {
  display: flex;
  padding: 16px 24px;
  border-bottom: 1px solid #DADCE0;
  justify-content: space-between;
}

.hsr-header-title {
  color: #1D1E20;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

.hsr-header-youtube {
  width: 172px;
  display: inline-flex;
  justify-content: flex-end;
  cursor: pointer;
}

.hsr-hostinger-youtube-link {
  text-decoration: none;
  display: contents;
}

.hsr-youtube-logo {
  padding: 0 8px;
}

.hsr-youtube-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #673DE6;
  white-space: pre;
}

.hsr-video-wrapper {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
}

.hsr-main-video-title {
  padding-top: 12px;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #1D1E20;
  padding-bottom: 20px;
}

.hsr-hsr-playlist-wrapper {
  height: 288px;
  border-top: 1px solid #DADCE0;
  border-bottom: 1px solid #DADCE0;
  overflow-y: scroll;
}

.hsr-active-video {
  background: #EBE4FF;
}

.hsr-playlist-item {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  padding: 2px 0;
}

.hsr-playlist-item-arrow {
  align-self: center;
  visibility: hidden;
}

.hsr-arrow-icon {
  padding: 0 8px;
}

.hsr-playlist-item-thumbnail {
  padding: 3px 0;
  overflow: hidden;
  height: 62px;
}

.hsr-thumbnail-image {
  margin-top: -14px;
}

.hsr-playlist-item-info {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hsr-playlist-item-title {
  margin-top: -4px;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #1D1E20;
}

.hsr-playlist-item-time {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #727586;
}

.hsr-help-wrapper {
  margin: 24px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 730px;
}

.hsr-help-card {
  width: 350px;
  height: 128px;
  display: flex;
  flex-direction: row;
  background: #FFFFFF;
  border: 1px solid #DADCE0;
  border-radius: 8px;
  cursor: pointer;
}

.hsr-card-logo {
  align-self: center;
  justify-self: center;
  grid-row: 1/3;
  grid-column: 1;
  padding-left: 24px;
  padding-right: 16px;
}

.hsr-logo-image {
  vertical-align: middle;
}

.hsr-card-title {
  padding-top: 24px;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  padding-right: 24px;
  color: #1D1E20;
  padding-bottom: 8px;
}

.hsr-card-description {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  color: #727586;
}


@media only screen and (max-width: 768px) {
  .hsr-wrapper-header {
    justify-content: center;
    width: max-content;
  }

  .hsr-tutorial-wrapper, .hsr-page-container-wrapper {
    width: 100%;
    max-width: 370px;
  }

  .hsr-main-video {
    text-align: -webkit-center;
  }

  .hsr-main-video-title {
    margin: 0 10px;
  }

  .hsr-video-content {
    font-size: 8px;
  }

  .hsr-playlist-item-thumbnail {
    display: none;
  }

  .hsr-video-frame {
    height: 200px;
    width: 325px;
  }

  .hsr-help-wrapper {
    display: flex;
    flex-direction: column;
    width: unset;
  }

  .hsr-help-card {
    margin-bottom: 24px;
    max-width: 370px;
    width: 100%;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.hsr-success-circular {
  display: none;
}

.hsr-hide {
  display: none;
}

.hsr-show {
  display: block;
}

.hts-domain-step {

  .hts-website-url,.hts-nameservers {
    background-color:$gray-light;
    padding: 16px;
    margin-top: 10px;
    text-align: left;
    color: $gray-base;

    span {
      color: $primary-purple;
      margin-left: 30px;
      font-weight: 600;
    }

  }
  .hts-nameservers {
    div {
      display: flex;
      align-items: baseline;

      p {
        min-width: 125px;
      }

      b {
        color: $dark;
        display: flex;
        align-items: center;

        svg {
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }
  }

  .hts-yt-video {
    display: flex;
    align-items: center;
    justify-content: space-between;

    @media(max-width: 767px) {
      flex-direction: column;
      align-items: flex-start;
    }

    .hts-wrap {
      display: flex;
      align-items: center;

      @media(max-width: 767px) {
        img {
          display: block;
          margin: 10px auto 10px 0;
        }
        display: block;
      }

      .hts-video-description {
        margin-left: 15px;

        @media(max-width: 767px) {
          margin-left: 0;
        }

        p {
          font-size: 12px;
          color: $gray-base;
        }
      }
    }

    .hts-video-button {

      a {
        display: flex;
      }

      @media(max-width: 767px) {
        margin-top: 10px;
      }
    }

  }

}

.hts-tab-content {

  .wrapper {
    margin: auto;
    max-width: 730px;
    width: 100%;
  }

  .hts-container {
    background-color: #fff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    margin-top: 25px;
    padding: 40px;
    text-align: left;
  }

}