body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--idle-h: 197;--late-h: 0;--due-h: 51;--early-h: 120;--due-over-h: 39;--unknown-h: 300;--task-s: 100%;--task-l: 40%;--unknown-color: violet;--idle-color: skyblue;--early-color: forestgreen;--due-color: gold;--due-over-color: orange;--late-color: indianred;font-size:16px;overflow-wrap:anywhere}body{background-color:#f8f8ff}label{display:block}@keyframes completed-animation{0%{-webkit-transform:perspective(5000px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(5000px) rotateY(90deg);opacity:0}}@keyframes delete-animation{0%{opacity:1;max-height:400px}to{opacity:0;max-height:0}}@keyframes appear{0%{-webkit-transform:perspective(5000px) rotateY(270deg);opacity:0}to{-webkit-transform:perspective(5000px) rotateY(360deg);opacity:1}}.new{color:#aaa!important;background-color:#ddd!important;cursor:pointer;text-align:center;user-select:none}.new:active{color:#555!important;background-color:#999!important}.new:hover{color:#888!important;background-color:#b6b6b6!important}.add-instance{background-color:#aaa;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(500px,100vw - 90px);padding:5%;line-height:30px;border-radius:3px}.add-instance-inner{max-height:90vh;overflow-y:scroll;overflow-x:hidden;user-select:none}.add-instance-background{cursor:auto;background-color:#000a;width:100%;height:100%;position:fixed;top:0;left:0;z-index:101}.form-corner-button{border:solid 2px #aaa;position:absolute;top:-1em;right:-1em;background-color:#000;border-radius:120px;width:2em;height:2em;color:#a9a9a9;display:inline-flex;place-content:center;align-items:center}.form-corner-button:hover{color:#ff6c6c}.form-corner-button:active{background-color:#520000}.time-interval-form{display:inline-block;width:max-content;margin-right:1em}.time-interval-form input[type=number]{width:80px}:root{--menu-border: 1px;--menu-border-negative: -1px}.task-menu{cursor:pointer;position:relative;border-radius:3px;margin-right:-4px;user-select:none}.task-menu:hover{background-color:#fff2}.task-menu.active{background-color:#aaa;border-radius:3px 3px 0 0}.task-menu.active .task-menu-button{background-color:inherit;border-radius:3px 3px 0 0;border:solid var(--menu-border) black;border-bottom:none;margin:var(--menu-border-negative) var(--menu-border-negative) 0 var(--menu-border-negative);z-index:101;position:inherit}.task-menu-content{position:absolute;z-index:100;right:0;width:max-content;background-color:inherit;border-radius:3px 0 3px 3px;border:solid var(--menu-border) black;transform:translate(var(--menu-border),var(--menu-border-negative))}.task-menu-content-item{padding:5px;cursor:pointer;background-color:inherit}.task-menu-content-item:first-of-type{border-radius:3px 0 0}.task-menu-content-item:last-of-type{border-radius:0 0 3px 3px}.task-menu-content-item:hover{background:#ccc;mix-blend-mode:multiply}.task-menu-content-item:active{background:#bbb;mix-blend-mode:multiply}.submenu-item{padding:5px 5px 5px 10px;font-weight:300;font-size:.95rem;margin:0 -5px}.submenu-item:hover{background:#bbb;mix-blend-mode:multiply}.task-card.late .task-menu.active{background-color:var(--late-color)}.task-card.due .task-menu.active{background-color:var(--due-color)}.task-card.idle .task-menu.active{background-color:var(--idle-color)}.task-card.early .task-menu.active{background-color:var(--early-color)}.task-card.unknown .task-menu.active{background-color:var(--unknown-color)}.task-card.due-over .task-menu.active{background-color:var(--due-over-color)}.task-name{font-size:large}.task-card{margin:10px;background-color:#87ceeb;border-radius:10px;box-shadow:5px 5px 10px #666}.task-card.idle{background-color:var(--idle-color)}.task-card.late{background-color:var(--late-color)}.task-card.due{background-color:var(--due-color)}.task-card.early{background-color:var(--early-color)}.task-card.unknown{background-color:var(--unknown-color)}.task-card.due-over{background-color:var(--due-over-color)}.task-card.checked{background-color:gray;animation-name:appear;animation-duration:1s;animation-timing-function:ease-in;animation-fill-mode:forwards}.task-card.completed{animation-name:completed-animation;animation-duration:1s;animation-timing-function:linear;animation-fill-mode:forwards}.task-card.deleted{overflow:hidden;animation-name:delete-animation;animation-duration:.7s;animation-timing-function:linear;animation-fill-mode:forwards}.task-card .edit{background-color:#fff3;padding:10px;margin-top:10px;width:max-content}.task-header{background-color:#0003;padding:5px 10px;border-radius:10px 10px 0 0;display:flex;gap:10px}.task-time{flex-grow:1;font-size:.8rem;display:grid;grid-template-columns:minmax(max-content,1fr) minmax(max-content,1fr) minmax(max-content,1fr)}.time-box{flex:10;display:flex;justify-content:center}.time-box.dl{font-weight:700}.time-box:first-child>span{margin-right:auto}.time-box:last-child>span{margin-left:auto}.time-box>span{display:flex;align-items:center;gap:1ex}.time-symbol{font-size:1rem;margin:-.3rem 0 -.5rem}.task-time.stacked{grid-template-columns:auto}.unknown-child .task-header{background:linear-gradient(90deg,rgba(0,0,0,.2) 66%,var(--unknown-color))}.task-body{padding:10px;display:flex;justify-content:space-between}.done-button{margin-right:0;font-size:2rem;background-color:#3da53d;border:#000 solid 1px;border-radius:10px;padding:2px 8px;margin-left:10px;opacity:.9;color:#182418}.done-button:hover{filter:brightness(.8)}.done-button:active{filter:brightness(.7)}.done-button-wrapper{display:block;margin-top:auto;z-index:1}.child-task-list{width:100%}.child-task{background-color:brown;width:100%;display:flex;margin:4px 0;padding-left:8px;vertical-align:middle;justify-content:space-between;align-items:center;border-radius:7px;font-size:.9rem;font-weight:300}.child-task.idle{background-color:var(--idle-color)}.child-task.late{background-color:var(--late-color)}.child-task.due{background-color:var(--due-color)}.child-task.early{background-color:var(--early-color)}.child-task.unknown{background-color:var(--unknown-color)}.child-task.due-over{background-color:var(--due-over-color)}.child-task .done-button svg{font-size:1rem}.child-task .done-button{font-size:1.5rem;padding:0 6px;border-radius:7px;margin:4px}.child-task-time-info{color:#0006;font-size:small;font-weight:300;margin-right:auto;margin-left:5px;display:grid;grid-template-columns:repeat(5,auto);column-gap:8px}.tasklist{margin:0 max(50vw - 20em,10px);padding-bottom:60px}.today-separator{height:2px;background-image:linear-gradient(90deg,#000 25%,#0000 25%,#0000 50%,#000 50%,#000 75%,#0000 75%,#0000 100%);background-size:19%}:root{--list-bar-animation-duration: .4s}.list-options-bar{position:fixed;bottom:0;display:flex;justify-content:flex-end;height:40px;padding:5px;width:100%;background:rgb(105,155,155);z-index:2}.list-options-bar-animate-enter{bottom:-40px;opacity:0}.list-options-bar-animate-enter-active{opacity:1;bottom:0;transition:var(--list-bar-animation-duration)}.list-options-bar-animate-exit-active{bottom:-40px;opacity:0;transition:var(--list-bar-animation-duration);transition-timing-function:ease-in}.list-options-bar-animate-exit-active .list-options-bar-show-button.hide,.list-options-bar-animate-enter-active .list-options-bar-show-button.hide{opacity:0}.show-button-animate-enter{rotate:180deg;background-color:#aaa0}.show-button-animate-enter-active{rotate:0deg;background-color:#aaa9;transition:var(--list-bar-animation-duration)}.show-button-animate-enter-done,.show-button-animate-exit{background-color:#aaa9}.show-button-animate-exit-active{rotate:180deg;background-color:#aaa0;transition:var(--list-bar-animation-duration)}.list-options-bar button{margin-right:16px;border:1px;border-radius:5px}.list-options-bar button.selected{background-color:#000;color:#d3d3d3}.list-options-bar-show-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.list-options-bar-show-button.activate{position:fixed;bottom:5px;right:5px;z-index:2;padding:5px;border-radius:30px;width:30px;height:30px}.list-options-bar-show-button.hide{margin-right:10px}.bar{background-color:#2f4f4f;display:flex;justify-content:right;align-items:center}.bar>div{color:#d3d3d3;margin:10px}.bar a{color:#d3d3d3;font-weight:bolder;text-decoration:none}div#logo{flex-grow:1}img#logo{height:1cm}.shopping-list{padding-bottom:60px}.shopping-list-section{display:block;padding:2px 10px 10px}.shopping-list-section>h2{text-align:center;margin:0 4px;font-size:medium;color:#0006;user-select:none}.shopping-list-section .checked{text-decoration:line-through;color:#0006;font-weight:400}.shopping-list-section ul{list-style:none;padding-left:0;margin-top:0}.shopping-list-section li{cursor:pointer;font-weight:500;padding:3px 0}.shopping-list-section li:active{background-color:#0003}.shopping-list-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),auto));gap:10px;margin:0 10px}.add-section{display:flex;align-items:center;justify-content:center;font-size:30px}@media (pointer: fine){.shopping-list-section li{padding:0}}.toast-container{position:fixed;right:0;z-index:200}.toast{background-color:#e65252;margin:5px;padding:5px;border-radius:5px;width:200px}.toast.info{background-color:#5a5af3}.toast.warn{background-color:#bdb143}.list-card{color:#000;background-color:#87ceeb;display:inline-block;padding:20px;margin:10px}.task-list-list a{text-decoration:none}.list-card.shopping-l{background-color:#d3d3d3;border:2px solid black;color:green;padding:18px}.list-card.late{background-color:#f17979}.list-card.due{background-color:#ffa22b}.list-card.early{background-color:#5ac05a}.list-card.today{background-color:#ffe030}.list-card.unknown.late{background:linear-gradient(rgb(241,121,121) 50%,rgb(241,96,241))}.list-card.unknown.due{background:linear-gradient(rgb(255,162,43) 50%,rgb(241,96,241))}.list-card.unknown.early{background:linear-gradient(rgb(90,192,90) 50%,rgb(241,96,241))}.list-card.unknown.idle{background:linear-gradient(skyblue 50%,rgb(241,96,241))}.list-card.unknown.today{background:linear-gradient(rgb(255,224,48) 50%,rgb(241,96,241))}@media only screen and (max-width: 500px){.list-card{display:block;text-align:center}.list-card.new:after{content:" Luo uusi lista!"}}