.helpful-reset * {
  animation : none;
  animation-delay : 0;
  animation-direction : normal;
  animation-duration : 0;
  animation-fill-mode : none;
  animation-iteration-count : 1;
  animation-name : none;
  animation-play-state : running;
  animation-timing-function : ease;
  backface-visibility : visible;
  background : 0;
  background-attachment : scroll;
  background-clip : border-box;
  background-color : transparent;
  background-image : none;
  background-origin : padding-box;
  background-position : 0 0;
  background-position-x : 0;
  background-position-y : 0;
  background-repeat : repeat;
  background-size : auto auto;
  border : 0;
  border-style : none;
  border-width : medium;
  border-color : inherit;
  border-bottom : 0;
  border-bottom-color : inherit;
  border-bottom-left-radius : 0;
  border-bottom-right-radius : 0;
  border-bottom-style : none;
  border-bottom-width : medium;
  border-collapse : separate;
  border-image : none;
  border-left : 0;
  border-left-color : inherit;
  border-left-style : none;
  border-left-width : medium;
  border-radius : 0;
  border-right : 0;
  border-right-color : inherit;
  border-right-style : none;
  border-right-width : medium;
  border-spacing : 0;
  border-top : 0;
  border-top-color : inherit;
  border-top-left-radius : 0;
  border-top-right-radius : 0;
  border-top-style : none;
  border-top-width : medium;
  bottom : auto;
  box-shadow : none;
  box-sizing : content-box;
  caption-side : top;
  clear : none;
  clip : auto;
  color : inherit;
  columns : auto;
  column-count : auto;
  column-fill : balance;
  column-gap : normal;
  column-rule : medium none currentColor;
  column-rule-color : currentColor;
  column-rule-style : none;
  column-rule-width : none;
  column-span : 1;
  column-width : auto;
  content : normal;
  counter-increment : none;
  counter-reset : none;
  cursor : auto;
  direction : ltr;
  empty-cells : show;
  float : none;
  font : normal;
  font-family : inherit;
  font-size : medium;
  font-style : normal;
  font-variant : normal;
  font-weight : normal;
  height : auto;
  hyphens : none;
  left : auto;
  letter-spacing : normal;
  line-height : normal;
  list-style : none;
  list-style-image : none;
  list-style-position : outside;
  list-style-type : disc;
  margin : 0;
  margin-bottom : 0;
  margin-left : 0;
  margin-right : 0;
  margin-top : 0;
  max-height : none;
  max-width : none;
  min-height : 0;
  min-width : 0;
  opacity : 1;
  orphans : 0;
  outline : 0;
  outline-color : invert;
  outline-style : none;
  outline-width : medium;
  overflow : visible;
  overflow-x : visible;
  overflow-y : visible;
  padding : 0;
  padding-bottom : 0;
  padding-left : 0;
  padding-right : 0;
  padding-top : 0;
  page-break-after : auto;
  page-break-before : auto;
  page-break-inside : auto;
  perspective : none;
  perspective-origin : 50% 50%;
  position : static;
  /* May need to alter quotes for different locales (e.g fr) */
  quotes : '\201C' '\201D' '\2018' '\2019';
  right : auto;
  tab-size : 8;
  table-layout : auto;
  text-align : inherit;
  text-align-last : auto;
  text-decoration : none;
  text-decoration-color : inherit;
  text-decoration-line : none;
  text-decoration-style : solid;
  text-indent : 0;
  text-shadow : none;
  text-transform : none;
  top : auto;
  transform : none;
  transform-style : flat;
  transition : none;
  transition-delay : 0s;
  transition-duration : 0s;
  transition-property : none;
  transition-timing-function : ease;
  unicode-bidi : normal;
  vertical-align : baseline;
  visibility : visible;
  white-space : normal;
  widows : 0;
  width : auto;
  word-spacing : normal;
  z-index : auto;
}

.helpful-overlay {
  z-index: 99997;

  background-color: rgba(0, 0, 0, 0.3);

  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  &.transparent {
    background-color: transparent;
  }
}

.helpful-embed {
  * { margin: 0; }

  box-sizing: border-box;

  z-index: 99999;
  position: absolute;

  background-color: #F2F7F8;
  border-radius: 4px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #333333;
  text-align: center;

  width: 350px;
  height: 340px;

  .helpful-btn {
    box-sizing: border-box;
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    border-radius: 99px;
    border: 0;
    color: white;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    padding: 3px 20px;
    cursor: pointer;
    margin: 0;
  }

  .helpful-btn-default {
    background-color: #F2F7F8;
    border: 2px solid rgba(22, 160, 181, 0.4);
    color: #16a0b5;
    padding: 1px 18px;

    &:hover {
      background-color: white;
    }
  }

  .helpful-btn-primary {
    background-color: #ff6c6c;
    margin-top: 25px;

    &:hover {
      background-color: #ff4b4b;
    }
  }

  .helpful-btn-return {
    margin-top: 117px;
  }

  textarea {
    box-sizing: border-box;
    border: 0;
    color: #333333;
    background-color: transparent;
    display: block;
    width: 100%;
    height: 185px;
    padding: 20px 40px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.375;
    outline: 0;
    resize: none;
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }

  .helpful-question-container button {
    display: none;
  }

  .helpful-details-container, .helpful-thanks-container {
    display: none;
  }

  p {
    margin-top: 10px;
  }

  input[type=text], input[type=email] {
    box-sizing: border-box;
    display: block;
    width: 250px;
    padding: 6px 12px;
    line-height: 1.428571429;
    background-color: white;
    background-image: none;
    border: 1px solid #cccccc;
    background-color: #f7fbfc;
    border-color: #c6d1d4;
    border-radius: 3px;
    color: #333333;
    font-size: 1em;
    font-weight: lighter;
    height: 46px;
    margin: 10px auto 0 auto;

    &:focus {
      background-color: white;
      border-color: #46c4d7;
      box-shadow: none;
      outline: none;
    }

    &::-webkit-input-placeholder {
      color: #5a787d;
    }
  }

  .helpful-header {
    height: 65px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px 4px 0 0;
    text-align: center;
    background-color: white;
    padding: 0;
    margin: 0;

    h1 {
      font-size: 18px;
      line-height: 65px;
    }

    .helpful-close-button {
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
    }

    .helpful-back-button {
      position: absolute;
      top: 5px;
      left: 5px;
      cursor: pointer;
    }
  }

  > .helpful-footer {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-bottom: 20px;
    text-align: center;
    font-size: 12px;
    color: #ccc;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;

    a {
      color: #ccc;
      font-weight: bold;
      text-decoration: none;
    }
  }

  .helpful-pointer {
    content: '';
    height: 0;
    width: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #F2F7F8;
    position: absolute;
    bottom: -12px;
    left: 50%;
    margin-left: -8px;
  }

  &.helpful-shown-below .helpful-pointer {
    border-top: none;
    border-bottom: 12px solid white;
    top: -12px;
  }

  &.helpful-textarea-filled {
    background-color: white;

    .helpful-question-container button {
      display: inline-block;
    }
  }

  &.helpful-textarea-filled:not(.helpful-shown-below) {
    .helpful-pointer {
      border-top: 12px solid white;
    }
  }

  .helpful-icon {
    width: 10px;
  }
}
