#signup {
  min-height: 85vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  position: relative;
  font-size: $font-size-normal;

  #DropdownCategory {
    button {
      padding: 12px;
    }
    .dropdown-menu {
      width: 100%;
      font-size: 16px;
    }
  }

  .switch {
    position: relative;
    height: 40px;
    width: fit-content;
    background: rgb(231, 230, 230);
    border-radius: 20px;
    display: flex;
    align-items: center;

    &__input {
      display: none;
    }

    &__input:checked + .switch__label {
      color: #004f9c;
      text-shadow: 0 1px rgba(255, 255, 255, 0.25);
      margin: 0;
    }

    &__input:checked + .switch__yearly ~ .switch__selection {
      left: 100px;
      /* Note: left: 50%; doesn't transition in WebKit */
    }

    &__label {
      position: relative;
      z-index: 2;
      width: 100px;
      color: rgb(87, 84, 82);
      text-align: center;
      cursor: pointer;
      margin-bottom: 0;
      font-weight: 300;
    }
    &__label:hover {
      color: #004f9c;
    }

    &__selection {
      position: absolute;
      z-index: 1;
      display: block;
      width: 100px;
      height: 100%;
      border-radius: 20px;
      background-color: #fff;
      transition: left 0.15s ease-out;
      box-shadow: rgba(15, 12, 9, 0.2) 0px 0px 4px 0px,
        rgba(15, 12, 9, 0.15) 0px 3px 6px 0px;
    }
  }

  .payment-garuntee {
    display: flex;
    align-items: center;
    img {
      margin-right: 8px;
    }
  }

  .two-colomn {
    display: flex;
    justify-content: space-between;
    .sub-column {
      width: 48%;
    }
  }

  button:focus {
    outline: unset;
  }

  .back {
    border: 0;
    font-weight: 400;
    font-size: $font-size-normal;
    padding: 0;
    cursor: pointer;
    background: transparent;

    img {
      width: 20px;
      margin-right: 10px;
    }
  }

  .next {
    font-size: $font-size-small;
    font-weight: 400;
    color: #74b32d;
    border: 2px solid #74b32d;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 12px 2em;
    cursor: pointer;
    background: transparent;
    float: right;

    svg {
      width: 20px;
      margin-left: 10px;
      fill: #74b32d;
    }
  }

  .next:disabled {
    color: #d9d9d9;
    border-color: #d9d9d9;
    cursor: default;

    svg {
      fill: #d9d9d9;
    }
  }

  .register {
    // position: absolute;
    // bottom: 0;
    // right: 7%;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    background-color: #74b32d;
    border-radius: 30px;
    padding: 1em 2em;
    cursor: pointer;
    width: 100%;
    margin-top: 40px;
  }

  .register:disabled {
    color: #fff;
    background-color: #d9d9d9;
  }

  .step {
    padding: 0 5%;
    display: flex;
    flex-wrap: wrap;

    &__container {
      width: 50%;

      &--img {
        // max-width: 60%;
        max-width: 160px;
      }

      &--title {
        color: #07329a;
        font-size: 30px;
        font-weight: 500;
        margin: 20px 0;
      }
    }

    &__form {
      width: 50%;
      padding: 0 3% 0 6%;
      display: flex;
      align-items: flex-start;
      min-height: 60vh;
      // height: calc(100vh + 10px);

      &--container {
        width: 100%;
      }
      &--title {
        font-weight: 400;
        margin: 20px 0 10px;
      }

      .payment-title {
        font-size: $font-size-normal;
        border-bottom: 1px solid #d9d9d9;
        padding-bottom: 0.8em;
        margin-bottom: 15px;
      }

      .payment-symbols {
        float: right;
      }

      &--subtitle {
        font-weight: 100;
        margin: 10px 0;
        font-size: $font-size-normal;
      }

      &--remark {
        font-weight: 100;
        margin: 20px 0 0 0;
        font-size: $font-size-small;
      }

      &--input {
        position: relative;
        // width: fit-content;
      }

      &--checkbok {
        width: 100%;
        margin-top: 20px;
        position: relative;
      }

      input {
        background: #fff;
        border-radius: 5px;
        width: 100%;
        padding: 12px 1em;
        font-size: $font-size-normal;
        border: 1px solid #d9d9d9;
      }

      input[name="useremail"] {
        background: url(../../imgs/icon_email.svg) no-repeat;
        padding-right: 35px;
        background-position: right 10px center;
      }

      input[name="password"],
      input[name="password_again"] {
        // background: url(../../imgs/icon_password.svg) no-repeat;
        padding-right: 35px;
        background-position: right 10px center;
      }
      #showpassword {
        position: absolute;
        right: 10px;
        top: 40%;
      }

      input[name="domain_name"] {
        background: url(../../imgs/icon_www.svg) no-repeat;
        padding-right: 41%;
        background-position: right 10px center;
        @media only screen and (max-width: 992px) {
          padding-right: 0;
          width: 100%;
        }
      }

      input:focus,
      input.valid {
        border-color: #073396;
      }

      input.error {
        border-color: #f33300;
      }

      input::-webkit-input-placeholder {
        font-style: italic;
        color: #bfbfbf;
      }

      label.error {
        position: absolute;
        font-weight: 100;
        font-size: 11px;
        color: #f33300;
        width: 100%;
        text-align: right;
        left: 0;
        bottom: 0;
        margin-bottom: -18px;
      }

      .dropdown-toggle {
        width: 100%;
        text-align: left;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        cursor: pointer;
        font-size: 18px;
        font-weight: 100;
        color: #d9d9d9;
        font-style: italic;
        position: relative;

        .caret {
          position: absolute;
          top: 40%;
          right: 15px;
        }
      }

      .dropdown-toggle:hover,
      .dropdown-toggle:focus {
        background: transparent;
      }

      .dropdown.valid {
        .dropdown-toggle {
          border-color: #073396;
          color: #000;
          font-style: normal;
        }
      }

      .styled-checkbox + label {
        font-weight: 100;
        font-size: $font-size-normal;
        align-items: flex-start;
        padding-left: 35px;
      }

      .styled-checkbox + label:before {
        width: 25px;
        height: 25px;
        border: 1px solid #e6e6e6;
        position: absolute;
        left: 0;
      }

      .styled-checkbox:checked + label:after {
        left: 7px;
        top: 11px;
        width: 3px;
        height: 3px;
        background: #72b41d;
        box-shadow: 2px 0 0 #72b41d, 4px 0 0 #72b41d, 4px -2px 0 #72b41d,
          4px -4px 0 #72b41d, 4px -6px 0 #72b41d, 4px -8px 0 #72b41d;
      }
    }

    &__success {
      margin: 0 auto;
      text-align: center;

      &--title {
        font-size: 30px;
        // display: flex;
        // align-items: center;
        // flex-wrap: wrap;
        // justify-content: center;
        text-align: center;
        color: #073396;
        font-weight: 500;

        svg {
          width: 25px;
        }

        img {
          // width: 25px;
          width: 45px;
          // margin-right: 15px;
          margin-bottom: 20px;
        }
      }

      &--content {
        text-align: center;
        margin: 0 0 30px 0;
        line-height: 1.8em;
        font-size: $font-size-normal;
        .first-paragraph {
          margin-bottom: 10px;
        }
      }

      &--button {
        display: inline-block;
        background: #74b32d;
        color: #fff;
        font-weight: 500;
        padding: 12px 2em;
        border-radius: 30px;
        line-height: 1em;
        font-size: $font-size-small;
      }
    }

    &__control {
      padding: 0 6%;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      button {
        position: inherit;
      }
    }

    &__action {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      width: 100%;

      &--submit {
        margin-right: 3%;
      }
    }

    .brand_category_other {
      margin: 10px 0 20px;
      display: none;
    }
  }
  .step--package {
    padding: 0;
    #signup_package {
      width: 100%;
      .package {
        &__card {
          background-color: #fff;
          padding: 4%;

          &--package {
            font-weight: 400;
            display: flex;
            align-items: center;
            cursor: pointer;
            border: 1px solid #74b32e;
            border-radius: 30px;
            padding: 10px;
            padding-right: 20px;
            margin: auto;
            width: fit-content;

            input[type="radio"] {
              width: 20px;
              height: 20px;
              border-color: #74b32e;
            }
            input[type="radio"]:hover {
              background: #fff;
            }
            input[type="radio"]:checked,
            input[type="radio"]:hover:not([disabled]) {
              background: #fff;
              border: 0;
              display: flex;
              align-items: center;
              justify-content: center;

              &::after {
                content: "";
                width: 13px;
                height: 11px;
                background: url(../../imgs/icon_correct.svg);
                background-repeat: no-repeat;
                background-size: contain;
              }
            }
          }
          &--package.active {
            background: #74b32e;
          }
          &--package.disable {
            background: transparent;
          }

          table {
            width: 100%;
            th {
              text-align: center;
              font-size: 22px;
              &.title {
                text-align: left;
                font-size: 30px;
                font-weight: 700;
                color: #004f9c;
              }
              &.free {
                color: #87c83d;
              }
            }
            td {
              padding: 15px 0;
              text-align: center;

              .button {
                display: inline-block;
                font-weight: 400;
                padding: 8px 30px;
                border-radius: 30px;
                background: #81c241;
                text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
                border: none;
              }
              .price_title {
                font-weight: 400;
                font-size: 18px;
              }
              .price_subtitle {
                font-size: 14px;
                color: #999;
              }
              &.title {
                text-align: left;
                font-weight: 400;

                .special {
                  background-color: #e01c0e;
                  color: #fff;
                  padding: 5px 8px;
                  margin-right: 10px;
                  font-size: 11px;
                }
              }
              &.title_course {
                padding-top: 35px;
              }
              &.border {
                border-bottom: 1px solid #ddd;
              }
              &.course {
                padding: 5px 0;
                font-size: 13.5px;
              }

              img.correct {
                width: 15px;
              }
              img.wrong {
                width: 10px;
              }
            }
            thead tr th:first-child,
            tbody tr td:first-child {
              width: 20vw;
              min-width: 20vw;
              max-width: 20vw;
              word-break: break-all;
            }
          }
        }
      }
      .disable {
        opacity: 0.5;
        // input[type="radio"]:checked,
        // input[type="radio"]:hover {
        //   opacity: 0;
        // }
      }
    }
  }
  .step--payment {
    .package {
      &__title {
        font-size: 26px;
        font-weight: bold;
      }
      &__subtitle {
        font-weight: 400;
        font-size: 14px;
      }
      &__detail {
        padding: 20px 0;

        &--detailtitle {
          font-weight: 400;
          margin: 10px 0 5px 0;
        }
        &--line {
          line-height: 2em;
          font-size: 13px;
          display: flex;

          span {
            width: calc(100% - 12px);
          }
        }
        &--icon {
          display: inline-block;
          width: 12px;
          height: 12px;
          margin-right: 5px;
          margin-top: 0.5em;

          img {
            display: block;
            max-width: 100%;
            max-height: 100%;
          }
        }
      }
    }
  }

  .dropdown-menu {
    max-height: 150px;
    overflow-y: scroll;
  }

  @media only screen and (max-width: 992px) {
    display: block;
    margin-bottom: 30px;
    // min-height: unset;
    min-height: calc(100vh - 313px);

    .next {
      font-size: $font-size-normal;
      bottom: -83px;
      right: 0;

      svg {
        width: 15px;
      }
    }

    .back {
      font-size: $font-size-normal;
      bottom: 15px;

      img {
        width: 15px;
      }
    }

    .step {
      display: block;
      position: relative;

      &__container {
        width: 100%;

        &--img {
          margin-top: 15px;
          margin-left: 60%;
          width: 40%;
          max-width: 100%;
        }
      }

      &__form {
        width: 100%;
        padding: 0;

        &--input {
          width: 100%;
        }
      }

      &__success {
        margin-top: 30%;

        &--title {
          font-size: 24px;

          img {
            width: 20px;
          }
        }

        &--content {
          font-size: $font-size-normal;
        }

      }

      &__control {
        margin-top: 40px;
      }
    }
    .step--package {
      #signup_package {
        .package {
          overflow-x: scroll;
          &__card {
            width: fit-content;
            padding: 9% 5% 0;
            form {
              overflow-x: scroll;
            }

            table {
              font-size: 13px;

              th {
                padding-right: 15px;
                line-height: 1em;
                font-size: 20px;
              }
              th.title {
                font-size: 25px;
              }
              td {
                padding-right: 15px;
                min-width: 35vw;
                word-break: break-all;

                .price_title {
                  font-size: 16px;
                }
                .price_subtitle {
                  font-size: 11px;
                }
                &.course {
                  font-size: 11.5px;
                  padding: 3px 0;
                }
                &.title {
                  .special {
                    display: inline-block;
                    font-size: 11px;
                    margin-bottom: 5px;
                  }
                }
                &.title_course {
                  line-height: 1em;
                }
              }
              thead tr th:first-child,
              tbody tr td:first-child {
                width: 45vw;
                min-width: 45vw;
                max-width: 45vw;
                word-break: break-all;
              }
            }
          }
        }
      }
    }
    #the_package {
      margin-bottom: 30px;
    }
  }
}

.steps_container {
  width: 25vw;
  height: 100vh;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;

  &__title {
    font-size: 22px;
    margin-bottom: 40px;
  }

  &__breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    align-items: center;

    &--number {
      background: #d9d9d9;
      color: #fff;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 500;
      margin-right: 15px;
    }

    &--last {
      width: 35px;
      height: 35px;
      margin-right: 15px;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        width: 18px;
        height: 18px;
        fill: #d9d9d9;
      }
    }

    &--text {
      color: #7b7b7b;
    }

    &--line {
      content: "";
      border-left: 2px solid #d9d9d9;
      height: 25px;
      margin: 3px 0 3px 16px;
    }

    &--line:last-child {
      display: none;
    }

    &--correct {
      display: none;
      width: 15px;
      height: 15px;
      margin-left: 10px;
      fill: #74b32d;
    }
  }

  .active {
    .steps_container__breadcrumb--number {
      background: #74b32e;
    }

    .steps_container__breadcrumb--text {
      color: #74b32e;
    }
  }

  .done {
    .steps_container__breadcrumb--number {
      background: #74b32e;
    }

    .steps_container__breadcrumb--text {
      color: #74b32e;
    }

    .steps_container__breadcrumb--correct {
      display: block;
    }
  }

  @media only screen and (max-width: 992px) {
    width: 100%;
    height: unset;
    position: inherit;

    &__title {
      font-size: $font-size-small;
      margin: 0 15px 0 0;
      font-weight: 400;
    }

    .left-content {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      // padding: 7%;
      padding: 0;
      height: 80px;
    }

    &__breadcrumb {
      &--number {
        width: 28px;
        height: 28px;
        font-size: $font-size-small;
        margin-right: 10px;
      }

      &--text {
        display: none !important;
      }

      &--line {
        display: none !important;
      }

      &--correct {
        display: none !important;
      }

      &--last {
        width: 28px;
        height: 28px;
        margin: 0;
      }
    }
  }
}

#popup_signup_resume {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}