.gauge-wrapper {
  display: none;
  position: relative;
  margin: 10px 10px 20px 10px;
  margin-right: 10px;
  letter-spacing: normal;
  height: 60px;
  padding-bottom: 10px;
  border-bottom: solid 1px #e1e1e1;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .gauge-wrapper {
    display: block;
  }
}
@media only screen and (min-width: 1024px) {
  .gauge-wrapper {
    display: block;
  }
}
.gauge-wrapper .gauge {
  position: absolute;
}
.gauge-wrapper .gauge-text {
  position: absolute;
  bottom: 5px;
  left: 145px;
  font-weight: bold;
}
.gauge-wrapper:after {
  clear: both;
  content: '';
  display: table;
}
/* RESET STYLES
�������������������������������������������������� */
.gauge-arc {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  position: relative;
  width: 120px;
  height: 60px;
  overflow: hidden;
}
.gauge-arc *,
.gauge-arc::before {
  box-sizing: border-box;
}
/* gauge-arc STYLES
�������������������������������������������������� */
.gauge-arc::before,
.gauge-arc::after {
  position: absolute;
}
.gauge-arc::before {
  content: '';
  width: inherit;
  height: inherit;
  border: 20px solid rgba(211, 211, 211, 0.3);
  border-bottom: none;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
}
.gauge-arc::after {
  /*content: 'Booked';*/
  left: 50%;
  text-align: center;
  line-height: 16px;
  bottom: 0px;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: bold;
  color: #000;
}
.gauge-arc li {
  position: absolute;
  top: 100%;
  left: 0;
  width: inherit;
  height: inherit;
  border: 20px solid;
  border-top: none;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.gauge-arc li:nth-child(1) {
  z-index: 4;
  animation-name: rotate-one;
}
/* ANIMATIONS
�������������������������������������������������� */
/*
    This style is inlined
    @keyframes rotate-one {
    100% {
    transform: rotate(21.6deg);
    *
     * 12% => 21.6deg
     
  }
}*/
@keyframes fade-in {
  0%,
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}