/*
$primary-color: #6C6E70;
$secondary-color: #000000;
$mainpost_blau: #0A5790;
$link-color: $mainpost_blau;
$danger-color: red;
*/
/*
$primary-color: #6C6E70;
$secondary-color: #000000;
$mainpost_blau: #0A5790;
$link-color: $mainpost_blau;
$danger-color: red;
*/
.navbar-brand img {
  width: 170px;
}

.navbar {
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  .navbar-brand {
    display: none;
  }
  .navbar-brand.show-brand {
    display: block;
  }
}
/*
$primary-color: #6C6E70;
$secondary-color: #000000;
$mainpost_blau: #0A5790;
$link-color: $mainpost_blau;
$danger-color: red;
*/
/** ============================
 ** variable
 ** ============================ */
/** ============================
 ** function circular-progress
 ** ============================ */
/** ============================
 ** Mixins Circular Progress
 ** ============================ */
.wrapper_circular {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
@media screen and (min-width: 1100px) {
  .wrapper_circular {
    justify-content: space-around;
  }
}

.circular_group {
  margin: 10px;
  position: relative;
}
.circular_group .circular-progress {
  position: relative;
}
.circular_group .circular-progress[percent="0"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(90deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="0"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "0%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="0"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="1"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(93.6deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="1"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "1%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="1"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="2"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(97.2deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="2"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "2%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="2"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="3"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(100.8deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="3"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "3%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="3"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="4"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(104.4deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="4"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "4%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="4"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="5"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(108deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="5"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "5%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="5"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="6"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(111.6deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="6"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "6%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="6"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="7"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(115.2deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="7"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "7%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="7"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="8"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(118.8deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="8"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "8%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="8"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="9"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(122.4deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="9"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "9%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="9"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="10"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(126deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="10"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "10%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="10"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="11"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(129.6deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="11"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "11%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="11"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="12"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(133.2deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="12"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "12%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="12"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="13"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(136.8deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="13"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "13%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="13"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="14"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(140.4deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="14"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "14%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="14"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="15"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(144deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="15"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "15%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="15"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="16"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(147.6deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="16"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "16%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="16"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="17"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(151.2deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="17"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "17%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="17"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="18"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(154.8deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="18"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "18%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="18"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="19"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(158.4deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="19"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "19%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="19"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="20"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(162deg, #cd0000 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="20"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "20%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="20"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="21"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(165.6deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="21"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "21%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="21"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="22"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(169.2deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="22"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "22%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="22"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="23"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(172.8deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="23"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "23%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="23"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="24"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(176.4deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="24"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "24%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="24"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="25"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(180deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="25"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "25%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="25"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="26"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(183.6deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="26"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "26%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="26"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="27"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(187.2deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="27"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "27%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="27"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="28"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(190.8deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="28"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "28%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="28"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="29"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(194.4deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="29"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "29%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="29"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="30"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(198deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="30"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "30%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="30"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="31"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(201.6deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="31"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "31%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="31"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="32"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(205.2deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="32"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "32%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="32"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="33"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(208.8deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="33"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "33%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="33"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="34"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(212.4deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="34"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "34%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="34"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="35"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(216deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="35"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "35%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="35"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="36"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(219.6deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="36"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "36%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="36"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="37"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(223.2deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="37"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "37%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="37"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="38"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(226.8deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="38"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "38%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="38"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="39"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(230.4deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="39"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "39%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="39"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="40"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(234deg, #cdcd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="40"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "40%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="40"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="41"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(237.6deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="41"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "41%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="41"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="42"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(241.2deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="42"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "42%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="42"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="43"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(244.8deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="43"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "43%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="43"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="44"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(248.4deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="44"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "44%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="44"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="45"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(252deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="45"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "45%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="45"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="46"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(255.6deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="46"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "46%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="46"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="47"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(259.2deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="47"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "47%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="47"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="48"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(262.8deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="48"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "48%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="48"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="49"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(266.4deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="49"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "49%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="49"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="50"] {
  background: linear-gradient(-90deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="50"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "50%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="50"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="51"] {
  background: linear-gradient(-86.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="51"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "51%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="51"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="52"] {
  background: linear-gradient(-82.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="52"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "52%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="52"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="53"] {
  background: linear-gradient(-79.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="53"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "53%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="53"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="54"] {
  background: linear-gradient(-75.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="54"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "54%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="54"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="55"] {
  background: linear-gradient(-72deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="55"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "55%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="55"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="56"] {
  background: linear-gradient(-68.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="56"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "56%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="56"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="57"] {
  background: linear-gradient(-64.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="57"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "57%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="57"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="58"] {
  background: linear-gradient(-61.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="58"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "58%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="58"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="59"] {
  background: linear-gradient(-57.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="59"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "59%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="59"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="60"] {
  background: linear-gradient(-54deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="60"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "60%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="60"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="61"] {
  background: linear-gradient(-50.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="61"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "61%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="61"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="62"] {
  background: linear-gradient(-46.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="62"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "62%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="62"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="63"] {
  background: linear-gradient(-43.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="63"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "63%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="63"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="64"] {
  background: linear-gradient(-39.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="64"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "64%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="64"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="65"] {
  background: linear-gradient(-36deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="65"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "65%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="65"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="66"] {
  background: linear-gradient(-32.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="66"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "66%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="66"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="67"] {
  background: linear-gradient(-28.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="67"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "67%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="67"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="68"] {
  background: linear-gradient(-25.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="68"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "68%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="68"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="69"] {
  background: linear-gradient(-21.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="69"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "69%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="69"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="70"] {
  background: linear-gradient(-18deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="70"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "70%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="70"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="71"] {
  background: linear-gradient(-14.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="71"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "71%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="71"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="72"] {
  background: linear-gradient(-10.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="72"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "72%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="72"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="73"] {
  background: linear-gradient(-7.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="73"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "73%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="73"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="74"] {
  background: linear-gradient(-3.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="74"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "74%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="74"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="75"] {
  background: linear-gradient(0deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="75"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "75%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="75"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="76"] {
  background: linear-gradient(3.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="76"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "76%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="76"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="77"] {
  background: linear-gradient(7.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="77"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "77%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="77"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="78"] {
  background: linear-gradient(10.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="78"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "78%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="78"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="79"] {
  background: linear-gradient(14.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="79"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "79%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="79"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="80"] {
  background: linear-gradient(18deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="80"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "80%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="80"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="81"] {
  background: linear-gradient(21.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="81"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "81%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="81"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="82"] {
  background: linear-gradient(25.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="82"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "82%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="82"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="83"] {
  background: linear-gradient(28.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="83"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "83%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="83"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="84"] {
  background: linear-gradient(32.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="84"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "84%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="84"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="85"] {
  background: linear-gradient(36deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="85"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "85%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="85"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="86"] {
  background: linear-gradient(39.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="86"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "86%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="86"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="87"] {
  background: linear-gradient(43.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="87"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "87%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="87"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="88"] {
  background: linear-gradient(46.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="88"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "88%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="88"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="89"] {
  background: linear-gradient(50.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="89"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "89%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="89"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="90"] {
  background: linear-gradient(54deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="90"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "90%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="90"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="91"] {
  background: linear-gradient(57.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="91"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "91%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="91"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="92"] {
  background: linear-gradient(61.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="92"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "92%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="92"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="93"] {
  background: linear-gradient(64.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="93"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "93%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="93"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="94"] {
  background: linear-gradient(68.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="94"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "94%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="94"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="95"] {
  background: linear-gradient(72deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="95"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "95%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="95"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="96"] {
  background: linear-gradient(75.6deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="96"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "96%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="96"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="97"] {
  background: linear-gradient(79.2deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="97"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "97%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="97"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="98"] {
  background: linear-gradient(82.8deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="98"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "98%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="98"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="99"] {
  background: linear-gradient(86.4deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="99"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "99%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="99"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress[percent="100"] {
  background: linear-gradient(90deg, #00cd00 50%, transparent 50%, transparent),linear-gradient(270deg, #00cd00 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group .circular-progress[percent="100"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "100%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group .circular-progress[percent="100"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group .circular-progress .circular_inner {
  position: absolute;
  left: 13px;
  top: 13px;
  bottom: 13px;
  right: 13px;
  background-color: #0b51c5;
  border-radius: 50%;
  background-image: -webkit-linear-gradient(top, #d70005, #af0001);
  background-image: linear-gradient(top, #d70005, #af0001);
  box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.3), inset 0px 4px 1px 1px #ff0c00, inset 0px -3px 1px 1px rgba(151, 1, 0, 0.81);
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 40px;
  padding: 23px;
  padding-top: 40px;
  text-shadow: 3px 3px 2px #5f0000;
}
.circular_group .circular-text {
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
}

.circular_group[data-mode=pending] .circular-progress {
  position: relative;
  background-image: -webkit-linear-gradient(top, #a6a6a6, #727272);
  background-image: linear-gradient(top, #a6a6a6, #727272);
  box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.3), inset 0px 4px 1px 1px #a6a6a6, inset 0px -3px 1px 1px rgba(114, 114, 114, 0.81);
  text-shadow: 3px 3px 2px #727272;
}
.circular_group[data-mode=pending] .circular-progress[percent="0"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(90deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="0"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "0%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="0"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="1"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(93.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="1"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "1%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="1"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="2"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(97.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="2"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "2%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="2"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="3"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(100.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="3"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "3%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="3"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="4"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(104.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="4"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "4%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="4"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="5"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(108deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="5"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "5%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="5"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="6"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(111.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="6"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "6%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="6"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="7"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(115.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="7"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "7%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="7"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="8"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(118.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="8"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "8%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="8"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="9"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(122.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="9"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "9%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="9"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="10"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(126deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="10"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "10%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="10"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="11"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(129.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="11"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "11%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="11"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="12"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(133.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="12"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "12%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="12"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="13"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(136.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="13"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "13%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="13"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="14"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(140.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="14"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "14%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="14"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="15"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(144deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="15"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "15%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="15"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="16"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(147.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="16"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "16%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="16"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="17"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(151.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="17"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "17%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="17"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="18"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(154.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="18"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "18%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="18"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="19"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(158.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="19"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "19%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="19"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="20"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(162deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="20"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "20%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="20"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="21"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(165.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="21"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "21%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="21"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="22"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(169.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="22"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "22%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="22"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="23"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(172.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="23"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "23%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="23"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="24"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(176.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="24"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "24%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="24"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="25"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(180deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="25"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "25%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="25"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="26"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(183.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="26"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "26%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="26"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="27"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(187.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="27"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "27%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="27"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="28"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(190.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="28"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "28%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="28"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="29"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(194.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="29"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "29%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="29"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="30"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(198deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="30"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "30%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="30"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="31"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(201.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="31"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "31%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="31"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="32"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(205.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="32"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "32%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="32"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="33"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(208.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="33"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "33%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="33"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="34"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(212.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="34"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "34%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="34"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="35"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(216deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="35"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "35%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="35"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="36"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(219.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="36"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "36%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="36"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="37"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(223.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="37"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "37%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="37"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="38"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(226.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="38"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "38%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="38"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="39"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(230.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="39"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "39%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="39"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="40"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(234deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="40"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "40%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="40"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="41"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(237.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="41"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "41%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="41"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="42"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(241.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="42"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "42%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="42"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="43"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(244.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="43"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "43%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="43"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="44"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(248.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="44"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "44%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="44"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="45"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(252deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="45"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "45%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="45"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="46"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(255.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="46"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "46%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="46"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="47"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(259.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="47"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "47%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="47"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="48"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(262.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="48"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "48%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="48"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="49"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(266.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="49"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "49%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="49"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="50"] {
  background: linear-gradient(-90deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="50"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "50%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="50"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="51"] {
  background: linear-gradient(-86.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="51"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "51%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="51"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="52"] {
  background: linear-gradient(-82.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="52"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "52%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="52"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="53"] {
  background: linear-gradient(-79.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="53"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "53%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="53"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="54"] {
  background: linear-gradient(-75.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="54"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "54%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="54"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="55"] {
  background: linear-gradient(-72deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="55"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "55%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="55"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="56"] {
  background: linear-gradient(-68.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="56"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "56%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="56"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="57"] {
  background: linear-gradient(-64.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="57"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "57%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="57"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="58"] {
  background: linear-gradient(-61.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="58"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "58%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="58"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="59"] {
  background: linear-gradient(-57.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="59"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "59%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="59"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="60"] {
  background: linear-gradient(-54deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="60"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "60%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="60"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="61"] {
  background: linear-gradient(-50.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="61"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "61%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="61"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="62"] {
  background: linear-gradient(-46.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="62"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "62%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="62"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="63"] {
  background: linear-gradient(-43.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="63"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "63%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="63"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="64"] {
  background: linear-gradient(-39.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="64"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "64%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="64"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="65"] {
  background: linear-gradient(-36deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="65"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "65%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="65"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="66"] {
  background: linear-gradient(-32.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="66"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "66%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="66"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="67"] {
  background: linear-gradient(-28.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="67"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "67%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="67"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="68"] {
  background: linear-gradient(-25.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="68"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "68%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="68"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="69"] {
  background: linear-gradient(-21.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="69"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "69%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="69"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="70"] {
  background: linear-gradient(-18deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="70"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "70%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="70"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="71"] {
  background: linear-gradient(-14.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="71"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "71%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="71"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="72"] {
  background: linear-gradient(-10.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="72"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "72%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="72"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="73"] {
  background: linear-gradient(-7.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="73"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "73%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="73"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="74"] {
  background: linear-gradient(-3.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="74"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "74%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="74"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="75"] {
  background: linear-gradient(0deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="75"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "75%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="75"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="76"] {
  background: linear-gradient(3.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="76"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "76%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="76"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="77"] {
  background: linear-gradient(7.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="77"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "77%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="77"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="78"] {
  background: linear-gradient(10.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="78"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "78%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="78"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="79"] {
  background: linear-gradient(14.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="79"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "79%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="79"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="80"] {
  background: linear-gradient(18deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="80"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "80%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="80"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="81"] {
  background: linear-gradient(21.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="81"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "81%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="81"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="82"] {
  background: linear-gradient(25.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="82"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "82%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="82"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="83"] {
  background: linear-gradient(28.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="83"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "83%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="83"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="84"] {
  background: linear-gradient(32.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="84"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "84%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="84"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="85"] {
  background: linear-gradient(36deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="85"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "85%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="85"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="86"] {
  background: linear-gradient(39.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="86"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "86%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="86"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="87"] {
  background: linear-gradient(43.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="87"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "87%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="87"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="88"] {
  background: linear-gradient(46.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="88"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "88%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="88"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="89"] {
  background: linear-gradient(50.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="89"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "89%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="89"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="90"] {
  background: linear-gradient(54deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="90"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "90%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="90"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="91"] {
  background: linear-gradient(57.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="91"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "91%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="91"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="92"] {
  background: linear-gradient(61.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="92"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "92%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="92"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="93"] {
  background: linear-gradient(64.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="93"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "93%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="93"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="94"] {
  background: linear-gradient(68.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="94"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "94%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="94"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="95"] {
  background: linear-gradient(72deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="95"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "95%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="95"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="96"] {
  background: linear-gradient(75.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="96"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "96%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="96"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="97"] {
  background: linear-gradient(79.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="97"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "97%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="97"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="98"] {
  background: linear-gradient(82.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="98"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "98%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="98"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="99"] {
  background: linear-gradient(86.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="99"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "99%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="99"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pending] .circular-progress[percent="100"] {
  background: linear-gradient(90deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pending] .circular-progress[percent="100"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "100%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pending] .circular-progress[percent="100"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}

.circular_group[data-mode=off] .circular-progress {
  position: relative;
}
.circular_group[data-mode=off] .circular-progress[percent="0"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(90deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="0"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "0%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="0"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="1"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(93.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="1"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "1%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="1"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="2"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(97.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="2"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "2%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="2"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="3"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(100.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="3"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "3%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="3"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="4"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(104.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="4"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "4%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="4"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="5"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(108deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="5"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "5%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="5"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="6"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(111.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="6"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "6%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="6"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="7"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(115.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="7"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "7%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="7"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="8"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(118.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="8"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "8%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="8"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="9"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(122.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="9"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "9%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="9"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="10"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(126deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="10"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "10%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="10"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="11"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(129.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="11"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "11%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="11"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="12"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(133.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="12"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "12%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="12"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="13"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(136.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="13"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "13%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="13"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="14"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(140.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="14"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "14%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="14"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="15"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(144deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="15"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "15%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="15"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="16"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(147.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="16"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "16%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="16"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="17"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(151.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="17"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "17%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="17"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="18"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(154.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="18"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "18%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="18"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="19"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(158.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="19"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "19%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="19"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="20"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(162deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="20"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "20%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="20"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="21"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(165.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="21"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "21%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="21"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="22"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(169.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="22"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "22%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="22"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="23"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(172.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="23"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "23%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="23"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="24"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(176.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="24"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "24%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="24"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="25"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(180deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="25"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "25%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="25"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="26"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(183.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="26"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "26%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="26"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="27"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(187.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="27"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "27%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="27"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="28"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(190.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="28"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "28%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="28"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="29"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(194.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="29"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "29%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="29"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="30"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(198deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="30"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "30%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="30"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="31"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(201.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="31"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "31%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="31"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="32"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(205.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="32"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "32%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="32"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="33"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(208.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="33"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "33%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="33"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="34"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(212.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="34"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "34%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="34"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="35"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(216deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="35"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "35%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="35"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="36"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(219.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="36"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "36%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="36"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="37"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(223.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="37"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "37%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="37"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="38"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(226.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="38"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "38%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="38"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="39"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(230.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="39"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "39%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="39"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="40"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(234deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="40"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "40%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="40"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="41"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(237.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="41"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "41%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="41"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="42"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(241.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="42"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "42%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="42"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="43"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(244.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="43"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "43%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="43"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="44"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(248.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="44"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "44%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="44"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="45"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(252deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="45"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "45%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="45"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="46"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(255.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="46"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "46%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="46"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="47"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(259.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="47"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "47%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="47"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="48"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(262.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="48"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "48%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="48"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="49"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(266.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="49"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "49%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="49"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="50"] {
  background: linear-gradient(-90deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="50"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "50%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="50"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="51"] {
  background: linear-gradient(-86.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="51"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "51%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="51"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="52"] {
  background: linear-gradient(-82.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="52"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "52%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="52"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="53"] {
  background: linear-gradient(-79.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="53"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "53%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="53"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="54"] {
  background: linear-gradient(-75.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="54"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "54%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="54"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="55"] {
  background: linear-gradient(-72deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="55"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "55%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="55"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="56"] {
  background: linear-gradient(-68.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="56"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "56%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="56"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="57"] {
  background: linear-gradient(-64.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="57"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "57%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="57"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="58"] {
  background: linear-gradient(-61.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="58"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "58%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="58"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="59"] {
  background: linear-gradient(-57.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="59"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "59%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="59"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="60"] {
  background: linear-gradient(-54deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="60"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "60%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="60"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="61"] {
  background: linear-gradient(-50.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="61"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "61%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="61"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="62"] {
  background: linear-gradient(-46.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="62"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "62%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="62"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="63"] {
  background: linear-gradient(-43.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="63"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "63%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="63"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="64"] {
  background: linear-gradient(-39.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="64"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "64%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="64"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="65"] {
  background: linear-gradient(-36deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="65"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "65%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="65"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="66"] {
  background: linear-gradient(-32.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="66"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "66%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="66"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="67"] {
  background: linear-gradient(-28.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="67"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "67%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="67"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="68"] {
  background: linear-gradient(-25.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="68"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "68%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="68"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="69"] {
  background: linear-gradient(-21.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="69"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "69%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="69"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="70"] {
  background: linear-gradient(-18deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="70"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "70%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="70"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="71"] {
  background: linear-gradient(-14.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="71"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "71%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="71"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="72"] {
  background: linear-gradient(-10.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="72"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "72%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="72"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="73"] {
  background: linear-gradient(-7.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="73"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "73%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="73"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="74"] {
  background: linear-gradient(-3.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="74"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "74%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="74"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="75"] {
  background: linear-gradient(0deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="75"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "75%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="75"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="76"] {
  background: linear-gradient(3.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="76"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "76%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="76"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="77"] {
  background: linear-gradient(7.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="77"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "77%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="77"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="78"] {
  background: linear-gradient(10.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="78"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "78%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="78"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="79"] {
  background: linear-gradient(14.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="79"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "79%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="79"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="80"] {
  background: linear-gradient(18deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="80"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "80%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="80"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="81"] {
  background: linear-gradient(21.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="81"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "81%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="81"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="82"] {
  background: linear-gradient(25.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="82"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "82%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="82"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="83"] {
  background: linear-gradient(28.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="83"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "83%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="83"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="84"] {
  background: linear-gradient(32.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="84"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "84%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="84"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="85"] {
  background: linear-gradient(36deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="85"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "85%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="85"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="86"] {
  background: linear-gradient(39.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="86"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "86%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="86"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="87"] {
  background: linear-gradient(43.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="87"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "87%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="87"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="88"] {
  background: linear-gradient(46.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="88"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "88%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="88"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="89"] {
  background: linear-gradient(50.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="89"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "89%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="89"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="90"] {
  background: linear-gradient(54deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="90"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "90%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="90"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="91"] {
  background: linear-gradient(57.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="91"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "91%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="91"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="92"] {
  background: linear-gradient(61.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="92"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "92%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="92"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="93"] {
  background: linear-gradient(64.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="93"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "93%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="93"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="94"] {
  background: linear-gradient(68.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="94"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "94%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="94"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="95"] {
  background: linear-gradient(72deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="95"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "95%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="95"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="96"] {
  background: linear-gradient(75.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="96"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "96%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="96"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="97"] {
  background: linear-gradient(79.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="97"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "97%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="97"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="98"] {
  background: linear-gradient(82.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="98"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "98%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="98"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="99"] {
  background: linear-gradient(86.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="99"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "99%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="99"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress[percent="100"] {
  background: linear-gradient(90deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=off] .circular-progress[percent="100"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "100%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=off] .circular-progress[percent="100"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=off] .circular-progress .circular_inner {
  font-size: 29px;
  line-height: 33px;
  padding-top: 51px;
  background-image: -webkit-linear-gradient(top, #a6a6a6, #727272);
  background-image: linear-gradient(top, #a6a6a6, #727272);
  box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.3), inset 0px 4px 1px 1px #a6a6a6, inset 0px -3px 1px 1px rgba(114, 114, 114, 0.81);
  text-shadow: 3px 3px 2px #727272;
}

.circular_group[data-mode=pre] .circular-progress {
  position: relative;
}
.circular_group[data-mode=pre] .circular-progress[percent="0"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(90deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="0"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "0%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="0"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="1"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(93.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="1"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "1%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="1"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="2"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(97.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="2"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "2%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="2"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="3"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(100.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="3"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "3%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="3"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="4"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(104.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="4"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "4%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="4"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="5"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(108deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="5"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "5%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="5"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="6"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(111.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="6"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "6%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="6"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="7"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(115.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="7"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "7%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="7"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="8"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(118.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="8"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "8%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="8"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="9"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(122.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="9"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "9%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="9"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="10"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(126deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="10"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "10%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="10"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="11"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(129.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="11"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "11%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="11"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="12"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(133.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="12"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "12%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="12"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="13"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(136.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="13"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "13%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="13"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="14"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(140.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="14"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "14%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="14"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="15"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(144deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="15"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "15%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="15"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="16"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(147.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="16"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "16%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="16"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="17"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(151.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="17"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "17%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="17"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="18"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(154.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="18"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "18%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="18"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="19"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(158.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="19"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "19%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="19"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="20"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(162deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="20"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "20%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="20"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="21"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(165.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="21"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "21%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="21"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="22"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(169.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="22"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "22%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="22"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="23"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(172.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="23"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "23%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="23"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="24"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(176.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="24"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "24%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="24"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="25"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(180deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="25"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "25%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="25"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="26"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(183.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="26"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "26%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="26"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="27"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(187.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="27"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "27%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="27"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="28"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(190.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="28"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "28%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="28"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="29"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(194.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="29"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "29%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="29"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="30"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(198deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="30"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "30%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="30"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="31"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(201.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="31"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "31%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="31"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="32"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(205.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="32"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "32%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="32"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="33"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(208.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="33"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "33%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="33"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="34"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(212.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="34"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "34%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="34"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="35"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(216deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="35"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "35%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="35"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="36"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(219.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="36"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "36%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="36"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="37"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(223.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="37"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "37%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="37"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="38"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(226.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="38"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "38%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="38"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="39"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(230.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="39"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "39%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="39"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="40"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(234deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="40"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "40%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="40"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="41"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(237.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="41"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "41%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="41"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="42"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(241.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="42"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "42%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="42"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="43"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(244.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="43"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "43%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="43"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="44"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(248.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="44"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "44%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="44"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="45"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(252deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="45"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "45%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="45"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="46"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(255.6deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="46"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "46%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="46"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="47"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(259.2deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="47"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "47%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="47"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="48"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(262.8deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="48"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "48%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="48"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="49"] {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent),linear-gradient(266.4deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="49"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "49%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="49"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="50"] {
  background: linear-gradient(-90deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="50"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "50%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="50"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="51"] {
  background: linear-gradient(-86.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="51"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "51%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="51"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="52"] {
  background: linear-gradient(-82.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="52"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "52%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="52"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="53"] {
  background: linear-gradient(-79.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="53"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "53%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="53"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="54"] {
  background: linear-gradient(-75.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="54"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "54%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="54"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="55"] {
  background: linear-gradient(-72deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="55"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "55%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="55"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="56"] {
  background: linear-gradient(-68.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="56"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "56%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="56"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="57"] {
  background: linear-gradient(-64.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="57"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "57%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="57"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="58"] {
  background: linear-gradient(-61.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="58"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "58%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="58"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="59"] {
  background: linear-gradient(-57.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="59"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "59%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="59"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="60"] {
  background: linear-gradient(-54deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="60"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "60%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="60"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="61"] {
  background: linear-gradient(-50.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="61"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "61%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="61"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="62"] {
  background: linear-gradient(-46.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="62"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "62%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="62"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="63"] {
  background: linear-gradient(-43.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="63"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "63%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="63"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="64"] {
  background: linear-gradient(-39.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="64"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "64%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="64"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="65"] {
  background: linear-gradient(-36deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="65"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "65%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="65"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="66"] {
  background: linear-gradient(-32.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="66"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "66%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="66"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="67"] {
  background: linear-gradient(-28.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="67"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "67%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="67"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="68"] {
  background: linear-gradient(-25.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="68"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "68%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="68"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="69"] {
  background: linear-gradient(-21.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="69"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "69%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="69"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="70"] {
  background: linear-gradient(-18deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="70"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "70%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="70"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="71"] {
  background: linear-gradient(-14.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="71"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "71%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="71"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="72"] {
  background: linear-gradient(-10.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="72"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "72%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="72"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="73"] {
  background: linear-gradient(-7.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="73"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "73%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="73"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="74"] {
  background: linear-gradient(-3.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="74"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "74%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="74"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="75"] {
  background: linear-gradient(0deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="75"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "75%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="75"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="76"] {
  background: linear-gradient(3.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="76"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "76%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="76"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="77"] {
  background: linear-gradient(7.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="77"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "77%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="77"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="78"] {
  background: linear-gradient(10.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="78"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "78%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="78"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="79"] {
  background: linear-gradient(14.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="79"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "79%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="79"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="80"] {
  background: linear-gradient(18deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="80"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "80%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="80"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="81"] {
  background: linear-gradient(21.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="81"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "81%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="81"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="82"] {
  background: linear-gradient(25.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="82"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "82%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="82"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="83"] {
  background: linear-gradient(28.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="83"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "83%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="83"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="84"] {
  background: linear-gradient(32.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="84"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "84%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="84"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="85"] {
  background: linear-gradient(36deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="85"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "85%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="85"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="86"] {
  background: linear-gradient(39.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="86"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "86%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="86"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="87"] {
  background: linear-gradient(43.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="87"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "87%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="87"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="88"] {
  background: linear-gradient(46.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="88"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "88%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="88"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="89"] {
  background: linear-gradient(50.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="89"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "89%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="89"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="90"] {
  background: linear-gradient(54deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="90"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "90%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="90"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="91"] {
  background: linear-gradient(57.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="91"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "91%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="91"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="92"] {
  background: linear-gradient(61.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="92"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "92%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="92"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="93"] {
  background: linear-gradient(64.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="93"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "93%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="93"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="94"] {
  background: linear-gradient(68.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="94"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "94%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="94"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="95"] {
  background: linear-gradient(72deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="95"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "95%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="95"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="96"] {
  background: linear-gradient(75.6deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="96"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "96%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="96"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="97"] {
  background: linear-gradient(79.2deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="97"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "97%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="97"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="98"] {
  background: linear-gradient(82.8deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="98"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "98%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="98"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="99"] {
  background: linear-gradient(86.4deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="99"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "99%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="99"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress[percent="100"] {
  background: linear-gradient(90deg, #6c6c6c 50%, transparent 50%, transparent),linear-gradient(270deg, #6c6c6c 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all 0.1s linear;
}
.circular_group[data-mode=pre] .circular-progress[percent="100"]::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "100%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  transform: scale(0.87);
  width: 100%;
}
.circular_group[data-mode=pre] .circular-progress[percent="100"]:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.circular_group[data-mode=pre] .circular-progress .circular_inner {
  font-size: 21px;
  line-height: 28px;
  padding-top: 60px;
  background-image: -webkit-linear-gradient(top, #a6a6a6, #727272);
  background-image: linear-gradient(top, #a6a6a6, #727272);
  box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.3), inset 0px 4px 1px 1px #a6a6a6, inset 0px -3px 1px 1px rgba(114, 114, 114, 0.81);
  text-shadow: 3px 3px 2px #727272;
}

/* kleiner Ring */
/*
$primary-color: #6C6E70;
$secondary-color: #000000;
$mainpost_blau: #0A5790;
$link-color: $mainpost_blau;
$danger-color: red;
*/
.select-wrapper label {
  position: absolute;
  top: -1.88rem;
  font-size: 0.8rem;
}

.wrapper_checkbox .error-block {
  padding-left: 55px;
  display: block;
  margin-bottom: 15px;
}

.md-form .validate.error-block {
  margin-bottom: 1rem;
}

form .fa-asterisk {
  position: relative;
  top: -7px;
  font-size: 0.6em;
}
form .error-block {
  color: #cc071e;
  margin-bottom: 1rem;
}

.pw_check {
  list-style: none;
  margin: 0;
}
.pw_check li {
  position: relative;
  color: red;
}
.pw_check li:before {
  font-family: "Font Awesome 5 Free"; /* updated font-family */
  font-weight: 900; /* regular style/weight */
  content: "\f00d";
  position: absolute;
  left: -20px;
  color: red;
}
.pw_check li.valid {
  color: green;
}
.pw_check li.valid:before {
  content: "\f00c";
  color: green;
}

/*
$primary-color: #6C6E70;
$secondary-color: #000000;
$mainpost_blau: #0A5790;
$link-color: $mainpost_blau;
$danger-color: red;
*/
/* go on with normal style definitions */
body {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
}

.h1, h1 {
  font-size: 26px;
}

.h2, h2 {
  font-size: 23px;
}

.h3, h3 {
  font-size: 21px;
}

.h4, h4 {
  font-size: 19px;
}

.h5, h5 {
  font-size: 16px;
}

.h6, h6 {
  font-size: 14px;
}

.card .card-body h1, .card .card-body h2, .card .card-body h3, .card .card-body h4, .card .card-body h5, .card .card-body h6 {
  font-weight: 700;
}

b, strong {
  font-weight: 700;
}

main {
  min-height: 500px;
}

a {
  color: #cc071e;
}

a:hover, a:focus {
  color: #9b0517;
}

a.link-primary {
  color: #cc071e;
}

a.link-primary:hover, a.link-primary:focus {
  color: #9b0517;
}

a.link-secondary {
  color: #333333;
}

a.link-secondary:hover, a.link-secondary:focus {
  color: #1a1a1a;
}

a.link-blue {
  color: #064B71;
}

a.link-blue:hover, a.link-blue:focus {
  color: #032b41;
}

.text-blau {
  color: #064B71;
}

.bg-grau {
  background-color: #eeeeee;
}

@media screen and (min-width: 576px) {
  .bg-sm-grau {
    background-color: #eeeeee;
  }
  .bg-sm-white {
    background-color: #ffffff;
  }
}
@media screen and (min-width: 768px) {
  .bg-md-grau {
    background-color: #eeeeee;
  }
  .bg-md-white {
    background-color: #ffffff;
  }
}
@media screen and (min-width: 992px) {
  .bg-lg-grau {
    background-color: #eeeeee;
  }
  .bg-lg-white {
    background-color: #ffffff;
  }
}
@media screen and (min-width: 1200px) {
  .bg-xl-grau {
    background-color: #eeeeee;
  }
  .bg-xl-white {
    background-color: #ffffff;
  }
}
.btn {
  font-weight: 700;
}

#shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  content: "";
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: none;
}

#scroll_to_top {
  position: fixed;
  bottom: 5px;
  right: 5px;
  height: 40px;
  width: 50px;
  z-index: 4000;
  background-color: rgba(255, 255, 255, 0.8);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: none;
  text-align: center;
  opacity: 1;
}
#scroll_to_top a span {
  padding: 10px 7px;
  position: relative;
  top: 7px;
  left: 0;
}

#scroll_to_top:hover {
  opacity: 1;
}

.img-container {
  background-color: #FFFFFF !important;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative; /* If you want text inside of it */
}

.img-container.ar3_2 {
  padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

.img-container.ar4_3 {
  padding-top: 75%; /* 4:3 Aspect Ratio */
}

.img-container.ar16_9 {
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.img-container.ar8_5 {
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
}

.wrapper_image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.wrapper_image_contain {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.modal .modal-full {
  position: fixed;
  width: 100%;
  height: 100%;
  max-width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
.modal .modal-full .modal-content {
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  margin: 0;
}

footer.page-footer {
  color: #333333;
}
footer.page-footer a {
  color: #333333;
}

footer {
  background-color: #ffffff;
  color: #333333;
  padding-bottom: 15px;
}
footer .logofooter {
  margin: 30px auto;
}
footer .footernav {
  margin: 15px auto;
  text-transform: uppercase;
}
footer .copyright {
  margin-top: 15px;
  font-weight: 300;
}
footer a {
  color: #333333;
  font-weight: 400;
}
footer .sozial {
  padding: 30px 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: rgba(255, 255, 255, 0.2);
}
footer .sozial a {
  margin: 15px;
  font-size: 26px;
}

.slide_wrapper {
  position: relative;
  overflow: hidden;
}

#slide {
  margin-bottom: 0;
}
#slide .slick-list {
  /*z-index: -1;*/
}
#slide .slick-prev, #slide .slick-next {
  z-index: 1;
  height: 40px;
  width: 40px;
}
#slide .slick-prev {
  left: 10px;
}
#slide .slick-next {
  right: 10px;
}
#slide .slick-prev:before {
  background-image: url("/img/public/prev_mobile.svg");
  background-size: 40px 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  content: "";
}
#slide .slick-next:before {
  background-image: url("/img/public/next_mobile.svg");
  background-size: 40px 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  content: "";
}
#slide .slick-dots {
  bottom: 10px;
  height: 30px;
}
#slide .slick-dots li {
  height: 30px;
  margin: 0 2px;
}
#slide .slick-dots li button {
  font-size: 40px;
  line-height: 30px;
  height: 30px;
  width: 14px;
  padding: 0;
}
#slide .slick-dots li button:before {
  width: 14px;
  height: 30px;
  font-size: 40px;
  line-height: 1;
  opacity: 1;
  color: rgba(255, 255, 255, 0.8);
}
#slide .slick-dots li.slick-active button:before {
  color: #cc071e;
}

.wrapper_zuschlaege {
  background-color: #ECECEC;
  position: relative;
  padding-left: 40px;
  padding-right: 40px;
  height: 48px;
}
.wrapper_zuschlaege .left {
  position: absolute;
  width: 40px;
  height: 48px;
  left: 0;
  top: 0;
  background-color: #8c8c8c;
  line-height: 48px;
  padding-left: 10px;
  font-size: 20px;
}
.wrapper_zuschlaege .right {
  position: absolute;
  width: 40px;
  height: 48px;
  right: 0;
  top: 0;
  background-color: #8c8c8c;
  line-height: 48px;
  padding-left: 10px;
  font-size: 20px;
}

#zuschlaege_liste .first-item {
  padding: 0 !important;
  width: 1px;
  margin: 0;
}
#zuschlaege_liste .item {
  padding: 10px 20px;
}

.progress-bar {
  background-color: #cc071e;
}

#teaser_slide {
  position: relative;
}
#teaser_slide .item-content {
  padding: 15px;
  background-color: rgb(0, 58, 90);
  color: #ffffff;
  height: auto;
}
@media screen and (min-width: 768px) {
  #teaser_slide .item-content {
    position: absolute;
    width: 390px;
    background-color: rgba(0, 58, 90, 0.7);
    right: 15px;
    bottom: 15px;
  }
  #teaser_slide .item-content form {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  #teaser_slide .item-content {
    bottom: 30px;
    width: 460px;
  }
}
.formwrapper {
  background-color: #ffffff;
  position: relative;
}
.formwrapper .iconwrapper {
  padding: 9px 15px;
}
.formwrapper .form-control {
  border-radius: 0;
  border: none;
  margin-top: 6px;
}
.formwrapper button {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.countdown-master {
  position: absolute;
  width: 170px;
  height: 60px;
  top: 0;
  left: 30px;
  color: #064B71;
  content: "";
  z-index: 1;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 0;
}
.countdown-master .label {
  font-weight: 300;
}
.countdown-master .numbers {
  line-height: 1.1;
}
@media screen and (min-width: 768px) {
  .countdown-master {
    left: auto;
    right: 30px;
    width: 200px;
    height: 70px;
    font-size: 14px;
  }
}

ul.poi.list-group li.list-group-item {
  border: 0;
  border-bottom: 3px solid #ffffff;
  border-radius: 0;
}

body.bieten .slide_wrapper .merken {
  position: absolute;
  top: 15px;
  right: 15px;
  /*color: $primary-color;
  background-color: rgba(255,255,255,0.7);*/
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  /*width: 30px;
  height: 30px;
  line-height: 34px;*/
  width: 40px;
  height: 40px;
  line-height: 44px;
  font-size: 26px;
  cursor: pointer;
  /*z-index: 2;*/
  z-index: 1;
}
body.bieten .slide_wrapper .merken.active {
  color: #cc071e;
}

.text-startseite {
  padding: 30px;
  color: #333333;
  background-color: #EEEEEE;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
}

.quickfilter {
  margin-top: 30px;
}
.quickfilter .quickbtn {
  background-color: #EEEEEE;
  color: #333333;
  padding: 10px 15px;
  border: 1px solid #333333;
}
.quickfilter .quickbtn span {
  font-weight: 700;
  font-size: 20px;
}

body.open-mobile-menu-left #mobile-nav-wrapper-left {
  transform: translate(0, 0);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.8);
}

body.open-mobile-menu-right #mobile-nav-wrapper-right {
  transform: translate(0, 0);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.8);
}

#mobile-nav-background {
  position: fixed;
  top: 0;
  z-index: 233;
  width: 100%;
  height: 100%;
  background: #A8A397;
  /* background: rgba(0,0,0,.6); */
  background: rgba(0, 0, 0, 0.6);
  display: none;
}

body.open-mobile-menu-left #mobile-nav-background, body.open-mobile-menu-right #mobile-nav-background {
  display: block;
}

.mobile-nav-wrapper {
  position: fixed;
  top: 0;
  width: 240px;
  height: 100%;
  background-color: #EEEEEE;
  /* 333 */
  z-index: 487;
  display: block;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: translate3d(-240px, 0, 0);
  transform: translate(-240px, 0);
}
.mobile-nav-wrapper .mobile-nav {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 55px;
}
.mobile-nav-wrapper .mobile-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.mobile-nav-wrapper .mobile-nav ul li {
  position: relative;
  border-top: 1px solid #262626;
  list-style: none;
}
.mobile-nav-wrapper .mobile-nav ul li a {
  display: block;
  padding: 10px 15px;
  color: #333333;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 300;
}
.mobile-nav-wrapper .mobile-nav ul li:first-child {
  border-top: none;
}

#mobile-nav-wrapper-right {
  -webkit-transform: translate3d(240px, 0, 0);
  transform: translate(240px, 0);
  right: 0;
}

.card-anbieter .card-title {
  min-height: 68px;
}

/*
$primary-color: #6C6E70;
$secondary-color: #000000;
$mainpost_blau: #0A5790;
$link-color: $mainpost_blau;
$danger-color: red;
*/
.lot_panel .lotnumber {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 15px;
  background-color: rgba(58, 58, 58, 0.9);
  z-index: 1;
  color: #ffffff !important;
}
.lot_panel .card {
  transition: all 0.1s ease-in-out;
  position: relative;
  overflow: hidden;
}
.lot_panel .card .banner {
  position: absolute;
  transform: rotate(-25deg);
  z-index: 3;
  background-color: #BA0000;
  width: 390px;
  left: -28px;
  top: -25px;
  height: 40px;
  color: #ffffff;
  text-align: left;
}
.lot_panel .card .banner .wartezeit {
  font-size: 20px;
  padding-left: 50px;
  line-height: 40px;
}
.lot_panel .card .banner .comming {
  font-size: 20px;
  padding-left: 50px;
  line-height: 40px;
}
.lot_panel .card .banner .closed {
  font-size: 20px;
  padding-left: 50px;
  line-height: 40px;
}
@media screen and (min-width: 768px) {
  .lot_panel .card .card-body .card-firma {
    height: 60px;
  }
}
@media screen and (min-width: 992px) {
  .lot_panel .card .card-body .card-firma {
    height: 80px;
  }
}
@media screen and (min-width: 768px) {
  .lot_panel .card .card-body .card-title {
    height: 90px;
  }
}
@media screen and (min-width: 992px) {
  .lot_panel .card .card-body .card-title {
    height: 110px;
  }
}
.lot_panel .card .card-body .card-text {
  font-size: 1rem;
}
.lot_panel .img-container {
  height: 300px;
}
.lot_panel .anzahl_gruppe {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8);
  color: #cc071e;
  padding: 7px 15px;
  z-index: 1;
}

a.lot_panel:hover .card {
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.8);
  transform: scale(1.04);
}

.lot_panel_12 a {
  color: #000000;
}
.lot_panel_12 .lot-widget-footer {
  border-top: 1px solid #eeeeee;
  padding: 15px 1.25rem;
}
.lot_panel_12 .lot-widget-footer svg {
  position: relative;
  top: -3px;
}
.lot_panel_12 .card {
  position: relative;
  /*
      .btn{
        background-color: #3A3A3A !important;
        color: #ffffff !important;
      }
  */
}
.lot_panel_12 .card .img-container {
  background-color: #FFFFFF !important;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative; /* If you want text inside of it */
}
.lot_panel_12 .card .img-container.ar3_2 {
  padding-top: 66.66%; /* 3:2 Aspect Ratio */
}
.lot_panel_12 .card .img-container.ar4_3 {
  padding-top: 75%; /* 4:3 Aspect Ratio */
}
.lot_panel_12 .card .img-container.ar16_9 {
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.lot_panel_12 .card .img-container.ar8_5 {
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
}
.lot_panel_12 .card .merken_old {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  /*width: 30px;
  height: 30px;
  line-height: 34px;*/
  width: 40px;
  height: 40px;
  line-height: 44px;
  font-size: 26px;
  cursor: pointer;
  /*z-index: 2;*/
  z-index: 1;
}
.lot_panel_12 .card .merken_old.active {
  color: #cc071e;
}
.lot_panel_12 .card .banner {
  position: absolute;
  transform: rotate(-25deg);
  z-index: 3;
  background-color: #BA0000;
  width: 390px;
  left: -28px;
  top: -25px;
  height: 40px;
  color: #ffffff;
  text-align: left;
}
.lot_panel_12 .card .banner .wartezeit {
  font-size: 20px;
  padding-left: 50px;
  line-height: 40px;
}
.lot_panel_12 .card .banner .comming {
  font-size: 20px;
  padding-left: 50px;
  line-height: 40px;
}
.lot_panel_12 .card .banner .closed {
  font-size: 20px;
  padding-left: 50px;
  line-height: 40px;
}
.lot_panel_12 .card .card-body {
  height: auto;
}
.lot_panel_12 .card .preis {
  font-size: 26px;
}
.lot_panel_12 .card .schaetzwert {
  text-decoration: line-through;
}
.lot_panel_12 .card .schlagwort {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.lot_panel_12 .card .lotnumber {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 15px;
  background-color: rgba(58, 58, 58, 0.9);
  z-index: 1;
  color: #ffffff !important;
}
.lot_panel_12 .card .anzahl_gruppe {
  font-family: Roboto, sans-serif;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 7px;
  right: 16px;
  background-color: #cc071e;
  color: #ffffff;
  font-size: 16px;
  padding: 0;
  text-align: center;
  border-radius: 100%;
  line-height: 28px;
  z-index: 3;
  /*border: 1px solid #ffffff;*/
  -moz-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
}
@media screen and (min-width: 576px) {
  .lot_panel_12 .card .anzahl_gruppe {
    width: 50px;
    height: 50px;
    font-size: 17px;
    padding: 10px;
  }
}
.lot_panel_12 .card .pricebox {
  background-color: lightblue;
  float: left;
  margin-bottom: 5px;
  margin-right: 5px;
}
.lot_panel_12 .card .logo-small {
  width: 120px;
  height: 60px;
  background-color: #ffffff;
  content: "";
  text-align: center;
  display: block;
  float: left;
}
.lot_panel_12 .card .logo-small img {
  margin: auto;
  max-height: 60px;
}
@media screen and (min-width: 576px) {
  .lot_panel_12 .card .card-title {
    font-size: 20px;
    height: 75px;
    overflow: hidden;
  }
  .lot_panel_12 .card .preis-label, .lot_panel_12 .card .schaetzwert {
    font-size: 10px;
  }
  .lot_panel_12 .card .preis {
    font-size: 13px;
  }
  .lot_panel_12 .card .btn {
    padding-left: 20px;
    padding-right: 20px;
  }
  .lot_panel_12 .card .lot-widget-footer {
    font-size: 12px;
  }
}
@media screen and (min-width: 768px) {
  .lot_panel_12 .card .card-title {
    font-size: 20px;
    height: 77px;
    overflow: hidden;
  }
  .lot_panel_12 .card .preis-label, .lot_panel_12 .card .schaetzwert {
    font-size: 14px;
  }
  .lot_panel_12 .card .preis {
    font-size: 20px;
  }
  .lot_panel_12 .card .lot-widget-footer {
    font-size: 14px;
  }
}
@media screen and (min-width: 992px) {
  .lot_panel_12 .card .card-title {
    font-size: 20px;
    height: 75px;
    overflow: hidden;
  }
  .lot_panel_12 .card .preis-label, .lot_panel_12 .card .schaetzwert {
    font-size: 12px;
  }
  .lot_panel_12 .card .preis {
    font-size: 18px;
  }
  .lot_panel_12 .card .btn {
    padding-left: 20px;
    padding-right: 20px;
  }
  .lot_panel_12 .card .lot-widget-footer {
    font-size: 12px;
  }
}
@media screen and (min-width: 1200px) {
  .lot_panel_12 .card .card-title {
    font-size: 20px;
    height: 70px;
    overflow: hidden;
  }
  .lot_panel_12 .card .preis-label, .lot_panel_12 .card .schaetzwert {
    font-size: 14px;
  }
  .lot_panel_12 .card .preis {
    font-size: 20px;
  }
  .lot_panel_12 .card .lot-widget-footer {
    font-size: 14px;
  }
}

.preview .lot_panel_12 .card:after {
  content: "";
  position: absolute;
  background-color: rgba(195, 195, 195, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.lot_panel_12 a:hover .card {
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.8);
  transform: scale(1.04);
}

/*# sourceMappingURL=styles.css.map */