.listr-wrapper {
  position: relative;
  display: inline-table;
  width: 430px;
  background: rgba(255, 255, 255, 0.7);
  padding: 15px;
  font-size: 12px;
}
.listr-wrapper .move-handle {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #777;
  font-size: 9px;
  cursor: pointer;
}
/** CREATE LIST **/
.listr-create {
  position: relative;
  width: 400px;
  margin-bottom: 15px;
}
.listr-create-add-btn {
  display: inline-block;
  padding: 4px;
  cursor: pointer;
}
.listr-create-input {
  display: inline-block;
  opacity: 0;
}
.listr-create-input .listr-input {
  border: none;
  background: #fff;
}
.listr-create-input input.listr-input {
  border: none;
  padding: 4px;
  width: 344px;
  margin: 0;
  background-color: #fff;
}
.listr-create-input .listr-input.submit {
  position: absolute;
  right: 6px;
  top: 0;
  border: none;
  background: #fff;
  height: 100%;
  padding: 0 2px 0 4px;
}
.listr-create-input .listr-input.submit i.glyphicon-menu-right {
  padding: 0 6px 0 4px;
  font-size: 9px;
  color: #777;
}
/** LISTS **/
.listr {
  width: 400px;
}
.listr .listr-list {
  margin: 0;
}
.listr .listr-title {
  font-size: 14px;
  display: inline-block;
  cursor: pointer;
}
.listr .listr-edit-list-title,
.listr .listr-edit-list-title:focus {
  border: none;
  padding: 6px;
  margin: 0 0 2px 24px;
  width: 340px;
  height: 28px;
  font-size: 12px;
  background: #fff;
}
.listr .listr-list-dropdown {
  display: inline-block;
  padding: 6px 5px;
  cursor: pointer;
}
.listr .listr-list-dropdown i {
  position: relative;
  top: 1px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.listr .listr-list-dropdown.active i {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.listr .listr-entries-wrapper {
  display: none;
}
.listr .listr-list-extras {
  position: relative;
}
.listr .listr-list-notes {
  width: 100%;
  border: none;
  padding: 6px;
  margin: 0 0 1px 24px;
  width: 340px;
  resize: vertical;
  background: #fff;
}
.listr .listr-list-extra-btns {
  position: absolute;
  top: 0;
  right: 7px;
}
.listr .listr-list-extra-btns i {
  display: block;
  padding: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #777;
}
.listr .listr-complete-count {
  padding: 0 10px 0;
  margin-left: 14px;
  font-size: 12px;
  cursor: pointer;
}

.listr ul {
  list-style: none;
  width: 400px;
  padding: 0;
  margin: 0;
}
.listr .listr-list-edit {
  display: inline-block;
  padding: 0 10px;
  float: right;
  margin-top: 5px;
  cursor: pointer;
}
.listr .listr-entry {
  position: relative;
}
.listr .listr-entry[data-status="1"] {
  display: none;
}
.listr .listr-item {
  display: inline-block;
  width: 370px;
  border: 1px solid #fff;
  background: #fff;
  padding: 4px 24px 4px 6px;
  margin-bottom: 2px;
  margin-left: 24px;
  cursor: pointer;
}
.listr .item-entry-edit {
  position: relative;
  display: inline-block;
  margin-left: 24px;
}
.listr .listr-item-input {
  display: inline-block;
  width: 340.5px;
  border: 0.5px solid rgb(245, 140, 0);
  background: #fff;
  padding: 6px;
  margin-bottom: 2px;
  background-color: #fff;
}
.listr .listr-item-input:focus {
  background-color: #fff;
}
.listr .listr-item-submit {
  position: absolute;
  right: -30px;
  top: 0;
  border: 0.5px solid rgb(245, 140, 0);
  background: #fff;
  height: calc(100% - 2px);
  padding: 0 7px;
}
.listr .listr-item-submit i {
  padding: 0 2px;
  font-size: 9px;
  color: #777;
}
.listr .listr-inline-btn {
  display: inline-block;
  padding: 6px 6px 6px 4px;
  cursor: pointer;
  position: absolute;
  top: 0;
}
.listr .listr-inline-btn i {
  display: none;
}
.listr .listr-inline-btn i.active {
  display: inline-block;
}
.listr .listr-inline-btn i[data-status-icon="0"] {
  color: #dd373f;
}
.listr .listr-inline-btn i[data-status-icon="1"] {
  color: #65aa5f;
}
.listr-loading {
  display: none;
  padding: 6px 6px 6px 4px;
}
.listr-loading.loading-status {
  position: absolute;
  top: 0;
}
.listr-loading.loading-add-entry {
  display: none;
  padding: 6px 0;
}
.listr-loading.loading-update {
  padding: 6px 0;
}
.listr-loading.loading-notes {
  padding: 0;
}
.listr-loading.loading-delete {
  padding: 0;
}
.listr-loading i {
  color: #ed7636;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.listr .listr-dropdown-icon {
  position: absolute;
  padding: 4px 9px;
  right: 6px;
  top: 0;
  cursor: pointer;
  color: #ccc;
}
.listr .listr-dropdown-icon i {
  font-size: 9px;
}
.listr .listr-item-extra {
  position: relative;
}
.listr .listr-item-extra-btns {
  position: absolute;
  top: 0;
  right: 7px;
}
.listr .listr-item-extra-btns i {
  display: block;
  padding: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #777;
}
.listr .listr-item-extra-btns .listr-timer {
  position: relative;
  display: inline-block;
}
.listr .listr-item-extra-btns .listr-timer .listr-timer-tip {
  visibility: hidden;
  width: 120px;
  background-color: #fff;
  color: #777;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  left: 25px;
  top: 0;
  font-size: 14px;
}
.listr .listr-item-extra-btns .listr-timer:hover .listr-timer-tip {
  visibility: visible;
}
.listr i.listr-prompt-click {
  color: #ed7636;
}
.listr .listr-item-notes {
  border: none;
  padding: 6px;
  margin: 0 0 1px 24px;
  width: 340px;
  resize: vertical;
  background-color: #fff;
}
.listr .listr-add {
  position: relative;
}
.listr .listr-add input.listr-input {
  border: none;
  padding: 5px 24px 5px 6px;
  width: 342px;
  margin-left: 24px;
  background-color: #fff;
  margin-bottom: 0;
}
.listr .listr-add .listr-input.submit {
  position: absolute;
  right: 6px;
  top: 0;
  border: none;
  background: #fff;
  height: 29px;
  color: #777;
  padding: 0 8px;
}
.listr .listr-add .listr-input.submit i {
  font-size: 10px;
}
.listr .listr-entry-complete-date {
  display: inline-block;
  padding: 5px 6px;
  font-size: 14px;
  position: absolute;
  right: 36px;
  cursor: pointer;
  color: #777;
  top: -1px;
}
.listr .listr-entry-datetime,
.listr .listr-entry-datetime:focus {
  border: none;
  width: 342px;
  margin: 2px 0 0 24px;
  opacity: 0;
  padding: 0;
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
  background: #fff;
}
.listr .listr-entry-completion-time-input {
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  display: block;
}
.listr .listr-entry-due-time-input,
.listr .listr-entry-due-time-input:focus {
  border: none;
  padding: 6px;
  margin: 0 0 2px 24px;
  width: 340px;
  height: 24px;
  font-size: 11px;
  background: #fff;
}
.listr i[data-active-timer="1"] {
  color: #ed7636;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}
.listr-inline-block {
  display: inline-block !important;
}
.ui-state-highlight {
  height: 36px;
}