.countdown {
  background: inherit;
  position: absolute;
  cursor: pointer;
  font-size: 3em;
  line-height: 1;
  border-color: #ddd;
  border-width: 3px;
  border-style: solid;
  border-radius: 15px;
  box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.4);
  -webkit-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.4);
  margin: 0.6em;
  padding: 10px 15px;
  text-align: center;
}
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown .countdown-time {
  background: none;
  font-size: 100%;
  padding: 0;
}
.countdown-digits {
  color: inherit;
}
.countdown.running {
  border-color: #3C9A5F;
  background-color: #43AC6A;
}
.countdown.running .countdown-digits {
  color: #102B1A;
}
.countdown.finished {
  border-color: #D83A20;
  background-color: #F04124;
}
.countdown.finished .countdown-digits {
  color: #3C1009;
}
.countdown.running.warning {
  border-color: #CFAE24;
  background-color: #E6C229;
}
.countdown.running.warning .countdown-digits {
  color: #39300A;
}

@-webkit-keyframes blink {
	from {opacity: 1}
	50%  {opacity: 0.1}
	to   {opacity: 1}
}

@keyframes blink {
	from {opacity: 1}
	50%  {opacity: 0.1}
	to   {opacity: 1}
}

.countdown.running.blink-colon .countdown-digits.colon {
  -webkit-animation: blink 2s steps(1, end) 0s infinite;
          animation: blink 2s steps(1, end) 0s infinite;
}