.es-button{

    border: .1rem solid;
    border-radius: .1rem;
    color: var(--md-primary-fg-color);
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    padding: .625em 2em;
    transition: color 125ms, background-color 125ms, border-color 125ms;
}

.es-button:hover{
	background: var(--md-accent-fg-color);
	border-color: var(--md-accent-fg-color);
	color: var(--md-accent-bg-color);
}

/* Material Design inspired custom checkbox */
.es-checkbox {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--md-accent-fg-color);;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.es-checkbox:hover {
  border-color: var(--md-primary-fg-color);
}

.es-checkbox:focus {
  box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.3);
}

.es-checkbox:checked {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

.es-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Completion message styles */
#completion-message {
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  padding: 12px;
  margin-top: 15px;
  border-radius: 4px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#completion-message.success {
  background-color: var(--md-accent-fg-color-light);
  color: #0a952c;
}

#completion-message.failure {
  background-color: var(--error-color-light);
  color: #a11e1e;
}