body {
  background-color: #333;
}

#zen-todo-app,
#zen-todo-app-login {
  height: auto !important;
  min-height: 100%;
  flex-direction: column;
}

#zen-todo-app {
  display: none;
}

#zen-todo-app-login {
  display: flex;
}

.has-list #zen-todo-app {
  display: flex;
}

.has-list #zen-todo-app-login {
  display: none;
}

.zen-todo-button {
  width: 48px;
  padding: 12px;
  line-height: 16px;
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
  border: none;
  background-color: #FAC408;
}

.zen-todo-button:focus {
  outline: none;
}

.zen-todo-button:hover {
  cursor: pointer;
  background-color: #ffd43f;
}

.zen-todo-task {
  min-height: 48px;
  background-color: #111;
  margin-bottom: 1px;
  display: flex;
}

.zen-todo-task-checkbox {
  padding: 0;
  width: 23px;
  height: 23px;
  margin: 12px;
  border-style: solid;
  border-color: #999;
  border-width: 1px;
  background-color: #141414;
}

.is-ticked .zen-todo-task-checkbox {
  border-color: #4b4b4b;
}

.zen-todo-task-checkbox:focus {
  outline: none;
}

.zen-todo-task-checkbox:hover {
  background-color: #333;
  cursor: pointer;
}

.zen-todo-task-checkbox i {
  visibility: hidden;
}

.is-ticked .zen-todo-task-checkbox i {
  visibility: visible;
}

#zen-todo-list {
  flex: 1;
}

.zen-todo-task-main {
  flex: 1;
  font-size: 12px;
}

.zen-todo-task-title {
  line-height: 48px;
  color: #F0F0F0;
}

.zen-todo-task-title input {
  width: 100%;
  height: 16px;
  padding: 8px 0px;
  margin: 9px 0 0 0;
  border: 0;
  vertical-align: top;
  background-color: #111111;
  color: #f0f0f0;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  border: none;
  outline: none;
}

.is-ticked .zen-todo-task-title input {
  color: #4b4b4b;
}

.zen-todo-task-title.has-input {
  line-height: initial;
}

.is-ticked .zen-todo-task-title {
  color: #4b4b4b;
}

.zen-todo-task-completed-date {
  position: relative;
  width: 100%;
  right: 5px;
  top: 2px;
  color: #4b4b4b;
  height: 0;
  overflow: visible;
  text-align: right;
  pointer-events: none;
  visibility: collapse;
}

.is-ticked .zen-todo-task-completed-date {
  visibility: visible;
}

#zen-todo-input,
#zen-todo-login {
  height: 48px;
  min-height: 48px;
  display: flex;
  border-bottom-color: #FAC408;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

#zen-todo-input-field,
#zen-todo-login-field {
  flex: 1;
  background-color: #141414;
  line-height: 48px;
  font-size: 16px;
  color: #F0F0F0;
  padding-left: 16px;
  border: none;
  width: 100%;
  font-family: system-ui, sans-serif;
  font-size: 12px;
}

#zen-todo-input-field:focus,
#zen-todo-login-field:focus {
  outline: none;
}