/* 1.Section main Elements	*/
body {
  margin: 0;
  font-size: 62.5%;
  font-family: sans-serif;
  background: #dddddd;
  color: #3a3a3a;

  --defaultBoxBg: #bdbdbd;

  --defaultColorPicker: #444444;
  --defaultBoxColor: #ffffff;
  --defaultItemBg: #d4d4d4;

  /* --defaultXColorD: #cccccc; */
  --defaultXColorL: #333333;

  /* --defaultOColorD: #cccccc55; */
  --defaultOColorL: #22222255;

  /* --defaultTextColorD: #eeeeee; */
  --defaultTextColorL: #181818;
}
/* 1.0 no Border and outline */
.nbno {
  border: 0;
  outline: 0;
}
.cPtr {
  cursor: pointer;
}
/*1.1 scrollbar */
::-webkit-scrollbar {
  margin: 1rem 0;
  width: 0vw;
  height: 0px;
  cursor: auto;
}
::-webkit-scrollbar-track {
  background-color: #0000;
  -webkit-border-radius: 1rem;
  border-radius: 1rem;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 1rem;
  border-radius: 1rem;
  background: #0005;
}
@media screen and (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 0rem;
    max-height: 100px;
    cursor: auto;
  }
}

/* 1.2 image backgrounds and...*/
.xImg {
  -webkit-mask: url(../images/times.svg) no-repeat center;
  mask: url(../images/times.svg) no-repeat center;
  background-color: var(--defaultXColorL);
}
.boxShadow {
  box-shadow: 0 10px 20px rgba(65, 65, 65, 0.16), 0 6px 6px rgba(0, 0, 0, 0.085);
}

/* 2.Section toolbar		  	*/
.toolbar {
  height: 4rem;
}
#hintText {
  position: flex;
  font-size: 1.7rem;
  overflow-y: hidden;
  color: #ffcf11;
  margin-top: 0;
  text-shadow: 0 10px 20px rgba(65, 65, 65, 0.16),
    0 6px 6px rgba(0, 0, 0, 0.085);
  text-align: center;
  justify-content: center;
}

.addCollection {
  position: absolute;
  top: 0.9rem;
  right: 1.2rem;
  width: 2rem;
  height: 2rem;
  transform: rotate(45deg);
  transition: transform 0.2s ease-out;
  /* .cPtr */
  /* .nbno */
  /* .xImg */
}
.addCollection:hover {
  transform: scale(1.2) rotate(45deg);
  transition: transform 0.2s ease-in;
}

.colorPickerBgWrapper {
  position: absolute;
  background: var(--defaultOColorL);
  left: 1rem;
  top: 0.7rem;
  border-radius: 50%;
  /* .cPtr */
}
.colorPickerBgWrapper input[type="color"] {
  width: 2rem;
  height: 2rem;
}

@media screen and (min-width: 768px) {
  .toolbar {
    height: 3rem;
  }

  .addCollection {
    position: absolute;
    top: 0.75rem;
  }
}

/* 3.Section each box		  	*/
.todo-box {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100vw;
  background: var(--defaultBoxBg);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
.todoTitle {
  text-align: center;
  font-size: 2rem;
  padding: 0.5rem 0 0 0;
  margin: 0.5rem 5rem;
  /* .nbno */
  transition: transform 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.todoTitle:focus {
  transform: scale(1.1);
}

/* 3.1 items in todo box */
.colorPickerBoxWrapper {
  position: absolute;
  background: var(--defaultOColorL);
  right: 2.7rem;
  top: 0.6rem;
  border-radius: 50%;
  /* cPtr */
}
.colorPickerBoxWrapper input[type="color"] {
  width: 1.5rem;
  height: 1.5rem;
}
.colorPickerBoxWrapper:hover {
  transform: scale(1.1);
}

.addItem {
  position: absolute;
  top: 0.65rem;
  right: 0.7rem;
  width: 1.5rem;
  height: 1.5rem;
  transform: rotate(45deg);
  transition: transform 0.2s ease-out;
  /* xImg */
  /* cPtr */
  /* nbno */
}
.addItem:hover {
  transform: scale(1.2) rotate(45deg);
  transition: transform 0.2s ease-in;
}

.remove {
  position: absolute;
  top: 0.7rem;
  left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--defaultXColorL);
  -webkit-mask: url("../images/trash.svg") no-repeat center;
  mask: url("	../images/trash.svg") no-repeat center;
  transition: transform 0.2s ease-out;
  /* cPtr */
  /* nbno */
}
.remove:hover {
  transform: scale(1.2);
  transition: transform 0.2s ease-in;
}

@media screen and (min-width: 768px) {
  .todoContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: auto 0vw;
  }
  .todo-box {
    width: 48vw;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 0.5rem;
    margin: 0.5rem auto;
  }
}
@media screen and (min-width: 1024px) {
  .todoContainer {
    grid-template-columns: repeat(3, 1fr);
    width: 100vw;
  }
  .todo-box {
    width: 31.5vw;
  }
}

/* 4.Section each todo			*/
.wantToDeleteItem {
  background: #fc3a52 !important;
}
.todoItem {
  font-size: 1.2rem;
  width: 100vw;
  padding: 1rem 2.25rem 1rem 2.25rem;
  box-sizing: border-box;
  margin: 0.2rem auto;
  background: var(--defaultItemBg);
  /* .cPtr */
}

.todoItemContainer {
  position: relative;
  margin: 0 auto;
}

.removeItem {
  position: absolute;
  cursor: pointer;
  left: 0.5rem;
  top: 0.7rem;
  width: 1.25rem;
  height: 1.25rem;
  background: va(--defaultXColorL);
  /* xImg */
}

.colorPickerWrapper {
  position: absolute;
  background: var(--defaultOColorL);
  top: 0.7rem;
  right: 0.4rem;
  border-radius: 50%;
  cursor: pointer;
}
.colorPickerWrapper:hover {
  transform: scale(1.25);
}

input[type="color"] {
  cursor: pointer;
  opacity: 0;
  width: 1.3rem;
  height: 1.3rem;
  border: none;
  background: #0000;
  padding: 0;
}

.enabled {
  cursor: text;
  filter: brightness(120%);
  transition: filter 0.1s linear;
}

.dragOver {
  /* filter: brightness(110%); */
  padding: 0 0 5rem 0;
  transition-duration: 0.5s;
}

@media screen and (min-width: 768px) {
  .todoItem {
    border-radius: 0.5rem;
    width: 45vw;
  }
}
@media screen and (min-width: 1024px) {
  .todoItem {
    border-radius: 0.5rem;
    width: 30vw;
  }
}