.checklist-wrapper {
  margin-bottom: 20px;
  position: relative;
}

.checklist-wrapper .copy {
  position: absolute;
  top: 0px;
  right: 5px;
  display: none;
  cursor: pointer;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 0px 3px;
  font-size: 10px;
}

.checklist-wrapper .copy:hover {
  background: #ffc;
}

.checklist-wrapper .copy:active {
  background: #eee;
}

.checklist-wrapper .warning {
  color: #f00;
  text-align: center;
}

.checklist-wrapper .subject {
  padding-left: 5px;
  margin-left: -5px;

  margin-bottom: 5px;
  font-weight: bold;
  border: none; 
  outline: none;
  width: 100%;
  background: transparent;
}

.checklist-wrapper.editable .subject:hover {
  background: #eee;
}
.checklist-wrapper.editable .subject:focus {
  background: #eee;
}

.checklist-wrapper .progress {
  margin-bottom: 5px;
}

.checklist-wrapper .progress-bar {
  background: #cec;
  color: #555;
  text-align: left;
}

.checklist-wrapper .progress-bar .text {
  padding-left: 5px;
}

.checklist {
  padding-left: 0px;
  list-style-type: none;
  padding-top: 5px;
}

.checklist .item {
  position: relative;
  line-height: 1.4;
}

.checklist .item.checked {
  color: #999;
}



/* sortable */
.checklist .handle {
  position: absolute;
  margin-top: 3px;
  left: -16px;  /* 避免 li 內縮太多 */
  padding-left: 5px; padding-right:5px;  /* enlarge sensor area */
  display: none;
  color: #ccc;
  cursor: pointer;
}

.checklist .sortable-highlight {
  border: 1px solid #ccc;
  line-height: 1.3em;
  height: 1.5em;
  background-color: #f0f0f0;
}


/* checkbox */
.checklist .checkbox {
  position: absolute;
  left: 0px;
}
.checklist input[type=checkbox][disabled]{
  cursor:default;
}

/* sn */
.checklist .no {
  display: inline-block;
  padding-left: 18px;  /* margin 不能點擊 */
  cursor: default;
}

/* content */
.checklist .content {
  padding-left: 2px;
  border: none;
  cursor: default;
  background: transparent;
}

.checklist .prefix {
  float:left;
  display:block;
}

.checklist .post {
  float:right;
  display:block;
}

.checklist .middle input {
  width:100%;
}

.checklist .middle {
  overflow:hidden;
  margin-right: 10px;
}

/* hide sn */
.checklist.hide-no .no {
  display: none;
  padding-left: 0px;  /* margin 不能點擊 */
}

/* content */
.checklist.hide-no .content {
  margin-left: 20px;
  width: 90%;  /* 先簡單處理，手機和電腦大致上 ok */
}


.editable .content {
  cursor: auto;
}
.checklist .content:focus {
  /* outline: none; */
  background-color: #eee;
}


/* add */
.checklist-wrapper .tools {
  font-size: 0.9em;
  padding-left: 15px;
}

.checklist-wrapper .tools a {
  padding: 0px 5px;
}

.checklist-wrapper .tools  label {
  display:inline;
  margin-bottom: 0;
  font-weight: normal;
}



/* delete */
.checklist .delete {
  position: relative;
  top: 3px;
  right: 0px;
  display: none;
  cursor: pointer;
  color: #f00;
}


/* quick-input */
.checklist-wrapper .quick-input {
  margin-left: 35px;
  display: none;
  font-size: 0.9em;
}

.checklist-wrapper .quick-input textarea {
  font-size: 1em;
}


/* mode: read_only, checkable */
.readonly .subject:hover {
  background: #fff;
}

.readonly .content:focus {
  outline: none;
  background-color: #fff;
}

.readonly .tools {
  display: none;
}


/* mode: edit_only */
.edit_only .progress {
  display: none;
}

.subject.hide {
  display: none;
}

.progress.hide {
  display: none;
}