/* ******************** */
/* ******* MAIN ******* */
/* ******************** */
.lists {
  justify-content: space-around;
  align-items: stretch;

  flex-wrap: wrap;
  padding: 1.2rem;
}

.listcontainer {
  padding: 1.8rem 1rem;
  padding-bottom: 0;
  width: 31%;
  min-width: 20rem;
  border: 4px dashed var(--buttons-color);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.secondaryHeadLine {
  font-size: var(--mid-font);
  margin-bottom: 1rem;
  text-decoration: underline;
}

.list {
  font-size: var(--small-font);
  font-weight: 600;
  color: var(--secondary-font-lite);
  padding: 0.4rem;
  width: 100%;
  position: relative;
}

.overLi {
  color: var(--tasks-color);
  opacity: 0.6;
}

.newTask {
  margin-top: 1.2rem;
  padding: 1rem;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;

  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;

  background-color: var(--tasks-color);
  box-shadow: 0px 2px 0.8rem var(--buttons-dark-color);
  overflow: initial;
  text-align: right;
  flex-direction: row-reverse;
}

.newTask:hover {
  cursor: grab;
  transform: translateY(0.2rem);
  -webkit-transform: translateY(0.2rem);
  -moz-transform: translateY(0.2rem);
  -ms-transform: translateY(0.2rem);
  -o-transform: translateY(0.2rem);
}

.newTask:focus {
  outline: none;
}

.taskInput {
  width: 87.5%;
}
.btn-addTask {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;

  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;

  padding: 0.4rem;
  margin: 1.8rem auto;
  width: 97.5%;

  font-family: inherit;
  font-weight: 500;
  font-size: var(--small-font);
  color: var(--tasks-color);
  background-color: var(--buttons-color);
  border: 0.1rem solid var(--buttons-dark-color);
}

.iconsCon {
  display: flex;
  width: 2.4rem;
  position: absolute;
  left: 0;
  margin-left: 10px;
  /* display: flex; */
}

/* .taskInput {
} */

.btn-addTask:hover {
  background-color: var(--buttons-dark-color);
}

.iconsCon .icon {
  cursor: pointer;
  font-size: 1.8rem;
}

.iconsCon .recordIcn {
  color: var(--buttons-color);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.iconsCon .recordIcn:hover {
  color: var(--buttons-dark-color);
}
.iconsCon .deleteIcn {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  color: #ff7f7f;
}

.iconsCon .deleteIcn:hover {
  color: #ff0000;
}