.circle-timer-wrapper {
  display: inline-block;
  position: relative;
  text-align: center;
}

.circle-timer {
  transform: rotate(-90deg);
}

.circle-timer circle {
  fill: none;
  stroke-width: 6;
}

.circle-timer .bg {
  stroke: #eee;
}

.circle-timer .progress {
  stroke: #3498db;
  stroke-dasharray: 339.292; /* 2 * π * r (r = 54) */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
}
.timer-message {
  display: none;
  font-size: 20px;
  font-weight: bold;
  color: #2ecc71;
  margin-top: 10px;
}