.body {
  background-color: #222;
  color: #eee;
}

#app-info {
  color: rgb(255, 0, 0);
  padding: 15px;
  margin-top: 5px;
  height: 100px;
  font-size: 1.2rem;
  overflow-y: scroll;
}

a,
a:visited,
a:active {
  color: #bbb;
  text-decoration: none;
  letter-spacing: 3px;
}
a:hover,
a:visited:hover,
a:active:hover {
  color: #f00;
  text-decoration: underline;
}

ul li {
  display: inline-block;
}

nav {
  border-bottom: 1px solid silver;
}
nav a,
nav a:active,
nav a:visited {
  background-color: #333;
  padding: 10px;
  display: block;
  color: #eee;
  text-decoration: none;
  transition: 500ms;
}
nav a:hover,
nav a:active:hover,
nav a:visited:hover {
  color: #ddd;
  background-color: #444;
  text-decoration: none;
}
nav a.menu-logout-btn {
  all: initial;
  cursor: pointer;
  color: white;
  text-decoration: underline;
}
nav a.menu-logout-btn:hover {
  color: gray;
  text-decoration: none;
}

.index-item {
  border: 2px solid black;
  border-radius: 1rem;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.4);
  margin: 15px;
  padding: 10px;
}

.index-attr-container {
  display: flex;
}

.index-name {
  min-width: 180px;
}

p.error {
  padding: 20px;
  background-color: #b55;
  color: white;
  font-size: 18px;
  margin: 20px;
  border-radius: 1rem;
}

.profile-table {
  border: 2px solid black;
}
.profile-table tr:hover {
  background-color: #333;
}
.profile-table td {
  padding: 5px;
}

.login-register-wrapper form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-register-wrapper h2 {
  text-align: center;
}
.login-register-wrapper input,
.login-register-wrapper button {
  box-sizing: border-box;
  padding: 5px;
  margin: 10px;
  width: 200px;
}

.task-container {
  padding: 30px 15px;
  box-shadow: 4px 4px 5px 5px rgba(0, 0, 0, 0.6);
  margin: 60px 25px 60px 10px;
  border-radius: 1rem;
  transition: 300ms;
  background-color: #222;
  display: flex;
  position: relative;
}
.task-container:hover {
  box-shadow: 4px 4px 5px 5px black;
  background-color: #333;
}
.task-container.task-done {
  opacity: 0.35;
}
.task-container > .task-delete {
  position: absolute;
  top: -20px;
  right: -20px;
}
.task-container > .task-mark-done {
  position: absolute;
  bottom: -20px;
  left: -15px;
}
.task-container .task-deadline {
  position: absolute;
  top: -12px;
  left: 20px;
  border: 1px solid white;
  background-color: black;
  border-radius: 1rem;
  padding: 4px 10px;
}
.task-container .task-category {
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: -20px;
  left: 200px;
}
.task-container .task-category select {
  outline: none;
  border: none;
}
.task-container .task-category select:active, .task-container .task-category select:focus, .task-container .task-category select:visited, .task-container .task-category select:target, .task-container .task-category select:focus-within, .task-container .task-category select:focus-visible, .task-container .task-category select:hover {
  outline: none;
  border: none;
}

.task-wrapper {
  padding-top: 15px;
  width: 100%;
}

.task-small-btn {
  padding: 1px;
  color: black;
  font-size: 1.6rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  transition: 250ms;
}
.task-small-btn:hover {
  filter: contrast(2);
  transform: scale(1.15);
}
.task-small-btn > a:hover {
  text-decoration: none;
}

.tasks-page-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.task-status {
  position: absolute;
  bottom: -20px;
  left: 50px;
}

[contenteditable] {
  outline: 1px dashed rgba(0, 0, 0, 0.5);
  margin: 5px;
  transition: 50ms;
  border-radius: 1rem;
}
[contenteditable]:focus {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(3, 3, 3, 0.4);
}
[contenteditable].just-edited {
  background-color: rgb(0, 0, 0);
}

.task-title,
.task-body {
  padding: 12px;
}

.all-tasks-container {
  align-self: stretch;
  width: 100%;
}

.tasks-content {
  overflow-y: scroll;
  height: 70vh;
}

.task-ajax-select {
  border-radius: 1rem;
  padding: 10px;
  text-align: center;
}

.tasks-header {
  height: 100px;
  padding: 5px;
  border-bottom: 1px solid silver;
  border-right: 1px solid silver;
}

.add-task-form {
  padding: 15px;
}
.add-task-form > * {
  margin: 2px;
}

.date-time-wrapper {
  width: 350px;
  display: flex;
  gap: 2px;
}
.date-time-wrapper > input {
  flex: 1;
}

#interval-wrapper {
  position: fixed;
  top: 20px;
  right: 30px;
  width: 180px;
  display: flex;
  flex-direction: column;
}

#interval-counter {
  text-align: center;
  font-size: 1.4rem;
  color: red;
  font-weight: 800;
}