@font-face {
  font-family: "Digital-7";
  src: url(DIGITAL-7.TTF) format("TTF");
  font-weight: 400;
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

span {
  background-color: rgb(184, 219, 255);

  padding: 5px 20px;

  border-radius: 5px;

  font-size: medium;
}

table {
  text-align: center;
}

.digital {
  font-family: "Digital-7", Arial, sans-serif;

  font-size: 4rem;

  display: block;

  text-align: center;
}

.along-progress {
  display: flex;

  width: 100%;

  justify-content: space-between;
}

.along-progress div {
  font-size: 8px;
}

#time_meter {
  width: 100%;
}

progress[value] {
  -webkit-appearance: none;

  appearance: none;

  width: 250px;

  height: 20px;

  /* background-color: #eee; */

  background-image: -webkit-linear-gradient(
      -45deg,

      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,

      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
    -webkit-linear-gradient(left, #09c, #f44);

  border-radius: 2px;

  background-size: 35px 20px, 100% 100%, 100% 100%;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

.red {
  color: #f44;

  font-weight: 900;
}

.progress {
  height: 1.5rem;

  overflow: hidden;

  background-color: grey;

  border-radius: 0.25rem;
}

.progress-bar {
  display: inline-block;

  height: 100%;
}

.yellow {
  background-color: #f0ad4e !important;
}

.success-frame {
  outline: 3px solid var(--success);
}

.error-frame {
  outline: 3px solid var(--danger);
}

.progress-bar div {
  position: absolute;

  height: 200px;

  width: 200px;

  border-radius: 50%;
}

.progress-bar div span {
  position: absolute;

  font-family: Arial;

  font-size: 35px;

  line-height: 150px;

  height: 170px;

  width: 170px;

  left: 15px;

  top: 15px;

  text-align: center;

  border-radius: 50%;

  /* background-color: white; */
}

.progress-bar .background {
  background-color: #109fb6;
}

.progress-bar .rotate {
  clip: rect(0 100px 200px 0);

  background-color: pink;
}

.progress-bar .left {
  clip: rect(0 100px 200px 0);

  opacity: 1;

  background-color: hotpink;
}

.progress-bar .right {
  clip: rect(0 100px 200px 0);

  transform: rotate(180deg);

  opacity: 0;

  background-color: #109fb6;
}

.green {
  background-color: #109fb6;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}