:root{--bg: #FFF;--bg-darkish: #F0F4F8;--bg-dark: #E8ECF0;--bg-dark-2: #D0D8E0;--fg-dark: #000;--fg: #384C40;--fg-light: #707880;--fg-light-2: #A0ACB8;--primary: #40A0F0;--primary-fg: #FFF;--red: #db2828;--orange: #f2711c;--yellow: #fbbd08;--olive: #b5cc18;--green: #21ba45;--teal: #00b5ad;--blue: #2185d0;--violet: #6435c9;--purple: #a333c8;--pink: #e03997;--brown: #a5673f;--grey: #767676;--black: #1b1c1d}html,body{padding:0;margin:0}body{font:18px Roboto,sans-serif;background-color:var(--bg);color:var(--fg)}body.dragging *{cursor:grabbing!important}html,body,#root{height:100%;overflow:hidden}.color-red{color:var(--red)}.color-orange{color:var(--orange)}.color-yellow{color:var(--yellow)}.color-olive{color:var(--olive)}.color-green{color:var(--green)}.color-teal{color:var(--teal)}.color-blue{color:var(--blue)}.color-violet{color:var(--violet)}.color-purple{color:var(--purple)}.color-pink{color:var(--pink)}.color-brown{color:var(--brown)}.color-grey{color:var(--grey)}.color-black{color:var(--black)}.background-red{background-color:var(--red)}.background-orange{background-color:var(--orange)}.background-yellow{background-color:var(--yellow)}.background-olive{background-color:var(--olive)}.background-green{background-color:var(--green)}.background-teal{background-color:var(--teal)}.background-blue{background-color:var(--blue)}.background-violet{background-color:var(--violet)}.background-purple{background-color:var(--purple)}.background-pink{background-color:var(--pink)}.background-brown{background-color:var(--brown)}.background-grey{background-color:var(--grey)}.background-black{background-color:var(--black)}#root{display:flex;flex-direction:column}main{flex:1 1 0;overflow:scroll;display:flex;flex-direction:column}*{box-sizing:border-box}header{display:block;width:100%;text-align:center;padding:10vh 1rem;background-image:url(/static/login.jpg);background-size:cover;margin:0 auto 1rem}header img{height:4rem}header.active{padding:1rem;margin-bottom:0;background:unset;display:flex;justify-content:space-between;font-size:2rem;height:calc(1em + 2rem)}header.active img{height:1em}header.active .material-symbols-outlined{font-size:1em!important;color:var(--bg-dark-2)}main>*{width:100%;max-width:600px;margin:0 auto}h2{font-size:1.25rem;color:var(--fg-dark);padding:0}h2,p,form.styled{margin-top:0;margin-bottom:1rem}h2:last-child,p:last-child,form.styled:last-child{margin-bottom:0}main>h2,main>p,main>form.styled{padding:0 1rem}p>.highlight{font-weight:700;color:var(--primary)}form.styled{padding:0 1rem}form.styled input,form.styled>button{display:block;width:100%;margin-bottom:1rem;border:unset!important;outline:unset!important;font-size:1rem;padding:.5rem;border-radius:.5rem}form.styled input:last-child,form.styled>button:last-child{margin-bottom:0}form.styled>label{display:block;color:var(--fg-light);font-size:.9rem;margin-bottom:.3rem}form.styled>a{display:block;text-align:center;color:var(--primary);font-weight:700;text-decoration:none}form.styled input{background-color:var(--bg-dark);color:var(--fg)}form.styled input[disabled]{background-color:var(--bg-darkish);color:var(--fg-light-2)}form.styled button{cursor:pointer;font-weight:700;background-color:var(--primary);color:var(--primary-fg)}form.styled button.alt{border:2px solid var(--primary)!important;padding:calc(.5rem - 2px);background-color:var(--bg);color:var(--primary)}form.styled button.red{background-color:var(--red)}form.styled button.red.alt{background-color:var(--bg);border-color:var(--red)!important;color:var(--red)}form.styled button.grey{background-color:var(--fg-light)}form.styled button.grey.alt{background-color:var(--bg);border-color:var(--fg-light)!important;color:var(--fg-light)}form.styled>label>button{color:var(--primary);background-color:transparent;border:unset;outline:unset;font-size:inherit;float:right;cursor:pointer}form.styled .fields{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}form.styled .fields:last-child{margin-bottom:0}form.styled .fields>*{margin-bottom:0}@media (min-width: 961px){header.active{font-size:3rem}}.toast{position:absolute;top:1rem;white-space:nowrap;max-width:calc(100% - 2rem);text-align:center;left:50%;padding:.5rem 1rem;border-radius:.5rem;z-index:2000;color:#807040;background-color:#fcf0d0;box-shadow:0 2px 4px #00000020;transform:translate(-50%) translateY(-1rem) scale(.5);opacity:0;transition:transform .3s ease,opacity .3s ease}.toast.active{transform:translate(-50%);opacity:1}.toast.error{color:#804040;background-color:#fcd0d0}.modal-container{opacity:0;pointer-events:none;position:fixed;left:0;top:0;width:100%;height:100%;display:flex;background-color:#c0c0c080;transition:opacity .3s ease,backdrop-filter .3s ease;z-index:1000}.modal-container.active{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto}.modal-container>.modal{width:600px;max-width:calc(100% - 2rem);background-color:var(--bg);position:absolute;left:50%;top:50%;padding:1rem;border-radius:.5rem;box-shadow:0 8px 16px #00000020;transform:translateY(10rem) translate(-50%,-50%) scale(.5);opacity:0;transition:transform .3s ease,opacity .3s ease}.modal-container.active>.modal{transform:translate(-50%,-50%);opacity:1}.modal-container>.modal>form.styled{padding:0}.buttons{display:flex;gap:1rem;margin-top:1rem}.buttons>button{display:block;width:100%;margin:0;border:unset!important;outline:unset!important;font-size:1rem;padding:.5rem;border-radius:.5rem;cursor:pointer;font-weight:700}.prompt-buttons>button:first-child{border:2px solid var(--primary)!important;padding:calc(.5rem - 2px);background-color:var(--bg);color:var(--primary)}.prompt-buttons>button:last-child{background-color:var(--primary);color:var(--primary-fg)}.color-picker{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}.color-picker>button{border:unset;outline:unset;padding:0;margin:0;width:2rem;height:2rem;border-radius:9999px;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center}.color-picker:last-child{margin-bottom:0}.color-picker>button.background-red{background-color:var(--red)}.color-picker>button.background-orange{background-color:var(--orange)}.color-picker>button.background-yellow{background-color:var(--yellow)}.color-picker>button.background-olive{background-color:var(--olive)}.color-picker>button.background-green{background-color:var(--green)}.color-picker>button.background-teal{background-color:var(--teal)}.color-picker>button.background-blue{background-color:var(--blue)}.color-picker>button.background-violet{background-color:var(--violet)}.color-picker>button.background-purple{background-color:var(--purple)}.color-picker>button.background-pink{background-color:var(--pink)}.color-picker>button.background-brown{background-color:var(--brown)}.color-picker>button.background-grey{background-color:var(--grey)}.color-picker>button.background-black{background-color:var(--black)}.habit-item{display:flex;align-items:center;margin-bottom:.5rem;gap:.5rem}.habit-item>label{flex:1 1 auto;display:flex;align-items:center;gap:.5rem;overflow:hidden}.habit-item>label>.small{transform:scale(.5)}.habit-item>button{border:unset;outline:unset;background:transparent;padding:0;margin:0;cursor:pointer;color:var(--fg-light-2);transition:color .3s ease;height:24px}.habit-item>button:hover{color:var(--fg)}.habit-hide-toggle{display:flex;align-items:center;margin-bottom:.5rem;gap:.5rem}.habit-hide-toggle>label{flex:1 1 auto;display:flex;align-items:center;gap:.5rem;overflow:hidden;cursor:pointer;color:var(--bg-dark-2);transition:color .3s ease}.habit-hide-toggle>label:hover{color:var(--fg-light-2);transition:color .3s ease}.habit-hide-toggle>label>input[type=checkbox]{display:none}.habit-hide-toggle>label>.material-symbols-outlined{color:var(--fg-light-2)}.habit-hide-toggle>label:hover>.material-symbols-outlined{color:var(--fg)}.checkbox{cursor:pointer;display:flex}.checkbox>input[type=checkbox]{display:none}.checkbox>.material-symbols-outlined{color:var(--primary)}.checkbox>.material-symbols-outlined.color-red{color:var(--red)}.checkbox>.material-symbols-outlined.color-orange{color:var(--orange)}.checkbox>.material-symbols-outlined.color-yellow{color:var(--yellow)}.checkbox>.material-symbols-outlined.color-olive{color:var(--olive)}.checkbox>.material-symbols-outlined.color-green{color:var(--green)}.checkbox>.material-symbols-outlined.color-teal{color:var(--teal)}.checkbox>.material-symbols-outlined.color-blue{color:var(--blue)}.checkbox>.material-symbols-outlined.color-violet{color:var(--violet)}.checkbox>.material-symbols-outlined.color-purple{color:var(--purple)}.checkbox>.material-symbols-outlined.color-pink{color:var(--pink)}.checkbox>.material-symbols-outlined.color-brown{color:var(--brown)}.checkbox>.material-symbols-outlined.color-grey{color:var(--grey)}.checkbox>.material-symbols-outlined.color-black{color:var(--black)}.progress{display:flex;flex-direction:column;align-items:center;font-size:.9rem;font-weight:700;color:var(--fg-light-2);line-height:1;min-width:2.5rem;margin-left:.25rem;margin-right:-.25rem}.progress-bar{width:100%;height:.25rem;margin-top:.1rem;border-radius:9999px}@media (min-width: 961px){.progress{font-size:.8rem;padding:0 .25rem;min-width:unset;margin-left:unset;margin-right:unset}}#new-habit>label>input[type=text]{flex:1 1 auto;border:unset!important;outline:unset!important;font:inherit!important;color:inherit!important;padding:0!important;margin:0!important}#new-habit>label>input[type=text]::placeholder{color:var(--bg-dark-2)}#new-habit .material-symbols-outlined{color:var(--fg-light-2);transition:color .3s ease}#new-habit>label:hover .material-symbols-outlined,#new-habit:has(input:focus) .material-symbols-outlined{color:var(--fg)}#habit-table-page{flex:1 1 0;overflow:hidden;display:flex;position:relative;--list-width: 30vw}#habit-table-page:before{content:"";position:absolute;left:0;top:0;width:100%;height:2rem;background:linear-gradient(to bottom,rgba(0,0,0,.05),transparent);z-index:2;pointer-events:none;opacity:0;transition:opacity .3s ease}#habit-table-page.scroll-top:before{opacity:1}#habit-table-container{width:100%!important;max-width:unset!important;height:100%;margin:0!important;padding:0;overflow-x:scroll;overflow-y:auto}#habit-table{width:auto;border-spacing:0}#habit-table th{font-size:.8rem;padding:0 .25rem;margin:0;color:var(--fg-light-2)}#habit-table th .sticky{position:sticky;left:var(--list-width);display:block;width:fit-content;padding-right:.5rem;background-color:var(--bg);line-height:1rem}#habit-table th.date{width:2rem;min-width:2rem;padding-top:calc(1rem - 12px)}#habit-table th .today{display:inline-block;line-height:1;padding:.2rem 0;min-width:1.2rem;background-color:var(--primary);color:var(--primary-fg);border-radius:99999px}#habit-table td{width:2rem;height:2rem;padding:0;margin:0;overflow:hidden;background-color:var(--bg);cursor:grab}#habit-table th{background-color:var(--bg)}#habit-table td>.habit-item{margin:0;white-space:nowrap;text-overflow:ellipsis}#habit-table td>.habit-item>label{cursor:grab}#habit-table td>.habit-hide-toggle{margin:0}#habit-table td>label{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center}#habit-table th:first-child,#habit-table td:first-child{width:var(--list-width);min-width:var(--list-width);max-width:var(--list-width);padding:0 calc(1rem - 12px);position:sticky;left:0;z-index:1;overflow:visible}#habit-table tr:last-child>th:first-child:after,#habit-table td:first-child:after{content:"";position:absolute;top:0;right:-2rem;width:2rem;height:100%;background-color:red;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.05),transparent)}#habit-table tr:last-child>td:first-child:after{content:unset}#habit-table .alt-week{background-color:var(--bg-darkish)}#habit-table .alt-week label{position:relative}#habit-table .alt-week label:before{content:"";position:absolute;background-color:var(--bg);left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;z-index:0}#habit-table .alt-week label .material-symbols-outlined{position:relative;z-index:0}#habit-table th.alt-week-start{border-top-left-radius:.375rem}#habit-table th.alt-week-end{border-top-right-radius:.375rem}#habit-table tr:nth-last-child(2)>td.alt-week-start{border-bottom-left-radius:.375rem}#habit-table tr:nth-last-child(2)>td.alt-week-end{border-bottom-right-radius:.375rem}#habit-list-page{flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;height:100%}#habit-list-page>h2{display:flex;justify-content:space-between;grid-area:header;padding:0 1rem}#habit-list-page h2 .material-symbols-outlined{vertical-align:top;color:var(--fg-light-2);transition:color .3s ease}#habit-list-page h2 .material-symbols-outlined:hover{color:var(--fg)}#habit-list-container{flex:1 1 auto;overflow:hidden;position:relative}#habit-list-container:before{content:"";position:absolute;left:0;top:0;width:100%;height:2rem;background:linear-gradient(to bottom,rgba(0,0,0,.05),transparent);z-index:100;pointer-events:none;opacity:0;transition:opacity .3s ease}#habit-list-container.scroll-top:before{opacity:1}#habit-list-container:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2rem;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.05));z-index:100;pointer-events:none;opacity:0;transition:opacity .3s ease}#habit-list-container.scroll-bottom:after{opacity:1}#habit-list{padding:0 1rem;overflow-y:auto;height:100%}#calendar{flex:0 0 auto;padding:1rem}#calendar h2{text-align:center;margin:0;display:flex;justify-content:space-between}#calendar h2 .material-symbols-outlined{margin:0 0 1rem;cursor:pointer}#calendar table{margin:0;width:100%;cell-spacing:0;table-layout:fixed}#calendar table th{color:var(--fg-light-1)}#calendar table td{text-align:center;cursor:pointer;position:relative}#calendar table td span{display:inline-block;width:2em;height:2em;text-align:center;line-height:2em;border-radius:999999px;color:var(--fg-light)}#calendar table td:hover span{background-color:var(--bg-darkish)}#calendar table td.today span{background-color:var(--bg-dark);color:var(--fg)!important}#calendar table .weekend{font-style:italic}#calendar table td.outside span{color:var(--bg-dark-2)}.habit-marks{position:absolute;left:50%;top:calc(100% - .6rem);gap:.1rem;transform:translate(-50%);display:flex}.habit-marks>div{width:.3rem;height:.3rem;border-radius:9999px}.radio-buttons{padding:.25rem;background-color:var(--bg-dark);border-radius:.5rem;margin-bottom:1rem;display:flex;gap:.5rem;position:relative}.radio-buttons:last-child{margin-bottom:0}.radio-buttons>.radio-buttons-selector{position:absolute;top:.25rem;height:calc(100% - .5rem);background-color:var(--primary);border-radius:.25rem;pointer-events:none;transition:left .3s ease}.radio-buttons>button{flex:1 1 0;color:var(--fg-light-2)!important;font-weight:700;background-color:transparent!important;border:unset;outline:unset;position:relative;font-size:1rem;height:1.75rem;line-height:1.75rem;cursor:pointer;transition:color .3s ease;padding:0;margin:0;white-space:nowrap}.radio-buttons>button.active{color:var(--primary-fg)!important}#profile>h2{max-width:calc(648px + 2rem)}#profile>h2 .material-symbols-outlined{vertical-align:top;color:var(--fg-light-2);margin-right:1rem;transition:color .3s ease}#profile>h2 .material-symbols-outlined:hover{color:var(--fg)}#dateFormat>button{font-size:.8rem}@media (min-width: 961px){#dateFormat>button{font-size:1rem}}