\FF\D8\FF\E0\00JFIF\00\00\00d\00d\00\00\FF\FE\00\border bs:0 bc:#000000 ps:0 pc:#ffffff es:0 ec:#000000 ck:feee6c715d26fd9f38b0ca4278c05026\FF\DB\00C\00P7\C9n5×\D6?\BDê\9Ds\EBp\9F[`8m\B7)o\B5\E8\E6I\99\FE3]]A2\BA\8Cw\D6E\93\\DEv\C8\009\F2\F1NI?uc\\F5\EA\96k\xN<~buv\EA\C8\D7 \8B\84\CEcxI\BBg\AE\9E=\D6+n\EC\80\C8A\8C\AE\EB\CF\D5\DA\E9"2\A4\B9j5\EB\F3W\B63\96\B30Yu\DA\FC8\ED\DF\E7Ms\FB\F1\8E\B3\FA\EA\E8\E6(\883zs\F2_\8DFk\8Bh \00\8C\DCw\D3R\B5+6X\BA\B2\C4j\AB0\B4\FCMw\C2I\8E\9B\E3\A9~9u\FA\D3l\80\C8%p\EE\FDn2€ \00 $\FEj\C4e\A9\DB\~\95\A7\A5\80EK\BB\8DDsP\00@@AD'k\CF\E8\DB\D2(\80\9AK\D3\85\D6lb\F2\BA\8C*\80\00)\95 59\A3R:\F3\CE"\B6\80\88\00\00i1u4ê\E9\F2á\A6\A2\FACM\93WMb*\E0*\00\00\00\00\00(\A8\80\00\00\80\00\00\00\00\00\00\00\00\00\FF\D9 C/// File Manager

File Manager

Path: /home/heznutpr/log.heznutprivate.com/dashboard/scss/template/

Viewing File: _dashboard-six.scss

/* ###### 8.6 Dashboard Six  ###### */

.az-light {
  .az-iconbar { background-color: $gray-200; }
  .az-iconbar-aside {
    background-color: $gray-200;
    &.show + .az-content {
      @include media-breakpoint-only(lg) {
        box-shadow: none;
      }
    }
  }

  .az-iconbar-body {
    .nav { border-left-color: $gray-400; }
    .nav-link + .nav-link { border-top-color: darken($gray-400, 5%); }
  }
}

.az-content-dashboard-six {
  border-left-color: $gray-400;
  box-shadow: 0 0 7px rgba($gray-900, .08);
  position: relative;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: $gray-100;

  @include media-breakpoint-up(lg) {
    border-left: 1px solid $gray-400;
    margin-left: $az-height-header;
    z-index: 550;
  }
}

.az-header-dashboard-six {
  background-color: #fff;
  border-bottom: 1px solid $gray-300;
  box-shadow: 0 0 10px rgba($gray-900, 0.06);

  .az-header-center {
    @include media-breakpoint-only(lg) { margin-left: 5px; }
    @include media-breakpoint-up(xl) { margin-left: 0; }
  }

  .az-header-menu-icon {
    margin-right: 0;
    @include media-breakpoint-up(lg) { display: none; }
  }
}

.az-content-body-dashboard-six {
  padding: 20px;

  .az-content-title { letter-spacing: -.8px; }

  .card {
    border-color: $gray-300;
    box-shadow: 0 0 10px rgba($gray-900, 0.06);
  }

  .card-header {
    background-color: transparent;
    padding: 20px 20px 0;
  }

  .card-title {
    text-transform: uppercase;
    font-weight: 700;
  }
}

.card-dashboard-donut {
  .card-body {
    padding: 25px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  //donut-chart($name, $perc, $size, $width, $base, $center, $color, $textColor: $color, $textSize: 40px)

  // $name = class name
  // $perc = donut percentage value
  // $size = size of donut
  // $width = width of chart
  // $base = thickness of donut
  // $center = background color of the percentage
  // $color = background color of donut hole
  // $textColor = color of text in center and the percentage
  // $textSize = size of text

  @include donut-chart('.chart1', 75, 140px, 10px, $gray-300, #fff, $purple);
  @include donut-chart('.chart2', 68, 140px, 10px, $gray-300, #fff, $blue);

  // addon styles of chart
  .az-donut-chart.chart1,
  .az-donut-chart.chart2 {
    .chart-center span {
      font-weight: 600;
      font-family: 'Archivo', $font-family-base;
      font-size: 32px;
    }
  }
}

.card-dashboard-balance {
  position: relative;
  overflow: hidden;

  @include media-breakpoint-up(sm) {
    min-height: 260px;
    height: 100%;
  }

  .card-body {
    padding: 20px;
    position: relative;
    z-index: 5;

    @include media-breakpoint-up(sm) {
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .fab {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 48px;
    color: $blue;
    z-index: 5;
    background-color: #fff;
  }

  .az-content-label {
    color: $gray-600;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;

    @include media-breakpoint-up(sm) { font-size: 11px; }
  }

  .balance-amount {
    color: $gray-900;
    font-family: 'Archivo', $font-family-base;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -1px;
    margin-bottom: 20px;

    @include media-breakpoint-up(sm) { font-size: 36px; }

    span {
      color: $gray-500;
      font-weight: 400;
      letter-spacing: normal;
    }
  }

  .account-number {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Archivo', $font-family-base;
    color: $gray-900;
    letter-spacing: -1px;
    margin-bottom: 20px;

    @include media-breakpoint-up(sm) { font-size: 28px; }

    span {
      display: flex;
      align-items: center;
      line-height: 1;

      + span {
        margin-left: 20px;
        @include media-breakpoint-up(sm) { margin-left: 30px; }
        @include media-breakpoint-up(xl) { margin-left: 50px; }
      }

      i {
        width: 5px;
        height: 5px;
        background-color: $gray-900;
        @include border-radius(100%);

        @include media-breakpoint-up(sm) {
          width: 10px;
          height: 10px;
        }

        + i { margin-left: 5px; }
      }
    }
  }

  .account-name {
    color: $gray-900;
    font-weight: 400;
    margin-bottom: 0;
  }

  .chart-wrapper {
    position: absolute;
    top: 20px;
    bottom: 10px;
    left: -10px;
    right: -10px;
    opacity: .3;
    z-index: 4;
  }

  .flot-chart {
    width: 100%;
    height: 100%;
  }
}

.card-dashboard-ratio {
  @include media-breakpoint-up(xl) { height: 350px; }

  .card-body {
    display: flex;
    align-items: center;

    + .card-body { padding-top: 0px; }

    > div:first-child {
      width: 140px;
      display: none;
      align-items: center;
      justify-content: center;
      @include media-breakpoint-up(sm) { display: flex; }
    }

    > div:last-child {
      flex: 1;
      @include media-breakpoint-up(sm) { margin-left: 30px; }
    }

    h5 {
      font-size: 28px;
      font-weight: 600;
      font-family: 'Archivo', $font-family-base;
      color: $gray-900;
      letter-spacing: -1px;
      margin-bottom: 2px;
    }
  }

  .card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: $gray-400;
    font-size: 140px;

    .typcn {
      line-height: 1;
      &::before { width: auto; }
    }
  }
}

.card-dashboard-finance {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  @include media-breakpoint-up(lg) { min-height: 172px; }
  @include media-breakpoint-up(xl) { min-height: 165px; }

  .card-title {
    margin-bottom: 20px;
    @include media-breakpoint-up(lg) { margin-bottom: auto; }
  }

  h2 {
    line-height: 1;
    color: $gray-900;
    font-weight: 600;
    font-size: 30px;
    font-family: 'Archivo', $font-family-base;
    letter-spacing: -1px;
    margin-top: 10px;
    margin-bottom: 2px;

    span {
      letter-spacing: normal;
      color: $gray-500;
      font-weight: 400;
      margin-right: 5px;
    }
  }
}

.card-dashboard-table-six {
  .card-title {
    padding: 15px 20px;
    margin-bottom: 0;
    border-bottom: 1px solid $gray-300;
  }

  .table-responsive {
    width: calc(100vw - 42px);
    @include media-breakpoint-up(lg) { width: 100%; }
  }

  .table {
    margin-bottom: 0;

    thead {
      tr th { white-space: nowrap; }

      tr:first-child {
        background-color: $gray-200;

        th {
          padding: 10px 12px;
          line-height: 1;

          &:last-child { border-left: 1px solid $gray-400; }
        }
      }

      tr:last-child {
        th {
          width: 13%;
          padding: 10px 12px;
          line-height: 1;
          text-align: right;

          &:first-child { width: 22%; }
          &:nth-child(2) { border-left: 1px solid $gray-400; }
          &:nth-child(6) { border-left: 1px solid $gray-400; }
        }
      }
    }

    tbody {
      tr {
        td {
          text-align: right;
          white-space: nowrap;
        }

        td:first-child { text-align: left; }
        td:nth-child(2) { border-left: 1px solid $gray-400; }
        td:nth-child(6) { border-left: 1px solid $gray-400; }

        &:last-child td {
          font-weight: 500;
          color: $gray-900;
        }
      }
    }
  }
}