body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.alert.registration {
  color: red;
}

.main-join {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #FFFFFF;
  width: 100%;
}

.email-label{
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.email-input {
  width: 400px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #006B57;
  margin-bottom: 8px;
  margin-top: 8px;
}

.email-input::placeholder {
  padding-left: 10px;
  font-weight: 700;
  line-height: 24px;
  color: #006B57;
}

.main-join-content {
  width: 70%;
  height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main-join-content img {
  width: 71.9px;
  height: 80px;
}

.form-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.step-indicator {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.active-step {
  width: 160px;
  height: 6px;
  border-radius: 6px;
  background-color: #006B57;
}

.nonactive-step {
  width: 160px;
  height: 6px;
  border-radius: 6px;
  background-color: #C1FFD5;
}

.first-last-name {
  border: 0px;
  background-color: transparent;
  border-bottom: 2px #006B57 dashed;
  border-radius: 0px;
  width: 138px;
  height: 40px;
  text-align: center;
  outline: none;
  color: #006D41;
}

.first-last-name::placeholder{
  color: #006D41;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
}

.hi-p {
  text-align: left;
}

.step-1 {
  display: flex;
  flex-direction: column;
}

.email-input::placeholder {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #94A3B8;
  padding-left: 6px;
}

.step-1 button {
  width: 400px;
  height: 40px;
  background-color: #006B57;
  border-radius: 100px;
  border: 0px;
  color: #FFFFFF;
  margin-top: 14px;
  font-weight: 500;
}

.step-1 button:hover {
  cursor: pointer;
}

.email-label {
  text-align: left;
}

.welcome-p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: left;
}

.almost-p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: left;
}

.set-up-p {
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  text-align: left;
}

.step-2 {
  display: flex;
  flex-direction: column;
}

.step-2 input{
  width: 400px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #006B57;
  margin-bottom: 8px;
  margin-top: 8px;
}

.step-2 label {
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  padding-top: 10px;
}

.step-2 input::placeholder {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #94A3B8;
  padding-left: 10px;
}
/* 
.step-2 button {
  width: 400px;
  height: 40px;
  background-color: #006B57;
  border-radius: 100px;
  border: 0px;
  color: #FFFFFF;
  margin-top: 14px;
  font-weight: 500;
} */


.step-2 button {
  width: 400px;
  height: 40px;
  background-color: #006B57;
  border-radius: 100px;
  border: 0px;
  color: #FFFFFF;
  margin-top: 14px;
  font-weight: 500;
}

.step-2 button:hover {
  cursor: pointer;
}

.step-2 button a {
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  width: 100%;
  height: 100%;
  line-height: 40px;
}

.sidebar {
  width: 30%;
  height: 100vh;
  background-color: #DBE5DF;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.sidebar h1 {
  font-size: 32px;
  font-weight: 400;
  color: #191C20;
  text-align: center;
  line-height: 40px;
}

.sidebar p {
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  color: #191C20;
}

.locum-sign-up {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sign-up {
  width: 97px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid #73777F;
  color: #006B57;
  font-size: 14px;
  font-weight: 500;
  background-color: transparent;
}

.sign-up:hover {
  cursor: pointer;
}

.sign-up a {
  display: block;
  width: 100%;
  height: 100%;
  color: #006B57;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  line-height: 35px;
}

.policy-terms {
  width: 308px;
  height: 22px;
  gap: 24px;
  display: flex;
  justify-content: center;
  padding-top: 24px;
  line-height: 21.6px;
}

.policy-terms a {
  color: #006B57;
  text-decoration: none;
  font-weight: 400;
  font-size: 18px;
}

.step-button{
  margin: 0;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  
  .main-join{
    flex-direction: column;
  }

  .main-join-content{
    width: 100%;
    height: 70%;
  }

  .form-content {
    height: 65%;
  }

  .step-indicator {
    margin-top: 50px;
  }

  .sidebar {
      width: 100%;
      height: 30%;
      background-color: #FAFFFD;
      justify-content: space-around;
  }

  .locum-sign-up {
      margin-top: 30px;
  }

  .sidebar p {
      font-weight: 500;
      margin-top: 0;
  }

  .sidebar img, h1 {
      display: none;;
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
  .main-join{
    width: 100%;
    flex-direction: column;
  }

  .main-join-content{
    width: 100%;
    height: 70%;
  }

  .main-join-content img{
    width: 53.84px;
    height: 60px;
  }

  .email-label{
    width: 98%;
  }

  .hi-p {
    width: 98%;
  }

  .welcome-p {
    width: 98%;
  }

  .email-input{
    width: 98%;
    margin: auto;
  }

  .step-1 {
    width: 95%;
    margin: auto;
    align-items: center;
  }

  .step-1 button{
    width: 98%;
  }

  .step-2 {
    width: 95%;
    margin: auto;
    align-items: center;
  }

  .step-2 input{
    width: 98%;
  }

  .step-2 button{
    width: 98%;
  }

  .step-2 label, .almost-p, .set-up-p {
    width: 98%;
  }

  .form-content {
    height: 50%;
    justify-content: center;
  }

  .step-indicator {
    margin-top: 50px;
  }

  .sidebar {
      width: 100%;
      height: 30%;
      background-color: #FAFFFD;
      justify-content: space-around;
  }

  .locum-sign-up {
      margin-top: 30px;
  }

  .sidebar p {
      font-weight: 500;
      margin-top: 0;
  }

  .sidebar img, h1 {
      display: none;;
  }
}