/* Create Account Page */
.content-wrapper {
  background-color: #fff !important;
}

.create-account-page-one, .create-account-page-two {
  margin: 50px;
  .card {
    border-top: none !important;
    box-shadow: none;
  }
  .card-header {
    margin-bottom: 50px;
  }
  .header {
    margin: auto;
    text-align: center;
    padding-left: 150px;
    padding-right: 150px;
    .tunnel {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 150px;
      margin-top: 125px;
      .first-bubble::before,
      .second-bubble::before {
        z-index: 1;
      }
    }
  }
  .card-body {
    .required {
      position: relative;
    }
    label.required::after {
      content: " *";
      color: red;
    }
    form {
      label {
        margin-bottom: 10px;
      }
      input, select {
        padding: 25px;
        border-radius: 10px;
        margin-bottom: 10px;
      }
      button {
        width: fit-content;
        font-weight: 700;
      }
      a {
        font-weight: 700;
      }
    }

    .general-condition {
      margin-left: 15%;
      .card {
        border: solid 1px var(--theme-grey) !important;
        padding: 20px;
        border-radius: 5px;
        h5 {
          color: var(--theme-black);
          font-size: large;
        }
        p, .link {
          color: var(--theme-grey);
        }
        .link {
          text-decoration: underline;
          font-weight: 600;
        }
      }
      a {
        display: flex;
        justify-content: center;
        color: var(--theme-grey);
        margin: auto;
        text-decoration: underline;
        font-weight: 600;
      }
    }
  }
}

.create-account-page-one {
  .header {
    .tunnel {
      position: relative;
    }

    .tunnel::before {
      content: "";
      position: absolute;
      top: -50px;
      left: 20%;
      right: 25%;
      height: 1px;
      background-color: var(--theme-grey);
      z-index: 0;
    }
    .first-bubble {
      position: relative;
    }
    .first-bubble::before {
      content: "1";
      position: absolute;
      top: -85px;
      left: 50%;
      transform: translateX(-50%);

      width: 70px;
      height: 70px;
      background-color: var(--theme-primary);
      border-radius: 50%;
      color: white;
      font-weight: bold;
      font-size: x-large;

      display: flex;
      align-items: center;
      justify-content: center;
    }
    .second-bubble {
      position: relative;
    }
    .second-bubble::before {
      content: "2";
      position: absolute;
      top: -85px;
      left: 50%;
      transform: translateX(-50%);

      width: 70px;
      height: 70px;
      border: solid 1px var(--theme-grey);
      border-radius: 50%;
      color: var(--theme-grey);
      background: white;
      font-weight: bold;
      font-size: x-large;

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

.create-account-page-two {
  .header {
    .tunnel {
      position: relative;
    }

    .tunnel::before {
      content: "";
      position: absolute;
      top: -50px;
      left: 20%;
      right: 25%;
      height: 1px;
      background-color: var(--theme-primary);
      z-index: 0;
    }
    .first-bubble {
      position: relative;
    }
    .first-bubble {
      position: relative;
    }
    .first-bubble::before {
      content: "1";
      position: absolute;
      top: -85px;
      left: 50%;
      transform: translateX(-50%);

      width: 70px;
      height: 70px;
      border: solid 1px var(--theme-primary);
      border-radius: 50%;
      color: var(--theme-primary);
      font-weight: bold;
      font-size: x-large;
      background: white;


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

    .second-bubble {
      position: relative;
    }
    .second-bubble::before {
      content: "2";
      position: absolute;
      top: -85px;
      left: 50%;
      transform: translateX(-50%);

      width: 70px;
      height: 70px;
      background-color: var(--theme-primary);
      border-radius: 50%;
      color: white;
      font-weight: bold;
      font-size: x-large;

      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .card-body {
    .title {
      background-color: white;
      border: solid 1px var(--theme-primary);
      border-radius: 10px;
      padding: 5px;
      text-align: center;
      padding-bottom: 0px;
      margin-top: 35px;
      margin-bottom: 35px;
      h3 {
        font-size: x-large;
      }
    }
    .icheck-primary span {
      text-decoration: underline;
    }
    .btn-list {
      justify-content: space-between;
        button, a {
        width: fit-content;
        height: fit-content;
        margin: 0;
      }
      .back_btn {
        background-color: white;
        color: var(--theme-primary);
        border: solid 2px var(--theme-primary);
      }
    }
  }
}