GHL (Go High Level) survey form CSS style customization.

ghl_survey.css

/* From https://ghlexperts.com/survey-blue-navigation-bar-placement */

@charset "UTF-8";
#_builder-form > div.ghl-footer {
  background: #349DFF;
  position: relative;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  padding: 5px 0;
  height: 60px;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  z-index: 0;
  overflow: none;
  text-align: center;
  display: block;
  border-radius: 0 0 6px 6px !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#_builder-form > div.ghl-footer > div.ghl-button-bar > div > button {
  background-color: #3a8ea800 !important;
}

.hl-app .ghl-button-bar .ghl-next-button .right-pointing-triangle::after {
  content: "▶ Next" !important;
  font-family: "Spartan", sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.hl-app .ghl-button-bar {
  display: block !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2;
  direction: rtl;
  text-align: center !important;
  width: 100% !important;
}

.hl-app .ghl-footer .ghl-btn-align {
  float: none !important;
  right: inherit !important;
  position: relative !important;
  top: 0 !important;
  width: 100% !important;
}

.hl-app .ghl-button-bar .ghl-next-button {
  float: none !important;
  height: auto !important;
  width: auto !important;
  min-width: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 10px !important;
  font-weight: 600 !important;
  font-family: 'Roboto', sans-serif;
  position: absolute !important;
  right: 0 !important;
  top: 5px !important;
}

#_builder-form > div.ghl-footer > div.ghl-progress-bar {
  position: relative !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 20px !important;
  zoom: 1 !important;
  -moz-zoom: 2 !important;
  line-height: 20px !important;
  clear: both !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  top: 100px !important;
  left: 0% !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  margin: 0 auto !important;
}

#_builder-form > div.ghl-footer > div.ghl-progress-bar > div.ghl-progress-bar-text {
  color: #fff;
  background-color: #349DFF!important;
  font-size: 14px !important;
  width: 150px !important;
  text-align: center !important;
  border-radius: 20px 0 0 20px !important;
  float: left !important;
  height: 30px !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
}

#_builder-form > div.ghl-footer > div.ghl-progress-bar > div.ghl-progress-bar-background {
  width: 95% !important;
  background-color: #d6dee8 !important;
  border-left: 1px solid #fff !important;
  float: left !important;
  border-radius: 0 20px 20px 0 !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
  -webkit-box-pack: left !important;
      -ms-flex-pack: left !important;
          justify-content: left !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
}

#_builder-form > div.ghl-footer > div.ghl-progress-bar > div.ghl-progress-bar-background > div {
  background-color: #349DFF !important;
  height: 100% !important;
  border-radius: 0 20px 20px 0 !important;
}

#nextButton {
  color: #fff !important;
  background-color: #72929c00 !important;
  font-size: 20px !important;
  font-family: 'Roboto', sans-serif;
}

.hl-app .ghl-question-set.ghl-ques-wrap-big .custom-vue-select.form-control,
.hl-app .ghl-question-set.ghl-ques-wrap-big input[type="email"],
.hl-app .ghl-question-set.ghl-ques-wrap-big input[type="number"],
.hl-app .ghl-question-set.ghl-ques-wrap-big input[type="phone"],
.hl-app .ghl-question-set.ghl-ques-wrap-big input[type="text"],
.hl-app .ghl-question-set.ghl-ques-wrap-big textarea {
  width: 100% !important;
}

.hl-app .ghl-button-bar .ghl-back-button .left-pointing-triangle:after {
  content: "Previous ◀" !important;
  font-family: "Spartan", sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.hl-app .ghl-button-bar .ghl-back-button {
  float: none !important;
  height: auto !important;
  width: auto !important;
  min-width: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 10px !important;
  font-weight: 600 !important;
  font-family: 'Roboto', sans-serif;
  position: absolute !important;
  left: 0 !important;
  top: 5px !important;
}

@media only screen and (max-width: 450px) {
  #_builder-form > div.ghl-footer {
    height: 50px !important;
  }
}
/*# sourceMappingURL=style.css.map */