@import "../../helpers";

.sf-chart {
  &__title {
    color:  var(--c-white)
  }
  &__salespipechart {
    padding-top: var(--spacer-xs);
  }
}
.sf-doughnut {
  display: block;
  height: 165px;
  width: 165px;
  //position: relative;
  //left: -10px;
  //top: -10px;
  @include for-desktop-hd{
    //position: inherit;
    height: 216px;
    width: 216px;
  }
  border-radius: 50%;
  background: -moz-linear-gradient(142deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
  background: -webkit-linear-gradient(142deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
.doughnut {
  .chart__text {
    padding-bottom: var(--spacer-xs);
  }
  .chart__text + .chart__text {
    border-top: 1px solid var(--color-divider);
    padding-top: var(--spacer-xs);
  }
}
.doughnut__totals {
  height: 165px;
  width: 165px;
  @include for-desktop-hd{
    height: 216px;
    width: 216px;
  }
  position: absolute;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  .doughnut__title{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 60px;
    @include for-desktop-hd{
      width: 90px;
    }
    color: var(--color-text);
    span {
      color: var(--c-white);
    }
  }
}