.task{-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:30%;margin:1%;position:relative}.task span{position:absolute;top:5px;right:5px;width:20px;height:20px;padding:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;background-color:rgba(0,0,0,.2);cursor:pointer}.task span i{font-size:10px}.pending{background-color:#f44336;border-left:12px solid #b73229}.done{color:#ddd;border-left:12px solid #0a8f08;background-color:#4caf50;text-decoration:line-through}@media (min-width:320px){.task{width:100%}}@media (min-width:480px){.task{width:45%}}@media (min-width:769px){.task{width:45%}}@media (min-width:1281px){.task{width:30%}}.tasks-progress{border:1px solid #fff;border-radius:2rem;width:100%;height:30px;position:relative;background-color:hsla(0,0%,100%,.3)}.progress-bar{border-radius:2rem;height:100%}.progress-value{position:absolute;left:calc(50% - 25px);height:100%;top:2px;width:50px}body{font-family:Lato,sans-serif;background:-webkit-gradient(linear,left top,right top,from(#16222a),to(#3a6073));background:linear-gradient(90deg,#16222a,#3a6073);color:#fff}