/* Any of your own custom CSS classes are in here */

.todo-list {
  border: 1px dotted var(--color-primary);
  border-radius: 4px;
  margin: 20px auto;
  padding: 20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1422 800" width="1422" height="800"><g transform="scale(1) rotate(15) translate(0 0) skewX(0) skewY(0)" transform-origin="711 400"><rect width="2844" height="1600" x="-711" y="-400" fill="url(%23rrreplicate-pattern3)"></rect></g><defs><pattern id="rrreplicate-pattern3" width="50" height="50" patternUnits="userSpaceOnUse" patternTransform="rotate(113)" stroke-opacity="1" stroke-width="0.6" fill="none" stroke="rgb(17 24 39 / 0.1)"><line x1="2.0833333333333335" y1="0" x2="2.0833333333333335" y2="50"></line><line x1="6.25" y1="0" x2="6.25" y2="50"></line><line x1="10.416666666666668" y1="0" x2="10.416666666666668" y2="50"></line><line x1="14.583333333333334" y1="0" x2="14.583333333333334" y2="50"></line><line x1="18.75" y1="0" x2="18.75" y2="50"></line><line x1="22.916666666666668" y1="0" x2="22.916666666666668" y2="50"></line><line x1="27.083333333333332" y1="0" x2="27.083333333333332" y2="50"></line><line x1="31.25" y1="0" x2="31.25" y2="50"></line><line x1="35.41666666666667" y1="0" x2="35.41666666666667" y2="50"></line><line x1="39.583333333333336" y1="0" x2="39.583333333333336" y2="50"></line><line x1="43.75000000000001" y1="0" x2="43.75000000000001" y2="50"></line><line x1="47.91666666666667" y1="0" x2="47.91666666666667" y2="50"></line></pattern></defs></svg>');
}

.user-input {
  margin: 20px 0;
  justify-content: space-between;
  align-items: center;
}

.todo-item {
  justify-content: space-between;
  padding: 20px 20px 0px 20px;
}

#todo-display li:nth-child(odd) input,
#todo-display > li:nth-of-type(odd) {
  background-color: var(--color-gray-dark);
  color: var(--color-black);
}

#todo-display li:nth-child(even) input,
#todo-display > li:nth-of-type(even) {
  background-color: var(--color-gray-light);
  color: var(--color-black);
}

.addInfo {
  justify-content: end;
  padding: 0 10px 5px 0;
}

.addInfo p {
  font-size: small;
  color: var(--color-primary);
  padding: 10px 0 0 20px;
}

.update-title-input {
  border: none;
  font-size: 20px;
}

.complete {
  text-decoration: line-through;
}

.active-input {
  background-color: var(--color-white) !important
}

/* ---------------------------------- Icons --------------------------------- */
.save-btn,
.edit-btn,
.delete-all,
.complete-btn,
.trash-btn {
  cursor: pointer;
  background-color: DodgerBlue;
  border: none;
  color: white;
}

.delete-all {
  padding: 9px 0;
}

.save-btn,
.edit-btn,
.complete-btn,
.trash-btn {
  width: 48px;
  height: 48px;
}

.complete-btn,
.trash-btn {
  padding: 4px 14px;
}

.edit-btn:hover,
.save-btn:hover,
.delete-all:hover,
.complete-btn:hover,
.trash-btn:hover {
  background-color: var(--color-primary);
}