@import "vars";

//info-panel
.info-panel {
  .btn-floating {
    box-shadow: none;
  }
  .content-text {
    white-space: nowrap;
    &>i {
      top: -10px;
    }
  }
}

//chart-view
#ecommerceChartView {
  .chart-menu button {
    border: 0;
  }
  .chart-action {
    float: right;
  }
  .ct-grid {
    stroke-dasharray: 10 5;
  }
  .ct-line {
    stroke-width: 4px;
  }
  .ct-point,
  .ct-point-content {
    opacity: 0;
    cursor: pointer;
    // .transition(all .3s);
    tansition: all .3s;
  }
  .ct-point-content {
    stroke: #fff;
    stroke-width: 4px;
    stroke-linecap: round;
    pointer-events: none;
  }
  .ct-series:hover {
    .ct-point {
      opacity: 0.8;
    }
    .ct-point-content {
      opacity: 1;
    }
  }
  .ct-series-a {
    .ct-area {
      fill: $color-pink-100;
      fill-opacity: 0.2;
    }
    .ct-line,
    .ct-point {
      stroke: $color-pink-800;
    }
    .ct-line {
      stroke-opacity: 0.5;
    }
  }
  .ct-series-b {
    .ct-line,
    .ct-point {
      stroke: $color-purple-800;
    }
    .ct-line {
      stroke-opacity: 0.5;
    }
    .ct-area {
      fill: $color-purple-100;
      fill-opacity: 0.2;
    }
  }
}

//recent-order
#ecommerceRecentOrder {
  .table-menu button {
    border: 0;
  }
  .table-row .card-block {
    border: 0;
    padding: 0 20px;
    .table {
      margin-bottom: 0;
      th {
        white-space: nowrap;
      }
      td {
        vertical-align: middle;
        height: 100px;
        font-size: 14px;
        padding: 20px 8px;
        span {
          border-radius: 4px;
          padding: 5px 15px;
        }
      }
    }
  }
}

//revenue
#ecommerceRevenue {
  .card-block {
    padding: 20px 10px 35px;
    .ct-label.ct-horizontal.ct-end {
      font-size: 14px;
      font-weight: 400;
    }
    .ct-series-a line.ct-bar {
      stroke: #926dde;
    }
    .ct-series-b line.ct-bar {
      stroke: #57c7d4;
    }
  }
  .ct-series .ct-bar-fill {
    stroke: $color-blue-grey-100;
    stroke-width: 20px;
  }
  .pie-view {
    margin-top: 52px;
    @include clearfix();
    .pie-left,
    .pie-right {
      .pie-progress.pie-progress-sm {
        min-width: 120px;
        max-width: 120px;
      }
      h5 {
        white-space: nowrap;
        +p {
          margin-bottom: 15px;
        }
      }
    }
  }
}

//@media
@include media-breakpoint-down(md) {
  .pie-view .pie-progress.pie-progress-sm {
    max-width: 200px!important;
    min-width: 50px!important;
  }
}
@media (min-width: 992px) and (max-width: 1330px) {
  .pie-view .pie-progress.pie-progress-sm {
    min-width: 100px!important;
    max-width: 100px!important;
  }
  #ecommerceRevenue .pie-view {
    margin-top: 72px;
  }
}
@media (min-width: 1489px) {
  #ecommerceRevenue {
    .barChart {
      .ct-series .ct-bar {
        stroke-width: 20px;
      }
    }
  }
}
@media (min-width: 992px) and (max-width: 1489px) {
  #ecommerceRevenue {
    .barChart {
      .ct-series {
        .ct-bar-fill {
          stroke-width: 15px;
        }
        .ct-bar {
          stroke-width: 15px;
        }
      }
    }
    .ct-series-a {
      transform: translateX(3px);
    }
    .ct-series-b {
      transform: translateX(-3px);
    }
  }
}
@media (min-width: 429px) and (max-width: 992px) {
  #ecommerceRevenue {
    .barChart {
      .ct-series .ct-bar {
        stroke-width: 20px;
      }
    }
  }
}
@media (max-width: 429px) {
  #ecommerceRevenue {
    .barChart {
      .ct-series {
        .ct-bar-fill {
          stroke-width: 15px;
        }
        .ct-bar {
          stroke-width: 15px;
        }
      }
    }
    .ct-series-a {
      transform: translateX(3px);
    }
    .ct-series-b {
      transform: translateX(-3px);
    }
  }
}
@media (max-width:570px) {
  #ecommerceChartView {
    .chart-action {
      // display: inline-block;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      float: none;
      margin: 10px 0;
    }
    .card-block {
      overflow-x: scroll;
    }
  }
}

// smaller ct-chart and browersVistsDonut
@media screen and (max-width: 380px) {
  #ecommerceChartView {
    .nav-pills .nav-link {
      padding: 2px 8px;
      margin-right: 3px;
      margin-left: 3px;
    }
  }
}