.todo-completing {
  display: inline-block;
  animation: todoCompleting 0.5s ease-out forwards !important;
  transform-origin: center center;
}

.todo-completed * {
  text-decoration: line-through;
  color: black !important;
  opacity: 0.5;
}

.todo-completed .todo-indent {
  text-decoration: none #10B981 !important;
}

@keyframes todoCompleting {
  0% {
    opacity: 1;
    text-decoration: none;
    transform: translateY(0);
  }
  20% {
    transform: translateY(-1px);
  }
  40% {
    transform: translateY(1px);
    text-decoration: line-through;
  }
  60% {
    transform: translateY(-0.5px);
  }
  80% {
    transform: translateY(0.5px);
  }
  100% {
    text-decoration: line-through;
    opacity: 0.5;
    transform: translateY(0);
  }
}

.todo-tag {
  color: #10B981;
}

.todo-date {
  color: #10B981;
}

.todo-time-estimate {
  color: #aBb2d0;
}

.todo-overdue .todo-date {
  color: #EF4444;
}

.todo-due-today .todo-date {
  color: #F59E0B;
}

.todo-invalid {
  text-decoration-line: underline;
  text-decoration-color: #EF4444;
  text-decoration-style: wavy;
}

.todo-header {
  font-size: 1.25rem;
  font-weight: 700;
}

.todo-checkbox {
  cursor: pointer;
}

.todo-filtered {
  background-color: greenyellow;
}

.cm-editor {
  height: 100%;
  min-height: 0; /* Important for flex children */
  display: flex;
  flex-direction: column;
}

.cm-scroller {
  flex: 1 1 auto;
  height: 100%;
}

/* Timer widget styles */
.timer-running .cm-line {
 opacity : 0.3;
}

.timer-running .cm-line.cm-timer {
 opacity : 1;
}

.countdown-timer {
  margin-left: 12px;
  color: black;
  padding: 2px 5px;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  outline: none;
}

.countdown-timer.running {
  margin-left: 12px;
  color: black;
  padding: 2px 5px;
  letter-spacing: 1px;
}

/* blink finished output */
.countdown-timer.finished {
  animation: blink 1s infinite;
  color: red;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.todo-url {
  color: #3B82F6;
  text-decoration: underline;
  cursor: pointer;
}

.todo-url:hover {
  color: #1E40AF;
}