.main-section {
  background-color: var(--background-color-2);

  width: 100%;
  height: 100%;
  display: flex;
}

/* 
-
- Left panel starts here
-
*/

.left-section {
  flex: 1;
  max-width: 350px;
  padding: 20px;
  background-color: var(--left-panel);
}
.menu-title {
  font-size: 2.4rem;

  margin-bottom: 25px;
  padding-bottom: 5px;

  border-bottom: solid 2px var(--font-color-1);
  color: var(--font-color-1);
}
.home-container,
.projects-container {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;
}

.home-element {
  display: flex;
  gap: 15px;

  margin: 20px 0 20px 0;

  padding: 5px;
  font-size: 1.7rem;

  align-items: center;
}

.home-element img,
.project-element img {
  width: 30px;
}

.projects-container {
  /* dumb */
  border: none;
}

.project-element {
  position: relative;
  display: grid;
  grid-template-columns: 12% 73% 15%;

  margin: 10px;
  padding: 10px;
  font-size: 1.8rem;
  align-items: center;
}
.project-element img {
  width: 25px;
}
.project-options {
  margin-left: 35px;
}

.project-element span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* 
------------------------------------------------------
*/

.rename-edit-project {
  position: absolute;
  right: 5%;
  top: -210%;

  display: flex;
  flex-direction: column;

  gap: 5px;
  padding: 7px;
  border-radius: 5px;

  background-color: var(--background-color-1);
}

.rename-project-btn,
.edit-project-btn {
  width: 100px;
  height: 50px;

  border: none;
  border-radius: 2px;

  text-align: center;

  font-size: 1.3rem;
}

.rename-project-btn:hover,
.edit-project-btn:hover {
  background-color: var(--background-color-2);
}

/* 
------------------------------------------------------
*/

.project-element,
.home-element {
  background-color: var(--element-bg-nonactive);
  cursor: pointer;
}
.project-element:hover,
.home-element:hover {
  background-color: var(--hover-color-nonactive);
}

/* Adding a new project*/
.add-project-container {
  display: flex;
  flex-direction: column;
}
#add {
  margin-top: 1vh;
  gap: 5px;
  font-size: 2.3rem;

  border: solid 3px black;
  border-radius: 10px;
  border-style: dashed;
  cursor: pointer;
}
.add-visible {
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-hidden {
  display: none;
}

#add:hover {
  background-color: var(--hover-color-nonactive);
}
#add img {
  width: 25px;
}

.project-form {
  display: flex;
  flex-direction: column;

  margin-top: 1vh;
  padding: 10px;

  border-radius: 1rem;
  background-color: rgba(20, 179, 20, 0.479);
}
.hidden-form {
  display: none;
}

.input-project-container {
  display: flex;
  gap: 15px;
}
.input-project-container input {
  width: 90%;
  border: solid 1px black;
  border-radius: 5px;
  font-size: 1.7rem;
  padding: 8px;
}
.input-project-container img {
  width: 30px;
}

.project-btns-container {
  display: flex;
  gap: 1vw;

  align-items: center;
  justify-content: center;

  margin-top: 1vh;
}
.project-btns-container button {
  width: 120px;

  font-size: 1.5rem;

  padding: 10px;
  border-radius: 10px;

  cursor: pointer;
}

.project-btns-container button:hover {
  background-color: var(--hover-color-nonactive);
}

/* 
-
- Left panel ends here
-
*/

.right-section {
  flex: 4;
  display: flex;
  flex-direction: column;

  gap: 2vh;
  padding: min(70px, 5%);
}

.project-title-container {
  height: auto;
  display: flex;

  padding: 15px;
  align-items: center;
  background-color: var(--title-2);
  color: var(--font-color-2);
}

.project-title-container > .project-title {
  font-size: 5rem;
  padding-left: 20px;
}

.tasks-container {
  /* flex: 5; */
  height: fit-content;
  display: flex;
  flex-direction: column;

  gap: 0.6vh;
}

.task {
  display: flex;
  position: relative;

  border: solid 2px black;
  border-radius: 5px;

  color: var(--font-color-1);

  padding: 5px;
  transition: transform 100ms ease-in-out;
}
.task img {
  width: 20px;
}

.task:active {
  transition: transform 100ms ease-in-out;
  transform: scale(0.99);
}

.task-checkbox-container {
  display: flex;
  align-items: flex-start;
}
.task-checkbox {
  width: 17px;
  height: 17px;

  margin-top: 10px;
  margin-right: 10px;
  border: solid 0.175rem var(--font-color-1);
  border-radius: 50%;
  cursor: pointer;

  background-size: contain;
}

.task-info {
  flex: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.task-finished {
  text-decoration: line-through;
  opacity: 0.7;
}
.task-name {
  font-size: 2em;
}

.task-details {
  font-size: 1.5em;
}

.task-date {
  font-size: 1.4em;

  height: fit-content;

  border: solid 0.12em var(--font-color-1);
  border-radius: 0.7em;

  padding: 5px;
  margin: 3px 0 0 5px;
}

.task-options-container {
  display: flex;
  align-items: flex-start;

  margin: 5px;
  padding: 3px;
  gap: 15px;
}

.task-options-container img {
  width: 25px;
}

.task-isimportant,
.task-options {
  background-size: contain;
  cursor: pointer;
  padding: 2px;
}

/* .task-options {
} */

.task-del-edit-box {
  position: absolute;
  left: 90%;
  top: -70%;

  display: flex;
  flex-direction: column;

  gap: 5px;
  padding: 7px;
  border-radius: 5px;

  background-color: var(--background-color-1);
}

.edit-task-btn,
.delete-task-btn {
  width: 100px;
  height: 50px;

  border: none;
  border-radius: 2px;

  text-align: center;

  font-size: 1.3rem;
}

.task-isimportant:hover,
.task-options:hover {
  background-color: var(--hover-1);
}

.add-new-task-button {
  display: flex;
  width: 30%;

  align-items: center;
  align-self: center;
  justify-content: center;

  border: dashed 0.1em black;
  border-radius: 5px;

  padding: 5px;
  gap: 5px;
  font-size: 1.7rem;

  cursor: pointer;
}

.add-new-task-button:hover {
  background-color: var(--hover-color-nonactive);
}

.add-new-task-button img {
  width: 20px;
}

/*  */

.add-task-box {
  display: flex;
  flex-direction: column;

  width: 99%;
  height: 100%;
  max-height: 400px;

  background-color: white;
  padding: 10px;
  gap: 10px;

  border-radius: 10px;
}

.add-task-box label {
  display: flex;
  flex-direction: column;

  width: 100%;

  font-size: 1.8rem;
}

.add-task-box input {
  width: 99%;
  font-size: 1.3rem;
  border: solid 2.5px black;
  border-radius: 5px;
  padding: 5px;
}

.Add-new-task-buttons-container {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100px;
  gap: 15px;

  font-size: 1.6rem;
}

.new-task-details {
  font-size: 1.3rem;
  border: solid 2.5px black;
  border-radius: 5px;

  height: 70px;
  padding: 5px;

  resize: none;
}

.submit-new-task,
.cancel-new-task {
  width: 100px;
  height: fit-content;
  text-align: center;

  padding: 10px;

  border: solid 3px black;
  border-radius: 10px;

  font-size: 1.6rem;
}

.submit-new-task:hover,
.cancel-new-task:hover {
  background-color: var(--hover-color-nonactive);
}

/* 
-------
*/

.hidden {
  display: none;
}
.visible-flex {
  display: flex;
  flex-direction: column;
}