:root {
  --color-primary: #222633;
  --color-title-background: hsl(226, 6%, 40%);
  --color-list-background: #ffffff80;
  --color-primary-background: #1a1d27;
  --color-secondary-background: #222633;
  --color-third-background: #212039;
  --color-primary-buttons: #6405ff;
  /* linear-gradient(to right, #6405ff 0%, #eb736c 100%); */
  --color-primary-buttons-hover: #eb736c;
  /*linear-gradient(to right, #6405ff 0%, #eb736c 0%); */
  --color-highlight: #ff2fbd8e;
  --color-highlight-child: #ff2fbc;
  --color-button-background: #b1b3b3;
  --color-input-border: #58586c;
  --color-highlight-border: #ff2fbc;
  --color-list-background: #212939;
  --color-list: hsl(180, 1%, 100%);
  --color-list-background-drag: #b1b3b3;
}

:root {
  background-color: var(--color-primary-background);
}

#title {
  background-color: var(--color-title-background);
  color: var(--color-primary);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

#title:hover {
  background-color: var(--color-input-border);
}

.aiButton {
  display: none;
}

.top-level-button {
  background: var(--color-primary-buttons);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin: 10px 20px;
}

.top-level-button:hover {
  transition: background 0.25s ease-in-out;
  background: var(--color-primary-buttons-hover);
}


button,
input, 
#inputAIChatText,
#aiTaskOutputText {
  background-color: var(--color-title-background);
  color: var(--color-list);
  outline-color: var(--color-input-border);
  border-radius: 4px;
}

input:focus-visible,
#inputAIChatText:focus-visible,
#aiTaskOutputText:focus-visible {
  outline: none !important;
  border: 1px solid red;
  outline-color: var(--color-highlight-child);
  box-shadow: 0 0 10px var(--color-highlight-child);
}

li {
  margin: 1px;
  background: var(--color-primary-background);
  padding: 5px;
  border-radius: 10px;
  color: var(--color-list);
  font-size: 14px;
}

li.dragged {
  background-color: rgb(100, 5, 255);
}

li.draggedChild {
  background-color: rgb(100, 5, 255, 50%);
}

li.buttons {
  border-radius: 100px;
}


.Effort {
  width: 5ch;
  text-justify: right;
}

.Effort:focus,
.Effort:hover {
  background-color: var(--color-highlight);
}

.Effort:hover~ul input.Effort {
  background-color: var(--color-highlight-child);
}

.Estimate {
  width: 5ch;
  text-justify: left;
}

.Estimate:focus,
.Estimate:hover {
  background-color: var(--color-highlight);
}

.Estimate:hover~ul input.Estimate {
  background-color: var(--color-highlight-child);
}

.OverUnder {
  font-weight: bold;
  margin: 0 5px;
}


.Description {
  min-width: 20ch;
  outline-color: 1px solid black;
}

.Description:focus {
  background-color: var(--color-title-background);
  color: var(--color-primary-gradient);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

dialog {
  background: var(--color-secondary-background); 
  color: #fff;
  border-radius: 4px;
}

dialog button {
  background: var(--color-primary-buttons);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin: 10px 20px;
}

dialog button:hover {
  animation: bgColorChange 1.25s infinite alternate;
}

@keyframes bgColorChange {
  0% {
    background: var(--color-primary-buttons-hover);
    transform: scale(1);
  }
  100% {
    background: var(--color-primary-buttons);
    transform: scale(1.02);
  }
}


#aiCommentResponse {
  background-color: var(--color-third-background);
  color: var(--color-primary-gradient);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}