/*$slick-font-path: '~slick-carousel/slick/fonts/';*/
/*$slick-font-path: '~slick-carousel/slick/fonts/';*/
.navbar {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 16px;
  text-transform: uppercase;
}
.navbar ul.navbar-nav li.nav-item a.nav-link {
  color: #000000 !important;
  padding-top: 12px;
  padding-bottom: 12px;
}
.navbar ul.navbar-nav li.nav-item a.nav-link:hover {
  color: #ffffff !important;
  background-color: #003c5d;
}
.navbar ul.navbar-nav li.nav-item.active a.nav-link {
  color: #ffffff !important;
  background-color: #007EC3 !important;
}

#wz-logo {
  height: 40px;
}
@media screen and (min-width: 576px) {
  #wz-logo {
    height: 40px;
  }
}
@media screen and (min-width: 768px) {
  #wz-logo {
    height: 50px;
    margin-top: 3px;
  }
}
@media screen and (min-width: 992px) {
  #wz-logo {
    height: 60px;
    margin-top: 10px;
  }
}

.sticky-header {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 100;
}
.sticky-header .header-top {
  width: 100%;
  /*height: 100px;*/
  background-color: #ffffff;
  color: #007EC3;
  padding: 10px 0;
  position: relative;
  z-index: 110;
}
.sticky-header .header-top kai.a {
  color: #007EC3;
}
@media screen and (min-width: 768px) {
  .sticky-header .header-top {
    height: 80px;
  }
}
@media screen and (min-width: 992px) {
  .sticky-header .header-top {
    height: 100px;
  }
}
.sticky-header .header-top .wrapper-logo {
  max-width: 160px;
}
@media screen and (min-width: 576px) {
  .sticky-header .header-top .wrapper-logo {
    max-width: 100%;
  }
}
.sticky-header .header-top a {
  color: #007EC3;
}
.sticky-header .header-top a span {
  font-size: 20px;
}
.sticky-header .header-top a svg path {
  fill: #007EC3 !important;
}
.sticky-header .header-top a.active {
  color: #000f87;
}
.sticky-header .header-top a.active svg path {
  fill: #000f87 !important;
}
.sticky-header .header-top .header-bar-icon.active {
  display: block !important;
}
.sticky-header .header-bottom {
  width: 100%;
  color: #ffffff;
  /*background-color: $blau_nav;*/
  z-index: 101;
  position: relative;
  transition: all 300ms ease-in-out 0s;
  top: 0;
  /* start out at position 0 */
}
.sticky-header .mb-nav {
  position: absolute;
  top: 50px;
  right: 0;
  width: 230px;
  background-color: #ffffff;
  text-transform: uppercase;
  z-index: 102;
}
.sticky-header .mb-nav .line {
  width: 100%;
  background-color: #EDE9E1;
  height: 5px;
}
.sticky-header .mb-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid #EDE9E1;
  border-right: 1px solid #EDE9E1;
  border-bottom: 1px solid #EDE9E1;
}
.sticky-header .mb-nav ul li {
  margin: 0;
  width: 100%;
  padding: 0;
  text-align: right;
  font-weight: 700;
  border-top: 1px solid #EDE9E1;
}
.sticky-header .mb-nav ul li a {
  color: #007EC3;
}
.sticky-header .mb-nav ul li a div {
  padding: 15px;
}
.sticky-header li ul.meine-auktionen {
  display: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.sticky-header li.active ul.meine-auktionen {
  display: block;
}
.sticky-header li ul.meine-auktionen li {
  font-weight: 300;
}
.sticky-header li ul.meine-auktionen li div {
  padding-top: 10px;
  padding-bottom: 10px;
}
.sticky-header li ul.meine-auktionen li:nth-child(2n+1) {
  background-color: #EDE9E1;
}
.sticky-header .mb-nav.mb-nav-mein-menue {
  display: none;
}
.sticky-header .mb-nav.mb-nav-mein-menue .line {
  background-color: #007EC3;
}
.sticky-header .mb-nav.mb-nav-mein-menue.active {
  display: block;
}
.sticky-header .mb-nav.mb-nav-main-menue {
  display: none;
  z-index: 111;
}
.sticky-header .mb-nav.mb-nav-main-menue .close-main-menue {
  width: 50px;
  height: 50px;
  background-color: #EDE9E1;
  position: absolute;
  top: -50px;
  right: 0;
}
.sticky-header .mb-nav.mb-nav-main-menue .close-main-menue span {
  padding: 15px;
  line-height: 50px;
}
.sticky-header .mb-nav.mb-nav-main-menue.active {
  display: block;
}

.sticky-header.scroll .header-bottom {
  top: -60px;
}

.sticky-header.scroll .header-top .header-bar-icon {
  display: block !important;
}

.navbar {
  box-shadow: none;
  padding: 0 1rem;
}

.navbar.navbar-dark {
  background-color: #E6E6E6;
}

.navbar.navbar-dark .breadcrumb .nav-item > .nav-link, .navbar.navbar-dark .navbar-nav .nav-item > .nav-link {
  background-color: transparent;
  border-bottom: 2px transparent solid;
}

.navbar.navbar-dark .breadcrumb .nav-item.active > .nav-link, .navbar.navbar-dark .navbar-nav .nav-item.active > .nav-link {
  background-color: transparent;
  /*border-bottom: 2px $grau_dunkel solid;*/
}

a.heart-counter:after {
  content: attr(data-messages);
  position: absolute;
  top: 3px;
  left: 25px;
  background: #007EC3;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

a[title=Merkliste][data-messages="0"]:after {
  display: none;
}

/*$slick-font-path: '~slick-carousel/slick/fonts/';*/
/** ============================
 ** 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 */
/*$slick-font-path: '~slick-carousel/slick/fonts/';*/
.select-wrapper + label {
  position: absolute;
  top: -0.88rem;
  font-size: 0.8rem;
}

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

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

/*$slick-font-path: '~slick-carousel/slick/fonts/';*/
/* go on with normal style definitions */
body {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: "Source Sans Pro", 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;
}

.text-bold {
  font-weight: 700;
}

.pt-15, .py-15 {
  padding-top: 15px !important;
}

.pb-15, .py-15 {
  padding-bottom: 15px !important;
}

.pl-15, .px-15 {
  padding-left: 15px !important;
}

.pr-15, .px-15 {
  padding-right: 15px !important;
}

.pt-30, .py-30 {
  padding-top: 30px !important;
}

.pb-30, .py-30 {
  padding-bottom: 30px !important;
}

.pl-30, .px-30 {
  padding-left: 30px !important;
}

.pr-30, .px-30 {
  padding-right: 30px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

main {
  min-height: 500px;
}

a {
  color: #007EC3;
}

a:hover, a:focus {
  color: #005d90;
}

a.btn-primary:hover, a.btn-primary:focus {
  color: #ffffff;
}

a.link-primary {
  color: #007EC3;
}

a.link-primary:hover, a.link-primary:focus {
  color: #005d90;
}

a.link-secondary {
  color: #6c757d;
}

a.link-secondary:hover, a.link-secondary:focus {
  color: #545b62;
}

a.link-blue {
  color: #007EC3;
}

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

.btn.btn-primary {
  background-color: #007EC3 !important;
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
}

.btn.btn-primary:hover, .btn.btn-primary:focus {
  box-shadow: none;
  border: 1px solid #007EC3 !important;
  background-color: transparent !important;
  color: #007EC3 !important;
}

.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus {
  box-shadow: none;
  background-color: #007EC3 !important;
  color: #ffffff !important;
}

.btn.btn-outline-secondary:hover, .btn.btn-outline-secondary:focus {
  box-shadow: none;
  background-color: #6c757d !important;
  color: #ffffff !important;
}

.text-primary {
  color: #007EC3 !important;
}

.text-blau {
  color: #007EC3;
}

.text-black {
  color: #000000 !important;
}

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

.bg-grau-space {
  padding-left: 30px;
  padding-right: 30px;
}

.bg-grau2 {
  background-color: #E6E6E6;
}

.bg-grau2-space {
  padding-left: 0px;
  padding-right: 0px;
}

@media screen and (min-width: 576px) {
  .bg-sm-grau {
    background-color: #E6E6E6;
  }

  .bg-sm-white {
    background-color: #ffffff;
  }

  .bg-grau-space {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (min-width: 768px) {
  .bg-md-grau {
    background-color: #E6E6E6;
  }

  .bg-md-white {
    background-color: #ffffff;
  }

  .bg-grau-space {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (min-width: 992px) {
  .bg-lg-grau {
    background-color: #E6E6E6;
  }

  .bg-lg-white {
    background-color: #ffffff;
  }
}
@media screen and (min-width: 1200px) {
  .bg-xl-grau {
    background-color: #E6E6E6;
  }

  .bg-xl-white {
    background-color: #ffffff;
  }
}
.btn {
  font-weight: 700;
  box-shadow: none;
}

.btn[class*=btn-outline-] {
  border-radius: 3px;
  border-width: 1px !important;
}

#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;
}

.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: #007EC3;
}

.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: #CC1216;
}

footer.page-footer {
  bottom: 0;
  color: #000;
}

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

footer {
  background-color: #E6E6E6;
  color: #000000;
  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: #000000;
  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;
}

#teaser_slide {
  position: relative;
}
#teaser_slide .item-content {
  padding: 30px;
  background-color: #e6e6e6;
  color: #000000;
  height: auto;
}
@media screen and (min-width: 768px) {
  #teaser_slide .item-content {
    position: absolute;
    width: 390px;
    background-color: rgba(230, 230, 230, 0.7);
    /*   right: 30px; */
    bottom: 30px;
    padding: 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: 45px;
  color: #007EC3;
  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: 45px;
    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;
  text-align: center;
  /*width: 30px;
  height: 30px;
  line-height: 34px;*/
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  cursor: pointer;
  /*z-index: 2;*/
  z-index: 1;
  background: url("/img/public/heart_boarder.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
body.bieten .slide_wrapper .merken.active {
  color: #007EC3;
  background: url("/img/public/heart_blue.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

a .blogitem {
  margin-bottom: 30px;
  color: #000000;
  transition: all 0.2s ease-in-out;
}
a .blogitem .mehr-lesen {
  color: #007EC3;
}
a .blogitem .content-wrapper {
  height: 150px;
  overflow: hidden;
  position: relative;
}
a .blogitem .content-wrapper:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 100%;
  z-index: 1;
  content: "";
  background: rgba(255, 255, 255, 0.5);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.75) 50%, white 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(50%, rgba(255, 255, 255, 0.75)), color-stop(100%, white));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.75) 50%, white 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.75) 50%, white 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.75) 50%, white 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.75) 50%, white 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#ffffff", GradientType=0 );
}

/*
a:hover{
  .blogitem{
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.4);
    transform: scale(1.01);
  }
}
*/
.countdown-master-content .cd-item {
  width: 45px;
  text-align: center;
}

.box-countdown {
  background-color: #E6E6E6;
  text-align: center;
}

.countdown-lot > div {
  display: inline;
}

.countdown-lot-content {
  color: #000000;
  font-weight: 400;
}
.countdown-lot-content .cd-item {
  display: inline-block;
  padding-right: 7px;
  font-size: 0.8em;
}
.countdown-lot-content .cd-item span {
  font-size: 1rem;
  padding-right: 3px;
}

table.table a.btn.btn-primary {
  color: #ffffff;
}

.wrapper_refresh a.refresh {
  position: absolute;
  top: 0;
  right: 20px;
}
.wrapper_refresh a.refresh.active {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 800ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 800ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 800ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.h-line {
  width: 80%;
  height: 2px;
  background-color: #EDECE8;
  content: "";
  position: relative;
  margin: 0 auto;
}

a.card-anbieter {
  color: #000000;
  box-shadow: none;
}
a.card-anbieter .card-title {
  min-height: 5em;
}

a.card-anbieter:hover .card {
  /*box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);*/
  /*transform: scale(1.01);*/
}
a.card-anbieter:hover .card .btn-outline-primary {
  background-color: #007EC3 !important;
  color: #ffffff !important;
}
a.card-anbieter:hover .card .btn-primary {
  box-shadow: none;
  border: 1px solid #007EC3 !important;
  background-color: transparent !important;
  color: #007EC3 !important;
}

.btn.btn-outline-secondary.btn-disabled {
  cursor: default;
  border-radius: 0;
}

.btn.btn-outline-secondary.btn-disabled:hover, .btn.btn-outline-secondary.btn-disabled:focus, .btn.btn-outline-secondary.btn-disabled:active {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
  box-shadow: none;
}

@media screen and (min-width: 992px) {
  .angebotsbeschreibung {
    padding: 15px;
  }
}

.text-btn-height {
  line-height: 43px;
}

.widget_so_funktionierts {
  background-color: #E6E6E6;
  content: "";
  min-height: 150px;
  width: 100%;
  margin-top: 30px;
  padding: 15px;
}
.widget_so_funktionierts .header {
  width: 100%;
  height: 23px;
  content: "";
  margin-bottom: 15px;
  position: relative;
}
.widget_so_funktionierts .header .text {
  background-color: #E6E6E6;
  z-index: 2;
  position: relative;
  padding: 0 15px;
  margin-left: -15px;
  font-size: 20px;
}
.widget_so_funktionierts .header:after {
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #ffffff;
  content: "";
  z-index: 1;
}
.widget_so_funktionierts .round {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffffff;
  content: "";
  font-size: 24px;
  line-height: 50px;
}
.widget_so_funktionierts p {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}
.widget_so_funktionierts p.text-bold {
  font-size: 16px;
}

@media screen and (min-width: 576px) {
  .widget_so_funktionierts {
    /*
    .round.user{
      padding-top: 20px;
    }
    .round.gavel{
      padding-top: 24px;
      padding-left: 5px;
    }
    .round.money{
      padding-top: 26px;
    }
    .round.trophy{
      padding-top: 27px;
    }
    */
  }
  .widget_so_funktionierts .round {
    width: 100px;
    height: 100px;
    margin: 10px auto;
    line-height: 100px;
    font-size: 50px;
  }
  .widget_so_funktionierts .header {
    text-align: center;
  }
  .widget_so_funktionierts .header .text {
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .widget_so_funktionierts .inner {
    padding-left: 60px;
    padding-right: 60px;
  }
}
.reisedetails {
  background-color: #E6E6E6;
  padding: 5px;
  display: flex;
  align-items: center;
}
.reisedetails .infos {
  background-color: #ffffff;
  padding: 15px;
}
.reisedetails .icon {
  font-size: 60px;
  padding: 0 30px;
  color: #ffffff;
}

.gebotsstand {
  background-color: #007EC3;
  border-radius: 10px;
  padding: 10px;
  color: #ffffff;
  display: inline-block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 0.8em;
}
.gebotsstand span {
  font-size: 2rem;
}
.gebotsstand span.preis_akt_gebot_formatiert {
  padding-left: 10px;
}

.wrapper-infobox {
  background-color: #E6E6E6;
  padding: 5px;
}
.wrapper-infobox .inner-infobox {
  background-color: #ffffff;
  padding: 15px;
}
.wrapper-infobox .inner-infobox .list-group {
  margin-top: 10px;
}
.wrapper-infobox .inner-infobox .list-group-item {
  padding: 3px;
}

.box-anbieter {
  border-top: 4px solid #6c757d;
  border-bottom: 4px solid #6c757d;
  padding: 30px;
  margin: 30px 0;
}

/*$slick-font-path: '~slick-carousel/slick/fonts/';*/
.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.3s 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: #007EC3;
  padding: 7px 15px;
  z-index: 1;
}

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

.lot_panel_12 a {
  color: #000000;
}
.lot_panel_12 .lot-widget-footer {
  border-top: 1px solid #E6E6E6;
  padding: 3px 1.25rem;
}
.lot_panel_12 .lot-widget-footer svg {
  position: relative;
  top: -3px;
}
.lot_panel_12 .card {
  position: relative;
  box-shadow: none;
  transition: all 0.2s ease-in-out;
  margin-bottom: 30px;
  /*
      .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 {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #ffffff;
  /*border-radius: 50%;*/
  text-align: center;
  /*width: 30px;
  height: 30px;
  line-height: 34px;*/
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  cursor: pointer;
  /*z-index: 2;*/
  z-index: 1;
  background: url("/img/public/heart_boarder.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
}
.lot_panel_12 .card .merken.active {
  color: #007EC3;
  background: url("/img/public/heart_blue.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.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;
  font-weight: 700;
}
.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 .anzahl_gruppe {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px 15px;
  background-color: #007EC3;
  z-index: 1;
  color: #ffffff !important;
}
.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 .btn:hover, .lot_panel_12 .card .btn:active, .lot_panel_12 .card .btn:focus {
    box-shadow: none;
  }
  .lot_panel_12 .card .lot-widget-footer {
    font-size: 12px;
  }
}
@media screen and (min-width: 768px) {
  .lot_panel_12 .card .card-title {
    font-size: 18px;
    height: 55px;
    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-weight: 400;
    font-size: 20px;
    height: 80px;
    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 .card {
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
  transform: scale(1.01);
}

.lot_panel_12 a:hover {
  cursor: pointer;
}

.lot_panel_12 a:hover .card {
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
  transform: scale(1.04);
}
.lot_panel_12 a:hover .card .btn-outline-primary {
  background-color: #007EC3 !important;
  color: #ffffff !important;
}
.lot_panel_12 a:hover .card .btn-primary {
  box-shadow: none;
  border: 1px solid #007EC3 !important;
  background-color: transparent !important;
  color: #007EC3 !important;
}

.lot_merkliste .merken {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #ffffff;
  /*border-radius: 50%;*/
  text-align: center;
  /*width: 30px;
  height: 30px;
  line-height: 34px;*/
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  cursor: pointer;
  /*z-index: 2;*/
  z-index: 1;
  background: url("/img/public/heart_boarder.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
}
.lot_merkliste .merken.active {
  color: #007EC3;
  background: url("/img/public/heart_blue.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 576px) {
  .lot_merkliste .card-title {
    height: 70px;
  }
}
.lot_merkliste .lot-widget-footer {
  border-top: 1px solid #E6E6E6;
  padding: 3px 1.25rem;
}
.lot_merkliste .lot-widget-footer svg {
  position: relative;
  top: -3px;
}
@media screen and (min-width: 576px) {
  .lot_merkliste .lot-widget-footer {
    font-size: 12px;
  }
}
@media screen and (min-width: 768px) {
  .lot_merkliste .lot-widget-footer {
    font-size: 14px;
  }
}
@media screen and (min-width: 992px) {
  .lot_merkliste .lot-widget-footer {
    font-size: 12px;
  }
}
@media screen and (min-width: 1200px) {
  .lot_merkliste .lot-widget-footer {
    font-size: 14px;
  }
}
.lot_merkliste .infobar {
  padding: 10px;
  position: relative;
}

.teaserlots_wrapper .slick-dots li button::before {
  font-size: 20px;
}

.teaserlot_wrapper {
  cursor: pointer;
}

.teaserlot {
  /*
  width: 100%;
  height: 280px;

   */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f8f8f8;
  content: "";
  position: relative;
  /*
    @media screen and (min-width: $break_sm) {
      width: 720px;
      height: 268px;
      background-size: contain;
    }
    @media screen and (min-width: $break_md) {
      width: 940px;
      height: 350px;
    }
    @media screen and (min-width: $break_lg) {
      width: 1140px;
      height: 425px;
    }*/
}
.teaserlot .fahne {
  position: absolute;
  top: -3px;
  right: -2px;
  width: 140px;
  height: 44px;
  background-image: url("/img/public/fahne.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 35px;
  padding-top: 4px;
  color: #ffffff;
  font-size: 10px;
  line-height: 1.2;
  z-index: 5;
}
.teaserlot .fahne .preis {
  font-weight: normal;
  font-size: 17px;
}
.teaserlot .under {
  background-color: #b5b5b5;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  height: 25px;
  position: absolute;
  right: 0;
  top: 37px;
  width: 106px;
  z-index: 4;
  padding-top: 2px;
}
@media screen and (min-width: 576px) {
  .teaserlot .under {
    height: 35px;
    padding-top: 4px;
    top: 77px;
    width: 196px;
  }
}
.teaserlot .under .label {
  color: #000000;
  display: inline-block;
  font-weight: 100;
}
@media screen and (min-width: 576px) {
  .teaserlot .under .label {
    font-size: 14px;
  }
}
.teaserlot .under .schaetzwert_wrapper {
  /*font-size: 21px;*/
  font-size: 11px;
  display: inline-block;
  position: relative;
}
@media screen and (min-width: 576px) {
  .teaserlot .under .schaetzwert_wrapper {
    font-size: 20px;
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) {
  .teaserlot .under .schaetzwert_wrapper {
    font-size: 16px;
    padding-top: 4px;
  }
}
@media screen and (min-width: 992px) {
  .teaserlot .under .schaetzwert_wrapper {
    font-size: 21px;
    padding-top: 1px;
  }
}
.teaserlot .under .schaetzwert::after {
  background: #E3001B none repeat scroll 0 0;
  content: "";
  height: 1px;
  left: 0;
  margin: -1px 0 0;
  position: absolute;
  right: 0;
  top: 50%;
  -moz-transform: rotate(-10deg);
  /* Firefox 3.6 Firefox 4 */
  -webkit-transform: rotate(-10deg);
  /* Safari */
  -o-transform: rotate(-10deg);
  /* Opera */
  -ms-transform: rotate(-10deg);
  /* IE9 */
  transform: rotate(-10deg);
  /* W3C */
}
.teaserlot .beschreibung {
  background: rgba(255, 255, 255, 0.6);
  position: absolute;
  left: 15px;
  bottom: 15px;
  right: 15px;
  padding: 10px;
}
.teaserlot .beschreibung h1 {
  font-weight: 600;
  text-align: left;
  font-size: 14px;
  margin: 0;
  line-height: 1.3;
}
.teaserlot .beschreibung a.btn {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: -40px;
  border-radius: 10px;
}
@media screen and (min-width: 576px) {
  .teaserlot {
    /*height: 267px;*/
    /*background-size: cover;*/
  }
  .teaserlot .fahne {
    position: absolute;
    top: -13px;
    right: -2px;
    width: 258px;
    height: 100px;
    background-image: url("/img/public/fahne.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 70px;
    padding-top: 20px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.2;
  }
  .teaserlot .fahne .preis {
    font-weight: normal;
    font-size: 30px;
  }
  .teaserlot .beschreibung {
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    left: 15px;
    bottom: 15px;
    width: 450px;
    padding: 10px;
  }
  .teaserlot .beschreibung h1 {
    font-weight: 600;
    text-align: left;
    font-size: 22px;
  }
  .teaserlot .beschreibung a.btn {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    border-radius: 10px;
  }
}
@media screen and (min-width: 768px) {
  .teaserlot {
    /*height: 351px;*/
  }
}
@media screen and (min-width: 992px) {
  .teaserlot {
    /*height: 425px;*/
  }
}

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