*{box-sizing: border-box;margin: 0;padding: 0;}
body{font-family: Arial, Helvetica, sans-serif;}
/*========================================================================================*/
.list-contain{
   margin: 20px auto;
   width: 50%;
   padding: 10px;
   background-color: #009688;
}
/*========================================================================================*/
.list-contain .header{
   position: relative;
   margin-bottom: 15px;
}
.list-contain .header input{
   font-size: 25px;
   padding: 5px;
   width: 100%;
   height: 50px;
   border: none;
   background-color: rgba(255, 255, 255, 0.3);
}
.list-contain .header input:focus {outline: none;}
.list-contain .header span.add-task{
   background-color: #FFF;
   font-size: 40px;
   line-height: 40px;
   width: 40px;
   height: 40px;
   text-align: center;
   color: #009688;
   position: absolute;
   top: 5px;
   right: 5px;
   border-radius: 50%;
   cursor: pointer;
   transition: transform .25s;
}
.list-contain .header span.add-task:hover {transform: translateX(-5px) rotate(-90deg);}
/*========================================================================================*/
.list-contain .tasks-list .task {
   background-color: rgba(255, 255, 255, 0.3);
   margin-bottom: 10px;
   height: 40px;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
}
.list-contain .tasks-list .done .task-cont {
   text-decoration: line-through;
}
.list-contain .tasks-list .task span {text-transform: capitalize;}
.list-contain .tasks-list .task span.task-cont{
   font-size: 20px;
   line-height: 40px;
   padding: 0 10px;
   flex-grow: 2;
}
.list-contain .tasks-list .task span.task-num,
.list-contain .tasks-list .task span.task-done{
   color: #FFF;
   padding: 5px 10px;
   font-size: 18px;
   line-height: 30px;
   transition: all .2s;
   cursor: pointer;
}
.list-contain .tasks-list .task span.task-num {background-color: rgb(0, 90, 3);cursor: auto;}
.list-contain .tasks-list .task span.task-done {background-color: rgb(140, 0, 0);}
.list-contain .tasks-list .task span.task-done:hover {transform: translate(-5px);}
.list-contain .tasks-list .task span.disabled {background-color: #CCC;cursor: no-drop;}
.list-contain .tasks-list .task span.disabled:hover {transform: none;}
.list-contain .tasks-list .no-tasks{
   background-color: rgba(255, 255, 255, 0.3);
   margin-bottom: 10px;
   height: 40px;
   font-size: 20px;
   line-height: 40px;
   text-align: center;
   text-transform: capitalize;
}
/*========================================================================================*/
.list-contain .footer{
   overflow: hidden;
   margin-top: 15px;
   padding: 5px 10px;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.3);
}
.list-contain .footer div{
   float: left;
   width: 50%;
   font-size: 18px;
   text-transform: capitalize;
   overflow: hidden;
}
.list-contain .footer span{
   color: #FFF;
   padding: 4px 6px;
}
.list-contain .footer .all-tasks{
   float: right;
   text-align: right;
}
.list-contain .footer .completed span {background-color: rgb(0, 90, 3);}
.list-contain .footer .all-tasks span {background-color: rgb(140, 0, 0);}