.dash-convo {
  h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #2a2d2f;
    margin: 0px;
  }

  h3 {
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    color: #2a2d2f;
    margin: 0px;
    font-weight: 500;
  }

  h4 {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #2a2d2f;
    margin: 0px;
  }

  h5 {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #5f6368;
    margin: 0px;
  }

  .accordion-body p {
    max-width: 875px;
    width: calc(100% - 30px);
  }

  p {
    font-style: 100;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px !important;
    color: #5f6368;
    line-height: 28px;
    margin: 0px;
  }

  span {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #2a2d2f;
  }

  .card {
    width: 100%;
    max-width: 100%;
    margin: 10px 0px;
    padding: 0px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;

    .card-body {
      padding: 15px;
    }
  }

  .icontrol {
    width: 100%;
    max-width: 100%;

    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #94979a;
    padding: 8px 10px !important;
    line-height: 1;
    color: black;
    border: 1px solid #e4e4e4 !important;

    &::placeholder {
      color: #94979a;
    }

    &:focus {
      border: 1px solid #e4e4e4 !important;
    }
  }

  .common-btn {
    background-color: #1967D2;
    border-radius: 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #2a2d2f;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    color: white;
    border: 1px solid transparent;

    &:hover {
      background-color: transparent;
      border: 1px solid #1967D2;
      color: #1967D2;
    }
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}

.conv-dash-yellow-bg {
  background-color: #fdf5e0;
}

.conv-yellow-text {
  color: #fccb1e;
}

.conv-blue-text {
  color: #1967D2;
  text-shadow: 0px 1px #000;
}

.dash-area {
  .head-title {
    padding: 16px 0px 0px;
  }

  .card {
    .card-body {
      .purchase-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        h4 {
          white-space: nowrap;
        }
      }
    }
  }

  .form-box {
    width: 100%;
    margin: 0px;
    padding: 0px 20px;
    position: relative;

    .icontrol {
      border: none;
      height: 38px;
    }
  }

  .upgrade-btn {
    .common-btn {
      width: 180px;
      color: black;
      background-color: #fccb1e;

      &:hover {
        background-color: transparent;
        border: 1px solid #fccb1e;
      }

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

// welcome box
.card {
  .card-body {
    .title-text {
      h3 {
        margin-bottom: 8px;
        color: #2a2d2f;
      }
    }
  }
}

// pixels setup
.pixels-wholebox {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .pixels-part {
    .pixels-box {
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      margin: 16px 0px;
      background-color: transparent;
      position: relative;
      border-radius: 4px;

      &.convo-active {
        border: 1px solid #09BD83;
        box-shadow: 0px 0px 2px #09BD83;
      }

      // &.convo-active::after {
      //   content: "";
      //   position: absolute;
      //   right: 7px;
      //   background-image: url("../images/icon/selected.png");
      //   width: 25px;
      //   height: 25px;
      //   background-repeat: no-repeat;
      //   display: flex;
      //   justify-content: flex-start;
      //   align-items: center;
      //   background-size: auto;
      //   background-position: center;
      // }
      .pixels-image {
        img {
          width: 40px;
          height: 40px;
          object-fit: contain;
        }
      }

      .pixels-text {
        h5 {
          margin-left: 8px;
          font-size: 16px;
          white-space: nowrap;
        }
      }
    }
  }
}

.gtmnotconnected {
  .pixels-part:not(.gtmsettings) {
    filter: grayscale(1);
    pointer-events: none;
  }
}

.integrate-btn {
  .common-btn {
    margin-top: 24px;
    width: 180px;
    background-color: #1967D2;
    color: white;

    &:hover {
      background-color: transparent;
      border: 1px solid #1967D2;
      color: #1967D2;
    }
  }
}

// product feed
.product-feed {
  .card-body {
    .feed-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        white-space: nowrap;
        margin-right: 74px;
      }

      .progress {
        background: #e4e4e4;
        height: 8px;
        border-radius: 4px;

        .progress-bar {
          background: linear-gradient(90deg, #1967D2 0%, #1967D2 100%);
        }
      }
    }

    p {
      margin: 24px 0px;
    }

    .tablediv {
      tr {
        border: 1px solid #dee2e6;
      }
      tbody tr td {
        vertical-align: middle;
      }

      span {
        font-size: 12px;
        margin: 0;
        color: #5f6368;
      }

      p {
        margin: 0;
      }

      .synced {
        background-color: #c3f6e7;
        color: #09bd83;
      }

      .draft {
        background-color: #f5e0aa;
        color: #DCA310;
      }

      .deleted {
        background-color: #c8d1cf;
        color: #5d6261;
      }

      .inprogress {
        background-color: #c8e3f3;
        color: #209EE1;
      }

      .failed { 
        background-color: #f8d9dd; 
        color: #f43e56; 
      }
      
      .badge {
        height: 29px;
        width: 74px;
        // padding: 0.65em 0.65em !important;
        font-size: 10px;
      }
    }

    .progress-steps {
      list-style: none;
      padding-left: 42px;
      position: relative;
      z-index: 1;

      &::before {
        display: inline-block;
        content: '';
        position: absolute;
        top: 0;
        left: 15px;
        width: 10px;
        height: auto;
        border-left: 2px solid #CCC;
      }

      li {
        counter-increment: list;
        position: relative;
        margin: 0px 0px;


        &.disable .step-box h4 {
          color: #5f6368;
        }

        &::before {
          display: inline-block;
          content: '';
          position: absolute;
          left: -24px;
          height: 100%;
          width: 10px;
          height: 100%;
          width: 2px;
          background-color: #cacaca;
        }

        &::after {
          content: counter(list);
          width: 32px;
          height: 32px;
          background-color: #1967D2;
          color: white;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: -39px;
          top: 0;
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #ffffff;
        }

      }

      li:last-child:before {
        border: none;
        background-color: transparent;
      }

      .step-box {
        h4 {
          font-style: normal;
          font-weight: 500;
          font-size: 14px;
          line-height: 22px;
          color: #2a2d2f;
          margin-bottom: 12px;
        }

        .channel-box {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;

          .channel {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            margin: 0px 20px 20px 0px;
            min-width: 300px;
            padding: 10px;
            position: relative;
            border-radius: 4px;
            box-shadow: 0px 0px 2px #09BD83;
            // box-shadow: 0px 0px 4px 0px rgba(6, 6, 6, 0.16);

            &.convo-inactive::after {
              content: "";
              position: absolute;
              right: 7px;
              background-image: url(../images/icon/add_circle_black.svg);
              width: 25px;
              height: 25px;
              background-repeat: no-repeat;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              background-size: auto;
              background-position: center;
            }

            cursor: pointer;

            &.convo-active {
              border-radius: 4px;
              border: 1px solid #09bd83;
              background-color: white;
              box-shadow: 0px 0px 4px 0px rgba(6, 6, 6, 0.08);

              &::after {
                content: "";
                position: absolute;
                right: 7px;
                background-image: url(../images/icon/check_circle_black.svg);
                width: 25px;
                height: 25px;
                background-repeat: no-repeat;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                background-size: auto;
                background-position: center;
              }
            }

            .channel-image {
              img {
                width: 35px;
                height: 35px;
                object-fit: contain;
              }
            }

            h5 {
              margin-left: 12px;
              font-size: 15px;
              white-space: nowrap;

              .badge {
                border-radius: 19px;
                border: 1px solid #fff;
                background-color: #ff388c;
                color: #fff;
                text-align: center;
                font-size: 13px;
                font-weight: 600;
                line-height: 22px;
                padding: 2px 7px;
                position: absolute;
                right: 5px;
                top: 13px;
              }
            }
          }
        }
      }
    }

    // ======================
    .start-btn {
      margin-top: 10px;
      display: flex;
      justify-content: end;

      .common-btn {
        width: 200px;
        border: 1px solid transparent;

        &:hover {
          background-color: transparent;
          color: #1967D2;
          border: 1px solid #1967D2;
        }
      }
    }
  }
}

// .product-feed .card-body .progress-steps li.disable::before {
//   background-color: #e0f1fb;
//   color: black;
// }
.product-feed .card-body .progress-steps li.disable::after {
  background-color: #F1F2F4;
  color: #1967D2;
  border: 1px solid #1967D2;
}

// campaign management
.campaign-manage {
  background-image: url("../images/conv-campaign-p-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  .card-body {
    .title-text {
      h3 {
        margin-bottom: 24px;
      }
    }
  }

  .campaign-wholebox {
    margin-top: 20px;

    .campaign-content {
      a {
        margin-bottom: 16px;
        display: inline-flex;

        img {
          width: 30px;
          height: 30px;
          object-fit: contain;
        }

        span {
          margin-left: 6px;
        }
      }

      h3 {
        color: #5f6368;
      }
    }

    .campaign-image {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        height: auto;
      }
    }
  }
}

// Feed management
.feed-manage {
  background-image: url("../images/bkg_product_Feed.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 712px;

  .card-body {
    .title-text {
      h3 {
        margin-bottom: 24px;
      }
    }
  }

  .feed-wholebox {
    margin-top: 20px;
    padding-top: 100px;
    .text-superai {
      font-size: 96px;
    }
    .feed-content {
      a {
        margin-bottom: 16px;
        display: inline-flex;

        img {
          width: 30px;
          height: 30px;
          object-fit: contain;
        }

        span {
          margin-left: 6px;
        }
      }

      h3 {
        color: #5f6368;
      }
    }

    .feed-image {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        height: auto;
      }
    }
  }
}

// Reports
.commoncard-box {
  .card-body {
    .title-title {
      h3 {
        margin-bottom: 24px;
      }
    }

    .card-content {
      text-align: center;

      .card-image {
        margin-bottom: 24px;

        img {
          width: 100%;
          margin: 0 auto;
          max-width: 25%;
        }
      }

      .card-content {
        h3 {
          margin-bottom: 16px;
        }
      }
    }
  }
}

// Market box
.genrated-box {
  margin: 10px 0px;

  ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0px;

    li {
      width: 25%;
      padding: 4px;
    }
  }

  .revenue-box {
    background: #ffffff;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.24);
    border-radius: 8px;
    margin: 0px 0px;
    transition: all 0.5s ease;
    transform: translateY(0px);

    &:hover {
      background-color: #1967D2;
      color: white;
      transform: scale(1.2);
      transform: translateY(-5px);
      transition: all 0.5s ease;
    }

    &:hover h3 {
      color: white;
    }

    &:hover p {
      color: white;
    }

    &:hover .market-box .price {
      color: white;
    }

    &:hover .market-box .market span {
      color: white;
    }
    h3{
      font-size: 14px;
    }


    .card-body {
      p {
        margin: 4px 0px 8px;
        font-weight: 400;
        font-size: 14px;
        line-height: 1;
      }
    }

    .market-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 28px;
        color: #2a2d2f;
      }

      .market {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        img {
          position: relative;
          top: -1px;
        }

        span {
          color: #5f6368;
          font-weight: 400;
          font-size: 12px;
          display: block;
          margin-left: 4px;
        }
      }
    }
  }
}

// video card
.videocard {
  .videoimage {
    iframe {
      width: 100%;
      max-width: 100%;
    }
  }

  .card-body {
    .title-dropdown {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      h3 {
        margin: 0px;
      }

      .three-dots {
        .dropdown-toggle {
          background-color: white;
          color: white;
          border: none;

          &:hover {}

          &::after {
            display: none;
          }

          span {
            position: relative;
            top: -4px;
          }
        }

        .dropdown-menu {
          li {
            a {
              padding: 10px 15px;
              transition: all 0.3s ease;

              &:hover {
                background-color: #1967D2;
                color: white;
              }
            }
          }
        }
      }
    }

    .card-content {
      p {
        margin-bottom: 24px;
      }
    }

    .watch-videobtn {
      .common-btn {
        width: 180px;
        background-color: transparent;
        color: #5f6368;
        border: 1px solid #5f6368;

        &:hover {
          background-color: #5f6368;
          color: white;
        }
      }
    }
  }
}

// recent post
.recent-post {
  .card-content {
    margin: 24px 0px;

    &:after {
      content: " ";
      display: block;
      position: absolute;
      right: 0;
      width: 18%;
      height: 80%;
      background-image: url(../images/recentpostbox_bg.png);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 80%;
      bottom: 0;
    }


    a {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-bottom: 16px;
      position: relative;


      &:hover span {
        color: #1967D2;
      }

      img {
        margin-right: 8px;
        position: relative;
        top: 0px;
      }

      span {
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 25px;
        color: #1967D2;
      }
    }
  }

  .visit-blog {
    .common-btn {
      width: 100%;
    }
  }
}

// get premium
.get-premium {
  .card-body .card-content .card-image img {
    width: 100%;
    max-width: 100%;
  }

  .premium-btn {
    .common-btn {
      width: 100%;
      background-color: #fccb1e;
      color: black;

      &:hover {
        background-color: transparent;
        border: 1px solid #fccb1e;
      }
    }
  }
}

// Need More help
.need-help {
  .card-body {
    text-align: center;

    .title-title {
      h3 {
        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        line-height: 22px;
        color: #2a2d2f;
      }

      p {
        padding: 0px 60px;
        margin-bottom: 16px;
      }
    }
  }

  .book-demo {
    .common-btn {
      background-color: transparent;
      color: #1967D2;
      border: 1px solid #1967D2;

      &:hover {
        background-color: #1967D2;
        color: white;
        border: 1px solid #1967D2;
      }
    }
  }
}

// subscribe-news
.subscribe-news {
  .card-body {
    text-align: center;

    .title-title {
      p {
        margin-bottom: 24px;
      }
    }
  }

  .form-box {
    .icontrol {
      margin-bottom: 16px;

      &::placeholder {
        text-align: center;
      }
    }

    .common-btn {
      width: 100%;
      background-color: #1967D2;
      color: white;

      &:hover {
        background-color: transparent;
        color: #1967D2;
      }
    }
  }
}

// Custom Table
.table-box {
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  margin: 30px 0px;

  h4 {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #2a2d2f;
    text-align: center;
    background-color: #f5f6f7;
    padding: 15px 0px;
  }

  .custom-table {
    width: 100%;
    overflow-x: auto;

    thead {
      tr {
        th {
          font-style: normal;
          font-weight: 500;
        }
      }
    }

    tbody {
      border: none;
      border-top: 1px solid #e4e4e4;

      tr {
        border-bottom: 1px solid #e4e4e4;

        &:last-child {
          border: none;
        }

        .th-data {
          font-style: normal;
          font-weight: 500;
          color: #5f6368;
        }

        td {
          font-style: normal;
          font-weight: 400;
          color: #5f6368;

          &.blue {
            color: #209ee1;
          }

          &.yellow {
            color: #dca310;
          }

          &.red {
            color: #f43e56;
          }
        }
      }
    }

    tr th,
    tr td {
      padding: 10px 10px;
      font-size: 16px;
      white-space: nowrap;
    }
  }

  .view-report {
    text-align: right;
    width: 100%;

    .common-btn {
      padding: 15px;
      color: #1967d2;
      background-color: transparent;
      border: none;
      display: inline-block;
      height: fit-content;
      font-weight: 500;

      &:hover {
        color: #1966d2aa;
        background-color: transparent;
      }
    }
  }

  .create-campaign {
    margin: 15px;

    .common-btn {
      width: 180px;
    }
  }
}

.progress-wholebox {
  margin-top: 15px;
}

// upgradetosstmodal
.upgradetosstmodal {
  .modal-dialog {
    min-width: 736px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    pointer-events: auto;
    overflow: initial;

    .btn-close {
      position: absolute;
      background-color: white;
      top: -10px;
      right: -10px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 20;
      opacity: 1;
    }
  }

  .modal-content {
    background-color: black;
    padding: 24px 24px;
    position: relative;
    z-index: 1;
    border-radius: 16px;
    overflow: auto;

    &::after {
      content: "";
      background-image: url("../images/sst_popup_bg1.png");
      background-size: cover;
      width: inherit;
      height: inherit;
      background-position: initial;
      background-repeat: no-repeat;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
    }

    h2 {
      color: #fff;
      font-size: 36px;
      font-weight: 800;
      line-height: 46px;
      letter-spacing: 1.44px;
      text-transform: capitalize;
      margin-bottom: 16px;

      span {
        color: #69acfa;
        font-size: 40px;
        font-weight: 900;
        line-height: 50px;
        text-transform: capitalize;
      }
    }

    .listing {
      span {
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        display: block;
        margin-left: -32px;
      }

      li {
        color: #cecece;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        list-style-type: disc;
        margin: 10px 0px;
      }
    }

    .discount-btn {
      text-align: end;
      margin-top: 54px;
      display: flex;
      justify-content: center;

      .common-btn {
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        border-radius: 4px;
        background: #69acfa;
        width: 312px;
        height: 40px;
        padding: 8px 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid transparent;
      }
    }
  }
}

// gtm sst
.convo_sst {
  border-radius: 8px;
  background-color: #1967d2;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
  padding: 8px 8px;

  .convcard-center {
    padding: 0px 10px;

    .convcard-title {
      h3 {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 8px;
      }

      p {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        margin: 0px;
      }
    }
  }

  .convcard-right {
    .convcard-right-arrow {
      border-radius: 1px 8px 8px 1px;
      background-color: #fefefe;
      padding: 8px 8px;
      height: 54px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
    }
  }

  .conv-pixel-logo {
    border-right: 1px solid #dadce0;
    height: 30px;
    padding-right: 8px;

    .convcard-logo {
      width: 32px;
      height: 32px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
    }
  }
}

// sst card
.sst-card {
  background-color: black;
  position: relative;
  border-radius: 16px;
  overflow: auto;

  &::after {
    content: "";
    background-image: url("../images/sst_dash_bg.png");
    background-size: cover;
    width: inherit;
    height: inherit;
    background-position: initial;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

  }

  .card-body {
    z-index: 1;

    h2 {
      color: #fff;
      font-size: 42px;
      font-weight: 500;
      line-height: 50px;
      margin: 0px;

      span {
        color: #68a2ff;
        font-size: 42px;
      }
    }

    p {
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      text-transform: capitalize;
      margin: 16px 0px;
    }

    .discount-btn {
      .common-btn {
        border-radius: 4px;
        background: #68a2ff;
        height: 40px;
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        width: 100%;
      }
    }
  }
}
// Ecomm reporting page
.dash-ga4 {
  h2 {
    color: #2A2D2F;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
    margin: 0px;
  }

  h3 {
    color: #1967D2;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    text-transform: capitalize;
    margin: 0px 0px;
  }

  p {
    color: #1967D2;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    margin: 0px;
  }

  .common-btn {
    width: 240px;
    height: 40px;
    border-radius: 4px;
    background: #1967D2;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .icontrol {
    width: 100%;
    height: 38px;
    border: 1px solid #CBCDD0 !important;
    border-radius: 4px;
    background-color: white;
    color: #5F6368;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-transform: capitalize;
    text-align: left;

    &::placeholder {
      color: #5F6368;
      text-align: left;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
      text-transform: capitalize;
    }
  }

  .lcontrol {
    font-family: "Roboto";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    color: #2A2D2F;
  }

  .input-group-text {
    width: auto;
    height: 38px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: center;
    color: #1967D2;

  }

  .card {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0px 0px;
    border-radius: 8px;
    border: 2px solid #E4E4E4;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
    padding: 16px 16px;

    .card-body {
      padding: 0px 0px;
      text-align: center;
    }
  }

  .card-content {
    .smart-powered {
      margin-bottom: 22px;

      a {
        color: #2A2D2F;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          margin-right: 8px;
        }
      }

    }
    .genrate-insights{
      margin-top: 40px;
    }

    h3 {
      margin: 12px 0px;
    }

    p {
      margin-bottom: 26px;
    }

    .genrate-insights {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 14px;
     

    }
  }

  .smart-insightscard {
    background-color: white;

    .smart-insightsbox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .smart-powered {
        margin-bottom: 0px;
      }

      .genrate-insights {
        margin-bottom: 0px;
        margin-top: 0px;
      }
    }
  }

  // prompt tabs
  .smartprompt-card {

    .smart-promptbox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .smart-powered {
        margin-bottom: 0px;
      }

      .genrate-insights {
        margin-bottom: 0px;

        .common-btn {
          width: auto;
          background-color: transparent;
          color: #1967D2;
          padding: 0px 0px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          span {
            margin-right: 8px;
          }
        }
      }
    }

    .prompttab-box {
      margin-top: 24px;
      text-align: initial;
      span {
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
        line-height: 30px;
        letter-spacing: 0px;
        text-align: left;
        color: #1967D2;
        margin-bottom: 8px;
      }
      .nav-pills {
        margin-bottom: 42px;
        .nav-item {
          position: relative;
          margin-right: 23px;
          .nav-link {
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            letter-spacing: 0em;
            text-align: left;
            color: #5F6368;
            background-color: transparent;
            border: none;
            padding: 0px 0px;
            transition: all .3s ease;
            position: relative;
            padding-left: 24px;
            &::before {
              content: url('../images/reporting-images/unselected.png');
              position: absolute;
              left: 0;
              top: 2px;
              bottom: 0;
              width: 18px;
              height: 18px;
              transition: all .3s ease
            }
            &.active {
              color: #1967D2;
              &::before {
                content: url('../images/reporting-images/selected.png');
                position: absolute;
                left: 0;
                top: 2px;
                width: 18px;
                height: 18px;
                transition: all .3s ease;
              }
            }
          }
          .refresh-btn {
            position: absolute;
            top: 23px;
            right: 0px;
            cursor: pointer;
            &:before {
              content: "New updates available";
              font-size: 12px;
              font-style: normal;
              font-weight: 500;
              line-height: 16px;
              color: #2A2D2F;
            }
            &:hover .tool-tip {
              opacity: 1;
              visibility: visible;
              transition: all .3s ease;
              transform: translateY(-8px);
              cursor: pointer;
            }
            img {
              width: 15px;
              height: 15px;
              object-fit: cover;
            }
            .tool-tip {
              position: absolute;
              width: max-content;
              background-color: #2A2D2F;
              color: white;
              top: -32px;
              left: 0;
              right: 0;
              z-index: 999;
              height: 26px;
              border-radius: 10px;
              opacity: 0;
              visibility: hidden;
              transition: all .3s ease;
              padding: 5px 12px;
              height: auto;
              margin-bottom: 0px;
              transform: translateY(20px);
              p {
                color: white;
                margin-bottom: 0px;
              }
            }
          }
        }
      }
      .tab-content {
        .listing {
          padding: 0px;
          li {
            position: relative;
            padding-left: 24px;
            font-size: 14px;
            font-weight: 500;
            line-height: 22px;
            letter-spacing: 0px;
            text-align: left;
            margin-bottom: 18px;
            color: #5F6368;
            &::before {
              content: url('../images/reporting-images/insights.png');
              position: absolute;
              left: 0;
              top: 0;
            }
          }
        }
      }
      .response-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 24px;
        .response {
          span {
            margin-bottom: 0px;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            letter-spacing: 0em;
            text-align: left;
            color: #2A2D2F;
          }
        }
        .response-validity {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          p {
            margin-bottom: 0px;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: 0em;
            text-align: left;
            color: #5F6368;
            margin-left: 0px;
            &.response-note {
              span {
                color: grey;
                margin-left: 20px;
                font-size: 15px;
                font-style: italic;
                display: block;
                line-height: 1;
                font-weight: 500;
                padding-bottom: 4px;
              }
            }
            span {
              margin-bottom: 0px;
              font-weight: 700;
              color: #2A2D2F;
            }
            a {
              font-size: 16px;
              font-weight: 700;
              line-height: 24px;
              letter-spacing: 0em;
              text-align: left;
              color: #1967D2;
            }
          }
        }
      }
      .robotyping-box {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

}
// ga4 custom modal prompt
.custom-modal {
  .modal-dialog {
    min-width: 500px;
    margin-top: 50px;

    .modal-content {
      height: auto;
      border-radius: 24px;
      background: #FFF;
      padding: 24px 24px;

      .modal-body {
        padding: 0px 0px;

        h2 {

          letter-spacing: 0em;
          text-align: left;
        }

        p {
          color: #5F6368;
          margin: 16px 0px 32px;
          text-transform: capitalize;
          font-style: normal;
          font-weight: 500;
          line-height: 22px;
          text-align: left;
        }
      }
    }
  }

  .prompt-form {
    .form-box {
      flex-wrap: nowrap;
      margin-bottom: 16px;

      .icontrol {
        background-color: #F5F6F6;
        border: 1px solid #CBCDD0 !important;
        box-shadow: none !important;

        &.add {
          border: 1px solid #1967D2 !important;
          border-radius: 4px;
          background-color: white;

        }
      }

      .input-group-text {
        margin-left: 16px !important;
        border-radius: 4px !important;
        border: 1px solid #1967D2;
        background-color: #FFF;

        &.edit {
          border: 1px solid transparent;
        }

        span {
          margin-right: 10px;

          img {
            min-width: 20px;
            object-fit: none;
          }
        }
      }
    }

    .submit {
      padding: 0px 0px;
      margin: 0px;

      .common-btn {
        width: 100%;
        margin-top: 34px;
        font-weight: 600;
        line-height: 22px;
        font-size: 14px;
      }
    }
  }

  .btn-close {
    position: absolute;
    right: 8px;
    padding: 8px;
    border-radius: 50%;
    background-color: lightgrey;
    top: 4px;
    opacity: 1;
  }

  .add-more {
    .common-btn {
      width: auto;
      background-color: transparent;
      border: none;
      color: #1967D2;
      padding: 0px 0px;

      &:hover {
        background-color: transparent;
        border: none;
      }
    }
  }
}

// on load modal
.popupmodal {
  .modal-dialog {
    min-width: 640px;
    margin-top: 50px;

    .modal-content {
      height: auto;
      border-radius: 24px;
      background: #FFF;
      padding: 40px 40px;

      .modal-body {
        padding: 0px 0px;

        h2 {
          font-size: 28px;
          letter-spacing: 0em;
          text-align: left;
          font-weight: 500;
          line-height: 36px;
        }

        p {
          color: #5F6368;
          margin: 8px 0px 24px;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 22px;
        }
      }

    }
  }

  .popup-form {
    .form-box {
      margin-bottom: 8px !important;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .lcontrol {
        min-width: 230px;
        margin: 0px;
      }

      .icontrol {
        border-radius: 4px;
        border: 1px solid #E4E4E4;
        background-color: #F5F6F6;

        &:focus {
          box-shadow: none;
        }

        option {
          font-family: "Roboto";
          font-size: 15px;
          font-style: normal;
          font-weight: 400;
          line-height: 22px;
        }
      }
    }

    .save {
      .common-btn {
        width: 100%;
      }
    }
  }

  .modal-dialog .modal-content .btn-close {
    font-size: inherit;
  }
}
// ai powered card
.dash-convo {
  .aipowered-card {
    position: relative;
    margin-top: 200px;

    .card-image {
      text-align: center;
      position: absolute;
      top: -200px;
      left: 0;
      right: 0;

    }

    .card-body {
      padding: 116px 15px 15px;

      .title-text {
        h2 {
          color: #1F4161;
          text-align: center;
          font-size: 20px;
          font-style: normal;
          font-weight: 900;
          line-height: 28px;
        }

        p {
          color: #114474;
          text-align: center;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 22px;
          margin: 8px 0px 24px;
        }
      }

      .get-started {
        .common-btn {
          border-radius: 4px;
          border: 1px solid #1F4161;
          background: #FFF;
          background-color: transparent;
          color: #1F4161;

        }
      }
    }
  }
}
// Powered Smart Insights
.dash-convo {
  .ai-poweredcard {
    border-radius: 8px;

    .card-body {
      padding: 0px 0px;

      .ai-header {
        background-color: #F5F6F6;
        padding: 10px 16px;
        border-bottom: 1px solid #CBCDD0;
        border-radius: 8px 8px 0px 0px;

        a {
          font-size: 18px;
          font-style: normal;
          font-weight: 700;
          line-height: 26px;
          color: #2A2D2F;
          margin-bottom: 8px;
          display: block;

          span {
            margin-right: 8px;
          }
        }

        p {
          color: #5F6368;
          font-size: 15px;
          font-style: normal;
          font-weight: 600;
          line-height: 25px;
        }
      }

      .prompttab-box {
        padding: 16px 16px;
        span {
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: 24px;
          /* 150% */
          text-transform: capitalize;
          display: block;
          margin-bottom: 10px;
        }
        .response-note {
          span {
            color: grey;
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            margin-right: 20px;
            margin-bottom: 0px;
            display: block;
            line-height: 16px;
            font-style: italic;
            text-transform: initial;
          }
        }
        .nav-pills {
          margin-bottom: 20px;
          .nav-item {
            position: relative;
            border-radius: 4px;
            border: 1px solid #CCCCCC;
            background-color: #FFF;
            margin-right: 25px;
            &.active {
              color: #1967D2;
              border: 1px solid #1967D2;
            }
            .nav-link {
              font-size: 12px;
              font-style: normal;
              font-weight: 600;
              line-height: 20px;
              color: #5F6368;
              padding: 4px 8px;
              background-color: white;
              padding-right: 36px;
              border: 1px solid transparent;
              &.active {
                color: #1967D2;
                border: 1px solid #1967D2;
              }
            }
            .refresh-btn {
              position: absolute;
              cursor: pointer;
              background-color: #1967D2;
              right: 0;
              top: 0;
              bottom: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 26px;
              &:hover .tool-tip {
                opacity: 1;
                visibility: visible;
                transition: all .3s ease;
                transform: translateY(-8px);
                cursor: pointer;
              }
              img {
                width: 15px;
                height: 15px;
                object-fit: cover;
              }
              .tool-tip {
                position: absolute;
                width: max-content;
                background-color: #2A2D2F;
                color: white;
                top: -32px;
                left: 0;
                right: 0;
                z-index: 999;
                height: 26px;
                border-radius: 10px;
                opacity: 0;
                visibility: hidden;
                transition: all .3s ease;
                padding: 5px 12px;
                height: auto;
                margin-bottom: 0px;
                transform: translateY(20px);
                p {
                  color: white;
                  margin-bottom: 0px;
                }
              }
            }
          }
        }
        .tab-content {
          .tab-pane {
            .listing {
              padding: 0px;
              li {
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 20px;
                position: relative;
                padding-left: 28px;
                margin-bottom: 12px;
                &::after {
                  content: url('../images/insights.png');
                  position: absolute;
                  top: -1px;
                  left: 0;
                }
              }
            }
          }
        }
        .view-report {
          display: flex;
          justify-content: space-evenly;
          margin-top: 18px;
        }
      }
    }
    

.robotyping-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  text-align: center;
  .ai-typing{
      h2{
          span{
              display: inline-block;
              font-size: 16px;
              font-weight: 600;
              line-height: 30px;
              letter-spacing: 0px;
              text-align: left;
              color: #1967D2;
              margin-bottom: 8px;
          }
      }
  }
}
  }
}


// Media Query
@media screen and (max-width: 1440px) {
  .pixels-wholebox .pixels-part .pixels-box .pixels-image img {
    width: 30px;
    height: 30px;
  }

  .pixels-wholebox .pixels-part .pixels-box .pixels-text h5 {
    margin-left: 6px;
    font-size: 16px;
    line-height: 22px;
    white-space: nowrap;
  }

  .need-help .card-body .title-title p {
    padding: 0px 15px;
  }

  .campaign-manage .campaign-wholebox .campaign-image img {
    width: 95%;
  }

  .pixels-wholebox .pixels-part .pixels-box.convo-active::after {
    right: 5px;
  }

  .genrated-box ul li {
    width: 25%;
  }

  .dash-convo p {
    font: size 14px;
    line-height: 20px;
  }

  .recent-post .card-content a span {
    font-size: 13px;
    line-height: 19px;
  }

  .commoncard-box .card-body .title-title h3 {
    margin-bottom: 10px;
  }

}

@media screen and (max-width: 1300px) {
  .pixels-wholebox .pixels-part .pixels-box .pixels-text h5 {
    font-size: 14px;
  }

  .genrated-box ul li {
    padding: 8px 12px;
  }

  .genrated-box ul {
    margin: -8px -12px;
  }

  .genrated-box .revenue-box .card-body p {
    margin: 6px 0px 8px;
  }
}

@media screen and (max-width: 1200px) {
  .pixels-wholebox .pixels-part .pixels-box .pixels-text h5 {
    font-size: 12px;
  }

  .pixels-wholebox .pixels-part .pixels-box .pixels-image img {
    width: 25px;
    height: 25px;
  }

  .pixels-wholebox .pixels-part .pixels-box {
    width: 210px;
    min-width: auto;
  }

  // .pixels-wholebox .pixels-part {
  //   width: 50%;
  // }
}

@media screen and (max-width: 1023px) {}

@media screen and (max-width: 991px) {
  .pixels-wholebox .pixels-part {
    width: 50%;
  }

  .pixels-wholebox .pixels-part .pixels-box {
    margin: 6px 0px;
  }
}

@media screen and (max-width: 767px) {
  .product-feed .card-body .progress-steps li .step-box .channel-box {
    display: block;
  }

  .product-feed .card-body .progress-steps::after {
    height: calc(100% - 100px);
  }

  .dash-area .upgrade-btn .common-btn {
    width: auto;
  }

  .dash-area .card .card-body .purchase-box {
    display: block;
  }

  .dash-area .form-box {
    padding: 16px 0px;
  }

  .product-feed .card-body .progress-steps::after {
    height: calc(100% - 188px);
  }

  .genrated-box ul li {
    width: 50%;
  }
}

@media screen and (max-width: 479px) {
  .pixels-wholebox .pixels-part {
    width: 100%;
  }

  .pixels-wholebox .pixels-part .pixels-box {
    width: 100%;
    font-size: initial;
  }

  .pixels-wholebox .pixels-part .pixels-box {
    margin: 6px 0px;
  }

  .genrated-box ul li {
    width: 100%;
  }
}

@media screen and (max-width: 321px) {}



/* stepper css for GA pages */
.gasettings .progress-steps li::before {
  content: counter(list);
  width: 32px;
  height: 32px;

  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;

  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  border: 1px solid #1967D2;
}

.gasettings .progress-steps li {
  counter-increment: list;
  /* position: relative; */
}

.gasettings .progress-steps {
  list-style: none;
  position: relative;
  z-index: 1;
  padding-left: 50px;
}

.gasettings .progress-steps li::after {
  content: "";
  position: absolute;
  width: 1px;
  /* height: calc(100% - 180px); */
  height: 53px;
  left: 15px;
  top: 0;
  background-color: var(--primary-blue, #1967D2);
  z-index: -1;
  margin-top: 22px;
}

.gasettings .progress-steps li.active::before {
  background-color: #1967D2;
  color: #e0f1fb;
}

.gasettings .progress-steps li.not-active::before {
  background-color: #e0f1fb;
  color: #1967D2;
}

.step-wholebox {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .pixels-part {
    width: 50%;
  }

  .pixels-box {
    border: 1px solid #eee;
    box-shadow: 0px 0px 2px #585f5b;
  }
}

.pixel-setup {
  .card-body {
    .feed-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        white-space: nowrap;
        margin-right: 74px;
      }

      .progress {
        background: #e4e4e4;
        height: 8px;
        border-radius: 4px;

        .progress-bar {
          background: linear-gradient(90deg, #1967D2 0%, #1967D2 100%);
        }
      }
    }
  }
}

.hover-text {
  display: none;
}

.pixel-box-gasettings {
  &:hover {
    .hover-text {
      display: block;
      color: #1967D2
    }
  }
}

.pixel-box-gadssettings {
  &:hover {
    .hover-text {
      display: block;
      color: #1967D2
    }
  }
}

.pixel-box-fbsettings {
  &:hover {
    .hover-text {
      display: block;
      color: #1967D2;
    }
  }
}

.pixel-box-bingsettings {
  &:hover {
    .hover-text {
      display: block;
      color: #1967D2;
    }
  }
}

.pixel-box-twittersettings {
  &:hover {
    .hover-text {
      display: block;
      color: #1967D2;
    }
  }
}

.pixel-box-pintrestsettings {
  &:hover {
    .hover-text {
      display: block;
      color: #1967D2;
    }
  }
}

.pixel-box-snapchatsettings {
  &:hover {
    .hover-text {
      display: block;
      color: #1967D2;
    }
  }
}

.pixel-box-tiktoksettings {
  &:hover {
    .hover-text {
      display: block;
      color: #1967D2;
    }
  }
}

.conv-text-green {
  color: #09BD83 !important;
}

.gtmsettings {
  a {
    border: 1px solid #eee;
    box-shadow: 0px 0px 2px #585f5b;
  }
}

.nav-link-conv {
  display: block;
  padding: 0.5rem 1rem;
  color: #5f6368;
  text-decoration: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.nav-pills .nav-link-conv {
  background: 0 0;
  border: 0;
  border-radius: 0.25rem;
}
.nav-pills .nav-link-conv.active {
  color: #0d6efd;
  background-color: #fff;
  border: 1px solid #0d6efd;
}
.nav-pills .nav-link-conv:hover {
  color: #0d6efd;
}
.attributeDiv::-webkit-scrollbar { 
  width: 0; 
  background: transparent; 
}
.categoryDiv::-webkit-scrollbar { 
  width: 0; 
  background: transparent; 
}
.badgebox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100px;
  /* background-color: green; */
  /* color: white; */
  padding: 2px 10px;
  border-radius: 30px;
  margin-bottom: 6px;
  position: relative;
  height: 22px;
  font-size: 12px;
  font-weight: 500;
  margin: 0 auto;
  margin-bottom: 10px;
}
.badgebox .count-badge {    
  width: 22px;
  height: 22px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  position: absolute;
  right: 0;
  top: 4px;
  box-shadow: 0px 0px 4px 4px #0000001c;
 
}
.popover-box {
  padding: 4px 2px;
  background-color: transparent;
  border-radius: 4px;
  /* width: 120px; */
  float: right;
  display: flex;
  justify-content: end;
}

.border-synced {
  border: 1px solid #09bd83;
}
.border-draft {
  border: 1px solid #DCA310;
}
.border-inprogress {
  border: 1px solid #209EE1;
}
.border-failed {
  border: 1px solid #f43e56;
}
.inprogress-status { border: 2px solid #209EE1; border-radius: 50%; margin: 2px; }
.draft-status { border: 2px solid #DCA310; border-radius: 50%; margin: 2px; }
.synced-status { border: 2px solid #09bd83; border-radius: 50%; margin: 2px; }
.failed-status { border: 2px solid #f43e56; border-radius: 50%; margin: 2px; }