.attendance-screen .canvas {
    padding: 20px;
}
.attendance-screen .attendance-card {
    position: relative;
    height: 126px;
    margin-bottom: 15px;
    padding: 12px;
    background-color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-align: center;
    border: 2px solid #fff;
}
.attendance-screen .attendance-card h3 {
      margin: 0 0 10px;
      padding-bottom: 10px;
      text-align: left;
      font-weight: normal;
      font-size: 8px;
      border-bottom: 1px solid #e6e9ed;
}
.attendance-screen .attendance-card p {
      display: block;
      clear: both;
      font-size: 8px;
      margin: 0;
      line-height: 12px;
      text-align: left;
}
.attendance-screen .attendance-card .circle {
      position: relative;
      float: left;
      width: 30px;
      height: 30px;
      margin: 0 5px 7px 0;
      border-radius: 50%;
}
.attendance-screen .attendance-card .circle img {
      width: 13px;
}
.attendance-screen .attendance-card .total-number {
      float: left;
      font-size: 20px;
}
.attendance-screen .canvas table th.width-20 {
      width: 20%;
}
.attendance-screen .canvas table .odd {
      background-color: #f5f7fa;
}
.attendance-screen .canvas table td {
      padding: 0 5px;
      text-align: left;
      border-bottom: 1px solid #f5f7fa;
}

/* CHART */

.pie-wrapper {
  position: relative;
  width: 136px;
  height: 68px;
  overflow: hidden;
}
.pie-wrapper .arc, .pie-wrapper:before {
  content: '';
  width: 136px;
  height: 68px;
  position: absolute;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  left: 0;
  box-sizing: border-box;
}
.pie-wrapper:before {
  border: 10px solid #E8E8E8;
  border-bottom: none;
  top: 0;
  z-index: 1;
  border-radius: 300px 300px 0 0;
}
.pie-wrapper .attendance {
  border: 10px solid #f3a100;
  border-top: none;
  border-radius: 0 0 300px 300px;
  top: 100%;
  z-index: 2;
}
.pie-wrapper .punctuality {
  border: 10px solid #3bafda;
  border-top: none;
  border-radius: 0 0 300px 300px;
  top: 100%;
  z-index: 2;
}
.pie-wrapper .arc::before {
  content: "";
  height: 1px;
  width: 5px;
  position: absolute;
  top: 0px;
}
.pie-wrapper .score {
  color: #656d78;
  font-size: 20px;
  display: block;
  text-align: center;
  margin-top: 37px;
}
.pie-wrapper .score .p-sign {
  font-size: 10px;
}

/* Attendance Chart */

.attendance[data-value="1"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(1.8deg);
  -ms-transform: rotate(1.8deg);
  -webkit-transform: rotate(1.8deg);
  transform: rotate(1.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="1"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="1"]::before {
  background-color: #f3a100;
}

.attendance[data-value="2"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  -webkit-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="2"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="2"]::before {
  background-color: #f3a100;
}

.attendance[data-value="3"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(5.4deg);
  -ms-transform: rotate(5.4deg);
  -webkit-transform: rotate(5.4deg);
  transform: rotate(5.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="3"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="3"]::before {
  background-color: #f3a100;
}

.attendance[data-value="4"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  -webkit-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="4"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="4"]::before {
  background-color: #f3a100;
}

.attendance[data-value="5"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(9deg);
  -ms-transform: rotate(9deg);
  -webkit-transform: rotate(9deg);
  transform: rotate(9deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="5"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="5"]::before {
  background-color: #f3a100;
}

.attendance[data-value="6"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  -webkit-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="6"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="6"]::before {
  background-color: #f3a100;
}

.attendance[data-value="7"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(12.6deg);
  -ms-transform: rotate(12.6deg);
  -webkit-transform: rotate(12.6deg);
  transform: rotate(12.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="7"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="7"]::before {
  background-color: #f3a100;
}

.attendance[data-value="8"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  -webkit-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="8"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="8"]::before {
  background-color: #f3a100;
}

.attendance[data-value="9"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(16.2deg);
  -ms-transform: rotate(16.2deg);
  -webkit-transform: rotate(16.2deg);
  transform: rotate(16.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="9"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="9"]::before {
  background-color: #f3a100;
}

.attendance[data-value="10"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
  transform: rotate(18deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="10"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="10"]::before {
  background-color: #f3a100;
}

.attendance[data-value="11"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(19.8deg);
  -ms-transform: rotate(19.8deg);
  -webkit-transform: rotate(19.8deg);
  transform: rotate(19.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="11"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="11"]::before {
  background-color: #f3a100;
}

.attendance[data-value="12"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  -webkit-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="12"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="12"]::before {
  background-color: #f3a100;
}

.attendance[data-value="13"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(23.4deg);
  -ms-transform: rotate(23.4deg);
  -webkit-transform: rotate(23.4deg);
  transform: rotate(23.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="13"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="13"]::before {
  background-color: #f3a100;
}

.attendance[data-value="14"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  -webkit-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="14"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="14"]::before {
  background-color: #f3a100;
}

.attendance[data-value="15"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(27deg);
  -ms-transform: rotate(27deg);
  -webkit-transform: rotate(27deg);
  transform: rotate(27deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="15"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="15"]::before {
  background-color: #f3a100;
}

.attendance[data-value="16"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  -webkit-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="16"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="16"]::before {
  background-color: #f3a100;
}

.attendance[data-value="17"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(30.6deg);
  -ms-transform: rotate(30.6deg);
  -webkit-transform: rotate(30.6deg);
  transform: rotate(30.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="17"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="17"]::before {
  background-color: #f3a100;
}

.attendance[data-value="18"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  -webkit-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="18"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="18"]::before {
  background-color: #f3a100;
}

.attendance[data-value="19"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(34.2deg);
  -ms-transform: rotate(34.2deg);
  -webkit-transform: rotate(34.2deg);
  transform: rotate(34.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="19"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="19"]::before {
  background-color: #f3a100;
}

.attendance[data-value="20"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -webkit-transform: rotate(36deg);
  transform: rotate(36deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="20"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="20"]::before {
  background-color: #f3a100;
}

.attendance[data-value="21"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(37.8deg);
  -ms-transform: rotate(37.8deg);
  -webkit-transform: rotate(37.8deg);
  transform: rotate(37.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="21"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="21"]::before {
  background-color: #f3a100;
}

.attendance[data-value="22"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  -webkit-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="22"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="22"]::before {
  background-color: #f3a100;
}

.attendance[data-value="23"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(41.4deg);
  -ms-transform: rotate(41.4deg);
  -webkit-transform: rotate(41.4deg);
  transform: rotate(41.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="23"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="23"]::before {
  background-color: #f3a100;
}

.attendance[data-value="24"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -webkit-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="24"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="24"]::before {
  background-color: #f3a100;
}

.attendance[data-value="25"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="25"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="25"]::before {
  background-color: #f3a100;
}

.attendance[data-value="26"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(46.8deg);
  -ms-transform: rotate(46.8deg);
  -webkit-transform: rotate(46.8deg);
  transform: rotate(46.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="26"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="26"]::before {
  background-color: #f3a100;
}

.attendance[data-value="27"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(48.6deg);
  -ms-transform: rotate(48.6deg);
  -webkit-transform: rotate(48.6deg);
  transform: rotate(48.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="27"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="27"]::before {
  background-color: #f3a100;
}

.attendance[data-value="28"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  -webkit-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="28"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="28"]::before {
  background-color: #f3a100;
}

.attendance[data-value="29"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(52.2deg);
  -ms-transform: rotate(52.2deg);
  -webkit-transform: rotate(52.2deg);
  transform: rotate(52.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="29"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="29"]::before {
  background-color: #f3a100;
}

.attendance[data-value="30"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  -webkit-transform: rotate(54deg);
  transform: rotate(54deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="30"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="30"]::before {
  background-color: #f3a100;
}

.attendance[data-value="31"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(55.8deg);
  -ms-transform: rotate(55.8deg);
  -webkit-transform: rotate(55.8deg);
  transform: rotate(55.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="31"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="31"]::before {
  background-color: #f3a100;
}

.attendance[data-value="32"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  -webkit-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="32"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="32"]::before {
  background-color: #f3a100;
}

.attendance[data-value="33"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(59.4deg);
  -ms-transform: rotate(59.4deg);
  -webkit-transform: rotate(59.4deg);
  transform: rotate(59.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="33"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="33"]::before {
  background-color: #f3a100;
}

.attendance[data-value="34"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  -webkit-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="34"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="34"]::before {
  background-color: #f3a100;
}

.attendance[data-value="35"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(63deg);
  -ms-transform: rotate(63deg);
  -webkit-transform: rotate(63deg);
  transform: rotate(63deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="35"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="35"]::before {
  background-color: #f3a100;
}

.attendance[data-value="36"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  -webkit-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="36"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="36"]::before {
  background-color: #f3a100;
}

.attendance[data-value="37"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(66.6deg);
  -ms-transform: rotate(66.6deg);
  -webkit-transform: rotate(66.6deg);
  transform: rotate(66.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="37"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="37"]::before {
  background-color: #f3a100;
}

.attendance[data-value="38"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  -webkit-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="38"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="38"]::before {
  background-color: #f3a100;
}

.attendance[data-value="39"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(70.2deg);
  -ms-transform: rotate(70.2deg);
  -webkit-transform: rotate(70.2deg);
  transform: rotate(70.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="39"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="39"]::before {
  background-color: #f3a100;
}

.attendance[data-value="40"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -webkit-transform: rotate(72deg);
  transform: rotate(72deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="40"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="40"]::before {
  background-color: #f3a100;
}

.attendance[data-value="41"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(73.8deg);
  -ms-transform: rotate(73.8deg);
  -webkit-transform: rotate(73.8deg);
  transform: rotate(73.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="41"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="41"]::before {
  background-color: #f3a100;
}

.attendance[data-value="42"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(75.6deg);
  -ms-transform: rotate(75.6deg);
  -webkit-transform: rotate(75.6deg);
  transform: rotate(75.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="42"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="42"]::before {
  background-color: #f3a100;
}

.attendance[data-value="43"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(77.4deg);
  -ms-transform: rotate(77.4deg);
  -webkit-transform: rotate(77.4deg);
  transform: rotate(77.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="43"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="43"]::before {
  background-color: #f3a100;
}

.attendance[data-value="44"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  -webkit-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="44"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="44"]::before {
  background-color: #f3a100;
}

.attendance[data-value="45"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(81deg);
  -ms-transform: rotate(81deg);
  -webkit-transform: rotate(81deg);
  transform: rotate(81deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="45"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="45"]::before {
  background-color: #f3a100;
}

.attendance[data-value="46"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  -webkit-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="46"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="46"]::before {
  background-color: #f3a100;
}

.attendance[data-value="47"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(84.6deg);
  -ms-transform: rotate(84.6deg);
  -webkit-transform: rotate(84.6deg);
  transform: rotate(84.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="47"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="47"]::before {
  background-color: #f3a100;
}

.attendance[data-value="48"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  -webkit-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="48"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="48"]::before {
  background-color: #f3a100;
}

.attendance[data-value="49"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(88.2deg);
  -ms-transform: rotate(88.2deg);
  -webkit-transform: rotate(88.2deg);
  transform: rotate(88.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="49"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="49"]::before {
  background-color: #f3a100;
}

.attendance[data-value="50"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="50"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="50"]::before {
  background-color: #f3a100;
}

.attendance[data-value="51"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(91.8deg);
  -ms-transform: rotate(91.8deg);
  -webkit-transform: rotate(91.8deg);
  transform: rotate(91.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="51"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="51"]::before {
  background-color: #f3a100;
}

.attendance[data-value="52"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(93.6deg);
  -ms-transform: rotate(93.6deg);
  -webkit-transform: rotate(93.6deg);
  transform: rotate(93.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="52"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="52"]::before {
  background-color: #f3a100;
}

.attendance[data-value="53"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(95.4deg);
  -ms-transform: rotate(95.4deg);
  -webkit-transform: rotate(95.4deg);
  transform: rotate(95.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="53"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="53"]::before {
  background-color: #f3a100;
}

.attendance[data-value="54"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  -webkit-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="54"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="54"]::before {
  background-color: #f3a100;
}

.attendance[data-value="55"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(99deg);
  -ms-transform: rotate(99deg);
  -webkit-transform: rotate(99deg);
  transform: rotate(99deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="55"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="55"]::before {
  background-color: #f3a100;
}

.attendance[data-value="56"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  -webkit-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="56"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="56"]::before {
  background-color: #f3a100;
}

.attendance[data-value="57"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(102.6deg);
  -ms-transform: rotate(102.6deg);
  -webkit-transform: rotate(102.6deg);
  transform: rotate(102.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="57"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="57"]::before {
  background-color: #f3a100;
}

.attendance[data-value="58"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  -webkit-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="58"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="58"]::before {
  background-color: #f3a100;
}

.attendance[data-value="59"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(106.2deg);
  -ms-transform: rotate(106.2deg);
  -webkit-transform: rotate(106.2deg);
  transform: rotate(106.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="59"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="59"]::before {
  background-color: #f3a100;
}

.attendance[data-value="60"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -webkit-transform: rotate(108deg);
  transform: rotate(108deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="60"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="60"]::before {
  background-color: #f3a100;
}

.attendance[data-value="61"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(109.8deg);
  -ms-transform: rotate(109.8deg);
  -webkit-transform: rotate(109.8deg);
  transform: rotate(109.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="61"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="61"]::before {
  background-color: #f3a100;
}

.attendance[data-value="62"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(111.6deg);
  -ms-transform: rotate(111.6deg);
  -webkit-transform: rotate(111.6deg);
  transform: rotate(111.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="62"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="62"]::before {
  background-color: #f3a100;
}

.attendance[data-value="63"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(113.4deg);
  -ms-transform: rotate(113.4deg);
  -webkit-transform: rotate(113.4deg);
  transform: rotate(113.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="63"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="63"]::before {
  background-color: #f3a100;
}

.attendance[data-value="64"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  -webkit-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="64"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="64"]::before {
  background-color: #f3a100;
}

.attendance[data-value="65"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(117deg);
  -ms-transform: rotate(117deg);
  -webkit-transform: rotate(117deg);
  transform: rotate(117deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="65"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="65"]::before {
  background-color: #f3a100;
}

.attendance[data-value="66"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  -webkit-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="66"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="66"]::before {
  background-color: #f3a100;
}

.attendance[data-value="67"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(120.6deg);
  -ms-transform: rotate(120.6deg);
  -webkit-transform: rotate(120.6deg);
  transform: rotate(120.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="67"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="67"]::before {
  background-color: #f3a100;
}

.attendance[data-value="68"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  -webkit-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="68"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="68"]::before {
  background-color: #f3a100;
}

.attendance[data-value="69"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(124.2deg);
  -ms-transform: rotate(124.2deg);
  -webkit-transform: rotate(124.2deg);
  transform: rotate(124.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="69"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="69"]::before {
  background-color: #f3a100;
}

.attendance[data-value="70"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  -webkit-transform: rotate(126deg);
  transform: rotate(126deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="70"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="70"]::before {
  background-color: #f3a100;
}

.attendance[data-value="71"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(127.8deg);
  -ms-transform: rotate(127.8deg);
  -webkit-transform: rotate(127.8deg);
  transform: rotate(127.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="71"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="71"]::before {
  background-color: #f3a100;
}

.attendance[data-value="72"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  -webkit-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="72"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="72"]::before {
  background-color: #f3a100;
}

.attendance[data-value="73"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(131.4deg);
  -ms-transform: rotate(131.4deg);
  -webkit-transform: rotate(131.4deg);
  transform: rotate(131.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="73"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="73"]::before {
  background-color: #f3a100;
}

.attendance[data-value="74"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(133.2deg);
  -ms-transform: rotate(133.2deg);
  -webkit-transform: rotate(133.2deg);
  transform: rotate(133.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="74"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="74"]::before {
  background-color: #f3a100;
}

.attendance[data-value="75"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="75"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="75"]::before {
  background-color: #f3a100;
}

.attendance[data-value="76"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  -webkit-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="76"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="76"]::before {
  background-color: #f3a100;
}

.attendance[data-value="77"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(138.6deg);
  -ms-transform: rotate(138.6deg);
  -webkit-transform: rotate(138.6deg);
  transform: rotate(138.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="77"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="77"]::before {
  background-color: #f3a100;
}

.attendance[data-value="78"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  -webkit-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="78"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="78"]::before {
  background-color: #f3a100;
}

.attendance[data-value="79"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(142.2deg);
  -ms-transform: rotate(142.2deg);
  -webkit-transform: rotate(142.2deg);
  transform: rotate(142.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="79"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="79"]::before {
  background-color: #f3a100;
}

.attendance[data-value="80"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="80"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="80"]::before {
  background-color: #f3a100;
}

.attendance[data-value="81"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(145.8deg);
  -ms-transform: rotate(145.8deg);
  -webkit-transform: rotate(145.8deg);
  transform: rotate(145.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="81"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="81"]::before {
  background-color: #f3a100;
}

.attendance[data-value="82"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  -webkit-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="82"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="82"]::before {
  background-color: #f3a100;
}

.attendance[data-value="83"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(149.4deg);
  -ms-transform: rotate(149.4deg);
  -webkit-transform: rotate(149.4deg);
  transform: rotate(149.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="83"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="83"]::before {
  background-color: #f3a100;
}

.attendance[data-value="84"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(151.2deg);
  -ms-transform: rotate(151.2deg);
  -webkit-transform: rotate(151.2deg);
  transform: rotate(151.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="84"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="84"]::before {
  background-color: #f3a100;
}

.attendance[data-value="85"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(153deg);
  -ms-transform: rotate(153deg);
  -webkit-transform: rotate(153deg);
  transform: rotate(153deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="85"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="85"]::before {
  background-color: #f3a100;
}

.attendance[data-value="86"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  -webkit-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="86"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="86"]::before {
  background-color: #f3a100;
}

.attendance[data-value="87"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(156.6deg);
  -ms-transform: rotate(156.6deg);
  -webkit-transform: rotate(156.6deg);
  transform: rotate(156.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="87"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="87"]::before {
  background-color: #f3a100;
}

.attendance[data-value="88"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  -webkit-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="88"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="88"]::before {
  background-color: #f3a100;
}

.attendance[data-value="89"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(160.2deg);
  -ms-transform: rotate(160.2deg);
  -webkit-transform: rotate(160.2deg);
  transform: rotate(160.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="89"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="89"]::before {
  background-color: #f3a100;
}

.attendance[data-value="90"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  -webkit-transform: rotate(162deg);
  transform: rotate(162deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="90"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="90"]::before {
  background-color: #f3a100;
}

.attendance[data-value="91"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(163.8deg);
  -ms-transform: rotate(163.8deg);
  -webkit-transform: rotate(163.8deg);
  transform: rotate(163.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="91"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="91"]::before {
  background-color: #f3a100;
}

.attendance[data-value="92"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  -webkit-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="92"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="92"]::before {
  background-color: #f3a100;
}

.attendance[data-value="93"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(167.4deg);
  -ms-transform: rotate(167.4deg);
  -webkit-transform: rotate(167.4deg);
  transform: rotate(167.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="93"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="93"]::before {
  background-color: #f3a100;
}

.attendance[data-value="94"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(169.2deg);
  -ms-transform: rotate(169.2deg);
  -webkit-transform: rotate(169.2deg);
  transform: rotate(169.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="94"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="94"]::before {
  background-color: #f3a100;
}

.attendance[data-value="95"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(171deg);
  -ms-transform: rotate(171deg);
  -webkit-transform: rotate(171deg);
  transform: rotate(171deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="95"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="95"]::before {
  background-color: #f3a100;
}

.attendance[data-value="96"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  -webkit-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="96"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="96"]::before {
  background-color: #f3a100;
}

.attendance[data-value="97"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(174.6deg);
  -ms-transform: rotate(174.6deg);
  -webkit-transform: rotate(174.6deg);
  transform: rotate(174.6deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="97"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="97"]::before {
  background-color: #f3a100;
}

.attendance[data-value="98"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  -webkit-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="98"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="98"]::before {
  background-color: #f3a100;
}

.attendance[data-value="99"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(178.2deg);
  -ms-transform: rotate(178.2deg);
  -webkit-transform: rotate(178.2deg);
  transform: rotate(178.2deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="99"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="99"]::before {
  background-color: #f3a100;
}

.attendance[data-value="100"] {
  -moz-animation: fill-yellow 2s;
  -webkit-animation: fill-yellow 2s;
  animation: fill-yellow 2s;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  transition: All 5s ease;
  border-color: #f3a100;
}
.attendance[data-value="100"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.attendance[data-value="100"]::before {
  background-color: #f3a100;
}

.attendance[data-value="1"] {
  border-color: #f3a100;
}
.attendance[data-value="1"]::before {
  background-color: #f3a100;
}

.attendance[data-value="2"] {
  border-color: #f3a100;
}
.attendance[data-value="2"]::before {
  background-color: #f3a100;
}

.attendance[data-value="3"] {
  border-color: #f3a100;
}
.attendance[data-value="3"]::before {
  background-color: #f3a100;
}

.attendance[data-value="4"] {
  border-color: #f3a100;
}
.attendance[data-value="4"]::before {
  background-color: #f3a100;
}

.attendance[data-value="5"] {
  border-color: #f3a100;
}
.attendance[data-value="5"]::before {
  background-color: #f3a100;
}

.attendance[data-value="6"] {
  border-color: #f3a100;
}
.attendance[data-value="6"]::before {
  background-color: #f3a100;
}

.attendance[data-value="7"] {
  border-color: #f3a100;
}
.attendance[data-value="7"]::before {
  background-color: #f3a100;
}

.attendance[data-value="8"] {
  border-color: #f3a100;
}
.attendance[data-value="8"]::before {
  background-color: #f3a100;
}

.attendance[data-value="9"] {
  border-color: #f3a100;
}
.attendance[data-value="9"]::before {
  background-color: #f3a100;
}

.attendance[data-value="10"] {
  border-color: #f3a100;
}
.attendance[data-value="10"]::before {
  background-color: #f3a100;
}

.attendance[data-value="11"] {
  border-color: #f3a100;
}
.attendance[data-value="11"]::before {
  background-color: #f3a100;
}

.attendance[data-value="12"] {
  border-color: #f3a100;
}
.attendance[data-value="12"]::before {
  background-color: #f3a100;
}

.attendance[data-value="13"] {
  border-color: #f3a100;
}
.attendance[data-value="13"]::before {
  background-color: #f3a100;
}

.attendance[data-value="14"] {
  border-color: #f3a100;
}
.attendance[data-value="14"]::before {
  background-color: #f3a100;
}

.attendance[data-value="15"] {
  border-color: #f3a100;
}
.attendance[data-value="15"]::before {
  background-color: #f3a100;
}

.attendance[data-value="16"] {
  border-color: #f3a100;
}
.attendance[data-value="16"]::before {
  background-color: #f3a100;
}

.attendance[data-value="17"] {
  border-color: #f3a100;
}
.attendance[data-value="17"]::before {
  background-color: #f3a100;
}

.attendance[data-value="18"] {
  border-color: #f3a100;
}
.attendance[data-value="18"]::before {
  background-color: #f3a100;
}

.attendance[data-value="19"] {
  border-color: #f3a100;
}
.attendance[data-value="19"]::before {
  background-color: #f3a100;
}

.attendance[data-value="20"] {
  border-color: #f3a100;
}
.attendance[data-value="20"]::before {
  background-color: #f3a100;
}

.attendance[data-value="21"] {
  border-color: #f3a100;
}
.attendance[data-value="21"]::before {
  background-color: #f3a100;
}

.attendance[data-value="22"] {
  border-color: #f3a100;
}
.attendance[data-value="22"]::before {
  background-color: #f3a100;
}

.attendance[data-value="23"] {
  border-color: #f3a100;
}
.attendance[data-value="23"]::before {
  background-color: #f3a100;
}

.attendance[data-value="24"] {
  border-color: #f3a100;
}
.attendance[data-value="24"]::before {
  background-color: #f3a100;
}

.attendance[data-value="25"] {
  border-color: #f3a100;
}
.attendance[data-value="25"]::before {
  background-color: #f3a100;
}

.attendance[data-value="26"] {
  border-color: #f3a100;
}
.attendance[data-value="26"]::before {
  background-color: #f3a100;
}

.attendance[data-value="27"] {
  border-color: #f3a100;
}
.attendance[data-value="27"]::before {
  background-color: #f3a100;
}

.attendance[data-value="28"] {
  border-color: #f3a100;
}
.attendance[data-value="28"]::before {
  background-color: #f3a100;
}

.attendance[data-value="29"] {
  border-color: #f3a100;
}
.attendance[data-value="29"]::before {
  background-color: #f3a100;
}

.attendance[data-value="30"] {
  border-color: #f3a100;
}
.attendance[data-value="30"]::before {
  background-color: #f3a100;
}

.attendance[data-value="31"] {
  border-color: #f3a100;
}
.attendance[data-value="31"]::before {
  background-color: #f3a100;
}

.attendance[data-value="32"] {
  border-color: #f3a100;
}
.attendance[data-value="32"]::before {
  background-color: #f3a100;
}

.attendance[data-value="33"] {
  border-color: #f3a100;
}
.attendance[data-value="33"]::before {
  background-color: #f3a100;
}

.attendance[data-value="34"] {
  border-color: #f3a100;
}
.attendance[data-value="34"]::before {
  background-color: #f3a100;
}

.attendance[data-value="35"] {
  border-color: #f3a100;
}
.attendance[data-value="35"]::before {
  background-color: #f3a100;
}

.attendance[data-value="36"] {
  border-color: #f3a100;
}
.attendance[data-value="36"]::before {
  background-color: #f3a100;
}

.attendance[data-value="37"] {
  border-color: #f3a100;
}
.attendance[data-value="37"]::before {
  background-color: #f3a100;
}

.attendance[data-value="38"] {
  border-color: #f3a100;
}
.attendance[data-value="38"]::before {
  background-color: #f3a100;
}

.attendance[data-value="39"] {
  border-color: #f3a100;
}
.attendance[data-value="39"]::before {
  background-color: #f3a100;
}

.attendance[data-value="40"] {
  border-color: #f3a100;
}
.attendance[data-value="40"]::before {
  background-color: #f3a100;
}

.attendance[data-value="41"] {
  border-color: #f3a100;
}
.attendance[data-value="41"]::before {
  background-color: #f3a100;
}

.attendance[data-value="42"] {
  border-color: #f3a100;
}
.attendance[data-value="42"]::before {
  background-color: #f3a100;
}

.attendance[data-value="43"] {
  border-color: #f3a100;
}
.attendance[data-value="43"]::before {
  background-color: #f3a100;
}

.attendance[data-value="44"] {
  border-color: #f3a100;
}
.attendance[data-value="44"]::before {
  background-color: #f3a100;
}

.attendance[data-value="45"] {
  border-color: #f3a100;
}
.attendance[data-value="45"]::before {
  background-color: #f3a100;
}

.attendance[data-value="46"] {
  border-color: #f3a100;
}
.attendance[data-value="46"]::before {
  background-color: #f3a100;
}

.attendance[data-value="47"] {
  border-color: #f3a100;
}
.attendance[data-value="47"]::before {
  background-color: #f3a100;
}

.attendance[data-value="48"] {
  border-color: #f3a100;
}
.attendance[data-value="48"]::before {
  background-color: #f3a100;
}

.attendance[data-value="49"] {
  border-color: #f3a100;
}
.attendance[data-value="49"]::before {
  background-color: #f3a100;
}

.attendance[data-value="50"] {
  border-color: #f3a100;
}
.attendance[data-value="50"]::before {
  background-color: #f3a100;
}

.attendance[data-value="51"] {
  border-color: #f3a100;
}
.attendance[data-value="51"]::before {
  background-color: #f3a100;
}

.attendance[data-value="52"] {
  border-color: #f3a100;
}
.attendance[data-value="52"]::before {
  background-color: #f3a100;
}

.attendance[data-value="53"] {
  border-color: #f3a100;
}
.attendance[data-value="53"]::before {
  background-color: #f3a100;
}

.attendance[data-value="54"] {
  border-color: #f3a100;
}
.attendance[data-value="54"]::before {
  background-color: #f3a100;
}

.attendance[data-value="55"] {
  border-color: #f3a100;
}
.attendance[data-value="55"]::before {
  background-color: #f3a100;
}

.attendance[data-value="56"] {
  border-color: #f3a100;
}
.attendance[data-value="56"]::before {
  background-color: #f3a100;
}

.attendance[data-value="57"] {
  border-color: #f3a100;
}
.attendance[data-value="57"]::before {
  background-color: #f3a100;
}

.attendance[data-value="58"] {
  border-color: #f3a100;
}
.attendance[data-value="58"]::before {
  background-color: #f3a100;
}

.attendance[data-value="59"] {
  border-color: #f3a100;
}
.attendance[data-value="59"]::before {
  background-color: #f3a100;
}

.attendance[data-value="60"] {
  border-color: #f3a100;
}
.attendance[data-value="60"]::before {
  background-color: #f3a100;
}

.attendance[data-value="61"] {
  border-color: #f3a100;
}
.attendance[data-value="61"]::before {
  background-color: #f3a100;
}

.attendance[data-value="62"] {
  border-color: #f3a100;
}
.attendance[data-value="62"]::before {
  background-color: #f3a100;
}

.attendance[data-value="63"] {
  border-color: #f3a100;
}
.attendance[data-value="63"]::before {
  background-color: #f3a100;
}

.attendance[data-value="64"] {
  border-color: #f3a100;
}
.attendance[data-value="64"]::before {
  background-color: #f3a100;
}

.attendance[data-value="65"] {
  border-color: #f3a100;
}
.attendance[data-value="65"]::before {
  background-color: #f3a100;
}

.attendance[data-value="66"] {
  border-color: #f3a100;
}
.attendance[data-value="66"]::before {
  background-color: #f3a100;
}

.attendance[data-value="67"] {
  border-color: #f3a100;
}
.attendance[data-value="67"]::before {
  background-color: #f3a100;
}

.attendance[data-value="68"] {
  border-color: #f3a100;
}
.attendance[data-value="68"]::before {
  background-color: #f3a100;
}

.attendance[data-value="69"] {
  border-color: #f3a100;
}
.attendance[data-value="69"]::before {
  background-color: #f3a100;
}

.attendance[data-value="70"] {
  border-color: #f3a100;
}
.attendance[data-value="70"]::before {
  background-color: #f3a100;
}

.attendance[data-value="71"] {
  border-color: #f3a100;
}
.attendance[data-value="71"]::before {
  background-color: #f3a100;
}

.attendance[data-value="72"] {
  border-color: #f3a100;
}
.attendance[data-value="72"]::before {
  background-color: #f3a100;
}

.attendance[data-value="73"] {
  border-color: #f3a100;
}
.attendance[data-value="73"]::before {
  background-color: #f3a100;
}

.attendance[data-value="74"] {
  border-color: #f3a100;
}
.attendance[data-value="74"]::before {
  background-color: #f3a100;
}

.attendance[data-value="75"] {
  border-color: #f3a100;
}
.attendance[data-value="75"]::before {
  background-color: #f3a100;
}

.attendance[data-value="76"] {
  border-color: #f3a100;
}
.attendance[data-value="76"]::before {
  background-color: #f3a100;
}

.attendance[data-value="77"] {
  border-color: #f3a100;
}
.attendance[data-value="77"]::before {
  background-color: #f3a100;
}

.attendance[data-value="78"] {
  border-color: #f3a100;
}
.attendance[data-value="78"]::before {
  background-color: #f3a100;
}

.attendance[data-value="79"] {
  border-color: #f3a100;
}
.attendance[data-value="79"]::before {
  background-color: #f3a100;
}

.attendance[data-value="80"] {
  border-color: #f3a100;
}
.attendance[data-value="80"]::before {
  background-color: #f3a100;
}

@-moz-keyframes fill-yellow {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #f3a100;
  }
  50% {
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #f3a100;
  }
}
@-webkit-keyframes fill-yellow {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #f3a100;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #f3a100;
  }
}
@keyframes fill-yellow {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #f3a100;
  }
  50% {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #f3a100;
  }
}

/* Punctuality Chart */

.punctuality[data-value="1"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(1.8deg);
  -ms-transform: rotate(1.8deg);
  -webkit-transform: rotate(1.8deg);
  transform: rotate(1.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="1"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="1"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="2"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  -webkit-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="2"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="2"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="3"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(5.4deg);
  -ms-transform: rotate(5.4deg);
  -webkit-transform: rotate(5.4deg);
  transform: rotate(5.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="3"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="3"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="4"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  -webkit-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="4"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="4"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="5"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(9deg);
  -ms-transform: rotate(9deg);
  -webkit-transform: rotate(9deg);
  transform: rotate(9deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="5"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="5"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="6"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  -webkit-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="6"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="6"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="7"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(12.6deg);
  -ms-transform: rotate(12.6deg);
  -webkit-transform: rotate(12.6deg);
  transform: rotate(12.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="7"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="7"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="8"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  -webkit-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="8"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="8"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="9"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(16.2deg);
  -ms-transform: rotate(16.2deg);
  -webkit-transform: rotate(16.2deg);
  transform: rotate(16.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="9"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="9"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="10"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
  transform: rotate(18deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="10"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="10"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="11"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(19.8deg);
  -ms-transform: rotate(19.8deg);
  -webkit-transform: rotate(19.8deg);
  transform: rotate(19.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="11"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="11"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="12"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  -webkit-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="12"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="12"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="13"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(23.4deg);
  -ms-transform: rotate(23.4deg);
  -webkit-transform: rotate(23.4deg);
  transform: rotate(23.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="13"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="13"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="14"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  -webkit-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="14"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="14"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="15"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(27deg);
  -ms-transform: rotate(27deg);
  -webkit-transform: rotate(27deg);
  transform: rotate(27deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="15"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="15"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="16"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  -webkit-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="16"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="16"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="17"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(30.6deg);
  -ms-transform: rotate(30.6deg);
  -webkit-transform: rotate(30.6deg);
  transform: rotate(30.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="17"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="17"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="18"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  -webkit-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="18"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="18"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="19"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(34.2deg);
  -ms-transform: rotate(34.2deg);
  -webkit-transform: rotate(34.2deg);
  transform: rotate(34.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="19"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="19"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="20"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -webkit-transform: rotate(36deg);
  transform: rotate(36deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="20"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="20"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="21"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(37.8deg);
  -ms-transform: rotate(37.8deg);
  -webkit-transform: rotate(37.8deg);
  transform: rotate(37.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="21"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="21"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="22"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  -webkit-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="22"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="22"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="23"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(41.4deg);
  -ms-transform: rotate(41.4deg);
  -webkit-transform: rotate(41.4deg);
  transform: rotate(41.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="23"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="23"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="24"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -webkit-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="24"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="24"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="25"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="25"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="25"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="26"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(46.8deg);
  -ms-transform: rotate(46.8deg);
  -webkit-transform: rotate(46.8deg);
  transform: rotate(46.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="26"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="26"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="27"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(48.6deg);
  -ms-transform: rotate(48.6deg);
  -webkit-transform: rotate(48.6deg);
  transform: rotate(48.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="27"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="27"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="28"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  -webkit-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="28"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="28"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="29"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(52.2deg);
  -ms-transform: rotate(52.2deg);
  -webkit-transform: rotate(52.2deg);
  transform: rotate(52.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="29"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="29"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="30"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  -webkit-transform: rotate(54deg);
  transform: rotate(54deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="30"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="30"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="31"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(55.8deg);
  -ms-transform: rotate(55.8deg);
  -webkit-transform: rotate(55.8deg);
  transform: rotate(55.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="31"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="31"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="32"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  -webkit-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="32"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="32"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="33"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(59.4deg);
  -ms-transform: rotate(59.4deg);
  -webkit-transform: rotate(59.4deg);
  transform: rotate(59.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="33"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="33"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="34"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  -webkit-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="34"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="34"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="35"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(63deg);
  -ms-transform: rotate(63deg);
  -webkit-transform: rotate(63deg);
  transform: rotate(63deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="35"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="35"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="36"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  -webkit-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="36"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="36"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="37"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(66.6deg);
  -ms-transform: rotate(66.6deg);
  -webkit-transform: rotate(66.6deg);
  transform: rotate(66.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="37"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="37"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="38"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  -webkit-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="38"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="38"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="39"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(70.2deg);
  -ms-transform: rotate(70.2deg);
  -webkit-transform: rotate(70.2deg);
  transform: rotate(70.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="39"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="39"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="40"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -webkit-transform: rotate(72deg);
  transform: rotate(72deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="40"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="40"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="41"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(73.8deg);
  -ms-transform: rotate(73.8deg);
  -webkit-transform: rotate(73.8deg);
  transform: rotate(73.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="41"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="41"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="42"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(75.6deg);
  -ms-transform: rotate(75.6deg);
  -webkit-transform: rotate(75.6deg);
  transform: rotate(75.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="42"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="42"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="43"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(77.4deg);
  -ms-transform: rotate(77.4deg);
  -webkit-transform: rotate(77.4deg);
  transform: rotate(77.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="43"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="43"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="44"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  -webkit-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="44"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="44"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="45"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(81deg);
  -ms-transform: rotate(81deg);
  -webkit-transform: rotate(81deg);
  transform: rotate(81deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="45"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="45"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="46"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  -webkit-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="46"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="46"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="47"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(84.6deg);
  -ms-transform: rotate(84.6deg);
  -webkit-transform: rotate(84.6deg);
  transform: rotate(84.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="47"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="47"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="48"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  -webkit-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="48"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="48"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="49"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(88.2deg);
  -ms-transform: rotate(88.2deg);
  -webkit-transform: rotate(88.2deg);
  transform: rotate(88.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="49"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="49"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="50"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="50"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="50"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="51"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(91.8deg);
  -ms-transform: rotate(91.8deg);
  -webkit-transform: rotate(91.8deg);
  transform: rotate(91.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="51"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="51"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="52"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(93.6deg);
  -ms-transform: rotate(93.6deg);
  -webkit-transform: rotate(93.6deg);
  transform: rotate(93.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="52"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="52"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="53"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(95.4deg);
  -ms-transform: rotate(95.4deg);
  -webkit-transform: rotate(95.4deg);
  transform: rotate(95.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="53"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="53"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="54"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  -webkit-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="54"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="54"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="55"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(99deg);
  -ms-transform: rotate(99deg);
  -webkit-transform: rotate(99deg);
  transform: rotate(99deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="55"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="55"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="56"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  -webkit-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="56"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="56"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="57"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(102.6deg);
  -ms-transform: rotate(102.6deg);
  -webkit-transform: rotate(102.6deg);
  transform: rotate(102.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="57"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="57"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="58"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  -webkit-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="58"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="58"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="59"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(106.2deg);
  -ms-transform: rotate(106.2deg);
  -webkit-transform: rotate(106.2deg);
  transform: rotate(106.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="59"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="59"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="60"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -webkit-transform: rotate(108deg);
  transform: rotate(108deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="60"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="60"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="61"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(109.8deg);
  -ms-transform: rotate(109.8deg);
  -webkit-transform: rotate(109.8deg);
  transform: rotate(109.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="61"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="61"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="62"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(111.6deg);
  -ms-transform: rotate(111.6deg);
  -webkit-transform: rotate(111.6deg);
  transform: rotate(111.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="62"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="62"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="63"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(113.4deg);
  -ms-transform: rotate(113.4deg);
  -webkit-transform: rotate(113.4deg);
  transform: rotate(113.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="63"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="63"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="64"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  -webkit-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="64"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="64"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="65"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(117deg);
  -ms-transform: rotate(117deg);
  -webkit-transform: rotate(117deg);
  transform: rotate(117deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="65"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="65"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="66"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  -webkit-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="66"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="66"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="67"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(120.6deg);
  -ms-transform: rotate(120.6deg);
  -webkit-transform: rotate(120.6deg);
  transform: rotate(120.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="67"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="67"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="68"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  -webkit-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="68"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="68"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="69"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(124.2deg);
  -ms-transform: rotate(124.2deg);
  -webkit-transform: rotate(124.2deg);
  transform: rotate(124.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="69"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="69"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="70"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  -webkit-transform: rotate(126deg);
  transform: rotate(126deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="70"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="70"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="71"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(127.8deg);
  -ms-transform: rotate(127.8deg);
  -webkit-transform: rotate(127.8deg);
  transform: rotate(127.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="71"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="71"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="72"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  -webkit-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="72"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="72"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="73"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(131.4deg);
  -ms-transform: rotate(131.4deg);
  -webkit-transform: rotate(131.4deg);
  transform: rotate(131.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="73"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="73"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="74"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(133.2deg);
  -ms-transform: rotate(133.2deg);
  -webkit-transform: rotate(133.2deg);
  transform: rotate(133.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="74"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="74"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="75"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="75"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="75"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="76"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  -webkit-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="76"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="76"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="77"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(138.6deg);
  -ms-transform: rotate(138.6deg);
  -webkit-transform: rotate(138.6deg);
  transform: rotate(138.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="77"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="77"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="78"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  -webkit-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="78"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="78"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="79"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(142.2deg);
  -ms-transform: rotate(142.2deg);
  -webkit-transform: rotate(142.2deg);
  transform: rotate(142.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="79"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="79"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="80"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="80"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="80"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="81"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(145.8deg);
  -ms-transform: rotate(145.8deg);
  -webkit-transform: rotate(145.8deg);
  transform: rotate(145.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="81"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="81"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="82"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  -webkit-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="82"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="82"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="83"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(149.4deg);
  -ms-transform: rotate(149.4deg);
  -webkit-transform: rotate(149.4deg);
  transform: rotate(149.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="83"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="83"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="84"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(151.2deg);
  -ms-transform: rotate(151.2deg);
  -webkit-transform: rotate(151.2deg);
  transform: rotate(151.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="84"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="84"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="85"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(153deg);
  -ms-transform: rotate(153deg);
  -webkit-transform: rotate(153deg);
  transform: rotate(153deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="85"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="85"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="86"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  -webkit-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="86"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="86"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="87"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(156.6deg);
  -ms-transform: rotate(156.6deg);
  -webkit-transform: rotate(156.6deg);
  transform: rotate(156.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="87"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="87"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="88"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  -webkit-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="88"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="88"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="89"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(160.2deg);
  -ms-transform: rotate(160.2deg);
  -webkit-transform: rotate(160.2deg);
  transform: rotate(160.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="89"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="89"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="90"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  -webkit-transform: rotate(162deg);
  transform: rotate(162deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="90"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="90"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="91"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(163.8deg);
  -ms-transform: rotate(163.8deg);
  -webkit-transform: rotate(163.8deg);
  transform: rotate(163.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="91"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="91"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="92"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  -webkit-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="92"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="92"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="93"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(167.4deg);
  -ms-transform: rotate(167.4deg);
  -webkit-transform: rotate(167.4deg);
  transform: rotate(167.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="93"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="93"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="94"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(169.2deg);
  -ms-transform: rotate(169.2deg);
  -webkit-transform: rotate(169.2deg);
  transform: rotate(169.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="94"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="94"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="95"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(171deg);
  -ms-transform: rotate(171deg);
  -webkit-transform: rotate(171deg);
  transform: rotate(171deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="95"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="95"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="96"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  -webkit-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="96"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="96"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="97"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(174.6deg);
  -ms-transform: rotate(174.6deg);
  -webkit-transform: rotate(174.6deg);
  transform: rotate(174.6deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="97"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="97"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="98"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  -webkit-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="98"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="98"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="99"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(178.2deg);
  -ms-transform: rotate(178.2deg);
  -webkit-transform: rotate(178.2deg);
  transform: rotate(178.2deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="99"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="99"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="100"] {
  -moz-animation: fill-blue 2s;
  -webkit-animation: fill-blue 2s;
  animation: fill-blue 2s;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  transition: All 5s ease;
  border-color: #3bafda;
}
.punctuality[data-value="100"]:after {
  content: '';
  position: absolute;
  left: -40px;
  top: 5px;
}
.punctuality[data-value="100"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="1"] {
  border-color: #3bafda;
}
.punctuality[data-value="1"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="2"] {
  border-color: #3bafda;
}
.punctuality[data-value="2"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="3"] {
  border-color: #3bafda;
}
.punctuality[data-value="3"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="4"] {
  border-color: #3bafda;
}
.punctuality[data-value="4"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="5"] {
  border-color: #3bafda;
}
.punctuality[data-value="5"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="6"] {
  border-color: #3bafda;
}
.punctuality[data-value="6"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="7"] {
  border-color: #3bafda;
}
.punctuality[data-value="7"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="8"] {
  border-color: #3bafda;
}
.punctuality[data-value="8"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="9"] {
  border-color: #3bafda;
}
.punctuality[data-value="9"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="10"] {
  border-color: #3bafda;
}
.punctuality[data-value="10"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="11"] {
  border-color: #3bafda;
}
.punctuality[data-value="11"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="12"] {
  border-color: #3bafda;
}
.punctuality[data-value="12"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="13"] {
  border-color: #3bafda;
}
.punctuality[data-value="13"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="14"] {
  border-color: #3bafda;
}
.punctuality[data-value="14"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="15"] {
  border-color: #3bafda;
}
.punctuality[data-value="15"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="16"] {
  border-color: #3bafda;
}
.punctuality[data-value="16"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="17"] {
  border-color: #3bafda;
}
.punctuality[data-value="17"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="18"] {
  border-color: #3bafda;
}
.punctuality[data-value="18"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="19"] {
  border-color: #3bafda;
}
.punctuality[data-value="19"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="20"] {
  border-color: #3bafda;
}
.punctuality[data-value="20"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="21"] {
  border-color: #3bafda;
}
.punctuality[data-value="21"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="22"] {
  border-color: #3bafda;
}
.punctuality[data-value="22"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="23"] {
  border-color: #3bafda;
}
.punctuality[data-value="23"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="24"] {
  border-color: #3bafda;
}
.punctuality[data-value="24"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="25"] {
  border-color: #3bafda;
}
.punctuality[data-value="25"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="26"] {
  border-color: #3bafda;
}
.punctuality[data-value="26"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="27"] {
  border-color: #3bafda;
}
.punctuality[data-value="27"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="28"] {
  border-color: #3bafda;
}
.punctuality[data-value="28"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="29"] {
  border-color: #3bafda;
}
.punctuality[data-value="29"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="30"] {
  border-color: #3bafda;
}
.punctuality[data-value="30"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="31"] {
  border-color: #3bafda;
}
.punctuality[data-value="31"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="32"] {
  border-color: #3bafda;
}
.punctuality[data-value="32"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="33"] {
  border-color: #3bafda;
}
.punctuality[data-value="33"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="34"] {
  border-color: #3bafda;
}
.punctuality[data-value="34"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="35"] {
  border-color: #3bafda;
}
.punctuality[data-value="35"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="36"] {
  border-color: #3bafda;
}
.punctuality[data-value="36"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="37"] {
  border-color: #3bafda;
}
.punctuality[data-value="37"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="38"] {
  border-color: #3bafda;
}
.punctuality[data-value="38"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="39"] {
  border-color: #3bafda;
}
.punctuality[data-value="39"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="40"] {
  border-color: #3bafda;
}
.punctuality[data-value="40"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="41"] {
  border-color: #3bafda;
}
.punctuality[data-value="41"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="42"] {
  border-color: #3bafda;
}
.punctuality[data-value="42"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="43"] {
  border-color: #3bafda;
}
.punctuality[data-value="43"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="44"] {
  border-color: #3bafda;
}
.punctuality[data-value="44"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="45"] {
  border-color: #3bafda;
}
.punctuality[data-value="45"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="46"] {
  border-color: #3bafda;
}
.punctuality[data-value="46"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="47"] {
  border-color: #3bafda;
}
.punctuality[data-value="47"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="48"] {
  border-color: #3bafda;
}
.punctuality[data-value="48"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="49"] {
  border-color: #3bafda;
}
.punctuality[data-value="49"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="50"] {
  border-color: #3bafda;
}
.punctuality[data-value="50"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="51"] {
  border-color: #3bafda;
}
.punctuality[data-value="51"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="52"] {
  border-color: #3bafda;
}
.punctuality[data-value="52"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="53"] {
  border-color: #3bafda;
}
.punctuality[data-value="53"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="54"] {
  border-color: #3bafda;
}
.punctuality[data-value="54"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="55"] {
  border-color: #3bafda;
}
.punctuality[data-value="55"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="56"] {
  border-color: #3bafda;
}
.punctuality[data-value="56"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="57"] {
  border-color: #3bafda;
}
.punctuality[data-value="57"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="58"] {
  border-color: #3bafda;
}
.punctuality[data-value="58"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="59"] {
  border-color: #3bafda;
}
.punctuality[data-value="59"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="60"] {
  border-color: #3bafda;
}
.punctuality[data-value="60"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="61"] {
  border-color: #3bafda;
}
.punctuality[data-value="61"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="62"] {
  border-color: #3bafda;
}
.punctuality[data-value="62"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="63"] {
  border-color: #3bafda;
}
.punctuality[data-value="63"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="64"] {
  border-color: #3bafda;
}
.punctuality[data-value="64"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="65"] {
  border-color: #3bafda;
}
.punctuality[data-value="65"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="66"] {
  border-color: #3bafda;
}
.punctuality[data-value="66"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="67"] {
  border-color: #3bafda;
}
.punctuality[data-value="67"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="68"] {
  border-color: #3bafda;
}
.punctuality[data-value="68"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="69"] {
  border-color: #3bafda;
}
.punctuality[data-value="69"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="70"] {
  border-color: #3bafda;
}
.punctuality[data-value="70"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="71"] {
  border-color: #3bafda;
}
.punctuality[data-value="71"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="72"] {
  border-color: #3bafda;
}
.punctuality[data-value="72"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="73"] {
  border-color: #3bafda;
}
.punctuality[data-value="73"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="74"] {
  border-color: #3bafda;
}
.punctuality[data-value="74"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="75"] {
  border-color: #3bafda;
}
.punctuality[data-value="75"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="76"] {
  border-color: #3bafda;
}
.punctuality[data-value="76"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="77"] {
  border-color: #3bafda;
}
.punctuality[data-value="77"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="78"] {
  border-color: #3bafda;
}
.punctuality[data-value="78"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="79"] {
  border-color: #3bafda;
}
.punctuality[data-value="79"]::before {
  background-color: #3bafda;
}

.punctuality[data-value="80"] {
  border-color: #3bafda;
}
.punctuality[data-value="80"]::before {
  background-color: #3bafda;
}

@-moz-keyframes fill-blue {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #3bafda;
  }
  50% {
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #3bafda;
  }
}
@-webkit-keyframes fill-blue {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #3bafda;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #3bafda;
  }
}
@keyframes fill-blue {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color: #3bafda;
  }
  50% {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color: #3bafda;
  }
}

@media (max-width: 1200px) {
  .pie-wrapper {
    width: 100px;
    height: 50px;
  }
  .pie-wrapper .arc, .pie-wrapper:before {
    width: 100px;
    height: 50px;
  }
  .pie-wrapper .score {
    margin-top: 25px;
  }
  .attendance-screen .attendance-card {
    height: 108px;
  }
  .attendance-screen .attendance-card .circle {
    width: 26px;
    height: 26px;
  }
.attendance-screen .attendance-card .circle img {
    width: 11px;
  }
}