.section.section-default {
  overflow: visible;
}

.PQFormWrapper {
  .template {
    display: none;
  }

  [data-autoclone] {
    .autocloneDel {
      display: none;
    }

    .autocloneDel.show {
      display: block;
    }
  }

  &.longForm {
    form.pqwizardform {
      display: flex;

      .pqbk-header {
        width: 20%;
      }

      .pqbk-content {
        width: 80%;
        flex-grow: 1;
        overflow-y: auto;
      }

      .pqbk-tabs {
        position: fixed;
        top: 150px;
        overflow-y: auto;
        max-height: 500px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 2rem;
        gap: 2rem;
      }

      .pqbk-tab {
        position: relative;
        font-size: 16px;
        color: #666;
        cursor: pointer;
        padding-left: 2rem;
      }

      .pqbk-tab::before {
        content: attr(data-tab);
        position: absolute;
        left: 0;
        top: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #ccc;
        color: white;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        font-weight: bold;
        z-index: 1;
      }

      .pqbk-tab::after {
        content: "";
        position: absolute;
        left: 11px;
        top: 24px;
        height: calc(100% + 2rem);
        width: 2px;
        background-color: #e0e0e0;
        z-index: 0;
      }

      .pqbk-tab:last-child::after {
        display: none;
      }

      .pqbk-tab.is-active::before {
        background-color: #00796b;
      }

      .pqbk-tab.is-enabled:not(.is-active)::before {
        background-color: #5bb98c;
      }

      .pqbk-tab.is-active {
        color: #00796b;
        font-weight: bold;
      }

      @media (max-width: 768px) {
        form.pqwizardform {
          flex-direction: column;
        }

        .pqbk-tabs {
          display: none;
        }
      }
    }
  }

  &:not(.longForm) {
    .pqbk-content {
      justify-content: center;
      transition: opacity 0.25s ease-in-out, height 0.75s ease-in-out;
      overflow: hidden;
      opacity: 0;

      &.show {
        opacity: 1;
      }
    }

    .pqbk-tabs {
      display: flex;
      border-bottom: 1px solid #ccc;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      scrollbar-width: none;
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none;
      }

      .pqbk-tab {
        white-space: nowrap;
        filter: blur(1px);
        padding: 0 7px;
        border: 1px solid #ccc;
        border-top: none;
        border-bottom: none;
        opacity: 0.35;
        cursor: default;
        transition: filter 0.5s ease-in-out, background-size 0.25s ease, color 0.5s ease-in-out;
        background: linear-gradient(to top, #ccc 100%, transparent 0%);
        background-size: 100% 0%;
        background-repeat: no-repeat;
        background-position: bottom;
      }

      .pqbk-tab.is-enabled {
        opacity: 1;
        cursor: pointer;
        filter: blur(0px);
      }

      .pqbk-tab.is-active {
        background-size: 100% 100%;
        filter: blur(0px);
      }
    }
  }

  .pqbk-header {
    color: var(--primary);
  }

  .pqbk-content {
    position: relative;
    display: flex;

    .pqbk-wizard-step {
      width: 85%;
      padding: 14px 28px;
      background: white;

      .btn-group,
      .btn-group-vertical {
        .btn-check:checked + .btn::after {
          content: " ✓";
          position: absolute;
          top: 0.4em;
          right: 0.6em;
          font-size: 1rem;
          color: #fff;
        }

        .btn {
          padding-right: 1.8em;
        }

        .btn-group .btn {
          position: relative;
        }
      }

      .range-value {
        margin-top: 4px;
        font-size: 0.9rem;
        color: var(--dark);
        background-color: #f3f4f6;
        padding: 6px 10px 6px 12px;
        border-left: 4px solid var(--primary);
        border-radius: 4px;
        width: 80px;
      }

      .pqbk-wizard-step-button-container {
        justify-content: space-between;
        width: 100%;

        button {
          &.inactive {
            opacity: 0.35;
          }

          &:only-child {
            margin-right: auto;

            &.pqbk-wizard-step-button-start,
            &.pqbk-wizard-step-button-next,
            &.pqbk-wizard-step-button-finish {
              margin-left: auto;
              margin-right: 0;
            }
          }
        }
      }

      .fullWidth.inputLabel {
        display: flex;
        gap: 0.5rem;
        align-items: center;

        input {
          flex: 1 1 auto;
        }
      }

      .smallWidth.inputLabel {
        display: flex;
        justify-content: space-between;

        input {
          width: 75px;
        }
      }

      .pqwizard-range {
        > label {
          display: flex !important;
          white-space: nowrap;
          align-items: center;
        }
      }

      .PQWizardLoadingModal {
        .spinnerMsg {
          margin-bottom: 15px;
          display: block;
        }
      }
    }

    &.stepsForm {
      .pqbk-wizard-step {
        position: absolute;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transition: transform 0.5s ease-in-out;

        .pqbk-wizard-step-button-container {
          display: flex;
        }

        &.offscreen-left {
          transform: translateX(-100vw);
          pointer-events: none;
        }

        &.offscreen-right {
          transform: translateX(100vw);
          pointer-events: none;
        }

        &.teleport-center {
          transition: none;
          transform: translateX(0);
        }

        &.teleport-right {
          transition: none;
          transform: translateX(100vw);
          pointer-events: none;
        }

        &.teleport-left {
          transition: none;
          transform: translateX(-100vw);
          pointer-events: none;
        }
      }
    }

    &.longForm {
      flex-direction: column;

      .pqbk-wizard-step {
        position: relative;

        &:not(.is-enabled) {
          display: none;
        }

        &.is-enabled {
          display: block;
        }

        .pqbk-wizard-step-button-container {
          display: none;
        }

        &.is-active {
          .pqbk-wizard-step-button-container {
            display: flex;
          }
        }
      }
    }
  }

  &.sidebarTabs {
    display: flex;
    gap: 2rem;
    align-items: flex-start;

    .pqbk-header {
      width: 280px;
      flex: 0 0 280px;
      position: sticky;
      top: 2rem;
      align-self: flex-start;
    }

    .pqbk-tabs {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      border-bottom: 0;
      overflow: visible;
      white-space: normal;
      padding: 0;

      .pqbk-tab {
        position: relative;
        width: 100%;
        min-height: 64px;
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem 0.75rem 1.25rem;
        border: 0;
        border-left: 5px solid #d1d5db;
        background: none;
        background-size: 0 0;
        filter: none;
        opacity: 0.55;
        color: #6b7280;
        cursor: default;
        white-space: normal;
      }

      .pqbk-tab.template {
        display: none;
      }

      .pqbk-tab.is-enabled {
        opacity: 1;
        cursor: pointer;
        color: var(--dark);
      }

      .pqbk-tab.is-active {
        color: var(--primary);
        font-weight: 700;
        border-left-color: var(--primary);
      }

      .pqbk-tab.is-active::after {
        content: "";
        position: absolute;
        right: -0.55rem;
        top: calc(50% - 0.55rem);
        width: 1.1rem;
        height: 1.1rem;
        background: white;
        transform: rotate(45deg);
      }
    }

    .pqbk-content {
      flex: 1 1 auto;
      min-width: 0;
    }

    &.stepsForm {
      .pqbk-content.stepsForm {
        .pqbk-wizard-step {
          width: 100%;
        }
      }
    }

    @media (max-width: 991px) {
      display: block;

      .pqbk-header {
        width: auto;
        position: static;
      }

      .pqbk-tabs {
        flex-direction: row;
        gap: 0;
        border-bottom: 1px solid #ccc;
        overflow-x: auto;
        white-space: nowrap;

        .pqbk-tab {
          min-height: auto;
          border-left: 0;
          border-bottom: 3px solid transparent;
          white-space: nowrap;
          padding: 0.75rem 1rem;
        }

        .pqbk-tab.is-active {
          border-bottom-color: var(--primary);
        }

        .pqbk-tab.is-active::after {
          display: none;
        }
      }
    }
  }
}