
div#checklist ul {
	list-style: none;
	padding-left: 0px;
	margin-bottom: 0px;
}

div#checklist li {
  padding-bottom: 10px;
  margin-left: 10px;
}

#checklist li:hover a.delete {opacity: 1;}

span.checklist-item {
  display: block;
  margin-bottom: 5px;
}

.checklist-item.show {
  height: 24px;
  display: flex;
  width: fit-content;
  vertical-align: super;
}

.checklist-item.show .checklist-new-only.save-new-by-button { vertical-align: bottom !important; }

span.checklist-subject.is-done-checklist-item, span.checklist-item.is-done-checklist-item, #checklist_items li.is-done-checklist-item  {
  text-decoration: line-through;
  color: #999;
}

span.checklist-remove { margin-left: 2px;}

span.checklist-remove:hover  {opacity: 1;}

span.checklist-edit-box input {
    margin-right: 6px;
    width: 40%;
    -moz-transition: top 0.2s;
    -o-transition: top 0.2s;
    -webkit-transition: top 0.2s;
    transition: top 0.2s;
}

.invalid span.checklist-edit-box input {
  border-color: #b94a48;
  color: #b94a48;
}

.invalid span.checklist-edit-box input:focus {
  border-color: #953b39;
  color: #b94a48;
}

span.checklist-edit-reset-button {
    cursor: pointer;
    color: #2996CC;
}

span.checklist-subject {
  cursor: pointer;
  pointer-events: none;
  line-height: 24px;
}


.invalid .checklist-edit-save-button,
span.checklist-item.show .checklist-edit,
span.checklist-item.show .checklist-edit-only,
span.checklist-item.show .checklist-new,
span.checklist-item.show .checklist-new-only,
span.checklist-item.edit .checklist-show,
span.checklist-item.edit .checklist-new-only,
span.checklist-item.new .checklist-edit-only,
span.checklist-item.new .checklist-show-or-edit,
span.checklist-item.new .checklist-show-only,
span.checklist-item.edit .checklist-show-only {
  display: none;
}

#checklist_form {
  width: 100%;
  margin: 0px 0 24px 0;
  display: flex;
  flex-direction: column;
  cursor: alias;
}

#checklist_form > label {
  margin-top: 0px !important;
}

#checklist_form .checklist-item.new {
  display: none;
}

.show-checklist,
#template-link.show-checklist { display: none !important; }

.checklist-list {
  display: inline-block;
  vertical-align: text-top;
  margin: 0 5px;
}

@media all and (max-width: 899px) {
  .tabular #checklist_form input.edit-box {
    width: calc(100% - 36px) !important;
  }
}
