@import "jfMixins";
@import "jfVariables";
@import "jfVariables-dynamic";
@import "jfProgress-dynamic";
@import "jfSmartEmbed";
@import "jfMiniCard";
@import "jfWidgets";

$welcome-iconFillColor: false !default;

$font-pri: $form-fontFamily;
@if ($form-externalFont != "") {
  @import url($form-externalFont);
}

// If a user has a background image before changing to the card form
// it will be used as a fallback image, so, when user removes the background image
// in the card form, the variable becomes false
@if ($pageBg-image == false) {
  $pageBg-image: "";
}

$pageBg-state: $pageBg-image == "" and $pageBg-colorBegin == $pageBg-logoBackgroundColor and $pageBg-colorEnd == $pageBg-logoBackgroundColor and $pageBg-logoBackgroundColor != "";

@if ($pageBg-state) {
  $pageBg-logoBackgroundColor-luminance: get-luminance-value($pageBg-logoBackgroundColor);

  @if ($pageBg-logoBackgroundColor-luminance > 0.5) {
    $actions-bg: darken($pageBg-logoBackgroundColor, 30%);
  }
  @if ($pageBg-logoBackgroundColor-luminance < 0.5) {
    $actions-bg: lighten($pageBg-logoBackgroundColor, 30%);
  }
}

body, html {
  position: fixed;
  transform: translate3d(0, 0, 0); // This forces GPU rendering and fixes cut out content issues on iOS.
}

body:not(.JotFormCardBuilder), body.jfCardForm {
  font-family: $font-pri;

  input, textarea, select, button {
    font-family: $font-pri;
  }
}

.formPage-container > .formPage-each > .formPage-stage,
.formPage-container > .formPage-each > .formPage-stage .ql-container,
.welcome-page-content {
  font-family: $font-pri;
}

* {
  outline: none; // Disable outlines brought by browsers.

  &::-ms-clear { // Disable IE 10-11 clear icon.
    display: none;
  }
}

body.thankyouMode {
  @if ($pageBg-image != "") {
    background-image: url($pageBg-image);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
  }
}

.jfWelcome, .jfHeading, .emptyNotification {
  &-header {
    @if ($welcome-titleBackgroundAverage == "") {
      color: $welcome-titleColor;
    }
    @else {
      color: get-bw-opposite($welcome-titleBackgroundAverage);
    }
  }

  &-description,
  &-sectionInfo {
    @if ($welcome-titleBackgroundAverage == "") {
      color: $welcome-descColor;
    }
    @else {
      color: get-bw-opposite($welcome-titleBackgroundAverage);
    }
  }

  &-button {
    @if ($pageBg-state) {
      color: get-bw-opposite($pageBg-logoBackgroundColor);
      background-color: $actions-bg;
    }
    @else {
      color: $welcomeButton-color;
      background-color: $welcomeButton-bgColor;
    }
    border-radius: 0 0 $card-borderRadius $card-borderRadius;
  }
}
.btn.btn-barebone,
button.scrollToTop .scrollToTop-text,
button.formPage-removePage {
  @if ($welcome-titleBackgroundAverage == "") {
    color: $editButtonColorLight;
  }
  @else {
    color: get-bw-opposite($welcome-titleBackgroundAverage);
  }
}

.btn.btn-barebone.editDropdownOptionsButton {
  @if ($welcome-titleBackgroundAverage == "") {
    color:  $welcomeButton-bgColor;
    &:hover {
      color: $thankYou-titleColor;
    }
  }
  @else {
    color: get-bw-opposite($welcome-titleBackgroundAverage);
  }
}

button.scrollToTop svg {
  @if ($welcome-titleBackgroundAverage == "") {
    fill: $editButtonColorLight;
  }
  @else {
    fill: get-bw-opposite($welcome-titleBackgroundAverage);
  }
}
button.formPage-removePage:hover,
button.formPage-removePage:active,
.btn.btn-barebone:hover,
.btn.btn-barebone:active {
  @if ($welcome-titleBackgroundAverage == "") {
    background-color: $actions-bg;
  }
  @else {
    background-color: get-bw-opposite($welcome-titleBackgroundAverage);
  }
}

div.welcome-page-break:before,
div.thankyou-page-break:before,
div.welcome-page-break:after,
div.thankyou-page-break:after {
  @if ($welcome-titleBackgroundAverage == "") {
    border-color: $editButtonColorLight;
  }
  @else {
    border-color: get-bw-opposite($welcome-titleBackgroundAverage);
  }
}

div.welcome-page-break.light:before,
div.thankyou-page-break.light:before,
div.welcome-page-break.light:after,
div.thankyou-page-break.light:after{
  border-color: $editButtonColorLight;
}
div.welcome-page-break.dark:after,
div.thankyou-page-break.dark:after,
div.welcome-page-break.dark:before,
div.thankyou-page-break.dark:before{
  border-color: $editButtonColorDark;
}

.jfThankYou {
  &-header {
    @if ($welcome-titleBackgroundAverage == "") {
      color: $thankYou-titleColor;
    }
    @else {
      color: get-bw-opposite($welcome-titleBackgroundAverage);
    }
  }

  &-description,
  &-sectionInfo {
    @if ($welcome-titleBackgroundAverage == "") {
      color: $thankYou-descColor;
    }
    @else {
      color: get-bw-opposite($welcome-titleBackgroundAverage);
    }
  }
}

.formMode, .welcomeMode, .thankyouMode, .reviewMode, .sectionHeaderMode {
  .jfForm-backgroundContainer {
    @if ($pageBg-image != "") {
      background-image: url($pageBg-image + "?width=2048");
    }

    @if ($pageBg-image == "" and $pageBg-colorBegin != "" and $pageBg-colorEnd != "") {
      background-image: linear-gradient($pageBg-colorBegin, $pageBg-colorEnd);
    }

    @if ($pageBg-image == "" and $pageBg-colorBegin != "" and $pageBg-colorEnd == "") {
      background-color: $pageBg-colorBegin;
    }

    @if ($pageBg-filterEffect == "blur") {
      filter: blur($pageBg-filterEffect-strength * 1px);
      margin: -$pageBg-filterEffect-strength * 2px;
    }

    @if ($pageBg-filterEffect == "softBlur") {
      filter: blur(6px);
      margin: -12px;
    }
    @else if ($pageBg-filterEffect == "hardBlur") {
      filter: blur(30px);
      margin: -60px;
    }
    @else if ($pageBg-filterEffect == "monochrome") {
      filter: grayscale($pageBg-filterEffect-strength * 1%);
    }
    @else if ($pageBg-filterEffect == "sepia") {
      filter: sepia($pageBg-filterEffect-strength * 1%);
    }
    @else if ($pageBg-filterEffect == "lighten") {
      filter: brightness(100% + ($pageBg-filterEffect-strength * 1%));
    }
    @else if ($pageBg-filterEffect == "darken") {
      filter: brightness(100% - ($pageBg-filterEffect-strength * 1%));
    }
  }

  .jfForm-backgroundOverlay {
    @if ($pageBg-filterEffect == "overlayColor" and $welcome-backgroundOverlayColor != "" and $welcome-backgroundOverlayColor != "none") {
      background: $welcome-backgroundOverlayColor;
    }
    @else if($pageBg-filterEffect == "overlayColor" and ($welcome-backgroundOverlayColor == "" or $welcome-backgroundOverlayColor == "none")) {
      background: rgba(0,0,0,0.4);
    }
    @if ($pageBg-filterEffect != "overlayColor") {
      background: rgba(0,0,0,0);
    }
  }

  .jfForm-backgroundUnderlay {
    @if ($pageBg-imagePlaceholder != "") {
      background-image: url("#{$pageBg-imagePlaceholder}");
    }
  }
}

.welcomeMode, .reviewMode, .sectionHeaderMode, .thankyouMode {
  .jfForm-wrapper, .jfForm-backgroundContainer {
    @if ($pageBg-state) {
      background: darken($pageBg-logoBackgroundColor, 10%);
    }
  }
}

.formMode {
  .jfForm-wrapper, .jfForm-backgroundContainer {
    @if ($pageBg-state) {
      background: $pageBg-logoBackgroundColor;
    }
  }

  &.isEmbed{
    .jfForm-wrapper, .jfForm-backgroundContainer {
      transition: all .5s;
    }
  
  }
}

.jfWelcome, .jfThankYou, .jfHeading, .sectionHeaderMode {
  &-header {
    font-size: $welcome-fontSize;
    font-weight: $welcome-fontWeight;
    text-align: center;
    margin: 0;
    padding: 0 1em;
    @if ($welcome-fontFamily != "") {
      font-family: $welcome-fontFamily;
    }

    @if ($pageBg-state and ($welcome-titleColor == "" or $welcome-titleColor == "#fff")) {
      color: get-bw-opposite($pageBg-logoBackgroundColor);
    }
  }

  .formMode &-header { font-size: $welcome-fontSize; }

  &-description {
    font-size: 0.8em;
    font-weight: $welcome-fontWeight - 200;

    @if ($welcome-fontFamily != "") {
      font-family: $welcome-fontFamily;
    }

    @if ($pageBg-state and ($welcome-descColor == "" or $welcome-descColor == "#fff")) {
      color: get-bw-opposite($pageBg-logoBackgroundColor);
    }
  }

  &-sectionInfo {
    // font-size: $welcome-fontSize * 0.7;
    font-size: 0.7em;

    @if ($pageBg-state and ($welcome-descColor == "" or $welcome-descColor == "#fff")) {
      color: get-bw-opposite($pageBg-logoBackgroundColor);
    }
  }

  &-button { font-size: 1em; }
}


.iconSvgStroke { stroke: $welcome-titleColor; }
.iconSvgFill { fill: $welcome-titleColor; }

.emptyNotification {
  &-image {
    .iconSvgStroke {
      @if ($pageBg-state and ($welcome-titleColor == "" or $welcome-titleColor == "#fff")) {
        stroke: get-bw-opposite($pageBg-logoBackgroundColor);
      }
    }
    .iconSvgFill {
      @if ($pageBg-state and ($welcome-titleColor == "" or $welcome-titleColor == "#fff")) {
        fill: get-bw-opposite($pageBg-logoBackgroundColor);
      }
    }
  }
  &-header {
    font-size: 1.2em;

    @if ($pageBg-state and ($welcome-titleColor == "" or $welcome-titleColor == "#fff")) {
      color: get-bw-opposite($pageBg-logoBackgroundColor);
    }
  }
}

.jfWelcome {
  .formMode & {
    text-align: $welcome-textAlign;

    &-header,
    &-description {
      @if ($general-showFormTitle) {
        opacity: 1;
      }
      @else {
        opacity: 0;
      }
      transition: all .2s ease;
    }
  }
}

.jfProgress-formError {
  @if ($welcome-titleBackgroundAverage == "") {
    color: $welcome-titleColor;
  }
  @else {
    color: get-bw-opposite($welcome-titleBackgroundAverage);
  }
  color: $welcome-titleColor;
}

.jfForm-logo {
  @if ($general-showFormIcon) {
    opacity: 1;
  }
  @else {
    opacity: 0;
  }
}


.jfWelcome-wrapper.isHeader {
  .jfWelcome-buttonWrapper {
    display: inline-block;
    border-radius: 0 0 0 $card-borderRadius;
    & + .jfWelcome-buttonWrapper {
      border-radius: 0 0 $card-borderRadius 0;
    }
  }

  .formMode & {
    .jfWelcome-buttonWrapper {
      display: none;
    }
  }

  &.noPrevButton {
    .jfWelcome-buttonWrapper + .jfWelcome-buttonWrapper {
      border-radius: 0 0 $card-borderRadius $card-borderRadius;
    }
  }
}

.jfWelcome-image {
  transition: all .2s ease;

  &.collapse {
    max-height: 0;
    opacity: 0;
  }

  @if (type-of($welcome-iconFillColor) == color) {
    svg path {
      fill: $welcome-iconFillColor;
    }
  }
}

// Extended theme rules moved from the default scss
.jfQuestion-label { color: $labelColor; }
.jfQuestion-description { color: $descriptionColor; }
.jfQuestion-fullscreen {
  &:focus-visible {
    outline: 2px solid #0099ff;
    outline-offset: 3px;
  }
}
.jfReview {
  .jfReviewItem-header { color: $reviewItemTitleColor; }
  .jfReviewItem-answer {
    color: $reviewItemAnswerColor;
    font-size: 1em;
    font-weight: 500;

    span { display: inline-block; }
    .imageChoiceContainer {
      display: flex;
      .imageChoiceContent {
        display: inline-block;
        text-align: center;
      }
      img {
        width: 140px;
        height: 140px;
        margin-right: 10px;
      }
    }
    .table-grid {
      white-space: normal;
      table-layout: fixed;
      font-family: Tahoma!important;
      border-collapse: collapse!important;
      border: 1px solid #ccc!important;
      background: #fff!important;

      th{
        &.table-head {
          font-weight: 700;
          text-align: center;
          text-transform: capitalize;
          border: 1px solid #ccc;
          padding: 4px;
          background-color: #eee;
          font-size: 12px;
          overflow: hidden;
          display: table-cell;
          vertical-align: inherit;
        }
      }

      td{
        &.table-col {
          border: 1px solid #ccc;
          background: #fff;
          vertical-align: middle;
          overflow: hidden;
          font-size: 13px;
          text-align: center;
          word-break: break-word;
          word-wrap: break-word;
        }
      }
    }
  }
  .jfFormHeader { color: $reviewFormTitleColor; }
}

// accesibility
.jfField-sublabel { color: $subLabelColor; }

.jfRequiredStar,
.jfCard-mobileError,
.form-line.form-line-error .jfQuestion-label { color: $general-error; }


.jfInput-input, .jfInput-textarea {
  &::placeholder { color: $inputPlaceholderColor; }
  &.form-validation-error { border-color: $general-error; }
  border-radius: $input-borderRadius;
  // Extended theme rules moved from the default scss
  &:focus { border-color: $inputBorderColor-focus; }
  &:not(:read-only):focus, &:not(:read-only):active { border-color: $focusBorderColor; }
  border-color: $inputBorderColor;
  background-color: $inputBgColor;
  color: $inputColor;
}

.jfAddress-search {
  /* stylelint-disable no-descending-specificity */
  .jfInput-input {
    &[placeholder]::placeholder {
      color: $addressPlaceholder;
    }
  }
  /* stylelint-enable no-descending-specificity */
}

.jfInput-dropdown.form-validation-error { border-color: $general-error; }

.jfTextarea-editor[contenteditable] {
  &:focus, &:active {
    border-color: $focusBorderColor;
    &::placeholder { color: $inputPlaceholderColor; }
  }
  // Extended theme rules moved from the default scss
  color: $inputColor;
  background-color: $inputBgColor;
  border-color: $inputBorderColor;
  border-radius: $input-borderRadius;
  &:empty:before { color: $addressPlaceholder; }
}
// accesibility 

.jfRequiredStar-message {
  background-color: $progressItemLabel-bgColor;
  color: $progressItemLabel-color;
  border-radius: $input-borderRadius;
}

.jfProgress-item { // clickable area
  &.isValid {
    span.icon_check svg { fill: $inputBorderColor-success; }
  }
}

.jfInput-button {
  border: 2px solid $buttonBorderColor;
  background-color: $buttonBgColor;

  &.forPrev-heading, &.forNext-heading {
    &[disabled] {
      opacity: 0.5;
    }
  }

  &.forPrev, &.forPrev-heading, &.forBackToForm {
    color: rgba($prevButtonColor,.7);

    &[disabled] {
      opacity: 0.5;
    }
  }

  &.forMobileNav {
    &.forPrev {
      .iconSvg svg {
        fill: $prevButtonColor;
      }
    }

    &.forNext {
      .iconSvg svg {
        fill: $nextButtonColor;
      }
    }
  }

  &.forNext, &.forNext-heading {
    color: $nextButtonColor;
    border-radius: 0 0 $button-borderRadius 0;

    &:hover { border-color: lighten($buttonBorderColor-next, 5%); }

    &[disabled] {
      opacity: 0.5;
    }
  }

  &.form-submit-button, &.forReview, &.forReviewButton {
    color: $submitButtonColor;
    border-radius: $button-borderRadius;
    background: darken($actions-bg, 10%);
    &:not(.forMobileNav) {
      border-radius: 0 0 $button-borderRadius 0;
    }
    &:hover {
      background-color: darken($actions-bg, 5%);
    }

    &:focus {
      background-color: darken($actions-bg, 7%);
    }
  }
}

.jfCard {
  background-color: $card-bg;
  @if ($card-boxShadow != "" and $card-boxShadow != "none" and $card-boxShadow != "0px") {
    box-shadow: -1px 15px 33px 4px rgba(0, 0, 0, 0.15);
  }
  @else {
    box-shadow: none;
  }
  border-radius: $card-borderRadius;
  @if ($card-borderColor != "" and $card-borderColor != "none") {
    border: 1px solid $card-borderColor;
  }
  @else {
    border: none;
  }
}

.jfCard-actions {
  border-radius: 0 0 $card-borderRadius $card-borderRadius;
  background-color: $actions-bg;
}

.sacl-state-text { background-color: $progress-backgroundColor; }

.jfProgress {
  @if ($general-showProgress == false) {
    display: none;
  }

  &-itemWrapper, &-itemWrapperLine {
    @if ($general-showProgressBar == false) {
      display: none;
    }
  }

  .jfProgress-infoContent {
    background-color: rgba($color: $progress-backgroundColor, $alpha: .1%);
    color: $progress-textColor;

    @if ($general-showProgressButton) {
      display: inline-block;
    }
    @else {
      display: none;
    }

    &.forNew:hover { background-color: lighten($progress-backgroundColor, 15%); }
    &.isUntouched:before,
    &.isUntouched:after { animation-name: overviewButtonPulse; }
  }
}

@keyframes overviewButtonPulse {
  0% { box-shadow: 0 0 0 0 rgba($progress-backgroundColor, (alpha($progress-backgroundColor) / 2)); }
  70% { box-shadow: 0 0 0 10px rgba($progress-backgroundColor, 0); }
  100% { box-shadow: 0 0 0 0 rgba($progress-backgroundColor, 0); }
}

.jfRadio-label,
.jfCheckbox-label,
.jfInput-dropdown {
  border-radius: $input-borderRadius;
}

.jfCard-question,
.jfReview-content {
  border-radius: $card-borderRadius $card-borderRadius 0 0;
  background-color: $card-bg;
}

.jfDropdown-toggle {
  border-radius: 0 $selectionItem-borderRadius/2 $selectionItem-borderRadius/2 0;
}

.jfDropdown-chip {
  border-radius: $selectionItem-borderRadius/2;

  .removeChip {
    border-radius: $selectionItem-borderRadius/4;
  }
}

.jfDropdown-optionListWrapper {
  border-radius: 0 0 $input-borderRadius $input-borderRadius;
}

.jfForm-wrapper.hasTouch {
  @media #{$mobile} {
    select.form-dropdown {
      border-radius: $input-borderRadius;
    }
  }
}

.jfMatrix.forMobile {
  border-radius: $input-borderRadius;
}

// jfPayments
#paypal-spb-area.has-fastlane {
  [class*="-hosted-fields"] {
    border: 1px solid #e5e8e8;
    background-color: transparent;
    border-radius: 4px;
  }
}

[class*="-hosted-fields"] {
  border: 1px solid $inputBorderColor;
  background-color: $inputBgColor;
  border-radius: ($input-borderRadius * .8);
}

.loading-wallet-buttons {
  max-width: 750px;
  width: 100%;
  height: auto;
  background: #000;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .2s ease;
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  &#googlepay-button-spinner {
    .google-pay-logo {
      position: relative;
      top: unset;
      margin: 2px 0 0 4px;
      width: 40px;
      height: 40px;
      transform: none;
    }
  }
  &#applepay-button-spinner {
    .apple-pay-logo {
      position: relative;
      top: unset;
      margin: 2px 0 0 4px;
      width: 40px;
      height: auto;
      transform: none;
    }
  }
  .loading-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    animation: rotate .5s ease infinite;
  }
}

.hide-loading {
  display: none;
}

// jfPayments

.jfProgress-itemCell {
  border-radius: $input-borderRadius*.75;
}

.jfProgress-itemWrapperLine {
  @if ($pageBg-state) {
    $pageBg-logoBackgroundColor-luminance: get-luminance-value($pageBg-logoBackgroundColor);

    @if ($pageBg-logoBackgroundColor-luminance > 0.5) {
      background-color: darken($pageBg-logoBackgroundColor, 20%);
    }
    @if ($pageBg-logoBackgroundColor-luminance < 0.5) {
      background-color: lighten($pageBg-logoBackgroundColor, 20%);
    }
  }
}

.jfProgress-itemCircle,
.jfProgress-item.isActive .jfProgress-itemCircle:after {
  @if ($pageBg-state) {
    $pageBg-logoBackgroundColor-luminance: get-luminance-value($pageBg-logoBackgroundColor);

    @if ($pageBg-logoBackgroundColor-luminance > 0.5) {
      border-color: $pageBg-logoBackgroundColor;
      background-color: darken($pageBg-logoBackgroundColor, 30%);
    }
    @if ($pageBg-logoBackgroundColor-luminance < 0.5) {
      border-color: $pageBg-logoBackgroundColor;
      background-color: lighten($pageBg-logoBackgroundColor, 30%);
    }
  }
}

.jfProduct-detail.form-product-item-detail {
  border-radius: $card-borderRadius/2;
}

.jfProductDetail {
  &.forPrice {
    border-radius: $card-borderRadius/2;
  }
}

.buttonMenu-caret { border-left: 2px solid $buttonBorderColor-next; }
.buttonMenu.isOpen .buttonMenu-caret { background-color: lighten($buttonBgColor-next, 5%); }

/* stylelint-disable */
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if ($index) {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@mixin nextArrow($color) {
  $color: #{$color};
  @if(str-index($color,'#') == 1) {
    $color: str-replace($color, '#', '%23')
  }
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3e%3cg fill='none' fill-rule='evenodd' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M1.7797 8.0199h20.9252l-6.2016 6.2016'/%3e%3cpath d='M16.806 1.308l5.8236 6.5842-2.9118 3.0499'/%3e%3c/g%3e%3c/svg%3e");
  right: -.7em;
}

@mixin prevArrow($color, $opacity: 100%) {
  $color: #{$color};
  @if(str-index($color,'#') == 1) {
    $color: str-replace($color, '#', '%23');
  }
  
  $opacity: #{$opacity};
  @if(str-index($opacity, '%') > 0) {
    $opacity: str-replace($opacity, '%', '%25');
  }
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3e%3cg fill='none' fill-rule='evenodd' stroke='#{$color}' stroke-opacity='#{$opacity}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M22.2203 8.0199H1.2951l6.2016 6.2016'/%3e%3cpath d='M7.194 1.308L1.3704 7.8922l2.9118 3.0499'/%3e%3c/g%3e%3c/svg%3e");
  right: .7em;
}
/* stylelint-enable */

// For Thank You Backdrop Effect
.jfThankYou-wrapper:before {
  @if ($pageBg-state) {
    background: $pageBg-logoBackgroundColor;
  }
  @else {
    background: $thankYouPage-bgColor;
  }
}

.cf-minimal {
  .jfForm-background-mask {
    @if ($pageBg-logoBackgroundColor != "") {
      background: $pageBg-logoBackgroundColor;
    }
    @else {
      background: $welcomePage-bgColor;
    }
    border-radius: $card-borderRadius;
  }

  &.sectionHeaderMode {
    .jfWelcome-wrapper.isHeader {
      .jfWelcome-buttonWrapper .jfWelcome-button {
        background: $actions-bg;

        &:hover {
          background: darken($actions-bg, 8%);
        }

        &:focus-visible {
          outline: none;
          box-shadow: inset 0 0 10px $inputBorderColor-focus;
        }
      }
    }
  }

  &.JotFormCardBuilder {
    .welcome-page-content {
      @if ($pageBg-logoBackgroundColor != "") {
        background: $pageBg-logoBackgroundColor;
      }
      @else {
        background: $welcomePage-bgColor;
      }
    }
    .thankyou-page-content {
      @if ($pageBg-logoBackgroundColor != "") {
        background: $pageBg-logoBackgroundColor;
      }
      @else {
        background: $thankYouPage-bgColor;
      }
    }

    .jfCard[data-type="control_head"] {
      .jfHeading-buttonWrapper {
        background: $actions-bg;
      }
    }
  }

  .jfWelcome-button:not(.forPrev-heading):not(.forNext-hading):after {
    @include nextArrow($welcomeButton-color);
  }
  .jfInput-button:not(.forMobileNav) {
    &.forNext:after, &.forNext-heading:after {
      @include nextArrow($nextButtonColor);
    }

    &.forPrev, &.forPrev-heading, &.forBackToForm {
      &:before {
        @include prevArrow($prevButtonColor, 70%);
      }

      &:hover {
        color: $prevButtonColor;

        &:before {
          @include prevArrow($prevButtonColor);
        }
      }
    }
  }
}

// Extended theme rules moved from the default scss & field scss files

.jfMatrix {
  color: $matrixTextColor;
  .jfMatrixTable-cell { border-right: 4px solid $matrixRowHeaderBorderColor; }
  &.forYesNo {
    .jfMatrixInputList-item { background-color: $matrixListItemBgColor; }
    .jfMatrixLabelList-item { background-color: $matrixListItemBgColor; }
  }
}

.jfMatrixTable-row {
  background-color: $matrixListItemBgColor;

  &:hover { background-color: $matrixRowBgColor-hover; }
}

.jfRadio-otherInputField,
.jfCheckbox-otherInputField {
  color: $choiceColor-success;
}

.jfInput-dropdown {
  background-color: $inputBgColor;
  border-color: $inputBorderColor;

  &.isOpen, &:hover {
    border-color: $inputBorderColor-hover;

    &:before { border-top-color: $inputBorderColor-hover; }
  }
}

.jfDropdown-search {
  background-color: $drowdownSearchInputBg;
  color: $drowdownSearchInputColor;
  &::placeholder { color: $dropdownPlaceholderColor; }
}

.jfDropdown-optionListWrapper.isOpen.forDrawer { border-color: $inputBorderColor; }

.jfDropdown-toggle:before { border-top-color: $inputBorderColor; }

.jfDropdown-optionListItem {
  color: $dropdownOptionLabelColor;
  &.isSelected {
    background-color: $dropdownOptionBgColor-success;
    border-color: $inputBorderColor;
  }

  &:not(.isSelected) {
    &:hover, &:focus, &.js-selected, &.isHighlighted {
      background-color: $dropdownOptionBgColor-hover;
    }
  }
}

body.isMobile,
body.isTablet {
  .jfForm-wrapper.hasTouch {
    select.form-dropdown {
      color: $mobileDropdownSelectedColor;
      background-color: $inputBgColor;
      border-color: $inputBorderColor;
    }
  }
}

.jfDropdown-chip.isSingle { color: $labelColor; }

.jfDropdown-optionListGroupTitle { color: $labelColor; }

// BUGFIX :: Encryption badge overlapped by Powered by Jotform banner.
.jfForm-wrapper .jfWelcome-feature-badge {
  .withJotformFooter & {
    bottom: 76px;
  }
}

@media #{$mobile} {
  .jfMatrix.forMobile {
    .jfMatrixScale-labelWrapper {
      color: $matrixSliderFill-success;
    }
    .jfMatrixChoice-row {
      background-color: $matrixMobileRowColor;
      &:hover { background-color: $matrixMobileRowColor-hover; }
    }
  }
}

.jfInput-inputLabel {
  color: $inputBorderColor;
}

.jfToolbar { background-color: $toolbarBackground; }

.jfToolbar-item {
  svg [fill] {
    fill: $toolbarIconFill;
  }
}

.jfToolbar-select { background-color: $inputBgColor; }

.jfRadio-label,
.jfCheckbox-label {
  border-color: $inputBorderColor;
  &:hover { background-color: $inputBgColor-hover; }
}

.jfRadio-customInput,
.jfCheckbox-customInput,
.checkboxProduct-customInput,
.radioProduct-customInput {
  border-color: $inputBorderColor;
}

.jfRadio-customInputIcon,
.jfCheckbox-customInputIcon,
.checkboxProduct-customInputIcon,
.radioProduct-customInputIcon {
  background-color: $inputBorderColor-success;
}


.jfRadio-labelText,
.jfCheckbox-labelText,
.radioProduct-labelText,
.checkboxProduct-labelText {
  color: $labelColor;
}

@keyframes blink2 {
  0% {
    background-color: transparent;
    border-color: $inputBorderColor;
  }
  100% {
    border-color: $inputBorderColor-success;
    background-color: $inputBgColor-success;
  }
}

.jfRadio-input[type="radio"],
.jfCheckbox-input[type="checkbox"] {
  &:checked ~ .jfRadio-label,
  &:checked ~ .jfCheckbox-label {
    animation: blink2 .15s linear 2 normal forwards;
    .jfRadio-labelText,
    .jfCheckbox-labelText,
    .radioProduct-labelText,
    .checkboxProduct-labelText {
      color: $choiceColor-success;
    }
    .jfRadio-customInput,
    .jfCheckbox-customInput { border-color: $inputBorderColor-success; }
  }

  &:focus-visible + .jfRadio-label .jfRadio-customInput,
  &:focus-visible + .jfCheckbox-label .jfCheckbox-customInput {
    outline: 2px solid #4dbefc;
    outline-offset: 5px;
  }
}

.radioProduct-input[type="radio"],
.checkboxProduct-input[type="checkbox"] {
  &:checked ~ .radioProduct .radioProduct-label,
  &:checked ~ .checkboxProduct .checkboxProduct-label {
    .radioProduct-customInput,
    .checkboxProduct-customInput { border-color: $inputBorderColor-success; }
  }
}

@keyframes blink {
  0% {
    background-color: transparent;
    color: $yesNoLabelColor;
  }
  100% {
    background-color: $yesNoBgColor-success;
    color: $yesNoColor-success;
  }
}

.jfYesno-label {
  color: $yesNoLabelColor;
  border-color: $yesNoBorderColor;
  background-color: $yesNoBgColor;
  &:hover { background-color: $yesNoBgColor-hover; }
}

.jfYesno {
  input[type="radio"]:checked ~ .jfYesno-label {
    // animation: blink .1s linear 3 alternate forwards;
    animation: blink .15s linear 2 normal forwards;
  }
  &:focus {
    background-color: $yesNoBgColor-hover;
    .jfYesno-label { color: #fff; }
  }

  input[type="radio"]:focus-visible + .jfYesno-label{
    outline: 2px solid #4dbefc;
    outline-offset: 5px;
  }
}


.jfUpload-wrapper {
  .jfUpload-container { background: $uploadContainerBg; }
  .jfUpload-heading { color: $uploadTitleColor; }
}

.jfTranslation-dropdown { background-color: $translationDropdownBgColor; }
.jfTranslation .dd-placeholder { background-color: $translationDropdownBgColor; }

.product {
  color: $paymentProductInfoColor;
  &--selected { color: $paymentSelectedProductInfoColor; }
  &-mini {
    &__title, &__price { color: $paymentMiniTitleColor; }
  }
}

.products:not(.products--selected) .product--selected:not(.product--active) {
  background: $paymentSelectedProductBgColor;
}

.products {
  height: auto; // needed for showing each product on different browsers and screen sizes
  transition: 0.3s;
}

.isMobile .new-payment-coupon .form-payment-footer_total {
  background: $paymentMobileTotalGradient;
}

.product__detail-options th { color: $paymentDetailOptionsColor; }

.product__header { color: $paymentProductHeaderColor; }

.form-payment-price,
.form-item-subtotal,
.form-item-subtotal .currency,
.paymentCardDetail-footer-wrapper { color: $paymentTotalColor; }

.product-summary__bag {
  color: $paymentCartHeaderColor;
}

.jfSubProductTable { color: $paymentProductTableColor; }

[data-type="control_email"] .jfQuestion-fields .jfEmailVerify-wrapper {
  color: $emailVerificationColor;
}

.jfInput-input.sacl-input { color: $saclInputColor; }

.qq-upload-file { color: $uploadFileNameColor; }


&:not(.isMobile):not(.forMiniCard) {
  .jfProgress {
    &-item.isActive {
      &.isValid {
        .jfProgress-itemCircle {
          background: $inputBorderColor-success;
          border-color: $inputBorderColor-success;
        }
      }
    }
  }
}

@media #{$mobile} {
  .jfProgress-item {
    &.isValid .jfProgress-itemCircle { background: $inputBorderColor-success; }
  }
}

.jfMatrixScale-button {
  .jfMatrixInputList-item.isFilled & { background-color: $matrixSliderBgColor; }
}

.jfMatrix-inputWrapper.forRadio {
  input[type="radio"]:checked + .jfMatrix-customRadio {
    background-color: $matrixSliderFill-success;
    border-color: $matrixSliderFill-success;
  }
}

.jfMatrix-inputWrapper.forCheckbox {
  input[type="checkbox"]:checked + .jfMatrix-customCheckbox {
    background-color: $matrixSliderFill-success;
    border-color: $matrixSliderFill-success;
  }
}

.jfMatrixBinary-input:checked ~ .jfMatrixBinary-custom {
  background-color: $matrixSliderFill-success;
}

.jfMatrixBinary-button {
  border: 2px solid $matrixSliderFill-success;
  color: $matrixSliderFill-success;
  &.isActive {
    background-color: $matrixSliderFill-success;
  }
}

.jfMatrixScale-item {
  .jfMatrixInputList-item.isFilled & { background-color: $matrixSliderFill-success; }
}

.jfMatrixScale { background-color: $matrixSliderBg; }

div.jfField.jfTime-until {
  color: $labelColor;
}

.jfRating-scaleText {
  .jfRating-fromText,
  .jfRating-toText {
    color: $labelColor;
  }
}

.jfWidget, .jfCard {
  &[data-type="control_signature"] {
    .signature-pad-passive,
    .signature-pad-wrapper { color: $widgetSignatureLineColor; }
    .signature-pad-passive .signature-line {
      border-color: $widgetSignatureLineColor;
    }
  }
}

// Encrypted form inputs blurred to hide encrypted data from user.
[data-encrypted-answer="true"] {
  filter: blur(.2rem);
  pointer-events: none;
}

.jfHiddenTextLabel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-product-item .form-product-child-table tr td .currency__price.underlined {
  text-decoration: line-through;
}

.form-payment-subscriptionprices {
  .form-amount-container {
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 18px !important;
    line-height: 20px !important;
  }

  .form-payment-price {
    width: unset;
    padding: unset;

    span.first-payment,
    span.recur-payment,
    span.custom-recurring {
      display: inline-block;
      min-width: 128px;
      text-align: right;
    }
  }

  .form-first-payment-price-label,
  .form-payment-price span.first-payment {
    color: #2c3345;
    width: 100% !important;
    font-weight: 500;
  }

  .form-recur-payment-price-label,
  .form-payment-price span.recur-payment,
  .form-custom-recurring-price-label,
  .form-payment-price span.custom-recurring {
    font-size: 14px !important;
    width: 100% !important;
    font-weight: 300 !important;
    color: #7F859C !important;
  }

  .form-amount-container:not(:last-child) {
    margin-bottom: 8px;
  }
}