:root{--color-shadow:#0003;--width-center-contaner:clamp(300px,95vw,900px);--color-btn-primary:#28a745;--color-btn-primary-hover:#218838;--color-backdrop:#0000009c;--color-bg-taskpage:#fefff3fa;--color-priority-high:#ff6429;--color-priority-middle:#eecc23;--color-priority-low:#79b52055}*{box-sizing:border-box;margin:0;padding:0}button{cursor:pointer}@media (hover:hover){button:hover{opacity:.8;transform:scale(1.01)}}html,body{background-color:#f4f4f9;flex-direction:column;justify-content:flex-start;align-items:center;font-family:Arial,sans-serif;display:flex}.task-info{text-align:center;color:#333;width:100%;margin-bottom:10px;font-size:18px}.add-task-container{width:100%;margin:5px 5px 20px;display:flex}.new-task-input{border:1px solid #ddd;border-radius:5px 0 0 5px;flex:1;margin-right:10px;padding:10px;font-size:16px}.add-task-button{background-color:var(--color-btn-primary);color:#fff;cursor:pointer;border:none;border-radius:0 5px 5px 0;padding:10px 20px;font-size:16px}.task-list{height:78vh;width:var(--width-center-contaner);overflow:overlay;flex-direction:column;align-items:center;display:flex}.task-list-item__info{opacity:.3;background-color:#f5f5cf85;border-radius:5px;width:fit-content;min-width:30%;height:20px;display:flex;position:absolute;top:0;right:1%}.task-list-item__time{width:6em;margin-left:1em}.task-list-item{-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#fff;border-radius:9%/33% 0%;justify-content:space-between;align-items:center;width:100%;margin-bottom:5px;padding:15px;transition:background-color .3s;display:flex;position:relative;box-shadow:0 4px 8px #0000001a}.done{background-color:#dde4d7}.task-list-item:hover{background-color:#e6e6e6}.task-list-item.low-priority{border-left:4px solid var(--color-priority-low)}.task-list-item.middle-priority{border-left:4px solid var(--color-priority-middle)}.task-list-item.high-priority{border-left:4px solid var(--color-priority-high)}.task-title{white-space:nowrap;text-overflow:ellipsis;color:#333;font-size:18px;font-weight:700;overflow:hidden}.task-controls{gap:10px;display:flex}.task-delete-button{cursor:pointer;color:#007bff;pointer-events:auto;background-color:#0000;border:none;font-size:14px}.task-date,.task-status{color:#666;font-size:14px}.task-tags{display:flex}.task-tag{cursor:pointer;background-color:#f1f1f1;border-radius:14px;margin:2px;padding:10px}.task-tag:hover{background-color:#e1e1e1}.tag-container{flex-flow:column wrap;gap:5px;padding:10px;display:flex}#tag-input{box-sizing:border-box;-webkit-appearance:none;-webkit-user-select:text;-webkit-tap-highlight-color:transparent;border:1px solid #ccc;border-radius:5px;flex:1;width:80%;margin-left:5px;padding:5px;font-size:16px}.add-tag-button{border:none;border-radius:5px;padding:9px}.install-app-block{z-index:1;background-color:#f4f4f9;flex-direction:column;justify-content:space-evenly;align-items:baseline;width:100%;height:50%;padding:10px;font-size:6vmin;display:flex;position:absolute;top:0;left:0}.install-app-block button{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:5px;padding:10px 20px;font-size:16px}.install-app-block #install-late-btn{background-color:#817e7c80}.modal-confirm{z-index:3;background-color:#fff;border-radius:5px;justify-content:center;align-items:center;padding:10px;font-weight:700;display:flex;position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 8px #0000001a}.modal-confirm button{margin:15px 5px;padding:5px 10px}.action-container{justify-content:space-between;align-items:center;gap:1rem;margin:5px;display:flex}.search-container{display:flex}.search-button{background-color:var(--color-btn-primary);cursor:pointer;border:none;border-radius:5px;outline:none;justify-content:center;align-items:center;margin:0 5px;padding:10px 15px;transition:background-color .3s;display:flex}.search-input{border:1px solid #ddd;border-radius:5px;flex:1;width:100%;padding:10px;font-size:16px;display:none}.search-input:not(.hide){display:block}.clear-search-button{cursor:pointer;color:#33333380;background:0 0;border:none;outline:none;transition:color .3s;display:none;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.clear-search-button:hover{color:#333}.search-container .search-input:not(.hide)~.clear-search-button{display:block}.sort-button{background-color:var(--color-btn-primary);cursor:pointer;border:none;border-radius:5px;outline:none;justify-content:center;align-items:center;margin-left:10px;padding:10px 15px;transition:background-color .3s;display:flex}.sort-options{z-index:100;justify-self:anchor-center;background-color:#fff;border-radius:5px;padding:10px;display:none;position:fixed;top:8%;box-shadow:0 4px 8px #0000001a}.sort-options:not(.hide){display:block}.sort-option{cursor:pointer;border-radius:10px;padding:10px}.sort-option:hover{background-color:#f4f4f9}.sort-option.active{background-color:#e9c647}.tags-button{background-color:var(--color-btn-primary);cursor:pointer;border:none;border-radius:5px;outline:none;justify-content:center;align-items:center;margin-left:10px;padding:10px 15px;transition:background-color .3s;display:flex}.tag-screen{z-index:101;background-color:#f9f9f9;width:320px;height:100%;transition:transform .6s ease-out;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(110%)skew(-3deg,3deg);box-shadow:-3px 0 6px #00000080}.tag-screen:not(.hide){transform:translate(0)}.modal-backdrop{background-color:var(--color-backdrop);z-index:100;opacity:0;width:100%;height:100%;transition:opacity .6s ease-in-out;display:none;position:fixed;top:0;left:0}.modal-backdrop.visible{opacity:1;display:block}.tag-list{flex-flow:wrap;padding:20px;display:flex}.tag-option{cursor:pointer;color:#333;background-color:#6383638f;border-bottom:1px solid #e0e0e0;border-radius:19px;margin:1px;padding:12px;font-size:16px}@media (hover:hover){.tag-option:hover{background-color:#e7e7e7}}.tag-option.tag-selected{background-color:#d9ce42d9}.tag-count{vertical-align:super;background-color:bisque;border-radius:50%;margin-left:5px;padding:2px 6px;font-size:12px;line-height:1;display:inline-block}.task-page-conteiner{overflow-y:auto}.task-page-content{width:var(--width-center-contaner);z-index:2;background-color:var(--color-bg-taskpage);border-radius:9px;flex-direction:column;margin:50px 0 77px;display:flex;position:relative}.task-page__prioriry-btn{color:#9bea65cc;cursor:pointer;background-color:#43444382;border-radius:50%;padding:.5em;font-size:.9em}.task-page__prioriry-btn.active{color:#000;background-color:#e7bd21cc;font-weight:900}.task-page__prioriry-btn.active:first-of-type{background-color:var(--color-priority-high)}.task-page__prioriry-btn.active:nth-of-type(2){background-color:var(--color-priority-middle)}.task-page__prioriry-btn.active:nth-of-type(3){background-color:var(--color-priority-low)}.task-page-content .task-page__header{flex-wrap:wrap;justify-content:space-evenly;align-items:center;display:flex}.task-page__status-container{justify-content:end;align-items:center;width:30%;display:flex}.task-page__status{width:100%}.task-page__status button{color:#9bea65cc;cursor:pointer;text-transform:capitalize;background-color:#43444382;border-radius:.5em;padding:.5em;font-size:.9em}.task-page__status-list{cursor:pointer;background-color:#1b2025c9;flex-direction:column;list-style-type:none;display:flex;position:absolute;top:.3em}.task-page__status-list button{color:#9bea65cc;cursor:pointer;background-color:#1b2025c9;border-radius:.7em;margin:.1em;padding:.4em;position:relative}@media (hover:hover){.task-page__status-list button:hover{opacity:.8;transform:scale(1.01)}}.task-page-content h2{color:#333;margin:20px 0;font-size:24px}.task-page-content form{background-color:var(--color-bg-taskpage);border-radius:8px;padding:10px;box-shadow:0 0 10px #0000001a}textarea{resize:both;border:1px solid #ccc;border-radius:5px;width:100%;padding:10px;font-size:16px;overflow:auto}.task-page-content label{color:#555;margin-bottom:5px;font-weight:700;display:block}.task-page__duedate{justify-content:space-evenly;align-items:center;display:flex}.task-page-content input{border:1px solid #ccc;border-radius:5px;width:100%;margin-bottom:15px;padding:10px;font-size:16px}.task-page-content select{background-color:#b5bd3f33;border:1px solid #ccc;border-radius:5px;width:100%;margin-bottom:15px;padding:10px;font-size:16px}.task-page-content input[type=date]{border:1px solid #ccc;border-radius:5px;width:fit-content;margin-bottom:15px;padding:10px;font-size:16px}textarea:focus,input:focus{border-color:#007bff11;outline:none;box-shadow:0 0 0 2px #007bff40}.task-page-content p{color:#313345cc;align-self:center;margin-top:10px;font-size:18px}.task-modal{background-color:#faebd7;justify-content:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.backdrop{background-color:var(--color-backdrop);width:100%;height:100%;position:fixed}.footer{color:#fff;text-align:center;background-color:#333;border-radius:0 0 10px 10px;width:100vw;margin-top:20px;padding:15px;font-size:14px;position:relative;bottom:0;left:0}