//SDS Statistics

.sds-statistics {
    display: flex;
    flex-wrap: wrap;
  
    .statistic {
      margin: 5px 15px;
      background-color: transparent;
      border: none;
  
      .value {
        color: #323A45;
        font-weight: font-weight('bold');
        font-size: 24px;
        letter-spacing: -0.6px;
        text-align: center;
  
        .circular {
          display: block;
          margin: 0 auto;
          height: 45px;
          width: 75px;
          padding: 5px 2px;
          border-radius: 40px;
          line-height: 32px;
          transition: all 0.3s ease-out;
        }
      }
  
      .label {
        color: #5B616B;
        font-size: 14px;
        text-align: center;
        text-transform: uppercase;
        margin-top: 8px;
        line-height: 16px;
      }
    }
  
    .statistic:hover {
      text-decoration: none;
    }
    // COLORS
    // Green
    .green.statistic > .value > .circular {
      background: #EAF2EB;
      border: 1px solid #2E8540;
    }
  
    .green.statistic:hover > .value > .circular {
      color: white;
      background: #2E8540;
    }
    // Blue
    .blue.statistic > .value > .circular {
      background: #E5F0F4;
      border: 1px solid #00A6D2;
    }
  
    .blue.statistic:hover > .value > .circular {
      color: white;
      background: #00A6D2;
    }
    // Red
    .red.statistic > .value > .circular {
      background: #F4E8E8;
      border: 1px solid #981B1E;
    }
  
    .red.statistic:hover > .value > .circular {
      color: white;
      background: #981B1E;
    }
    // Orange
    .orange.statistic > .value > .circular {
      background: #FBEBE6;
      border: 1px solid #D84009;
    }
  
    .orange.statistic:hover > .value > .circular {
      color: white;
      background: #D84009;
    }
    // Grey
    .grey.statistic > .value > .circular {
      background: #EEEFF0;
      border: 1px solid #AEB0B5;
    }
  
    .grey.statistic:hover > .value > .circular {
      color: white;
      background: #AEB0B5;
    }
    // Yellow
    .yellow.statistic > .value > .circular {
      background: #FFF1D2;
      border: 1px solid #FED06A;
    }
  
    .yellow.statistic:hover > .value > .circular {
      color: white;
      background: #FED06A;
    }
  }
  
  .sds-statistics--alt {
    background-color: #f5f5f0;
    width: min-content;
  
    .statistic-alt {
      background-color: transparent;
      border: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 90px;
      height: 70px;
  
      .value {
        color: #0071bc;
        font-size: 24px;
        font-weight: font-weight('bold');
        line-height: 42px;
        margin: auto;
        letter-spacing: -0.63px;
      }
  
      .label {
        color: #5b616b;
        font-size: 14px;
        font-weight: font-weight('normal');
        line-height: 14px;
        text-align: center;
        padding: 0 5px 5px;
      }
    }
  }