#html,body{
    margin: 0;
    padding: 0;
}
#html{
    box-sizing: border-box;
}
#body{
    display: flex;
    flex-direction: column;
}
#head{
    background-color: #2c3e50;
    height: 13vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
}
#addTask{
    height: 40px;
    margin-right: 50px;
    background-color: transparent;
    color:#7158e2;
    font-size: 25px;
    font-weight:bolder;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    border-bottom: 1px white dashed;
    outline: none;
}
#addTask:hover{
    filter: brightness(0.8);

}
#addTask:active{
    filter: brightness(0.7);
}
#head p{
    font-size: 30px;
    font-weight:bolder;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: white 1px dashed;
    margin-left: 40px;
    color: #7158e2;
}
#middle{
    background-color: #ecf0f1;
    display: flex;
    align-items: center;
    height: 82vh;
    width: auto;
    flex: 1;

}
#modalCreateProject{
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top:300px ;
    height:100%;
    width: 100%;
    background-color: rgba(0,0,0,0.4);

}
#modalContent{
    position: relative;
    margin: auto;
    background-color: #fefefe;
    display: flex;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    padding: 20px;
    border: 1px solid #888;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-around;
    height:25%;
    width: 340px;
    
}

#projectNameInput{
    height: 30px;
    font-size: 17px;
    font-weight: 540;
    border:black solid 1px;
    border-radius: 9px;
    outline: none;
    padding-left: 7px;
    
}
#projectName{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
}
#submitProjectButton{
    height: 30px;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    background-color: #bdc3c7;
}
#submitProjectButton:hover{
    filter: brightness(0.95);
}
#submitProjectButton:active{
    filter:brightness(0.9);
}

#modalAddTask{
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top:130px ;
    height:100%;
    width: 100%;
    background-color: rgba(0,0,0,0.4);

}
#modalContentTask{
    position: relative;
    margin: auto;
    background-color: #fefefe;
    display: flex;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    padding: 20px;
    border: 1px solid #888;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height:60%;
    width: 400px;
    
}

#taskNameInput, #taskDescriptionInput,#priorityInput,#taskDateInput{
    height: 30px;
    font-size: 17px;
    font-weight: 540;
    border:black solid 1px;
    border-radius: 9px;
    outline: none;
    padding-left: 7px;
    
    
}
#taskDescriptionInput{
    height: 5rem;
    text-align: start;
    overflow: auto;
}

#submitTaskButton{
    margin-top: 10px;
    height: 30px;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    background-color: #bdc3c7;
}
#submitTaskButton:hover{
    filter: brightness(0.95);
}
#submitTaskButton:active{
    filter:brightness(0.9);
}

#modalEditTask{
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top:130px ;
    height:100%;
    width: 100%;
    background-color: rgba(0,0,0,0.4);

}
#modalContentTaskEdit{
    position: relative;
    margin: auto;
    background-color: #fefefe;
    display: flex;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    padding: 20px;
    border: 1px solid #888;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-around;
    height:60%;
    width: 400px;
    
}

#taskNameEditInput, #taskDescriptionEditInput,#priorityEditInput,#taskDateEditInput{
    height: 30px;
    font-size: 17px;
    font-weight: 540;
    border:black solid 1px;
    border-radius: 9px;
    outline: none;
    padding-left: 7px;
    
}
#taskDescriptionEditInput{
    height: 5rem;
    text-align: start;
    overflow: auto;
    
    
}

#submitTaskEditButton{
    margin-top: 10px;
    height: 30px;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    background-color: #bdc3c7;
}
#submitTaskButton:hover{
    filter: brightness(0.95);
}
#submitTaskButton:active{
    filter:brightness(0.9);
}

#modalDetails{
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top:100px ;
    height:100%;
    width: 100%;
    background-color: rgba(0,0,0,0.4);

}
#modalContentDetails{
    position: relative;
    margin: auto;
    background-color: #fefefe;
    display: flex;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    padding: 20px;
    border: 1px solid #888;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height:75%;
    width:30rem;
    font-size: 15px;
    font-weight: bold;
    
}
.nameContainer{
    width: 90%;
    text-align: center;
    font-family:sans-serif;
}
.detailName{
    border: black 1px solid;
    font-size: 17px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    font-weight: initial;
}
.descriptionContainer{
    width: 95%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.detailDescription{
    border: black 1px solid;
    font-size: 16px;
    height: 100px;
    padding: 10px;
    border-radius: 20px;
    overflow:auto;
    text-align:start;
    font-weight: initial;
}
.dateContainer{
    width: 90%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.detailDate{
    border: black 1px solid;
    font-size: 17px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    font-weight: initial;
}
.priorityContainer{
    width: 90%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.detailPriority{
    border: black 1px solid;
    font-size: 17px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px;
    font-weight: initial;
}
.closeDetail{
    margin-top: 10px;
    height: 30px;
    border-radius: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    width:75% ;
    background-color: #bdc3c7;
}
.closeDetail:hover{
    filter: brightness(0.95);
}
.closeDetail:active{
    filter:brightness(0.9);
}

#display{
    height:97%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ecf0f1;
    box-shadow: 0px 0px 20px 4px rgba(0,0,0,0.62);
    border-radius: 10px;
    border: black 1px solid;
    flex: 5;
    width: 100%;
    margin: 5px;
    overflow: auto;
}
.task{
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    align-items: center;
    width:95%;
    height: 70px;
    border: black 2px solid;
    border-radius: 30px;
    background-color: #cacecf;
    flex-shrink: 0;

}
.firstPart{
    display: flex;
    align-items: center;
    margin-left: 30px;
    height:100%;
    max-width:50%;
    overflow:hidden;

}
.firstButtons{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    
}
.completedButton{
    border-radius: 25px;
    background-color: lawngreen;
    border: none;
    border: black 1px solid;
}
.deleteButton{
    border-radius: 30px;
    background-color: tomato;
    border: none;
    border: black 1px solid;
}
.deleteButton:hover,.completedButton:hover{
    filter: brightness(0.9);
}
.deleteButton:active,.completedButton:active{
    filter: brightness(0.8);
}
.firstText{
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 15px;
    max-height:100%;
    max-width: 400px;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}
.completed{
    text-decoration:line-through black solid 2px;
}
.title{
    font-weight: bold;
    border-bottom: black 1px solid;
}
.date{
    font-weight: bold;
    border-bottom: black 1px solid;
}
.secondPart{
    margin-right: 30px;
    display: flex;
    align-items: center;
    height:100%;
    max-width:50%;
    overflow:hidden;
}
.secondButtons{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;

}
.detailsButton{
    border-radius: 50px;
    background-color: skyblue;
    font-weight: bold;
    border: none;
    border: black 1px solid;
}
.editButton{
    background-image: url("./editIcon.png");
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 20px;
    border: none;
    border-radius: 50px;

}
.detailsButton:hover,.editButton:hover{
    filter: brightness(0.9);
}
.detailsButton:active,.editButton:active{
    filter: brightness(0.8);
}
.secondText{
    margin-right: 15px;
    margin-bottom: 7px;
    text-align: center;
    font-size: 15px;
    max-height:100%;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

#navBar{
    height:100%;
    width: 17vw;
    flex:1;
    background-color: #bdc3c7;
    border-right: solid #333 4px;
    
}
#upperSection{
    width: 100%;
    height: 15%;
    border-bottom: black solid 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
}
#upperSection button{
    outline: none;
    background-color: #bdc3c7;
    color: indigo;
    font-size: 19px;
    font-family:Arial, Helvetica, sans-serif;
    border: none;
    font-weight: bolder;
    margin-left: 10px;
    width: 90%;
    text-align: start;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 7px;
}
#upperSection button:hover{
    filter: brightness(0.8);
}
#upperSection button:focus{
    filter: brightness(0.8);
}
#upperSection button:active{
    filter: brightness(0.7);
}
#lowerSection{
    width: 100%;
    height: 85%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}
#lowerSection p{
    outline: none;
    background-color: #bdc3c7;
    color: indigo;
    font-size: 19px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bolder;
    margin-left: 10px;
    width: 90%;
    text-align: start;
    border-bottom: #333 solid 1px;

}
.createProjectButton{
    outline: none;
    background-color: #bdc3c7;
    color: indigo;
    font-size: 17px;
    font-family:Arial, Helvetica, sans-serif;
    border: solid black 1px;
    font-weight: bold;
    margin-left: 10px;
    width: 90%;
    text-align: start;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 10px;
}
.createProjectButton:hover{
    filter: brightness(0.8);
}
.createProjectButton:active{
    filter: brightness(0.7);
}
.projectButtonContainer{
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-left: 10px;
    width:90%;
    
   
}
.projectButton{
    outline: none;
    color: indigo;
    background-color: #bdc3c7;
    width: 100%;
    font-size: 17px;
    font-family:Arial, Helvetica, sans-serif;
    border: none;
    font-weight: bold;
    text-align: start;    
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    border-radius: 7px;
    
}
.projectButton:hover{
    filter: brightness(0.8);
    cursor: default;
}

.projectButton:focus{
    filter: brightness(0.8);
}
.projectButton:active{
    filter: brightness(0.7);
}
.deleteProjectButton{
    border-radius:50%;
    height: 15px;
    font-size: 7px;
    font-weight: bold;
    background-color: tomato;
    border: none;
    border: black 1px solid;
}
.deleteProjectButton:hover,.completedButton:hover{
    filter: brightness(0.9);
}
.deleteProjectButton:active,.completedButton:active{
    filter: brightness(0.8);
}
#footer{
    height: 5vh;
    display: flex;
    background-color: #2c3e50;
    justify-content: center;
    align-items: center;
    color: #d5d1d1;
}