/* Text Styling */

    *,
    :after,
    :before {
      box-sizing: border-box;
    }

    body {
      font-family: 'Libre Franklin', sans-serif;
      margin: 0px !important;
    }


    h1 {
      font-family: Quicksand;
      font-style: normal;
      font-weight: bold;
      font-size: 60px;
      line-height: 72px;
      letter-spacing: 0;
      color: #fff;
    }

    h2 {
      font-family: Quicksand;
      font-style: normal;
      font-weight: bold;
      font-size: 36px;
      line-height: 48px;
      letter-spacing: 0;
      color: #fff;
    }

    h3 {
      font-family: Quicksand;
      font-style: normal;
      font-weight: bold;
      font-size: 30px;
      line-height: 42px;
      letter-spacing: 0;
      color: #fff;
    }

    h4 {
      font-family: Quicksand;
      font-style: normal;
      font-weight: bold;
      font-size: 24px;
      line-height: 36px;
      letter-spacing: 0;
      color: #fff;
    }

    h5 {
      font-family: Quicksand;
      font-style: normal;
      font-weight: bold;
      font-size: 18px;
      line-height: 30px;
      letter-spacing: 0;
      color: #fff;
    }

    h6 {
      font-family: Quicksand;
      font-style: normal;
      font-weight: bold;
      font-size: 12px;
      line-height: 21px;
      letter-spacing: 0;
      color: #fff;
    }

    p {
      font-family: 'Libre Franklin', sans-serif;
      font-style: normal;
      font-weight: normal;
      font-size: 15px;
      line-height: 24px;
      letter-spacing: 0;
      color: #fff;
    }

    a {
      text-decoration: none;
      color: #5872F0;
    }

    /* Default Input Types */
    label.field-label {
      font-family: Quicksand;
      font-style: normal;
      font-weight: bold;
      font-size: 15px;
      text-align: left;
      letter-spacing: 0px;
      line-height: 24px;
      padding: 0;
      color: #fff !important;
      opacity: 1;
    }

    p.field-label {
      margin-bottom:5px;
      margin-top: 20px;
    }

    input[type="text"],
    select {
      width: 100%;
      height: 54px;
      font-size: 15px;
      border: 1px solid #EDEEEF;
      background: #FFFFFF 0% 0% no-repeat padding-box;
      border-radius: 10px;
      opacity: 1;
      padding: 1px 20px;
      color: #515665;
    }

    input[type="text"]:focus,
    select:focus {
      border: 2px solid #34C0BC;
      border-radius: 10px;
      opacity: 1;
      outline: none;
      padding: 0px 19px;
    }

    textarea {
      resize: none;
      width: 100%;
      height: 150px;
      font-size: 15px;
      border: 1px solid #EDEEEF;
      background: #FFFFFF 0% 0% no-repeat padding-box;
      border-radius: 10px;
      opacity: 1;
      padding: 20px 20px;
      color: #515665;
      font-family: 'Libre Franklin', sans-serif;
    }

    .height-75 textarea {
      height: 75px!important;
    }

    .height-100 textarea {
      height: 100px!important;
    }

    .height-200 textarea {
      height: 200px!important;
    }

    textarea:focus {
      border: 2px solid #34C0BC;
      border-radius: 10px;
      opacity: 1;
      outline: none;
      padding: 19px 19px;
    }

    /* Data processing checbox */

    /* Radio tags */
    .pd-radio {
      color: #515665;
      font-size: 15px;
      letter-spacing: 0;
      line-height: 24px;
      font-style: normal;
      font-weight: normal;
    }

    .radio-horizontal span {
      display: flex;
    }

    .radio-horizontal span span {
      margin-left: 20px;
    }

    .radio-horizontal span span:first-child,
    .radio-vertical span span {
      margin-left: 0 !important;
    }

    .radio-vertical span span {
      display: block;
    }

    .pd-radio span span input[type="radio"] {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .radio-horizontal input+label:before,
    .radio-vertical input+label:before {
      content: '';
      background: #FFFFFF 0% 0% no-repeat padding-box;
      border: 1px solid #7070701A;
      display: inline-block;
      vertical-align: middle;
      width: 15px;
      height: 15px;
      padding: 2px;
      line-height: 15px;
      margin-right: 16px;
      text-align: center;
      border-radius: 50%;
    }

    .pd-radio input:checked+label:before {
      background-image: url('data:image/svg+xml,%3Csvg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="15" height="15" fill="white"/%3E%3Ccircle cx="6.5" cy="6.5" r="5" fill="%23EB1562"/%3E%3C/svg%3E%0A');
    }


    /* NPS */
    .nps span {
      display: flex !important;
    }

    span.description {
      display: block !important;
    }

    .nps span {
      width: 100%;
    }

    .nps-1-10 span span {
      width: 10%;
      margin: 4px;
    }

    .nps span span:first-child {
      margin-left: 0px;
    }

    .nps span span:last-child {
      margin-right: 0px !important;
    }

    .nps input {
      opacity: 0;
      position: absolute;
    }

    .nps span span {
      display: block;
      text-align: center !important;
    }

    .nps label.inline {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      width: 100%;
      height: 50px;
      border: none;
      background: rgba(81, 86, 101, .1);
      border-radius: 10px;
      padding-top: 13px;
      font-size: 18px;
      font-weight: bold;
    }

    .nps input:hover+label {
      background: #515665 !important;
      color: #fff !important;
    }

    .nps input:focus+label {
      outline: 3px solid #red;
      background: #EB1562 !important;
      color: #fff !important;
    }

    .nps input:checked+label {
      outline: 3px solid #red;
      background: #EB1562 !important;
      color: #fff !important;
    }

    .radio-1-5 span span {
      width: 20%;
      margin: 4px;
    }

    /* Multiselector */
    .pd-checkbox {
      color: #fff;
      font-size: 15px;
      letter-spacing: 0;
      line-height: 24px;
      font-style: normal;
      font-weight: normal;
    }

    .pd-checkbox a {
      color: #fff;
      text-decoration: underline;
    }

    .pd-checkbox span span {
      margin-left: 20px;
    }

    .pd-checkbox span span:first-child {
      margin-left: 0 !important;
    }

    .radio-vertical span span {
      display: block;
    }

    .pd-checkbox span span input[type="checkbox"] {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .pd-checkbox input+label:before {
      content: '';
      background: #FFFFFF 0% 0% no-repeat padding-box;
      border: 1px solid #707070;
      display: inline-block;
      vertical-align: middle;
      width: 15px;
      height: 15px;
      padding-left: 1.5px;
      line-height: 10px;
      margin-right: 16px;
      text-align: center;
      border-radius: 10%;
    }

    .pd-checkbox input:checked+label:before {
      content: url('data:image/svg+xml,%3Csvg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect x="13.9716" width="2.12561" height="14.8352" transform="rotate(45 13.9716 0)" fill="%23EB1562"/%3E%3Crect x="1.49133" y="5.52905" width="7.04225" height="2.10907" transform="rotate(45 1.49133 5.52905)" fill="%23EB1562"/%3E%3C/svg%3E%0A');
    }

    /* Date picker */
    .pd-date.left input[type="text"],
    .pd-date.right input[type="text"] {
      width: 100% !important;
    }

    .ui-state-default {
      color: #515665;
      text-decoration: none;
    }

    .pd-date input[type="text"] {
      width: 49%;
      height: 54px;
      font-size: 15px;
      border: 1px solid #EDEEEF;
      background: #FFFFFF 0% 0% no-repeat padding-box;
      border-radius: 10px;
      opacity: 1;
      padding: 1px 20px;
      color: #515665;
      font-family: 'Libre Franklin', sans-serif;
    }

    .pd-date input[type="text"]:focus {
      border-radius: 10px 10px 0 0;
      border: 1px solid;
      border-color: #EDEEEF !important;
      border-bottom: none;
    }

    .ui-datepicker {
      background: #FFFFFF 0% 0% no-repeat padding-box;
      border: 1px solid #EDEEEF;
      border-radius: 0px 0px 10px 10px;
      opacity: 1;
      width: 49%;
    }

    .ui-datepicker-calendar {
      width: 100%;
    }

    .ui-datepicker-calendar tbody tr:first-child {
      margin-top: 21px;
    }

    .ui-datepicker-calendar tbody td {
      width: 14.28%;
      height: 50px;
      text-align: center;
    }

    .ui-datepicker-calendar thead {
      font-weight: bold;
      text-align: center;
      letter-spacing: 0px;
      color: #515665;
      opacity: 0.3;
      padding-top: 24px;
      padding-bottom: 21px;
    }

    .ui-datepicker tbody td:hover {
      background: #EB1562;
    }

    .ui-datepicker tbody td:hover>.ui-state-default {
      color: #fff !important;
      font-weight: bold;
    }

    .ui-datepicker-current-day {
      background: #EB1562;
    }

    .ui-datepicker-current-day .ui-state-active {
      color: #fff !important;
      font-weight: bold;
    }

    .ui-datepicker tbody td.ui-state-disabled:hover {
      background: none;
    }

    .ui-datepicker-header {
      margin-bottom: 21px;
    }

    .ui-datepicker .ui-datepicker-header {
      position: relative;
      padding: 0.2em 0;
    }

    /* Styled Next & Prev buttons
		.ui-datepicker .ui-datepicker-next,
		.ui-datepicker .ui-datepicker-prev {
			position: absolute;
			top: 2px;
			width: 4em;
			height: 100%;
			background: rgba(81, 86, 101, .1);
		}

		.ui-datepicker .ui-datepicker-next {
			border-radius: 0 10px 10px 0;
		}

		.ui-datepicker .ui-datepicker-prev {
			border-radius: 0 10px 0 0 10px;
		} */

    .ui-datepicker .ui-datepicker-next,
    .ui-datepicker .ui-datepicker-prev {
      position: absolute;
      top: 1em;
      width: 1.2em;
      height: 1.2em;
    }

    .ui-datepicker .ui-datepicker-next span {
      content: url('data:image/svg+xml,%3Csvg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"%3E%3Cpath fill="%23515665" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"%3E%3C/path%3E%3C/svg%3E');
    }

    .ui-datepicker .ui-datepicker-prev span {
      content: url('data:image/svg+xml,%3Csvg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"%3E%3Cpath fill="%23515665" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"%3E%3C/path%3E%3C/svg%3E');
    }

    .ui-datepicker .ui-datepicker-prev {
      left: 20px;
    }

    .ui-datepicker .ui-datepicker-next {
      right: 20px;
    }

    .ui-datepicker .ui-datepicker-prev-hover {
      left: 19px;
    }

    .ui-datepicker .ui-datepicker-next-hover {
      right: 19px;
    }

    .ui-datepicker .ui-datepicker-next span,
    .ui-datepicker .ui-datepicker-prev span {
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -8px;
      top: 50%;
      margin-top: -4px;
      height: 20px;
    }

    .ui-datepicker .ui-datepicker-title {
      margin: 0 2.3em;
      line-height: 1.8em;
      text-align: center;
    }

    .ui-datepicker .ui-datepicker-title select {
      font-size: 1em;
      margin: 1px 0;
    }

    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
      width: 70px;
      padding: 0;
      border: none;
    }

    .ui-datepicker select.ui-datepicker-month {
      margin-right: 15px;
    }

    .ui-datepicker select.ui-datepicker-year {
      margin-left: 15px;
    }


    /* Product/Package selector */


    /* Submit button */

    input[type="submit"] {
      font-family: Quicksand;
      font-style: normal;
      font-weight: bold;
      font-size: 18px;
      text-align: left;
      letter-spacing: 0px;
      color: #fff;
      opacity: 1;
      outline: none;
      border: 2px solid #fff;
      border-radius: 10px;
      opacity: 1;
      padding: 15px 30px 15px 56px;
      background: url(https://storage.pardot.com/836493/24319/white_chevron.png) 20px 50% no-repeat #EB1562;
      background-size: 23px 23px;
    }

    input[type="submit"]:hover {
      background: url(https://storage.pardot.com/836493/24319/white_chevron.png) 20px 50% no-repeat #F372A0;
      background-size: 23px 23px;
    }

    input[type="submit"]:active {
      background: url(https://storage.pardot.com/836493/24319/white_chevron.png) 20px 50% no-repeat #F9B8CF;
      background-size: 23px 23px;
    }

    input[type="submit"]:focus {
      background: url(https://storage.pardot.com/836493/24319/white_chevron.png) 20px 50% no-repeat #F9B8CF;
      border-color: #5872F0;
      background-size: 23px 23px;
    }

    /* Hide elements */

    .hide-label p label.field-label {
      display: none;
    }

    .hide-field {
      display: none;
    }

    /* Error styling */

    /* Media queries */
    @media screen and (min-width: 792px) {

      .left,
      .left.error {
        float: left;
        width: 50%;
        padding-right: 15px;
      }

      .right,
      .right.error {
        float: right;
        width: 50%;
        padding-left: 15px;
      }
    }

    @media (max-width: 792px) {
      .pd-date input[type="text"] {
        width: 100% !important;
      }

      .ui-datepicker {
        width: 100% !important;
      }

    }