/* variable color */
$white-color: #ffffff;
@import "./components/dashboard/styles/overview.scss";

@mixin font-face($font-family, $font-path) {
  @font-face {
    font-family: #{$font-family};
    src: url(#{$font-path});
    /* Other font properties like font-weight and font-style can also be defined here */
  }
}

// Usage
@include font-face(
  "IBM Plex Sans",
  "../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf"
);
@include font-face("Lato", "../fonts/Lato/Lato-Regular.ttf");
@include font-face("Montserrat", "../fonts/Montserrat/Montserrat-Regular.ttf");
@include font-face("Poppins", "../fonts/Poppins/Poppins-Regular.ttf");
@include font-face("Roboto", "../fonts/Roboto/Roboto-Regular.ttf");

.spsg-header {
  padding: 0 20px !important;
  display: inline-flex;
  align-items: center;
}

.spsg-logo {
  // background: url("../images/logo.svg");
  // background-repeat: no-repeat;
  // background-size: contain;
  // background-position: center;
  // width: 164px;
  // height: 36px;
  margin: 24px auto 10px;
  text-align: center;
}

.spsg-heading[class] {
  font-weight: 600;
  font-size: 32px;
  line-height: 48px;
  padding: 20px 0;
}

/*=============================
Module Card Style
=============================*/
#sbooster-modules-page {
  .ant-layout-header {
    padding: 0;
  }

  .ant-layout-header,
  .ant-layout-sider {
    background: #ffffff;
  }
}

.site-card-wrapper {
  .spsg-module-card {
    border-radius: 10px;
    background: #fff;

    .ant-card-body {
      padding: 0;

      .ant-divider {
        margin-bottom: 16px;
      }

      .ant-btn[class] {
        border-radius: 8px;
        height: auto;
        line-height: inherit;
        padding: 8px 18px 7px 15px !important;
        border: 1px solid #b2ddff;
        position: relative;

        .anticon {
          svg {
            font-size: 16px;
            color: #989fab;
            position: relative;
            top: 1px;
          }
        }

        &:hover {
          border: 1px solid #008dff;

          .anticon {
            svg {
              color: #008dff;
            }
          }
        }
      }
    }

    .switch-btn {
      @media (min-width: 768px) and (max-width: 1024px) {
        float: none !important;
      }
    }

    .ant-switch {
      background: #638dc1;
      width: 46px;
      height: 25px;
      margin-left: -10px;

      @media (min-width: 768px) and (max-width: 1024px) {
        margin-left: 0 !important;
      }

      .ant-switch-handle {
        top: 3.5px;
        left: 4px;
      }

      &.ant-switch-checked {
        background: #2c81ff;

        .ant-switch-handle {
          left: calc(100% - 18px - 4px);
        }
      }
    }

    .module-thumb {
      border-radius: 35px;
      background: #e7f3ff;
      padding: 14px;
      margin-right: 11px;
      width: 64px;
      height: 64px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .module-name {
      color: #073b4c;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 29px;
    }

    .module-desc {
      color: #757c7e;
      font-weight: 400;
      font-size: 16px;
      line-height: 28px;
      padding: 17px 40px 51px 23px;
      min-height: 180px;
    }

    .spsg__module-footer {
      background: #ddf0ff;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;

      @media (max-width: 767px) {
        padding: 19px 8px 19px !important;
      }

      .ant-space {
        .ant-space-item {
          .doc-btn {
            display: flex;
            gap: 10px;
          }

          .switch-btn {
            float: none !important;
          }
        }
      }

      .ant-space {
        display: flex;
        justify-content: space-between;
        width: 100%;
      }

      @media (min-width: 768px) and (max-width: 1024px) {
        // padding-left: 6px !important;
        // padding-right: 6px !important;

        & > div {
          // gap : 3px !important;
        }

        a {
          // font-size: 11px !important;
        }
      }

      .footer-btn[class] {
        color: #073b4c;
        font-size: 16px;
        font-weight: 400;
        border-radius: 8px;
        border: 1px solid #b2ddff;
        background: #fff;

        &:hover {
          color: #0875ff;
          border: 1px solid #b2ddff;
        }
      }
    }
  }
}

/*=============================
Pagination Style
=============================*/
.spsg__module-pagination {
  li {
    min-width: 47px;
    height: 47px;
    line-height: 45px;
    border-radius: 4px;
    border: 1px solid #b2ddff;

    .ant-pagination-item-link {
      border: 0;
    }
  }

  .ant-pagination-item {
    a {
      &:hover {
        color: #fff;
        border-radius: 4px;
        background: #008dff;
      }
    }

    &.ant-pagination-item-active {
      a {
        color: #fff;
        background: #008dff;
        border-radius: 4px;
      }
    }
  }
}

.spsg-search-section {
  .search-bar {
    padding-right: 10px;

    @media (max-width: 520px) {
      margin-bottom: 20px;
    }

    &.active {
      input {
        display: block;
        width: 250px;
        border-right: none;
        transition: 0.3s linear 0s;

        @media (max-width: 520px) {
          width: 73%;
        }

        .ant-input-group-wrapper {
          span {
            &.ant-input-wrapper {
              display: flex;
            }
          }
        }
      }

      .ant-input-group-addon {
        border-left-width: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  input[class] {
    background: #f6f9ff;
    border-radius: 8px;
    border: 0;
    height: 46px;
    width: 0;
    outline: none;
    display: none;
    border: 1px solid #b2ddff;
    border-right-width: 0;
    transition: 0.3s linear 0s;

    &:focus {
      box-shadow: none;
    }
  }

  .ant-input-group-addon[class] {
    background-color: #f6f9ff;
    border: 1px solid #b2ddff;
    padding: 4px 10px 0 15px;
    border-radius: 8px;
    color: #073b4c;
    font-size: 20px;
    cursor: pointer;
    width: 46px;
    height: 46px;
    // display: flex;
    align-items: center;
    justify-content: center;
  }

  .ant-select-selector[class] {
    height: 56px;
    padding: 11px 24px;
    border: 1px solid #ecedf0;
    border-radius: 8px;
  }

  .module-filter {
    margin-left: 24px;
    position: relative;
    display: inline-block;
    max-width: 100%;

    .select-dropdown__button {
      background: #ffffff;
      border: 1px solid #ecedf0;
      border-radius: 8px;
      width: 218px;
      height: 56px;
      text-align: left;
      padding: 0 20px;
      cursor: pointer;

      &:focus {
        outline: none;
      }

      span {
        color: #1b1b50;
        font-weight: 400;
        font-size: 18px;
        line-height: 22px;
      }
    }

    .dropdown__list {
      background: #ffffff;
      border: 1px solid #ecedf0;
      box-shadow: 0px 12px 48px rgba(27, 27, 80, 0.1);
      border-radius: 8px;
      width: 218px;
      padding: 18px;
      transform-origin: top left;
      transform: translateY(20px);
      transition: all ease-in-out 0.3s;
      z-index: 2;
      position: absolute;
      opacity: 0;
      visibility: hidden;

      li {
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        label {
          font-weight: 400;
          font-size: 16px;
          line-height: 16px;
          color: #1b1b50;
        }
      }
    }

    &.active {
      .dropdown__list {
        opacity: 1;
        visibility: visible;
        transform: translateY(4px);
      }
    }

    .ant-dropdown-button {
      position: relative;

      button {
        width: 210px;
        text-align: left;
        height: 56px;
        border-radius: 8px !important;
      }

      .ant-dropdown-trigger {
        position: absolute;
        right: 5px;
        z-index: 3;
        top: 6px;
        height: 40px;
        border: 0;
        width: auto;
      }
    }
  }
}

.ant-select-item[class] {
  min-height: inherit;
}

/*===============================
Settings Sidebar
===============================*/
main.ant-layout-content.spsg-module-setting-layout {
  background: #f6f9ff;
  border-top-left-radius: 15px;
  z-index: 2;
  margin-left: -2px;
  margin-top: -1px;
}

.spsg-admin-setting-dashboard {
  background: #f6f9ff;

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

  @media (min-width: 1500px) {
    // gap: 20px;
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    // gap: 10px;
  }

  @media (min-width: 1500px) and (max-width: 2000px) {
    // gap: 20px;
  }

  &-sideabr {
    background: #ffffff;

    @media (min-width: 1800px) {
      // padding: 0 22px;
    }

    @media (max-width: 767px) {
      padding-top: 2px;
      margin-bottom: 40px;
    }

    h3 {
      display: flex;
      padding: 50px 20px 20px;
      align-items: center;

      a {
        gap: 7px;
        display: flex;
        color: #1d2327;
        font-size: 18px;
        box-shadow: none;
        align-items: center;

        &:hover {
          &:before {
            content: "";
            position: absolute;
            background: #0875ff;
            width: 3px;
            height: 28px;
            right: 3px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
          }

          svg {
            rect {
              fill: #0875ff;
            }
          }
        }
      }

      @media (min-width: 1500px) {
        // padding: 50px 8px 40px;
      }

      svg {
        width: 14px;
      }
    }

    .all-widgets-menu {
      h4 {
        color: #073b4c;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        padding: 0 12px 20px 20px;
        gap: 10px;
        position: relative;
        cursor: pointer;

        &:hover:before {
          content: "";
          position: absolute;
          background: #0875ff;
          width: 3px;
          height: 28px;
          right: 3px;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }

        @media (min-width: 1500px) {
          // padding: 0 12px 20px 8px;
        }

        span {
          margin-left: auto;
          cursor: pointer;
        }

        .ant-menu-title-content {
          img {
            margin-left: -24px;
            display: flex;
          }
        }
      }

      .widgets-menu {
        padding: 0 20px 0 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;

        @media (min-width: 1800px) {
          // padding: 0 22px;
          padding: 0 42px 0 0;
        }

        &.ant-menu-hidden {
          max-height: 0; // Hide immediately when hidden class is applied
        }

        &:not(.ant-menu-hidden) {
          max-height: 900px; // Show immediately when hidden class is removed. Tall enough for every module route plus the Settings entry.
        }

        .spsg-selected-module {
          background: #0875ff;
          color: #ffffff !important;
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }

        li {
          padding: 12px 0px 12px 44px;
          position: relative;

          @media (min-width: 1500px) {
            // padding: 12px 0px 12px 34px;
          }

          &:hover {
            a {
              color: #ffffff;
            }
          }

          &:before {
            content: "";
            position: absolute;
            left: 18px;
            width: 18px;
            height: 18px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;

            @media (min-width: 1500px) {
              // left: 8px;
            }
          }

          &.fly-cart {
            &:before {
              content: "";
              background: url("../images/menu/quick-cart-icon.svg");
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/quick-cart-icon-white.svg");
              }
            }
          }

          &.progressive-discount-banner {
            &:before {
              content: "";
              background: url("../images/menu/free-shipping-bar-icon.svg");
              width: 20px;
              height: 18px;
              background-repeat: no-repeat;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/free-shipping-bar-icon-white.svg");
                width: 20px;
                height: 18px;
                background-repeat: no-repeat;
              }
            }
          }

          &.floating-notification-bar {
            &:before {
              content: "";
              background: url("../images/menu/floating-bar.svg");
              width: 20px;
              height: 18px;
              background-repeat: no-repeat;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/floating-bar-white.svg");
                width: 20px;
                height: 18px;
                background-repeat: no-repeat;
              }
            }
          }

          &.sales-pop {
            &:before {
              content: "";
              background: url("../images/menu/sales-pop.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/sales-pop-white.svg");
              }
            }
          }

          &.bogo {
            &:before {
              content: "";
              background: url("../images/menu/bogo.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/bogo-white.svg");
              }
            }
          }

          &.countdown-timer {
            &:before {
              content: "";
              background: url("../images/menu/countdown-timer.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/countdown-timer-white.svg");
              }
            }
          }

          &.upsell-order-bump {
            &:before {
              content: "";
              background: url("../images/menu/upsel.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/upsel-white.svg");
              }
            }
          }

          &.direct-checkout {
            &:before {
              content: "";
              background: url("../images/menu/direct-checkout.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/direct-checkout-white.svg");
              }
            }
          }

          &.stock-bar {
            &:before {
              content: "";
              background: url("../images/menu/stock-bar.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/stock-bar-white.svg");
              }
            }
          }
          &.quick-view {
            &:before {
              content: "";
              background: url("../images/menu/quickview-icon.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/quickview-icon-white.svg");
              }
            }
          }
        }

        a {
          color: #757d9e;
          padding-top: 12px;
          padding-bottom: 12px;
          text-decoration: none;
          outline: none;

          &:hover {
            color: #ffffff;
          }

          &:focus {
            outline: none;
            box-shadow: none;
          }
        }

        li.spsg-selected-module {
          a {
            color: #ffffff; // Set the color to white when the anchor is within a selected module
          }

          &.fly-cart::before {
            background: url("../images/menu/quick-cart-icon-white.svg");
          }

          &.progressive-discount-banner::before {
            background: url("../images/menu/free-shipping-bar-icon-white.svg");
            width: 20px;
            height: 18px;
            background-repeat: no-repeat;
          }

          &.floating-notification-bar::before {
            background: url("../images/menu/floating-bar-white.svg");
            width: 20px;
            height: 18px;
            background-repeat: no-repeat;
          }

          &.sales-pop::before {
            background: url("../images/menu/sales-pop-white.svg");
          }

          &.direct-checkout::before {
            background: url("../images/menu/direct-checkout-white.svg");
          }

          &.stock-bar::before {
            background: url("../images/menu/stock-bar-white.svg");
          }

          &.upsell-order-bump::before {
            background: url("../images/menu/upsel-white.svg");
          }

          &.countdown-timer::before {
            background: url("../images/menu/countdown-timer-white.svg");
          }

          &.quick-view::before {
            background: url("../images/menu/quickview-icon-white.svg");
          }

          &.bogo::before {
            background: url("../images/menu/bogo-white.svg");
          }
        }

        li {
          color: #757d9e;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;

          &:hover {
            background: #0875ff;
            color: #ffffff;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
          }
        }
      }
    }

    h3,
    .all-widgets-menu h4 {
      &.active-menu {
        &:before {
          content: "";
          position: absolute;
          background: #0875ff;
          width: 3px;
          height: 28px;
          right: 3px;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }
      }
    }
  }
}

.spsg__settings-sidebar {
  background: $white-color;

  @media (min-width: 1800px) {
    width: 320px !important;
    flex: 0 0 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
  }

  .ant-layout-sider-children[class] {
    background: $white-color;
    margin-top: 0;
  }
}

/*===============================
End Settings Sidebar
===============================*/

// progressive discount banner css start
.spsg-removable-icon-picker-wrapper {
  position: relative;

  .clear-icon {
    position: absolute;
    top: -11px;
    left: 38px;
    font-size: 18px;
    height: 22px;
    width: 22px;
    background: #0009;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    padding-bottom: 2px;
    z-index: 99999;
  }
}

// progressive discount banner css end
// Premium warning message card
.spsg-upgrade-premium-notice-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 9px 9px 20px;
  border-radius: 5px;
  background: #e0f6e5;

  .spsg-premium-limit-warning-message {
    color: #073b4c;
    display: block;
    font-size: 16px;
  }

  .premium-btn {
    a {
      display: inline-flex;
      align-items: center;
      height: 40px;
      border-radius: 5px;
      gap: 10px;
      padding: 12px 14px;

      &:focus {
        color: #ffffff;
        box-shadow: none;
      }

      span {
        font-size: 16px;
        font-weight: 700;
      }
    }
  }

  .premium-btn {
    a {
      border: none;
      background: var(--premium-color, #ffac27);

      &:focus {
        color: #ffffff;
        box-shadow: none;
      }
    }
  }
}

// upsell order bump css end

.spsg-admin-dashboard {
  display: flex;
  flex-flow: row wrap;
  // background: #f4f7fe;

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

  @media (min-width: 1500px) {
    // gap: 20px;
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    // gap: 10px;
  }

  @media (min-width: 1500px) and (max-width: 2000px) {
    // gap: 20px;
  }

  &-sideabr {
    flex-basis: 200px;
    background: #ffffff;

    @media (min-width: 1800px) {
      flex-basis: 320px;
      padding: 0 22px;
    }

    @media (max-width: 767px) {
      padding-top: 2px;
      margin-bottom: 40px;
    }

    h3 {
      display: flex;
      position: relative;
      padding: 50px 20px 0px;
      align-items: center;

      a {
        gap: 7px;
        display: flex;
        color: #1d2327;
        font-size: 18px;
        box-shadow: none;
        align-items: center;

        &:hover {
          &:before {
            content: "";
            position: absolute;
            background: #0875ff;
            width: 3px;
            height: 28px;
            right: 3px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
          }

          svg {
            rect {
              fill: #0875ff;
            }
          }
        }
      }

      @media (min-width: 1500px) {
        // padding: 50px 8px 40px;
      }

      svg {
        width: 14px;
      }
    }

    .all-widgets-menu {
      h4 {
        cursor: pointer;
        color: #073b4c;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        padding: 0 12px 20px 20px;
        gap: 10px;
        cursor: pointer;
        position: relative;

        &:hover:before {
          content: "";
          position: absolute;
          background: #0875ff;
          width: 3px;
          height: 28px;
          right: 3px;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }

        @media (min-width: 1500px) {
          // padding: 0 12px 20px 8px;
        }

        span {
          margin-left: auto;
          cursor: pointer;
        }

        .ant-menu-title-content {
          img {
            margin-left: -24px;
            display: flex;
          }
        }
      }

      .widgets-menu {
        padding: 0 20px 0 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;

        @media (min-width: 1800px) {
          // padding: 0 22px;
          padding: 0 42px 0 0;
        }

        &.ant-menu-hidden {
          max-height: 0; // Hide immediately when hidden class is applied
        }

        &:not(.ant-menu-hidden) {
          max-height: 900px; // Show immediately when hidden class is removed. Tall enough for every module route plus the Settings entry.
        }

        .spsg-selected-module {
          background: #0875ff;
          color: #ffffff !important;
          border-top-right-radius: 8px;
          border-bottom-right-radius: 8px;
        }

        li {
          padding: 12px 0px 12px 44px;
          position: relative;

          @media (min-width: 1500px) {
            // padding: 12px 0px 12px 34px;
          }

          &:hover {
            a {
              color: #ffffff;
            }
          }

          &:before {
            content: "";
            position: absolute;
            left: 18px;
            width: 18px;
            height: 18px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;

            @media (min-width: 1500px) {
              // left: 8px;
            }
          }

          &.fly-cart {
            &:before {
              content: "";
              background: url("../images/menu/quick-cart-icon.svg");
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/quick-cart-icon-white.svg");
              }
            }
          }

          &.progressive-discount-banner {
            &:before {
              content: "";
              background: url("../images/menu/free-shipping-bar-icon.svg");
              width: 20px;
              height: 18px;
              background-repeat: no-repeat;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/free-shipping-bar-icon-white.svg");
                width: 20px;
                height: 18px;
                background-repeat: no-repeat;
              }
            }
          }

          &.floating-notification-bar {
            &:before {
              content: "";
              background: url("../images/menu/floating-bar.svg");
              width: 20px;
              height: 18px;
              background-repeat: no-repeat;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/floating-bar-white.svg");
                width: 20px;
                height: 18px;
                background-repeat: no-repeat;
              }
            }
          }

          &.sales-pop {
            &:before {
              content: "";
              background: url("../images/menu/sales-pop.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/sales-pop-white.svg");
              }
            }
          }

          &.bogo {
            &:before {
              content: "";
              background: url("../images/menu/bogo.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/bogo-white.svg");
              }
            }
          }

          &.countdown-timer {
            &:before {
              content: "";
              background: url("../images/menu/countdown-timer.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/countdown-timer-white.svg");
              }
            }
          }

          &.upsell-order-bump {
            &:before {
              content: "";
              background: url("../images/menu/upsel.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/upsel-white.svg");
              }
            }
          }

          &.direct-checkout {
            &:before {
              content: "";
              background: url("../images/menu/direct-checkout.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/direct-checkout-white.svg");
              }
            }
          }

          &.stock-bar {
            &:before {
              content: "";
              background: url("../images/menu/stock-bar.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/stock-bar-white.svg");
              }
            }
          }

          &.quick-view {
            &:before {
              content: "";
              background: url("../images/menu/quickview-icon.svg");
              width: 19px;
            }

            &:hover {
              &:before {
                content: "";
                background: url("../images/menu/quickview-icon-white.svg");
              }
            }
          }
        }

        a {
          color: #757d9e;
          padding-top: 12px;
          padding-bottom: 12px;
          text-decoration: none;
          outline: none;

          &:hover {
            color: #ffffff;
          }

          &:focus {
            outline: none;
            box-shadow: none;
          }
        }

        li.spsg-selected-module {
          a {
            color: #ffffff; // Set the color to white when the anchor is within a selected module
          }

          &.fly-cart::before {
            background: url("../images/menu/quick-cart-icon-white.svg");
          }

          &.progressive-discount-banner::before {
            background: url("../images/menu/free-shipping-bar-icon-white.svg");
            width: 20px;
            height: 18px;
            background-repeat: no-repeat;
          }

          &.sales-pop::before {
            background: url("../images/menu/sales-pop-white.svg");
          }

          &.direct-checkout::before {
            background: url("../images/menu/direct-checkout-white.svg");
          }

          &.stock-bar::before {
            background: url("../images/menu/stock-bar-white.svg");
          }

          &.upsell-order-bump::before {
            background: url("../images/menu/upsel-white.svg");
          }

          &.countdown-timer::before {
            background: url("../images/menu/countdown-timer-white.svg");
          }
        }

        li {
          color: #757d9e;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;

          &:hover {
            background: #0875ff;
            color: #ffffff;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
          }
        }
      }
    }

    h3,
    .all-widgets-menu h4 {
      &.active-menu {
        &:before {
          content: "";
          position: absolute;
          background: #0875ff;
          width: 3px;
          height: 28px;
          right: 3px;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }
      }
    }

    .active-widgets {
      color: #073b4c;
      font-size: 15px;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 20px 20px 20px;
      cursor: pointer;

      @media (min-width: 1600px) {
        font-size: 16px;
      }
    }

    .request__feature-block {
      text-align: center;
      border-radius: 8px;
      border: 1px solid #2541ac;
      background: #2541ac;
      padding: 57px 3px 25px;
      margin: 95px 8px 0;
      position: relative;

      @media (min-width: 320px) and (max-width: 520px) {
        margin-bottom: 60px;
      }

      &:before {
        content: "";
        position: absolute;
        bottom: -19px;
        width: 100%;
        height: 40px;
        background: url("../images/slide-layer.svg");
        left: 0;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;

        @media (min-width: 320px) and (max-width: 520px) {
          background-size: cover;
          bottom: -31px;
        }

        @media (min-width: 1441px) and (max-width: 2000px) {
          background-size: cover;
          left: -1.4px;
          bottom: -31px;
        }
      }

      .ant-image {
        position: initial;
        display: inherit;

        .ant-image-img {
          width: inherit;
        }
      }

      .box-icon {
        position: absolute;
        top: -38px;
        left: 50%;
        transform: translateX(-50%);
      }

      .rating {
        margin-bottom: 22px;

        svg {
          color: #feb423;
        }
      }

      .premium-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;

        &:focus {
          color: #ffffff;
          box-shadow: none;
        }
      }

      h4,
      p,
      h5 {
        color: #ffffff;
      }

      h5 {
        font-size: 14px;
        font-weight: 600;
      }

      h4 {
        font-size: 18px;
        font-weight: 600;
        line-height: 27px;
        margin-bottom: 4px;
      }

      p {
        font-size: 14px;
        font-weight: 300;
        line-height: 21px;
        margin-bottom: 20px;
      }

      .ant-btn {
        border-radius: 6px;
        background: #0875ff;
        padding: 0 16px;
        border: 0;
      }
    }
  }

  &-module {
    flex: 3;
    position: relative;

    // @media ( min-width: 1200px ) and (max-width: 1400px) {
    //   flex-basis: 80%;

    // }

    @media (min-width: 1800px) {
      .spsg__module-pagination {
        padding-left: 38px !important;
      }
    }

    @media (max-width: 768px) {
      .dashboard-overview-page {
        max-width: 64%;
      }

      .spsg__module-pagination {
        padding-left: 8px !important;
      }

      .dashboard-faq-page {
        .spsg-promotion-block {
          .request__feature-block {
            margin: 120px 0px 0;

            h4 {
              font-size: 16px;
            }
          }
        }
      }

      .dashboard-pricing-page {
        .dashboad-content,
        .sg_pricing_table {
          margin-top: 20px;
        }

        .spsg-promotion-block {
          .request__feature-block {
            margin: 120px 0px 0;

            h4 {
              font-size: 16px;
            }
          }
        }
      }
    }

    @media (min-width: 1200px) and (max-width: 1439px) {
      .module-desc[class] {
        min-height: 208px;
      }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      .dashboard-overview-page {
        max-width: 68%;
      }

      .spsg-module-card {
        .ant-card-body {
          & > div {
            &.ant-row {
              display: block;
            }
          }
        }
      }

      .dashboard-pricing-page {
        .dashboad-content,
        .sg_pricing_table {
          margin-top: 20px;
        }
      }
    }

    @media (min-width: 1200px) and (max-width: 1300px) {
      .spsg-module-card {
        .spsg__module-footer[class] {
          padding: 8px !important;

          .doc-btn {
            gap: 3px !important;
          }

          .footer-btn[class] {
            font-size: 10px;
          }
        }
      }
    }

    @media (min-width: 1301px) and (max-width: 1439px) {
      .spsg-module-card {
        .spsg__module-footer[class] {
          padding: 8px !important;

          .footer-btn[class] {
            font-size: 12px;
          }
        }
      }
    }

    @media (min-width: 1025px) and (max-width: 1199px) {
      // flex-basis: 76%;

      .spsg-module-card {
        .ant-card-body {
          & > div {
            &.ant-row {
              display: block;
            }
          }
        }
      }
    }

    .module-banner[class] {
      .ant-image[class] {
        width: 100% !important;
      }
    }

    &-box-content {
      background: #f4f7fe;
      border-top-left-radius: 15px;
      margin-top: -2px;
      position: relative;
      margin-left: -1px;

      // &:after {
      //   content: "";
      //   position: absolute;
      //   background: #fff;
      //   width: 18px;
      //   height: 10px;
      //   top: -4px;
      //   left: -8px;
      //   transform: rotate(-49deg);

      //   @media ( max-width: 767px ) {
      //     display: none;

      //   }
      // }

      .module-banner {
        img {
          height: 264px;
          width: 100%;
          object-fit: cover;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
        }
      }
    }

    @media (min-width: 1500px) and (max-width: 2000px) {
      // flex-basis: 80%;

      &-box-content {
        // padding-left: 0 !important;
        padding: 30px 0 0 30px;
      }
    }

    @media (min-width: 2001px) {
      // flex-basis: 83%;

      &-box-content {
        // padding-left: 0 !important;
        padding: 30px 0 0 30px;

        .spsg-module-card {
          .ant-card-body {
            & > div {
              &.ant-row {
                display: block;
              }
            }
          }
        }

        .module-banner {
          .ant-image {
            width: 100% !important;
          }
        }
      }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
      // flex-basis: 71%;

      .module-banner {
        .ant-image {
          width: 100% !important;
        }
      }

      .doc-btn {
        // gap: 2px !important;
      }

      &-box-content {
        // padding-left: 0 !important;
        padding: 8px 0 0 8px;
      }
    }

    @media (min-width: 1440px) and (max-width: 2000px) {
      .module-banner {
        .ant-image {
          width: 100% !important;
        }
      }
    }

    .ant-alert-warning {
      margin: 13px 0px 0 14px;
    }

    &-top-bar {
      background: #ffffff;
      padding: 20px 0;
      margin-bottom: 0;
      position: relative;
      height: auto;

      &:after {
        content: "";
        position: absolute;
        background: #ffffff;
        width: 36px;
        height: 16px;
        bottom: -4px;
        left: -15px;
        transform: rotate(-58deg);

        @media (max-width: 767px) {
          display: none;
        }
      }

      &:before {
        content: "";
        position: absolute;
        background: #ffffff;
        width: 36px;
        height: 16px;
        bottom: -6px;
        left: -15px;
        transform: rotate(-32deg);

        @media (max-width: 767px) {
          display: none;
        }
      }

      @media (max-width: 767px) {
        margin-bottom: 30px;
      }

      .help-btn,
      .premium-btn {
        margin: 0px 30px 0 10px;

        a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 210px;
          height: 46px;
          border-radius: 8px;
          gap: 15px;
          padding: 0;

          &:focus {
            color: #ffffff;
            box-shadow: none;
          }

          span {
            font-size: 18px;
            font-weight: 700;
          }
        }
      }

      .premium-btn {
        a {
          border: none;
          background: var(--premium-color, #ffac27);

          &:focus {
            color: #ffffff;
            box-shadow: none;
          }
        }
      }
    }

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

        & > div {
          max-width: 100% !important;
        }

        .module-banner {
          .ant-image {
            width: 100% !important;
          }
        }

        .spsg-module-card {
          .ant-card-body {
            & > div {
              display: block;
            }
          }
        }
      }
    }

    @media (min-width: 1440px) and (max-width: 2000px) {
      &-box-content {
        .spsg-module-card {
          .ant-card-body {
            & > div {
              display: block;
            }
          }
        }
      }
    }

    @media (min-width: 1300px) and (max-width: 1550px) {
      &-box-content {
        padding: 6px 0 0 14px;

        .spsg__module-footer {
          padding: 15px !important;

          .switch-btn[class] {
            float: left !important;
            padding-left: 10px;
          }
        }
      }
    }
  }
}

#sbooster-settings-page {
  .spsg-header {
    display: inline-block;

    .spsg-logo {
      margin: 15px auto 10px;
      display: inline-block;
    }
  }

  .panel-header {
    .header-content {
      margin: 0;
      display: flex;
      color: #073b4c;
      font-size: 24px;
      font-weight: 600;
      line-height: 32px;
      align-items: center;
      padding: 24px 30px 24px 30px;
      justify-content: space-between;

      .header-content-wrapper {
        display: flex;
        gap: 16px;
        align-items: center;
      }
    }

    .header-divider {
      margin: 0;
      color: #dde6f9;
    }
  }

  .panel-container,
  .panel-row {
    min-height: 100vh;

    .panel-column {
      height: auto;
      margin-top: 18px;

      .settings-panel {
        margin-right: 32px;

        .dashicons {
          color: #0875ff;
          cursor: pointer;

          &.dashicons-undo {
            color: #0875ff;
            cursor: pointer;
          }
        }

        .spsg-settings-card {
          height: 100%;
          border-radius: 5px;
          border-color: #dde6f9;

          .pro-content-overlay {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: none;
            position: absolute;
            align-items: center;
            background: #00000080;
            justify-content: center;

            .upgrade-button {
              gap: 10px;
              color: #fff;
              font-size: 13px;
              font-weight: 600;
              padding: 9px 15px;
              border-radius: 5px;
              align-items: center;
              background: #ffac27;
              display: inline-flex;

              .overlay-btn-crown {
                svg {
                  path {
                    fill: #fff;
                  }
                }
              }
            }
          }

          &.upgrade-settings .ant-card-body,
          .disabled-settings {
            overflow: hidden;
            position: relative;
            border-radius: 5px;

            &:hover {
              .pro-content-overlay {
                display: flex;
              }
            }
          }

          .disabled-settings {
            .ant-checkbox-input {
              display: none;
            }

            .ant-checkbox-inner {
              &:after {
                display: none;
              }
            }
          }

          .disabled-checkbox {
            position: relative;

            .pro-content-overlay {
              width: 110%;
              height: 150%;
              overflow: hidden;
              border-radius: 5px;
              margin: -2% 0 0 -4%;

              .upgrade-button {
                font-size: 12px;
                padding: 4px 12px;
              }
            }

            &:hover {
              .pro-content-overlay {
                display: flex;
              }
            }
          }

          .single-disabled-checkbox {
            position: relative;

            .pro-content-overlay {
              width: 105%;
              height: 150%;
              overflow: hidden;
              border-radius: 5px;
              margin: -2% 0 0 -4%;

              .upgrade-button {
                font-size: 12px;
                padding: 4px 12px;
              }
            }

            &:hover {
              .pro-content-overlay {
                display: flex;
              }
            }
          }

          .card-heading {
            height: 100%;
            display: flex;
            align-items: center;
          }

          .ant-card-body {
            width: 100%;
            height: 100%;
            display: flex;
            padding: 18px;
            align-items: center;

            .textarea-heading,
            .textinput-heading {
              margin-top: 5px;
            }

            .settings-heading {
              margin: 0;
              margin-right: 10px;

              &.space-top {
                margin-top: 5px;
              }
            }

            .settings-field {
              float: right;
              background: #dfe6f3;

              &.singlecheckbox-field {
                background: none;

                .ant-checkbox-input:disabled {
                  border: none;
                  background: transparent;
                }

                .ant-checkbox-inner {
                  width: 30px;
                  height: 30px;

                  &:after {
                    inset-inline-start: 30.5%;
                    width: 7.714286px;
                    height: 13.142857px;
                  }
                }
              }

              &.single-content-field {
                background: transparent;

                .ant-checkbox {
                  .ant-checkbox-inner {
                    width: 18px;
                    height: 18px;

                    &:after {
                      margin-left: 1px;
                      width: 5.714286px;
                      height: 9.142857px;
                    }
                  }
                }
              }

              &.select-field {
                border-radius: 5px;

                .ant-select-selection-search-input {
                  box-shadow: none;
                }

                .ant-select-selector {
                  padding: 5px 10px;
                  border-radius: 5px;
                  border-color: #0a4cda;

                  .ant-select-selection-overflow {
                    gap: 2px;
                  }

                  .ant-select-selection-item {
                    color: #073b4c;
                    background: #f6f9ff;
                  }
                }
              }

              &.number-field {
                width: 100%;
                border-radius: 5px;
                background: #f6f9ff;

                input {
                  color: #000;
                  text-align: center;
                }

                &.combine-field {
                  padding: 5px;
                  border-color: #dde6f9;

                  input {
                    text-align: left;
                  }
                }
              }

              &.textarea-field,
              &.textinput-field {
                &.field-gap {
                  margin-bottom: 15px;
                }

                &.error {
                  border-color: red;
                }
                &.ant-input-status-error {
                  border-color: #ff4d4f;
                }
              }

              &.textarea-field {
                padding: 10px 16px;

                &[readonly] {
                  &:hover {
                    opacity: 0.5;
                  }
                }
              }

              &.textinput-field {
                padding: 6px 10px;
              }

              &.single-select-field {
                border-color: #dde6f9;
                background: #f6f9ff;
                border-radius: 5px;

                .ant-select-selector {
                  border-color: #dde6f9;
                  border-radius: 5px;
                  background: #f6f9ff;
                  color: #073b4c;
                }

                &.combine-select,
                &.search-single-select {
                  .ant-select-selector {
                    height: auto;
                    padding: 5px 10px;

                    .ant-select-selection-search {
                      display: flex;
                      align-items: center;

                      input.ant-select-selection-search-input {
                        &:focus {
                          box-shadow: none;
                        }
                      }
                    }
                  }
                }
              }

              &.ant-switch-checked {
                background: #0875ff;
              }

              &.color-picker-field {
                border: 0;
                background: transparent;

                .ant-color-picker-color-block-inner {
                  border-color: #dde6f9;
                }
              }

              &.radio-field {
                gap: 12px;
                min-height: 36px;
                display: inline-grid;
                grid-auto-flow: column;
                background: transparent;

                label.ant-radio-button-wrapper {
                  height: 100%;
                  padding: 0 12px;
                  border-radius: 5px;
                  border: 1px solid #dde6f9;

                  &.ant-radio-button-wrapper-checked {
                    border-color: #0875ff;
                  }

                  &:before {
                    width: 0;
                  }

                  &:hover {
                    background: #0875ff;
                    border-color: #0875ff;

                    .radio-icon {
                      path {
                        fill: #fff !important;
                      }
                    }

                    .radio-icon-stroke {
                      path {
                        fill: none !important;
                        stroke: #fff !important;
                      }
                    }
                  }
                }

                &.radio-icon-field {
                  &.quick-icon-layout {
                    @media (max-width: 1440px) {
                      grid-template-rows: repeat(1, auto);
                    }
                  }
                }

                &.radio-img-field {
                  height: 100%;
                  margin-top: 20px;

                  &.quick-cart-layout {
                    @media (max-width: 1440px) {
                      grid-template-rows: repeat(1, auto);
                    }
                  }

                  &.quick-cart-position {
                    grid-template-rows: repeat(2, auto);

                    img {
                      width: 150px;
                    }

                    @media (max-width: 1600px) {
                      .layout-img {
                        img {
                          width: 120px;
                        }
                      }

                      .upgrade-button {
                        gap: 0px;
                        flex-direction: column;
                      }
                    }

                    @media (max-width: 1440px) {
                      .layout-img {
                        img {
                          margin: 12px 0 2px;
                          max-width: 100px;
                        }
                      }

                      .upgrade-button {
                        font-size: 10px;
                      }
                    }

                    .option-name {
                      gap: 0px;
                      display: flex;
                      align-items: center;
                      flex-flow: column;
                      margin-bottom: 9px;

                      .spsg-field-upgrade-pro-label {
                        gap: 10px;
                        display: flex;
                        align-items: center;
                        position: absolute;
                        bottom: 28%;
                      }
                    }
                  }

                  label.ant-radio-button-wrapper {
                    color: #073b4c;
                    font-size: 14px;

                    .layout-img {
                      img {
                        margin: 12px 0 2px;
                      }
                    }

                    .option-name {
                      gap: 10px;
                      display: flex;
                      align-items: center;
                    }

                    &:hover,
                    &.ant-radio-button-wrapper-checked {
                      border: 1px solid #0875ff;
                      background: transparent;
                    }

                    &.ant-radio-button-wrapper-disabled {
                      border: 1px solid #dde6f9;
                    }
                  }
                }

                .clear-upload {
                  top: 0;
                  right: 0;
                  height: 100%;
                  line-height: 1;
                  position: absolute;

                  .clear-icon {
                    width: 16px;
                    color: #fff;
                    height: 16px;
                    display: flex;
                    font-size: 12px;
                    background: #0875ff;
                    border-radius: 100%;
                    justify-content: center;
                    transform: translate(50%, -50%);
                  }
                }

                &.custom-field {
                  label.ant-radio-button-wrapper {
                    &:hover {
                      border-color: #dde6f9;
                      background: transparent;
                    }

                    .clear-upload {
                      &:hover {
                        .clear-icon {
                          background: #ef4444;
                        }
                      }
                    }
                  }
                }

                @media (max-width: 1440px) {
                  grid-template-rows: repeat(3, 38px);
                }
              }

              &:not(.ant-switch-checked) {
                .ant-switch-inner-unchecked {
                  color: #73829d;
                }

                .ant-switch-handle {
                  &:before {
                    background: #abb8d0;
                  }
                }
              }
            }

            .media-button {
              gap: 10px;
              height: 100%;
              display: flex;
              color: #b6bdc0;
              font-size: 14px;
              position: relative;
              border-radius: 5px;
              align-items: center;
              justify-content: center;

              span {
                @media (max-width: 1440px) {
                  display: none;
                }
              }

              &:hover,
              &.active {
                color: #fff !important;
                background: #1677ff;

                g {
                  opacity: 1;
                }

                path {
                  fill: #fff !important;
                  fill-opacity: 1;
                }

                .pro-content-overlay {
                  display: flex;

                  .upgrade-button {
                    font-size: 12px;
                    padding: 9px 13px;
                  }
                }
              }
            }
          }

          .settings-heading {
            color: #073b4c;
            font-size: 16px;
            font-weight: 500;
            line-height: 20px;

            &.content-field-heading {
              margin: 0;
              font-weight: 400;
              line-height: 1.4;
              margin-left: 12px;
            }
          }

          .settings-tooltip {
            width: 24px;
            height: 24px;
            display: flex;
            cursor: pointer;
            margin-right: 10px;
            align-items: center;
            border-radius: 50px;
            background: #dfe6f3;
            justify-content: center;
          }

          .textarea-content {
            p {
              margin: 0;
              color: #073b4c;
              font-size: 14px;
              line-height: 1.8;
            }
          }

          .spsg-field-upgrade-pro-label {
            gap: 10px;
            display: flex;
            align-items: center;

            span.spsg-pro-badge {
              font-size: 10px;
              font-weight: 600;
              line-height: 1;
              background: #ffac27;
              color: white;
              border-radius: 10px;
              padding: 4px 7px;
            }
          }

          .ant-row {
            width: 100%;
          }

          &.content-group-settings {
            .ant-card-body {
              padding: 14px 18px;
            }

            .checkbox-heading {
              label {
                font-size: 14px;
              }
            }

            &.disabled-settings {
              .ant-card-body {
                .ant-col-2 {
                  display: inline-flex;

                  .ant-checkbox-input {
                    display: none;
                  }

                  .ant-checkbox-inner {
                    &:after {
                      display: none;
                    }
                  }
                }

                .checkbox-heading {
                  gap: 10px;
                  display: flex;

                  .upgrade-content {
                    gap: 10px;
                    display: flex;
                    color: #073b4c;
                    font-weight: 500;
                  }
                }
              }
            }
          }
        }

        .radio-template-field {
          width: 100%;

          label.ant-radio-button-wrapper {
            display: block;
            padding: 0;

            &.ant-radio-button-wrapper-checked {
              background: #fff;
              border-color: #1677ff !important;
            }
          }

          &.notify-bar-templates,
          &.countdown-timer-templates,
          &.free-shipping-bar-templates {
            label.ant-radio-button-wrapper {
              height: 62px;
            }
          }

          &.stock-bar-templates {
            label.ant-radio-button-wrapper {
              height: auto;
              border: none;
            }
          }

          &.countdown-timer-templates {
            label.ant-radio-button-wrapper {
              height: 162px;
              overflow: hidden;
              border-radius: 8px;
              border: 1px solid #0875ff33;
            }
          }
        }

        &.full-width {
          margin: 0;
        }

        .section-divider {
          margin: 50px 0;
          color: #dde6f9;
        }

        .spsg-collapse-settings {
          overflow: hidden;
          border-color: #dde6f9;
          border-radius: 5px;

          .ant-collapse-item {
            border-color: #dde6f9;
            border-radius: 0;
          }

          .ant-collapse-header {
            border-radius: 0;
            background: #fff;
            padding: 10px 16px;

            .ant-collapse-header-text {
              color: #073b4c;
            }
          }

          .ant-collapse-content {
            border-radius: 0;
            background: #f7f9ff;
            border-color: #dde6f9;

            .content-bump-label {
              color: #073b4c;
              display: block;
              font-size: 16px;
              font-weight: 500;
              line-height: 20px;
              margin-bottom: 12px;
            }

            #fixed-bump,
            #discount-bump {
              color: #073b4c;
              padding: 6px 10px;
              border-radius: 5px;
              border: 1px solid #dde6f9;
            }
          }
        }
      }

      .preview-panel {
        top: 40px;
        display: block;
        position: sticky;
        margin-left: 32px;

        .product-coupon {
          position: relative;

          .pro-content-overlay {
            top: -3px;
            left: -13px;
            width: 105%;
            height: 120%;
            z-index: 9999;
            display: none;
            border-radius: 5px;
            position: absolute;
            align-items: center;
            background: #00000080;
            justify-content: center;

            .upgrade-button {
              gap: 10px;
              color: #fff;
              font-size: 13px;
              font-weight: 600;
              padding: 9px 15px;
              border-radius: 5px;
              align-items: center;
              background: #ffac27;
              display: inline-flex;

              .overlay-btn-crown {
                svg {
                  path {
                    fill: #fff;
                  }
                }
              }
            }
          }

          &:hover {
            .pro-content-overlay {
              display: flex;
            }
          }
        }
      }
    }

    .ant-tabs-nav {
      margin-bottom: 36px;

      .ant-tabs-tab-btn {
        color: #7f9aa5;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
      }

      .ant-tabs-tab-active {
        .ant-tabs-tab-btn {
          color: #0875ff;
        }
      }

      .ant-tabs-tab {
        .prompt-tab {
          gap: 0.5rem;
          margin: 0 0.5rem;
          display: flex;

          .spsg-pro-badge {
            font-size: 10px;
            font-weight: 600;
            line-height: 1;
            background: #ffac27;
            color: white;
            border-radius: 10px;
            padding: 4px 7px;
          }
        }
      }

      &:before {
        border-color: #dde6f9;
      }
    }

    .section-header {
      gap: 10px;
      display: flex;
      margin-left: 3px;
      margin-bottom: 20px;
      align-items: center;

      h4 {
        margin: 0;
        color: #073b4c;
        font-size: 18px;
        font-weight: 600;
      }

      .spsg-field-upgrade-pro-label {
        margin-top: 2px;
      }
    }

    .spsg-settings-actions {
      gap: 10px;
      right: 50px;
      bottom: 50px;
      z-index: 9999;
      display: flex;
      position: fixed;
      align-items: center;

      .spsg-settings-save-button {
        border: 0;
        margin: 0;
        color: #fff;
        height: auto;
        z-index: 9999;
        line-height: 1;
        font-size: 16px;
        font-weight: 500;
        padding: 12px 24px;
        background: #0875ff;
        // disabled style
        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }

      .spsg-settings-reset-button {
        height: auto;
        z-index: 9999;
        color: #073b4c;
        line-height: 1;
        font-size: 16px;
        font-weight: 500;
        border-radius: 5px;
        padding: 12px 24px;
        background: #f6f9ff;
        border: 1px solid #dde6f9;
      }
    }
  }

  .panel-container {
    padding: 0 30px;
    position: relative;

    .row-divider {
      margin: 0;
      height: auto;
      margin-left: -1px;
    }

    .space-top {
      margin-top: 30px;
    }

    .touch-preview-panel {
      top: 0;
      right: 0;
      z-index: 1;
      margin-top: 12px;
      position: absolute;

      .touch-preview-container {
        display: flex;
        align-items: center;

        .preview-button {
          width: 50px;
          height: 40px;
          display: flex;
          background: #0875ff;
          align-items: center;
          align-self: self-start;
          justify-content: center;
          border-radius: 20px 0 0 20px;
          box-shadow: 0 0 8px 4px #00000014;
        }

        .touch-preview {
          padding: 20px;
          background: white;
          min-height: 100vh;
          border-bottom-left-radius: 20px;
          box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.0784313725);
        }
      }
    }

    @media screen and (min-width: 1241px) {
      .touch-preview-panel {
        display: none;
      }
    }

    @media screen and (max-width: 1240px) {
      .panel-column {
        flex: 100%;
        max-width: 100%;

        .preview-panel {
          display: none;
        }
      }

      .row-divider {
        display: none;
      }

      .sales-pop-template {
        width: 70% !important;
      }
    }

    @media screen and (max-width: 600px) {
      .sales-pop-template {
        width: 100% !important;
      }
    }
  }

  input[type="search"]:focus {
    box-shadow: none !important;
  }
}

.ant-select-dropdown {
  .ant-select-item.ant-select-item-option {
    position: relative;

    .ant-select-item-option-content {
      gap: 10px;
      display: flex;
      align-items: center;

      .spsg-field-upgrade-pro-label {
        gap: 10px;
        display: flex;
        align-items: center;

        span.spsg-pro-badge {
          font-size: 10px;
          font-weight: 600;
          line-height: 1;
          background: #ffac27;
          color: white;
          border-radius: 10px;
          padding: 4px 7px;
        }
      }

      .pro-content-overlay {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: none;
        border-radius: 5px;
        position: absolute;
        align-items: center;
        background: #00000080;
        justify-content: center;

        .upgrade-button {
          gap: 10px;
          color: #fff;
          font-size: 12px;
          font-weight: 600;
          padding: 4px 14px;
          border-radius: 5px;
          align-items: center;
          background: #ffac27;
          display: inline-flex;

          .overlay-btn-crown {
            svg {
              path {
                fill: #fff;
              }
            }
          }
        }
      }
    }

    &:hover {
      .pro-content-overlay {
        display: flex;
      }
    }
  }
}

.ant-select-selector {
  width: 100%;
  border-color: #dde6f9 !important;
}

.trigger-radio-selected {
  background-color: #f6f9ff;
}

.ant-radio-input {
  &:disabled {
    opacity: 0 !important;
  }
}

.inrto-section-img-backgroud {
  background: url("../src/components/dashboard/images/intro-section-img-backgroundImg.svg");
  background-repeat: no-repeat;
}

// Modal styles
@keyframes beat {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.modal-content-wrapper {
  text-align: center;
  padding: 5px;
  display: flex;
  gap: 12px;
  flex-direction: column;

  .modal-content-heading-icon {
    span {
      svg {
        animation: beat 1s ease-in-out infinite;
      }
    }
  }

  h3 {
    &.modal-content-heading {
      font-size: 22px;
      font-weight: 700;
      color: #102f50;
      margin-bottom: 0;
    }
  }

  .modal-content {
    font-size: 14px;
    margin-bottom: 0;
  }

  .modal-controller-action-button {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;

    .modal-cancel-button {
      color: #ff0834;
      border: 1px solid #ff0834;

      &:hover {
        background-color: #fff0f3 !important;
        color: #ff0834;
        border: 1px solid #ff0834;
      }
    }

    .modal-submit-button {
      color: #0875ff;
      border: 1px solid #0875ff;

      &:hover {
        background-color: #ecf4ff;
        color: #0875ff;
        border: 1px solid #0875ff;
      }
    }

    .modal-submit-button,
    .modal-cancel-button {
      padding: 8px 24px;
      height: auto;
      font-size: 14px;
    }
  }
}

/**
* starting of the intial setup page design.
*/
.spsg-ini-setup-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-color: #fff;
  min-height: inherit;
  margin-bottom: -25px;
  margin-left: -15px;
  margin-right: -20px;
  padding: 30px 30px 20px;

  .spsg-ini-page-container {
    max-width: 1100px;
    width: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-items: center;

    .storegrowth-icon {
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: 12%;
      padding: 0px 8px;

      img {
        height: 28px;
      }

      .steps-skipper-controller {
        width: 18%;
        text-align: center;
        color: #1b49f6;
        font-weight: 500;
        cursor: pointer;
      }
    }

    .sgsg-ini-setup-progress {
      width: 100%;

      .ant-steps-item-content {
        font-weight: 700;
      }
    }

    .spsg-return-dashboard {
      .spsg-dashboard-cta {
        height: auto;
        padding: 20px 30px;
        border-radius: 5px;
        border: none;
        background: #e3e9ff;
      }
    }

    .spsg-ini-setup-content-layout {
      .spsg-steps-controller {
        display: flex;
        gap: 10px;
        justify-content: center;
      }

      .steps-button {
        padding: 12px 30px;
        border-radius: 6px;
        border: none;
        font-weight: 700;
        width: fit-content;
        cursor: pointer;

        &.next {
          color: #fff;
          background-color: #0875ff;
        }

        &.previous {
          background-color: #ffffff;
          border: 1px solid black;
        }

        &.completion-cta {
          color: #fff;
          background-color: #0875ff;
        }

        &.doc-cta {
          color: #fff;
          background: #000000;
        }

        &.support-cta {
          color: #073b4c;
          background-color: #dde6f9;
        }
      }

      // Welcome step layout
      .spsg-ini-setup-welcome {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .ini-setup-announce-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 24px;
          margin: 80px 0px;

          &.congratulation {
            margin: 40px 0px;
          }

          .annouce-contents {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 530px;

            .spsg-content-heading {
              color: var(--Secoundary-Color, #073b4c);
              text-align: center;
              font-size: 36px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
              margin: 0;

              span {
                color: var(--Primary-Color, #0875ff);
              }
            }

            .spsg-sub-heading {
              // white-space: pre-line;
              color: var(--Secoundary-Color, #5a5a5f);
              text-align: center;
              font-size: 16px;
              font-style: normal;
              font-weight: 500;
              line-height: normal;
            }
          }

          .social-links {
            display: flex;
            gap: 10px;

            a {
              &.social-link {
                display: flex;
                padding: 8px 12px 8px 8px;
                justify-content: center;
                align-items: center;
                gap: var(--S-8, 8px);
                border-radius: 10px;
                color: var(--Text-color-Primary, #000012);
                text-align: center;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
              }

              &.youtube {
                background: #ffd5d5;
              }

              &.get-support {
                background: #b7dfff;
              }

              &.documentation {
                background: #ffe7d9;
              }
            }
          }

          .get-started {
            display: flex;
            height: 40px;
            padding: 24px 20px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            background-color: #0875ff;
            color: #fff;
          }
        }

        //user Agriment
        .ini-setup.user-agreement {
          display: flex;
          flex-direction: column;
          gap: 16px;

          .getting-updates,
          .getting-essentials {
            .ant-checkbox-checked {
              .ant-checkbox-inner {
                background-color: #fff;
                border-color: #b7dfff;

                &::after {
                  border: 1.5px solid #008dff;
                  border-left: none;
                  border-top: none;
                }
              }
            }

            .user-agreement {
              display: flex;
              gap: 6px;

              p {
                margin: 0;

                &.heading {
                  font-weight: 600;
                }
              }
            }
          }
        }
      }

      //Modules page
      .spsg-admin-dashboard-module {
        .ini-setup-announce-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 24px;
          padding: 36px 0px;

          .annouce-contents {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 530px;

            .spsg-content-heading {
              color: var(--Secoundary-Color, #073b4c);
              text-align: center;
              font-size: 36px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
              margin: 0;

              span {
                color: var(--Primary-Color, #0875ff);
              }
            }

            .spsg-sub-heading {
              // white-space: pre-line;
              color: var(--Secoundary-Color, #5a5a5f);
              text-align: center;
              font-size: 16px;
              font-style: normal;
              font-weight: 500;
              line-height: normal;
            }
          }
        }

        .spsg-admin-dashboard-module-box-content {
          padding: 0px !important;
          background: none;
          margin-bottom: 14px;
        }
      }

      //Setup Completion page
      .spsg-step-completion {
        display: flex;
        flex-direction: column;
        gap: 50px;

        .spsg-inisetup-heading-content {
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          gap: 24px;

          .completion-check-mark {
            border: 2px solid #0875ff;
            border-radius: 50%;
            padding: 24px 22px;
            display: inline-flex;
          }

          .setup-completion-heading {
            display: flex;
            flex-direction: column;
            align-items: center;

            .heading {
              color: #073b4c;
              text-align: center;
              font-size: 36px;
              font-weight: 700;
            }

            .sub-heading {
              color: #073b4c;
              text-align: center;
              font-size: 14px;
              font-weight: 400;
            }
          }
        }

        .spsg-ini-setup-completion {
          .spsg-intro-video {
            iframe {
              width: 36vw;
              height: 19vw;
              border-radius: 6px;
              background: gray;
            }
          }

          &.support-doc {
            display: flex;
            gap: 44px;
            margin-left: 8%;
          }

          .spsg-support-doc-cta {
            display: flex;
            flex-direction: column;
            gap: 15px;
          }
        }

        .ini-setup {
          &.user-agreement {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-left: 8%;

            .getting-updates,
            .getting-essentials {
              display: flex;
              align-items: flex-start;
              gap: 10px;

              .content-container {
                line-height: 0.5;

                .heading {
                  color: var(--Secoundary-Color, #073b4c);
                  font-size: 16px;
                  font-weight: 500;
                }

                .content {
                  color: var(--Secoundary-Color, #073b4c);
                  font-size: 12px;
                  font-weight: 400;
                }
              }
            }
          }
        }
      }
    }
  }
}

/**
 * "Settings" (advanced) entry in the settings sidebar.
 *
 * The per-module icons are set with `li.<module>::before` rules; this global
 * route has no module class of its own, so its gear icon is defined here.
 * Default, hover and selected (white) variants match the other menu items.
 */
.widgets-menu {
  li.advanced::before {
    width: 18px;
    height: 18px;
    background: url("../images/menu/advanced.svg") no-repeat center;
    background-size: contain;
  }

  li.advanced:hover::before,
  li.spsg-selected-module.advanced::before {
    background: url("../images/menu/advanced-white.svg") no-repeat center;
    background-size: contain;
  }
}