#root{text-align:center;width:100vw;height:100vh}body{background-color:#2c3e50;margin:0}.board{display:flex;flex-direction:row;margin:0 auto}.task-card{display:block;background-color:#1abc9c;border-radius:10px;margin:10px;padding:5px;overflow-y:auto;border:5px solid #1abc9c}.task-blocked{background-color:#e74c3c;border-color:#e74c3c}.task-card.task-overdue{border-color:#e67e22}.task-detail{display:block;float:left;width:100%}.task-id{margin-left:2px;margin-right:5px;display:block;float:left}.task-title{font-weight:700;float:left}.task-impedent{float:right;margin-right:5px}.due-date{margin-bottom:0;text-align:left}.new-task{width:25%;margin:0 auto;background-color:#34495e;padding:20px;border:5px solid #2c3e50;border-radius:20px}.new-task form div{text-align:left;background-color:#34495e}.new-task form div label{display:grid;grid-template-columns:.5fr 1fr;grid-gap:10px;margin-top:10px}.new-task form div label .form-label{font-size:1.25rem;margin:0 20px}.new-task form div .form-actions{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;margin:20px 0 10px 20px;text-align:center}.new-task form div .form-actions button{padding:5px;border-radius:10px;color:#fff;font-size:1.2rem;border:none}.new-task form div .form-actions button:hover{cursor:pointer}.new-task form div .form-actions button.cancel{background-color:#e74c3c;border:5px solid #e74c3c}.new-task form div .form-actions button.cancel:hover{border:5px solid #c0392b}.new-task form div .form-actions button.create{background-color:#2ecc71;border:5px solid #2ecc71}.new-task form div .form-actions button.create:hover{border:5px solid #27ae60}.board-column{width:33%;border:5px solid #2c3e50}.board-column.drag-target{border:5px solid #1abc9c}.prevent-select{-webkit-user-select:none;-ms-user-select:none;user-select:none}footer{display:flex;flex-direction:row;text-align:left;align-items:flex-start;justify-content:flex-start;position:fixed;bottom:0;width:100%;padding:10px;z-index:1000;background-color:#34495e}.tips{width:33%;margin-left:20px}.tips>ul{list-style-type:none;margin-left:0;padding-left:0}.about{width:33%}nav{width:10%;height:100%;position:absolute;top:0;left:0;float:left;background-color:#34495e}nav>a>h2{color:#fff;margin-bottom:0;text-align:center;padding-left:5px}nav>a>h2>.icon{float:left;padding-left:10px}nav>ul{padding:5px}nav>ul>a{color:#fff;text-decoration:none;font-weight:700}nav>ul>a>li{list-style-type:none;padding:10px;margin:0;text-align:left}nav>ul>a:hover,nav>ul>a>li:hover{background-color:#2c3e50;color:#fff;cursor:pointer;border-bottom:1px solid #2ecc71}nav>ul>a>li>.icon{float:left;padding-right:10px;color:#2ecc71}main{width:90%;float:right;overflow-y:scroll;height:80%}table.tasks{width:50%;border-collapse:collapse;text-align:left;margin:20px auto}table.tasks thead{font-size:1.1rem}table.tasks tbody tr{margin-bottom:5px;line-height:2rem}td.col-task-id{width:5%}td.col-task-blocked{width:10%;text-align:center;padding-right:20px}td.col-task-blocked .icon{color:#c0392b;margin-left:auto;margin-right:auto}td.col-task-status{width:10%}td.col-task-date{width:20%}td.task-overdue{color:#c0392b}td.col-task-title{width:50%}td.col-task-actions{width:5%}a{color:#2ecc71;text-decoration:none}a:hover{color:#27ae60}.task-link{text-align:center!important}.task-link a .icon{margin-right:5px}.status-msg{text-align:center!important}.status-msg.error{color:#c0392b}.status-msg.success{color:#27ae60}table.tbl-task-detail{width:30%;margin:0 auto}table.tbl-task-detail td{padding:5px}table.tbl-task-detail td:nth-child(2){text-align:left}.tips>table{width:100%}.tips>table>tbody>tr{display:grid;grid-template-columns:.25fr 1fr}.tips>table>tbody>tr>td{padding:2px 0;line-height:16px}.tips>table>tbody>tr>td>div.colour-box{border-radius:5px;padding:5px;border-width:3px;border-style:solid;border-color:transparent}.green{background-color:#1abc9c}.red{background-color:#c0392b}.orange-border{border-color:#e67e22!important}.tips>table>tbody>tr>td:nth-child(2){margin-left:10px;padding:5px;border-width:3px;border-style:solid;border-color:transparent}input[name=blocked]{width:20px;height:20px;margin-left:0}input[name=id]{border-color:transparent;background-color:#34495e;color:#fff;padding-left:0}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;color:#ecf0f1}