.pv-dashbord-main {
  grid-gap: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); 

  >div {
    &:nth-child(1) {
      order: 0;

      @include custom-breakpoint(max-width, bp1500) {
        grid-column: span 2;
      }
    }

    &:nth-child(2) {
      order: 2;

      @include custom-breakpoint(max-width, bp1500) {
        grid-column: span 2;
        order: 1;
      }
    }

    &:nth-child(3) {
      grid-column: span 3;
      grid-row: span 2;
      order: 1;

      @include custom-breakpoint(max-width, bp1500) {
        grid-column: span 4;
        grid-row: span 1;
      }
    }

    &:nth-child(4) {
      grid-column: span 4;
      order: 3;

      @include custom-breakpoint(max-width, bp1500) {
        order: 1;
      }
    }

    &:nth-child(5) {
      grid-column: span 4;
      order: 4;

      @include custom-breakpoint(max-width, bp1500) {
        grid-column: span 4;
        order: 1;
      }
    }

    &:nth-child(6) {
      grid-column: span 4;
      order: 5;
    }

    &:nth-child(7) {
      grid-column: span 4;
      order: 6;
    }

    &:nth-child(8) {
      grid-column: span 4;
      order: 7;
    }

    &:nth-child(9) {
      grid-column: span 4;
      order: 8;
    }
  }

  .BulletLabelText {
    font-size: 0.8rem;

    @include custom-breakpoint(max-width, bp1500) {
      font-size: 16px;
    }
  }

  .pv-dashbord-chart-col {
    position: relative;
    background-color: var(--bs-white);

    .nav-tabs {
      .nav-item {
        width: 100px !important;
        flex-basis: unset;
        flex-grow: unset;

        .nav-link {
          border: none;
          border-bottom: 1px solid var(--bs-border-color);
          position: relative;
          text-align: left;
        }

        .nav-link.active {
          &::after {
            content: "";
            width: 30px;
            height: 3px;
            background-color: var(--bs-link-color);
            display: block;
            margin: auto;
            position: absolute;
            bottom: -2px;
            left: 32%;
            transform: translateX(-50%);
          }
        }
      }
    }

    .tab-content {
      height: 92%;

      .tab-pane {
        height: 100%;
      }
    }

    .pv-chartdash-dropbtn.dropdown {
      position: absolute;
      top: 5px;
      right: 6px;

      button#dropdown-basic {
        padding: 0.2rem 1rem;
        font-size: 13px;
      }
    }

    tspan {
      font-size: 11px;
    }

    .recharts-rectangle {
      fill: transparent;
    }

    .recharts-tooltip-wrapper {
      outline: none;
    }

    .pv-allorder-status {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 15px;

      .pv-orderstatus-inner {
        h3 {
          background-color: #f5f5f5;
          padding: 1.25rem 0.625rem;
          margin: auto;
          border: 1px solid var(--bs-border-color);
          border-radius: 0.375rem;
          transition: all 0.1s ease-in;
          width: 100%;

          &:hover {
            transform: scale(1.1);
            box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
          }
        }

        p {
          margin-top: 0.375rem;
          font-weight: 600;
        }
      }

      >div:first-child {
        grid-column: span 1;
        grid-row: span 2;
        background-color: #f5f5f5;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.375rem;
        transition: all 0.1s ease-in;

        &:hover {
          transform: scale(1.1);
          box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        }
      }

      >div:nth-child(8) {
        grid-column: span 1;
        grid-row: span 2;
        background-color: #f5f5f5;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.375rem;
        transition: all 0.1s ease-in;

        &:hover {
          transform: scale(1.1);
          box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        }
      }
    }
  }

  .pv-piechart-main {
    // @include custom-breakpoint(max-width, bp1500) {
    //   // height: 230px !important;
    //   align-items: flex-start;
    //   height: 25vh !important;
    // }
    // @include custom-breakpoint(min-width, bp2000) {

    //   }
    display: flex;
    align-items: center;
    // height: 100% !important;
    }
    .recharts-responsive-container.pv-piechart-main , .pv-piechart-main .recharts-wrapper {
      @include custom-breakpoint(max-width, bp1500) {
        max-height: 230px !important;
        height: 230px !important;
      }
      @include custom-breakpoint(min-width, bp1500) {
        max-height: 230px !important;
        height: 230px !important;
      }
      @include custom-breakpoint(min-width, bp3000) {
        max-height: 350px !important;
        height: 350px !important;
      }
    }
    .recharts-wrapper {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      overflow: hidden;
      //   height: 220px !important;
      height: 110% !important;



      svg.recharts-surface {
        height: 100% !important;
        overflow: hidden;

        path {
          outline: unset !important;
        }

        g {
          outline: none;
        }
      }

      .recharts-legend-wrapper {
        position: unset !important;

        .LegendList {
          list-style: none;
          padding: 0px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin: 0px;
          min-width: 150px;

          li {
            display: flex;
            align-items: center;

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



  .pv-rounded-chart {
    .recharts-responsive-container {
      // @include custom-breakpoint(min-width, bp1900) {
      //   max-height: 640px !important;
      //   height: 640px !important;
      // }
      // max-height: 95% !important;
      // height: 95% !important;
            @include custom-breakpoint(min-width, bp3000) {
        max-height: 700px !important;
        height: 700px !important;
      }
      .recharts-wrapper {
        padding: 0px !important;
        // max-height: 100% !important;
        // height: 100% !important;
        // @include custom-breakpoint(min-width, bp1900) {
        //   max-height: 640px !important;
        //   height: 640px !important;
        // }
        @include custom-breakpoint(min-width, bp3000) {
          max-height: 700px !important;
          height: 700px !important;
        }
      }
    }

    // .recharts-responsive-container.pv-piechart-main , .pv-piechart-main .recharts-wrapper {
    //   @include custom-breakpoint(max-width, bp1500) {
    //     max-height: 230px !important;
    //     height: 230px !important;
    //   }
    //   @include custom-breakpoint(min-width, bp1500) {
    //     max-height: 230px !important;
    //     height: 230px !important;
    //   }
    //   @include custom-breakpoint(min-width, bp3000) {
    //     max-height: 350px !important;
    //     height: 350px !important;
    //   }
    // }


    .pv-PercentArea-desc {
      h6 {
        font-size: 1rem;
      }

      h5 {
        font-size: 1rem;
      }
    }

    .recharts-tooltip-wrapper {
      div {
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;

        ul {
          margin: 0px;
        }
      }
    }
  }
}

.pv-chart-horizontal {
  .LegendList {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 15px !important;

    @include custom-breakpoint(max-width, bp1480) {
      display: block !important;
    }

    @include custom-breakpoint(max-width, bp1500) {
      display: flex !important;
    }

    li {
      min-width: 130px;

      @include custom-breakpoint(max-width, bp1500) {
        min-width: 150px;
      }
    }
  }
}

.recharts-tooltip-wrapper {
  div {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(204, 204, 204);
    white-space: nowrap;
    border-radius: 5px;
    font-size: 0.8rem;
    line-height: normal;
  }

  p {
    margin: 0px;
    color: #000;
    line-height: normal;
    font-weight: 500;
    padding: 0px;
  }
}

g.pv-piechart-lable {
  transform: translateY(100%);

  text {
    font-size: 26px;

    &:nth-child(1) {
      transform: translate(-18px, 8px);
    }
  }

  text {
    font-size: 26px;

    &:nth-child(2) {
      transform: translate(48px, -21.04px);
    }
  }
}