body {
     font-family:Arial, Sans-Serif;
}

div#container div#header h1{ /* the heading */
    display: block;
}


#container{   /* the container that holds our AJAX loaded content */
    max-width: 768px;
	background-color: #ffffff;
    margin-top:20px;
    border:1px dashed #cccccc;
    padding:10px;
    -moz-border-radius: 5px;    /* rounding the element */
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.checklist-item {
  margin: 5px 0;
}

.indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
}

.indicator.done {
  background-color: green;
}

.indicator.pending {
  background-color: red;
}

.check-step.complete { background: #c8e6c9; }
.check-step.pending  { background: #ffe0b2; }
.check-step.locked   { background: #ef9a9a; }


.checklist-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}
.check-item {
  padding: 6px 12px;
  border-radius: 5px;
  background: #eee;
}
.check-item.todo {
  background-color: #ffcccc;
}
.check-item.done {
  background-color: #ccffcc;
}

input[style*="display: none"], label[style*="display: none"] {
  display: none !important;
}