.ringchart {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-left: -15px;
  margin-right: -15px; }
  .ringchart-text {
    -webkit-transform: translateY(0.25em);
            transform: translateY(0.25em); }
  .ringchart-text-top {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    fill: #101820;
    font-size: .25rem;
    text-anchor: middle;
    -webkit-transform: translateY(-0.85em);
            transform: translateY(-0.85em); }
  .ringchart-text-bottom {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    fill: #53565a;
    font-size: 0.25em;
    text-anchor: middle;
    -webkit-transform: translateY(0.1em);
            transform: translateY(0.1em); }
  .ringchart-content, .ringchart-key {
    -ms-flex: 1;
        flex: 1;
    padding-left: 15px;
    padding-right: 15px;
    -ms-flex-item-align: center;
        align-self: center; }
  .ringchart-key {
    min-width: calc(8 / 12); }
  .ringchart-key-list {
    padding-left: 0;
    list-style: none; }
    .ringchart-key-list li {
      margin: 0 0 8px;
      padding: 0; }
  .ringchart-svg {
    height: auto; }
  .ringchart-circle {
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    border-radius: 50%; }
  .ringchart-svg-ring {
    stroke: #d9d9d6; }
  @media (min-width: 768px) {
    .ringchart {
      -ms-flex-direction: row;
          flex-direction: row; } }
  .ringchart .ringchart-svg-item-primary {
    stroke: #012169; }
  .ringchart .ringchart-circle-primary {
    background-color: #012169; }
  .ringchart .ringchart-svg-item-secondary {
    stroke: #007dba; }
  .ringchart .ringchart-circle-secondary {
    background-color: #007dba; }
  .ringchart .ringchart-svg-item-success {
    stroke: #348338; }
  .ringchart .ringchart-circle-success {
    background-color: #348338; }
  .ringchart .ringchart-svg-item-info {
    stroke: #63666a; }
  .ringchart .ringchart-circle-info {
    background-color: #63666a; }
  .ringchart .ringchart-svg-item-warning {
    stroke: #ffcd59; }
  .ringchart .ringchart-circle-warning {
    background-color: #ffcd59; }
  .ringchart .ringchart-svg-item-danger {
    stroke: #da291c; }
  .ringchart .ringchart-circle-danger {
    background-color: #da291c; }
  .ringchart .ringchart-svg-item-light {
    stroke: #fff; }
  .ringchart .ringchart-circle-light {
    background-color: #fff; }
  .ringchart .ringchart-svg-item-dark {
    stroke: #424447; }
  .ringchart .ringchart-circle-dark {
    background-color: #424447; }
  .ringchart-circle-unknown {
    background-color: #d9d9d6; }