/*------ dashboard_styles start ------*/
/* Gaming Dashboard */
#new-issues,
#completed-issues,
#pending-issues,
#unresolved-issues,
#distance-covered,
#energy-block,
#civilian-population,
#civilian-population-support,
#player1-stats,
#player2-stats,
#player3-stats,
#player4-stats,
#player5-stats,
#air-support,
#time-spent,
#users-report,
#player6-stats,
#website-traffic {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

@media (max-width: 350px) {
  #air-support {
    .apexcharts-tooltip.apexcharts-theme-light {
      display: none;
    }
  }
}

.energy-block-list {
  li {
    margin-block-end: 1rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

@media(min-width: 576px) {
  .distance-covered-content {
    position: absolute;
    inset-inline-start: 0;
    width: 100%;
    z-index: 1;
  }
}
.player-statistics {
  .apexcharts-svg, .apexcharts-canvas {
    width: auto !important;
  }
}
[dir="rtl"] {
  .player-statistics {
    .apexcharts-svg, .apexcharts-canvas {
      direction: rtl;
    }
  }

}
#danger-zones,
#safe-zones {

  .apexcharts-pie line,
  .apexcharts-pie circle,
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }
}

.skills-achieved-list {
  li {
    margin-block-end: 1rem;

    &:last-child {
      margin-block-end: 0;
    }

    &.active {
      border: 1px dashed $primary-05;
      color: $primary;
    }

    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.05);

    .custom-progress-padding {
      overflow: visible;
    }

    .progress-bar {
      position: relative;
      overflow: visible;

      &:before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        box-shadow: 0 0.313rem 0.313rem var(--primary02);
        background: #ffffff;
        position: absolute;
        inset-inline-end: -0.4rem;
        inset-block-start: -0.17rem;
        border: 0.1rem solid var(--primary-color);
      }
    }
  }
}

#civilian-population-support {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: 100%;
  z-index: -1;
}

#top-country {
  height: 20rem !important;

  #jvm-regions-group path {
    fill: $primary-005;
  }
}

#survival-rate {
  .apexcharts-radialbar-hollow {
    fill: transparent;
  }
}

.energy-block-content {
  position: absolute;
  top: 60px;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: 100%;
  padding: 0 1rem;
}

#time-spent .apexcharts-marker {
  stroke: var(--primary05);
  stroke-width: 10;
}

#top-country {
  .jvm-lines-group {
    .jvm-line {
      stroke: $primary !important;
    }
  }

  #jvm-markers-labels-group text {
    fill: #fff;
    padding: 10px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.7);
  }
}

/* Gaming Dashboard */

/* Sales Dashboard */
.sales-stats {
  padding-inline-start: 35px;
}

.sales-stats-row {
  flex: 1;
}

#male-users,
#female-users {

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

#recent-orders {
  .apexcharts-pie circle {
    stroke: transparent;
  }
}

.traffic-sources-list li {
  margin-bottom: 1.62rem;

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

.svg-male,
.svg-female {
  position: relative;

  svg {
    position: absolute;
    bottom: 0;
    width: 150px;
    opacity: 0.05;
    height: 150px;
  }
}

.todo-list-list li:not(:last-child) {
  margin-block-end: 20px;
}

.todo-sublist {
  position: relative;

  &::before {
    content: " ";
    height: 100%;
    width: 1px;
    background-color: $default-border;
    position: absolute;
    inset-inline-start: -38px;
    inset-block-start: 12px;
  }
}

.todo-list-list {
  .form-check-label {
    transition: color 0.3s, text-decoration 0.3s;
    font-weight: 400;
  }

  .form-check-input:checked+.form-check-label {
    text-decoration: line-through;
    color: $text-muted;
  }
}

#sales-statistics,
#visitors {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

.recent-activity-list {
  margin-block-end: 0;
  position: relative;

  &:before {
    position: absolute;
    content: "";
    width: 1px;
    background-color: $default-border;
    height: 90%;
    inset-inline-start: 9px;
  }

  li {
    position: relative;
    margin-block-end: 1.75rem;
    padding-inline-start: 2rem;

    &:nth-child(1) {
      &:before {
        border: 3px solid rgba(var(--primary-rgb), 1);
      }
    }

    &:nth-child(2) {
      &:before {
        border: 3px solid rgba(var(--warning-rgb), 1);
      }
    }

    &:nth-child(3) {
      &:before {
        border: 3px solid rgba(var(--success-rgb), 1);
      }
    }

    &:nth-child(4) {
      &:before {
        border: 3px solid rgba(var(--danger-rgb), 1);
      }
    }

    &:nth-child(5) {
      &:before {
        border: 3px solid rgba(var(--secondary-rgb), 1);
      }
    }

    &:nth-child(6) {
      &:before {
        border: 3px solid rgba(var(--dark-rgb), 1);
      }
    }

    &:before {
      position: absolute;
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: $custom-white;
      inset-inline-start: 4px;
    }

    &:last-child {
      margin-block-end: 0;
    }
  }
}

/* Sales Dashboard */

/* Analytics Dashboard */
#lead_source,
#visitors-source,
#revenue {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

/* Analytics Dashboard */

/* Ecommerce Dashboard */
#sales-statistics,
#website-traffic {

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

#total-sales,
#total-revenue,
#page-views,
#profit-per-sale {
  position: relative;
  .apexcharts-radialbar-hollow {
    fill: transparent;
  }

  .apexcharts-radialbar-track.apexcharts-track path {
    stroke: rgba(255, 255, 255, 0.2);
  }

  &:before {
    width: 80px;
    height: 80px;
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px dashed var(--primary-color);
    top: 8px;
    animation: rotate 10s linear infinite;
    inset-inline-end: 9px;
    background-color: $primary-01;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#top-country-sales {
  height: 22.73rem;

  #jvm-regions-group path {
    fill: $primary-02;
  }

  .jvm-line[animation="true"] {
    stroke: $secondary;
  }

  circle {
    stroke-width: 30;
  }
}

.tilt {
  transform-style: preserve-3d;
}

#profit-analysis {
  .apexcharts-radialbar-hollow {
    fill: transparent;
  }
}

/* Ecommerce Dashboard */

/* Crypto Dashboard */
#total-revenue1,
#total-customers,
#conversion-ratio,
#total-deals,
#crypto-price,
#neo-price-graph,
#iota-price-graph,
#ripple-price-graph,
#dash-price-graph,
#Ethereum-price-graph,
#bitcoin-price-graph {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

#popTrades {
  .apexcharts-radialbar-hollow {
    fill: transparent;
  }

  .apexcharts-text.apexcharts-datalabel-label {
    display: none;
  }
}
@media (min-width: 576px) {
  .custom-border-end {
    border-inline-end: 1px solid $default-border;
  }
}
/* Crypto Dashboard */

/* Start:: NFT Dashboard */
[dir="rtl"] {
  #nft-collections-slide {
    .swiper-slide {
      .card {
        direction: rtl;
      }
    }
  }
}

#nft-statistics {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

.nft-table {
  &.table {

    td,
    th {
      padding: 0.83rem;
    }
  }
}

.nft-table2 {
  &.table {

    td,
    th {
      padding: 0.78rem;
    }
  }
}

.featured-nft {
  width: 100%;
  border-radius: $default-radius;

  img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100px;
    height: 100%;
    border-radius: $default-radius;
  }
}

.nft-auction-time {
  position: absolute;
  top: 3.5rem;
  inset-inline-end: 1rem;
  padding: 0.25rem 0.5rem;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 0.3rem;
  backdrop-filter: blur(1.875rem);
}

.nft-like-section {
  position: absolute;
  inset-block-start: 1rem;
}

.nft-like-badge {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(1.875rem);
}

.nft-collector-progress {
  width: 3.125rem;
}

.nft-featuredcollect-image {
  height: 8.813rem !important;
  border-radius: $default-radius;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
  }
}

#top-collector {
  max-height: 28.375rem;
}

#nft-balance-chart {
  .apexcharts-grid {
    display: none;
  }
}

/* End:: NFT Dashboard */

/* Start:: CRM Dashboard */
#performance,
#revenue-target {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

#lead_source {

  .apexcharts-pie line,
  .apexcharts-pie circle {
    stroke: transparent;
  }
}

.crm-top-deals li {
  margin-block-end: 1.45rem;

  &:last-child {
    margin-block-end: 0;
  }
}

#visitors-countries {
  height: 17.95rem;
  width: 100%;

  #jvm-regions-group path {
    fill: var(--primary005) !important;
  }

  circle {
    fill: var(--primary-color);
    stroke: var(--primary03);
    stroke-width: 20;
  }
  svg {
    width: 100%;
  }
}

/* End:: CRM Dashboard */

/* Start:: HRM Dashboard */
#attendance-summary,
#jobs-applied {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

/* End:: HRM Dashboard */

/* Start:: Jobs Dashboard */
#candidatePerformance {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }

  .apexcharts-marker {
    stroke: var(--primary05);
    stroke-width: 10;
  }
}

.recent-applications-list li {
  margin-block-end: 1.08rem;

  &:last-child {
    margin-block-end: 0;
  }
}

#QuickData {
  .apexcharts-radialbar-hollow {
    fill: transparent;
  }
}

/* End:: Jobs Dashboard */

/* Start:: Projects Dashboard */
#project-overview {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

.project-stats {
  flex: 1;
}

.project-categories-list {
  li {
    padding-inline-start: 2rem;
    position: relative;

    &:before {
      content: "";
      position: absolute;
      width: 7px;
      height: 7px;
      inset-inline-start: 13px;
      inset-block-start: 8px;
    }

    &:nth-last-child(1):before {
      background-color: $primary-08;
    }

    &:nth-last-child(2):before {
      background-color: $primary-06;
    }

    &:nth-last-child(3):before {
      background-color: $primary-04;
    }

    &:nth-last-child(4):before {
      background-color: $primary-02;
    }
  }
}

.storage-percent {
  .progress-stacked {
    .progress-bar {
      &:nth-last-child(1) {
        background-color: $primary-08;
      }

      &:nth-last-child(2) {
        background-color: $primary-06;
      }

      &:nth-last-child(3) {
        background-color: $primary-04;
      }

      &:nth-last-child(4) {
        background-color: $primary-02;
      }
    }
  }
}

.project-transactions-card {
  margin-block-end: 0;

  li {
    margin-block-end: 1.45rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

.gantt .bar-wrapper.primary .bar {
  fill: $primary-02;
}

.gantt .bar-wrapper.primary .bar-progress {
  fill: $primary-06;
}

.gantt .bar-wrapper.success .bar {
  fill: rgba(var(--success-rgb), 0.2);
}

.gantt .bar-wrapper.success .bar-progress {
  fill: rgba(var(--success-rgb), 0.6);
}

.gantt .bar-wrapper.warning .bar {
  fill: rgba(var(--warning-rgb), 0.2);
}

.gantt .bar-wrapper.warning .bar-progress {
  fill: rgba(var(--warning-rgb), 0.6);
}

/* hover state */
.gantt .bar-wrapper.primary:hover .bar-progress {
  fill: $primary-06;
}

.gantt .bar-wrapper.success:hover .bar-progress {
  fill: rgba(var(--success-rgb), 0.6);
}

.gantt .bar-wrapper.warning:hover .bar-progress {
  fill: rgba(var(--warning-rgb), 0.6);
}

/* active state */
.gantt .bar-wrapper.primary.active .bar {
  fill: $primary-04;
}

.gantt .bar-wrapper.primary.active .bar-progress {
  fill: $primary-06;
}

.gantt .bar-wrapper.success.active .bar {
  fill: rgba(var(--success-rgb), 0.4);
}

.gantt .bar-wrapper.success.active .bar-progress {
  fill: rgba(var(--success-rgb), 0.6);
}

.gantt .bar-wrapper.warning.active .bar {
  fill: rgba(var(--warning-rgb), 0.4);
}

.gantt .bar-wrapper.warning.active .bar-progress {
  fill: rgba(var(--warning-rgb), 0.6);
}

/** custom popup  */
.details-container {
  width: 150px;
  background-color: $custom-white;
  color: #fff;
  border: 1px solid $default-border;
}

.details-container>h5,
.details-container>p {
  border-top: 1px solid $default-border;
  margin: 0;
  padding: 10px;
  font-size: 0.7rem;
}

.details-container>h5 {
  border-top: none;
}

#projects-timeline {
  max-height: 25rem;
  overflow-y: scroll;
  margin-block-end: 0.3125rem;
}

.stars-main {
  .star {
    color: rgba(255, 255, 255, 0.3);

    &.active {
      color: $warning;
    }
  }
}

/* End:: Projects Dashboard */

/* Start:: Stocks Dashboard */
#total-earnings,
#portfolio-value,
#apple-stock-graph,
#nvidia-stock-graph,
#amazon-stock-graph,
#microsoft-stock-graph,
#alphabet-stock-graph,
#mastercard-stock-grap {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

/* End:: Stocks Dashboard */

/* Start:: Learning Dashboard */
#learning-analysis,
#payouts,
#courses-progress {
  .apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: transparent !important;
  }

  .apexcharts-grid line,
  .apexcharts-xaxis line,
  .apexcharts-grid-borders line {
    stroke: transparent;
  }
}

.courses-list {
  margin-block-end: 0;

  li {
    margin-block-end: 1.25rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

.top-course-name {
  max-width: 17rem;
}

.course-status-progress {
  width: 2.125rem;
}

.courses-top-categories-list {
  margin-block-end: 0;

  li {
    margin-block-end: 1rem;

    &:last-child {
      margin-block-end: 0;
    }
  }
}

#top-course-categories {
  .apexcharts-pie text {
    fill: #000 !important;
  }
}

/* End:: Learning Dashboard */
/*------ dashboard_styles end ------*/