.wdk-pie {
  --color-default: #c4c4c4;
  --color-active: #d0d32e;
  --border-width: 20px;
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 50%;
  background-color: var(--color-active);
  position: relative;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  z-index: 5;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.wdk-pie:after {
  content: '';
  display: block;
  top: var(--border-width);
  left: var(--border-width);
  height: calc(100% - var(--border-width) * 2);
  width: calc(100% - var(--border-width) * 2);
  line-height: 130px;
  background: #fff;
  border-radius: 50%;
  font-size: 1.4em;
  text-align: center;
  z-index: -1;
  position: absolute;
}

.wdk-pie.p0 {
  background-color: var(--color-default);
}

.wdk-pie.p1 {
  background-image: linear-gradient(93.6deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p2 {
  background-image: linear-gradient(97.2deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p3 {
  background-image: linear-gradient(100.8deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p4 {
  background-image: linear-gradient(104.4deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p5 {
  background-image: linear-gradient(108deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p6 {
  background-image: linear-gradient(0.31turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p7 {
  background-image: linear-gradient(0.32turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p8 {
  background-image: linear-gradient(0.33turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p9 {
  background-image: linear-gradient(0.34turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p10 {
  background-image: linear-gradient(126deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p11 {
  background-image: linear-gradient(0.36turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p12 {
  background-image: linear-gradient(0.37turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p13 {
  background-image: linear-gradient(0.38turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p14 {
  background-image: linear-gradient(0.39turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p15 {
  background-image: linear-gradient(144deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p16 {
  background-image: linear-gradient(0.41turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p17 {
  background-image: linear-gradient(0.42turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p18 {
  background-image: linear-gradient(154.8deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p19 {
  background-image: linear-gradient(0.15turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p20 {
  background-image: linear-gradient(162deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p21 {
  background-image: linear-gradient(165.6deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p22 {
  background-image: linear-gradient(0.47turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p23 {
  background-image: linear-gradient(172.8deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p24 {
  background-image: linear-gradient(0.49turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p25 {
  background-image: linear-gradient(180deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p26 {
  background-image: linear-gradient(0.51turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p27 {
  background-image: linear-gradient(0.52turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p28 {
  background-image: linear-gradient(0.53turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p29 {
  background-image: linear-gradient(0.54turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p30 {
  background-image: linear-gradient(198deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p31 {
  background-image: linear-gradient(201.6deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p32 {
  background-image: linear-gradient(0.57turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p33 {
  background-image: linear-gradient(208.8deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p34 {
  background-image: linear-gradient(0.59turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p35 {
  background-image: linear-gradient(216deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p36 {
  background-image: linear-gradient(0.61turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p37 {
  background-image: linear-gradient(0.62turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p38 {
  background-image: linear-gradient(0.63turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p39 {
  background-image: linear-gradient(0.64turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p40 {
  background-image: linear-gradient(234deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p41 {
  background-image: linear-gradient(0.66turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p42 {
  background-image: linear-gradient(241.2deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p43 {
  background-image: linear-gradient(0.68turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p44 {
  background-image: linear-gradient(248.4deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p45 {
  background-image: linear-gradient(252deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p46 {
  background-image: linear-gradient(0.71turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p47 {
  background-image: linear-gradient(0.72turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p48 {
  background-image: linear-gradient(0.73turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p49 {
  background-image: linear-gradient(0.74turn, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p50 {
  background-image: linear-gradient(270deg, transparent 50%, var(--color-default) 0), linear-gradient(90deg, var(--color-default) 50%, transparent 0);
}

.wdk-pie.p51 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-86.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p52 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-82.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p53 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-79.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p54 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-75.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p55 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-72deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p56 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-68.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p57 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-64.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p58 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-61.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p59 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-57.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p60 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-54deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p61 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-50.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p62 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-46.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p63 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-43.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p64 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-39.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p65 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-36deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p66 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-32.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p67 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-28.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p68 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-25.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p69 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-21.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p70 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-18deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p71 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-14.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p72 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-10.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p73 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-7.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p74 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(-3.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p75 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(0deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p76 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(3.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p77 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(7.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p78 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(10.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p79 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(14.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p80 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(18deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p81 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(21.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p82 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(25.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p83 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(28.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p84 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(32.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p85 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(36deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p86 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(39.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p87 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(43.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p88 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(46.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p89 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(50.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p90 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(54deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p91 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(57.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p92 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(61.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p93 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(64.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p94 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(68.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p95 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(72deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p96 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(75.6deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p97 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(79.2deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p98 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(82.8deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p99 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(86.4deg, transparent 50%, var(--color-default) 0);
}

.wdk-pie.p100 {
  background-image: linear-gradient(90deg, transparent 50%, var(--color-active) 0), linear-gradient(90deg, transparent 50%, var(--color-default) 0);
}