#app_spothit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-end;
  height: fit-content;
  font-family: "Roboto", sans-serif;
  background-color: $grey-background;
  min-height: 100%;
  padding-bottom: 65px;
  margin-left: -20px;

  // p {
  //   font-size: 15px;
  //   font-weight: 400;
  // }



  >h2.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
    height: 70px;
    background-color: white;
    width: 100vw;
  }
}

.spothit_content {
  position: relative;
  min-height: 540px;
  padding: 30px 30px 120px 30px;
  background-color: white;
  border-radius: 15px;
  @extend %shadow-out;
}


#spothit_page_content {

  div[data-page] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    min-height: 300px;

    .page_title h2 {
      font-size: 24px;
      font-weight: 300;
      width: 100%;
      margin-bottom: 20px;
    }

    .input_container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding: 10px 0;

      .input_icon {
        font-weight: 300;
        font-size: 48px;
        color: $blue-secondary;
        margin-bottom: 5px;
      }

      .input_title {
        font-weight: 300;
        font-size: 18px;
        margin-bottom: 15px;
      }
    }

    .multi_box {

      input[type=radio] {
        display: none;
      }

      label.multi_box_label {
        display: block;
        border: 1px solid;
        border-color: $grey-background;
        border-radius: 10px;
        padding: 15px;
      }

    }

    .multi_select {

      padding: 20px 10px 10px 10px;
      margin: 0;
      background-color: $grey-background;
      min-height: 50px;
      min-width: 200px;
      border-radius: 10px;

      label.multi_select_label {

        margin-bottom: 10px;
        display: block;

        span {
          font-weight: 400;
          font-size: 12px;
        }

        .badge {
          background-color: $grey-secondary;
        }
      }

      textarea{
        min-height: 150px;
        width: 98%;
        margin: 0 auto 5px auto;
      }

    }
  }
}


#spothit_page_navigation {
  position: relative;

  text-align: center;

  ul {
    display: flex;
    justify-content: space-between;
    padding: 0;

    li {

      a {
        text-decoration: none;
        @extend .btn
      }

      &.disabled {
        display: none;
      }

      &.next_page {
        margin-left: auto;

        a {
          background-color: $green-success;
        }
      }
    }

    .campaign_send {
      a {
        text-decoration: none;
        @extend .btn
      }
    }
  }

  div {
    position: absolute;
    top: 0;
    height: 100%;
    right: 30px;

    button {
      display: inline-block;
      text-align: center;
      padding: 12px 48px;
      border-radius: 40px;
      border: none;
      color: white;
      background-color: $green-success;
    }
  }
}

@media screen and (min-width: 1200px) {
  .page_content_container.page_sms_content_container,
  .page_content_container.page_email_content_container {
    position: relative;
    padding-right: 400px;
  }

  .page_sms_content_container #spothit_preview,
  .page_email_content_container #spothit_preview {
    position: absolute;
    top: 155px;
    right: 30px;
  }
}

@media screen and (max-width: 1500px) {

  .page_content_container.page_sms_content_container,
  .page_content_container.page_email_content_container {
    display: flex;
    justify-content: center;
    padding-right: 0;
  }

  #spothit_preview {
    display: none;
  }

  .spothit_main{
    margin-right: 0;
  }


}

#spothit_page_navigation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 30px;
}

.recipients_results input[type=textarea] {
  background-color: #fff;
  width: calc(100% - 30px);
  margin: 0 auto 15px auto;
}

.character_count {
  display: inline-block;
  background-color: $blue-secondary;
  color: #fff;
  border-radius: 5px;
  padding: 5px 15px;
  line-height: 20px;
  font-size: 14px;
  margin-top: 2px;
}

.recap_icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 36px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  background-color: $blue-secondary;
}

.speech_bubble_container {
  position: relative;
  margin: 0 auto 40px auto;
  width: 75%;

  .speech_bubble {
    position: relative;
    z-index: 2;
    background-color: #eee;
    padding: 30px;
    border-radius: 25px;

    p {
      font-size: 16px;
    }
  }

  &:after {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #eee;
    position: absolute;
    bottom: -20px;
    right: 60px;
  }

}

.campaign_summary p {
  font-size: 16px;
}

.page_automatic_campaign_content_container h2 {
  font-size: 24px;
  font-weight: 300;
}

.page_automatic_campaign_content_container h3 {
  font-size: 20px;
  font-weight: 300;
}

.automatic_campaign_card {
  position: relative;
  padding: 15px;
  background-color: white;
  border-radius: 10px;
  margin-bottom: 30px;
  @extend %shadow-out-small;


}

.automatic_campaign_card h4 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 15px;
}

.automatic_campaign_card .hook_edit {
  display: inline-block;
  height: 34px;
  width: 34px;
  line-height: 34px;
  text-align: center;
  vertical-align: top;
  font-size: 28px;
  color: $blue-primary;

  :hover {
  color: $green-success
  }
}