:root {
    --main-color: black;
    --secondary-color: #ADADAD;
  }

#tasks_tab {
    background-color: white;
    color: black;
    width: 100%;
    height: max-content;
    z-index: 1;
    padding-top: 30px;
    border: none;
    border-radius: 10px;
    z-index: 10;
    margin-bottom: 20px;
}

/* #tasks_tab:not([open]) {
    display: none; 
} */

#task_title {
    width: 90%;
    font-size: 23px;
    height: max-content;
    padding: 5px;
    margin: 10px 20px;
    border: none;
    background: rgb(212, 208, 208);
    border-radius: 5px;
}

#task_title::placeholder {
    font-style: italic;
}

#task_title:focus {
    outline: none;
}

.est_podo_container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 20px 30px;
}
.est_podo_container label {
    font-size: 18px;
}

#est_pomodoros {
    font-size: 23px;
    height: max-content;
    width: 70px;
    background-color: rgb(212, 208, 208);
    border: none;
    border-radius: 5px;
    padding: 5px;
}



.textarea_container {
    margin: 0px 20px;
}

#add_note {
    width: 100%;
    height: 100px;
    background-color: rgb(212, 208, 208);
    border-radius: 5px;
    font-size: 14px;
    padding: 5px;
    margin-bottom: 10px;
    display: none;
}

#add_note:focus, 
#est_pomodoros:focus {
    outline: none
}

#add_note_btn {
    font-size: 16px;
    color: #ADADAD;
}


.close_save_container {
    margin:  30px 0 0;
    padding: 20px 10px;
    font-size: 20px;
    color: black;
    background-color: rgba(234, 227, 227, 0.998);
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
    
}

.close_save_container button {
    padding: 5px 20px;
    border-radius: 5px;
}

#close_tasks_tab,
#delete_tasks_tab {
    background-color: transparent;
    color: black;
}

#delete_tasks_tab {
    display: none;
}

#right_buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
}


#save_tasks {
    background-color: black;
    color: white;
}

input, 
button, 
#add_note_btn {
    cursor: pointer;
}

.hide_tasks_tab {
    display: none;
}





/* #tasks_tab hr {
    width: 100%;
    margin: 20px 0px;
}

#tasks_tab p {
    margin: 10px 0px
} */