.sorter { display: inline-flex; max-width: unset; overflow-x: scroll; position: relative; column-gap: 0.5em; min-height: 80vh; }
.sorter > div { width: 14em; max-width: 16em; min-width: 12em; padding: 0 0.7em 4em; text-align: left; background-color: var(--beige); height: calc(100vh - 16em); overflow: scroll; scroll-padding: 3em; }
.sorter > div > h3 { padding: 0.7em 0; margin: 0 0 0.8em; font-variation-settings: "wght" 750; text-align: left; font-size: 0.9em; position: sticky; top: 0; z-index: 3; background: inherit; }
.sorter ul { display: inline-grid; grid-gap: 0.3em; margin: 0 0 2em; scroll-padding: 3em; }
.sorter ul li { width: 100%; margin: 0 0 auto; padding: 0.7em; scroll-padding: 3em; }
.sorter label { width: 100%; text-align: left; }
.sorter input[type=checkbox] + label { display: block; }
.sorter .newObj { border: 1px dotted; padding: 0; margin: 0.2em 0 0; }
.sorter .newObj svg { width: 1em; padding: 0.15em; }
.sorter li input[type=checkbox] + label svg { border: none; }
.sorter li input[type=checkbox]:checked + label svg { color: var(--turquoise); background-color: transparent; }
.sorter li div svg { width: 1em; }
.epics { font-size: 0.8em; max-width: unset; }
.epics > div { padding: 0.5em; background-color: var(--beige); }
ul.epics:empty { display: block; width: 100%; color: var(--brock); border: 1px dashed; padding: 0.5em; }
ul.epics:empty:after { content: attr(title); }
.epics li { display: grid; grid-template-columns: 1fr auto; width: 100%; background-color: var(--cream); border-left: 4px solid var(--cream); }
.epics li * { padding: 0; text-align: left; }
.epics li div { position: relative; }
.epics li h2 { font-size: 1.1em; }
.epics li p { max-height: 2.5em; overflow: hidden; grid-column: 1 / -1; }
.epics li span { width: 100%; text-align: left; }
.epics li svg { margin: auto; }
.epics li svg.right { position: absolute; top: 0; bottom: 0; right: 0.5em; left: auto; opacity: 0.2; color: var(--cafe); font-size: 1.5em; padding: 0 !important; }
.epics .F { border-color: var(--myred); }
.epics .S { border-color: var(--yellow); }
.epics .P { border-color: var(--turquoise); }
.epics .A { border-color: var(--black); }
.epics .C { border-color: var(--mauve); }
.epics .V { border-color: var(--orange); }
.epics .hl { -webkit-filter: drop-shadow( 0px 0px 4px var(--notif) ); scroll-padding: 5em; }
.epics .sorter ul { scroll-padding: 5em; }
.epics .dropable { -webkit-filter: drop-shadow( 0px 0px 2px var(--youCan) ); border-width: 0 0 0 4px; }
.epics .newObj:first-child { margin: 2em 0 0; grid-template-columns: 1fr; }
.epics .newObj:first-child:before { content: attr(placeholder); display: block; width: 100%; position: absolute; margin-top: -2em; }
.epics :not(.ctn) [contenteditable], [id*=epics_] :not(.ctn) [contenteditable] { background: none; padding-right: 0; }
svg.F, svg.S, svg.P, svg.A, svg.C, svg.V { width: 0.8em; height: 0.8em; border: none; }
svg.F { color: var(--red); }
svg.S { color: var(--yellow); }
svg.P { color: var(--turquoise); }
svg.A { color: var(--black); }
svg.C { color: var(--mauve); }
svg.V { color: var(--orange); }
.foots li.popup .sidelabel div { }
li[id*=ep].popup { display: grid; grid-template-rows: auto 1fr auto; }
li[id*=ep].popup .sidelabel { height: 100%; margin: 0 0 auto; place-content: start; }
li[id*=ep] > .onpop { grid-template-rows: 2.7em 1fr auto; grid-gap: 1em; height: 100%; }
li[id*=ep] .sidelabel > div { position: relative; margin: 0 0 auto; }
li[id*=ep] .abs.flex { right: 0; font-size: 0.8em; top: -0.8em; }
li[id*=ep] .flex .btn { padding: 0; }
li[id*=ep] button { width: 5.5em; text-align: center; }
li[id*=ep] h4 { padding: 0.15em 0 0.4em; }
li[id*=ep] h5 { padding: 0 0 0.5em; color: var(--brack); }
li[id*=ep] h6 { color: #999; font-size: 0.8em; text-align: left; color: var(--brack); }
.stack .epics { max-height: 30vh; overflow: scroll; padding: 0.2em; padding-left: 0; }
.splitlines { position: relative; width: 36em; }
.splitlines ul { margin: 0 auto; }
.splitlines li { grid-template-columns: 1fr 4em 4em 4em 4em 4em 2em; grid-gap: 0.5em; text-align: right; border: none; }
.splitlines h5 { grid-column: 1 / -1; text-align: left; width: 100%; padding-top: 1em; font-variation-settings: "wght" 300; }
.splitlines input { width: 100%; padding: 0.3em; }
.splitlines input[type=text] { text-align: left; }
.splitlines input[type=number] { }
.splitlines .newObj { text-align: left; font-size: 0.75em; border: none; font-variation-settings: "wght" 300; padding: 0; }
@media only screen and (max-width: 609px) { .splitlines { width: 100%; }
.splitlines li { grid-template-columns: 1fr 2em 2em 2em 2em 2em 1.5em; }
}
.tasks li { grid-template-columns: 3em 1fr 1.35em auto; text-align: left; }
.tasks input[type] { width: 2em; padding: 0; background-color: transparent; }
.tasks li span:last-child { }
.tasks li span:last-child label { float: right; display: block; }
.tasks li span:last-child label svg { padding: 0; }
.tasks li span :checked + label { color: var(--notif); }
.tasks img { border-radius: inherit; }
.sider { display: grid; grid-template-columns: auto auto; grid-gap: 2em; width: fit-content; margin: 0 auto auto !important; }
.sider > .stack { position: static; display: block; width: 20em; padding: 0 1.5em 1.5em; text-align: left; background-color: var(--light); color: var(--dark); }
.sider > .stack > :first-child { display: block; }
.side h4 { padding: 1.5em 0; }
.side h5 { padding: 1em 0 0.5em; font-variation-settings: "wght" 400; }
.side .ctn { background-color: var(--input); min-height: 5em; margin-bottom: 1.5em; }
.side .ctn[name=content] p:first-child:empty:after { content: 'New preset message'; }
.side #styler { font-size: 0.7em; background-color: var(--bright); }
.side summary label svg { top: -0.05em; }
.side :checked + label svg { border-radius: 1em; background-color: var(--action); padding: 0.25em; color: var(--bright); }
.side .fineprint { margin-top: 1.5em; }
.messages { margin: 0 auto auto; }
.messages li { display: block; text-align: left; min-width: 45vw; color: var(--dark); }
.messages li[tgt] { background-color: var(--bright); color: var(--text); }
.messages div { padding: 0.5em; margin: 0.5em 0; border-left: 1px dotted; max-height: 4em; overflow: scroll; }
.messages li .tools { position: absolute; width: auto; right: 1.2em; top: 1.2em; grid-gap: 0.75em; display: flex; padding: 0; margin: 0; border: none; }
.messages li .tools svg { padding: 0; }
.messages li .tools label svg { padding: 0; top: unset; }
.messages li .tools .fineprint { padding: 0 2em 0.15em 0; display: inline; opacity: 0.5; font-variation-settings: "wght" 400; }
.messages span[name]:empty { display: none; }
.messages span[name] { display: inline; }
.messages .status { position: absolute; top: 2em; right: 1em; text-align: right; border: none; color: var(--cafe); }
form.stack > div:first-child { width: fit-content; height: auto; margin: auto; display: flex; grid-gap: 0.3em; }
.thread { margin-bottom: 8em; }
.thread .oneline { width: 100%; margin: 0; }
.posts { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; list-style: none; grid-gap: 1em; margin: 1em auto; }
.posts li { margin: 0 0 0 1em; width: calc(100% - 1em); padding: 0 0 0.25em 0.75em; border: 1px solid; border-radius: 0.7em; grid-row: span 2; position: relative; padding: 0; grid-column: 1 / 4; text-align: left; border-bottom-left-radius: 0; display: block; background-color: rgba(0, 0, 0, 0.4); }
.posts li > div { padding: 1em; }
.posts li > div + div { padding-top: 0; }
.posts .open { grid-column: 2 / 5; display: block; padding: 1em 0.8em; border-style: dashed; border-bottom-left-radius: 0.7em; border-bottom-right-radius: 0; margin-bottom: 11em; color: #888; }
.posts li .deco { padding: 0; }
.posts textarea { display: block; width: calc(100% - 2em); background: rgba(0,0,0,0.2); border: none; color: currentColor; }
.posts textarea:focus { border-color: var(--youSay); }
.posts textarea:read-only { border-color: transparent; resize: none; }
.posts textarea:read-only:focus { border-color: transparent; }
.posts ::placeholder { color: var(--cafe); opacity: 0.7; }
.posts .icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(3em, auto)); margin: 0 0 0 auto; padding: 0 1em; place-content: end; border-radius: 0.7em 0.7em 0 0; width: fit-content; }
.posts .icons > * { aspect-ratio: 1 / 1; display: grid; }
.posts .icons svg { width: 1.5em; border: none; padding: 0.1em; margin: auto; top: 0; }
.posts .icons div > svg { color: var(--grock); }
.posts .icons span { text-align: right; margin: 0 0 auto auto; }
.posts .icons button { color: var(--youSay); background-color: transparent; border: none; display: contents; }
.posts .icons input:checked + label svg { color: var(--youSay); background-color: transparent; }
.posts .icons label { text-align: right; display: block; }
.posts .icons label span { color: var(--white); padding-right: 1em; }
.posts input[type=text] { width: 100%; text-align: left; border: transparent; opacity: 0.5; }
.posts .text { padding: 1em 0.8em; border-radius: 0 0 0.7em 0; }
.posts .own .text, .posts .yes .text { border-radius: 0 0 0 0.7em; }
.posts .own .text:focus { outline: none; }
.posts .switcher { background-color: rgba(0, 0, 0, 0.2); font-size: 1.2em; }
.posts .switcher svg { }
.posts .switcher :checked + label svg { padding: 0; }
.posts .switcher :checked + label svg[nn=hate] { color: var(--blued); }
.posts li.own { border: 2px solid var(--youSay); }
.posts li.own, .posts li.yes { grid-column: 2 / 5; text-align: right; border-radius: 0.7em; border-bottom-right-radius: 0; }
.posts input:checked + label { color: var(--youSay); }
.posts li.focus { grid-column: 1 / -1; font-weight: 600; font-size: 1.1em; background-color: #766a; border-width: 3px; margin: 2em 0 2em auto; transition: margin 0.3s; transition: background-color 0.3s; transition: border-width 0.3s; }
.posts li.focus > div { padding: 1.5em 1em; transition: padding 0.3s; }
.posts li.focus .icons { }
.posts li.focus label svg { }
.posts li.focus span:first-child svg { animation: sparkle 0.7s ease-in-out 1s; opacity: 1; transition: opacity 0.3s 1s;}
.posts li.focus span:nth-child(2) svg { animation: sparkle 0.7s ease-in-out 1.4s; opacity: 1; transition: opacity 0.3s 1.4s;}
.posts li.focus span:nth-child(3) svg { animation: sparkle 0.7s ease-in-out 1.8s; opacity: 1; transition: opacity 0.3s 1.8s;}
.posts li.focus span:nth-child(4) svg { animation: sparkle 0.7s ease-in-out 2.2s; opacity: 1; transition: opacity 0.3s 2.2s;}
.open.own { border: 2px dotted var(--youSay); grid-column: 1 / 5; color: var(--youSay); }
@media only screen and (max-width: 609px) { .posts { font-size: 0.85em; line-height: 1.2em; }
}
.calendar { display: grid; max-width: calc(100vw - 6rem); width: 100%; grid-gap: 2em; }
.calendar > div { display: block; max-width: unset; }
.calendar > div { padding: 2em 0; overflow: scroll; text-align: center; width: 100%; }
.calendar > div > div { width: unset; }
.calendar li { display: block; background-color: var(--text); color: var(--taupe); margin: 0; overflow: hidden; padding: 1em 0; text-align: left; transition: opacity, width 0.25s; }
.calendar input + label { place-content: start; margin: 0; }
.calendar li svg { padding: 0.15em 0; margin: 0; top: 0.1em; }
.calendar *[type=submit] { position: absolute; right: 1rem; bottom: 1rem; font-size: 0.5em; color: var(--text); margin: 0; padding: 0.5em; }
.calendar .sidelabel { align-items: baseline; }
.calendar .dater { display: none; }
.calendar input:checked + label { color: var(--lowlight); background-color: var(--textaction); }
.calendar input[type=number] { min-width: 1.3em; width: 1em; }
.calendar input::-webkit-inner-spin-button { appearance: none; display: none; position: absolute; opacity: 0; z-index: -1; }
.calendar input, .calendar textarea, .calendar select { color: var(--textaction); background-color: transparent; }
.calendar .radio input[type] + label { background-color: var(--text); color: var(--textaction); opacity: 0.5; }
.calendar .radio input[type]:checked + label { background-color: var(--text); color: var(--textaction); opacity: 1; }
.calendar li:not(.popup) * { padding: 0; }
.calendar li label svg { padding: 0.15em 0; margin: 0; top: 0.1em; }
.calendar .newObj { margin: auto 0; background-color: transparent; color: var(--text); padding: 0; text-align: center;}
.calendar .popup { margin: auto !important; font-size: 2em; padding: 1.5em; }
.calendar .popup > div { display: grid; grid-gap: 0.5em; place-items: start; place-content: start; text-align: left; }
.calendar .popup .onpop { width: 100%; display: block; }
.calendar .popup .close { right: 1rem; top: 1rem; padding: 0.15em; }
.calendar .popup * { max-width: unset; }
.calendar .popup .dater { display: grid; }
.calendar .popup .dater, .calendar .popup .appoint { font-size: 0.6em; }
.calendar .popup .appoint div { display: grid; }
.calendar .popup .slide { display: grid; }
.calendar .popup .radio { font-size: 0.7em; }
.calendar .day, .calendar .rule { display: grid; grid-template-columns: repeat(96, 1em); width: auto; max-width: unset; }
.calendar .day .now { display: grid; background-color: rgba(0, 0, 0, 0.5); color: var(--text); border-right: 1px dashed currentColor; place-content: end; padding: 0.8em; position: absolute; top: -2em; bottom: -2em; }
.calendar .day .now span { display: block; font-size: 0.8em; }
.calendar .day .rule { display: block; background-color: var(--text); color: var(--taupe); margin: 0; overflow: hidden; padding: 1em 0; text-align: left; transition: opacity, width 0.25s; }
.calendar .rule { color: var(--text); height: 1em; position: relative; top: -1em; padding: 0; text-align: left; place-content: start; }
.calendar .rule span { padding: 0; margin: 0; font-size: 0.7em; }
.calendar .rule span:nth-child(4n-3) { border-left: 0.3px solid; padding-left: 0.15em; }
.calendar .rule span::before { content: attr(h); font-family: Oswald; }
.calendar .today { font-size: 1.3em; }
.calendar .day { background-color: rgba(220,220,220,0.2); height: 6em; position: relative; width: fit-content; }
.hourly { display: contents; }
.hourly li { padding: 0.5em; }
.hourly li:not([class]):hover { position: absolute; height: 100%; width: 16em; transition: opacity, width 0.35s; opacity: 0.75; z-index: 10; }
.hourly li > div { padding: 0 0.7em 0.5em; font-size: 0.8em; }
.hourly li > span { display: none; }
.hourly h4 { padding: 0.4em 0 0; }
.calendar .days { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); grid-gap: 1.5em; text-align: left; }
.days h3 { border-bottom: 1px solid; }
.days div { margin: 0; }
.days ul { height: 16em; overflow: scroll; grid-gap: 0.5em; place-content: start; }
.days li { padding: 0.7em; border-radius: 0.3em; margin: auto 0; }
.calendar .upcoming { display: block; width: 100%; columns: 12em; column-gap: 1.5em; height: 24em; }
.upcoming div { margin: 0; font-size: 0.9em; break-inside: avoid; }
.upcoming h4 { border-bottom: 1px solid; }
.upcoming ul { overflow: scroll; grid-gap: 0.5em; }
.upcoming li { background-color: var(--text); color: var(--taupe); padding: 0.7em; border-radius: 0.3em; }
.upcoming li * { padding: 0; }
.calendar .diarise { display: grid; grid-template-columns: 1fr 2fr; align-items: baseline; font-size: 0.8em; }
.diarise .dater { display: none; }
.diarise .slide { display: none; }
.diarise .appoint :first-child ~ div { }
.dater input[type=number]:last-of-type { min-width: 3em; }
.appoint { display: grid; grid-template-columns: auto 6em 1fr; grid-gap: 1rem; align-items: baseline; margin-bottom: 0.5em; }
.appoint .slide { height: 0.5em; }
.appoint .slide { height: 1.5em; padding: 1em 0 0; }
.appoint .slide input[type] { height: 100%; aspect-ratio: 1 / 1; margin: 0; padding: 0;}
.appoint .slide input[type]:checked { }
.appoint .slide input[type][draggable] { border: none; }
.appoint .slide input[bef]:hover::before{ }
.time { padding: 0; min-width: 4em; }
.time input[type=text] { padding: 0; min-width: 1.3em; width: 1em; font-size: 1.3em; background-color: transparent; color: var(--textaction); font-style: italic; }
.time span { margin: auto; font-size: 1.5em }
.time.pm { display: grid; grid-template-columns: 1fr auto 1fr 1fr; grid-gap: 0.3em; margin: auto; }
.time.pm > div { display: grid; grid-template: 1fr 1fr / 1fr; grid-gap: 0; font-size: 0.45em; margin: auto; }
.time.pm > div label { display: block; padding: 0.1em 0.5em; }
.time.pm > div :checked + label { opacity: 1; color: var(--highlight); }
.time ~ .time { display: none; }
.cal { display: grid; grid-template-columns: auto auto auto; grid-gap: 0.7em; background-color: transparent; color: var(--textaction); padding: 1em; width: fit-content; border-radius: 0; place-content: center; margin: auto; }
.cal input[type] + label { display: block; padding: 0.15em 0; margin: 0; border: 0.5px solid; text-align: center; font-family: Oswald; font-variation-settings: "wght" 350; opacity: 1; }
.cal input[type]:checked + label { background-color: var(--action); color: var(--textaction); border-color: var(--action); }
.cal > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(1.5em, auto)); grid-gap: 0.2em; place-content: center; }
.cal > div:first-child { grid-template-columns: repeat(8, 1.5em); }
.cal > div:nth-child(2) { grid-template-columns: repeat(3, 2.4em); }
.cal > div:nth-child(3) { grid-template-columns: 1fr; width: 3em; }
.calendar li > .clock { background-color: var(--lowlight); color: var(--textaction); place-content: center; position: absolute; top: 0; left: 0em; bottom: 0; padding: 1.25em; width: fit-content; font-size: 0.75em; border-radius: 0.1em; }
.clock { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 0.5em; }
.clock .clock { display: block; aspect-ratio: 1 / 1 !important; position: relative; margin: 0; height: 10em; width: auto; place-self: center; }
.clock .clock * { position: absolute; top: 0; bottom: 0; right: 0; left: 0; height: 100%; width: 100%; padding: 0; margin: 0; }
.clock .clock *:first-child { position: static; }
.clock .clock div { line-height: 0.7em; }
.clock input[type] + label { padding: 0.2em 0.4em; margin: auto 0 0; text-align: center; display: inline-block; align-self: end; }
.clock .dsp { width: 3em; font-size: 2em; opacity: 0.5; }
.freq { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0.5em; width: min-content; margin-left: 0; position: relative; }
.freq input[type] + label { display: block; border: 1px solid; padding: 0.2em 0.4em; font-size: 0.85em; width: 100%; min-width: max-content; text-align: center; }
.freq input[type]:checked + label { background-color: var(--bright); color: var(--dark); border-color: var(--bright); }
.freq label + span { position: absolute; right: -2em; top: 0.15em; opacity: 0.7; }
.freq label + span:last-child { bottom: 0.15em; top: unset; }
.opentimes { display: block; width: 100%; }
.schedule { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 1em; margin: 1em auto; }
.schedule .slide { display: grid; grid-template-columns: repeat(49, 1fr); grid-gap: 0; width: 100%; max-width: 36rem; height: 1em; }
.schedule h4 { padding: 0; }
@media only screen and (max-width: 609px) { .calendar { max-width: calc(100vw - 2rem); }
.calendar > div { font-size: 0.9em; }
.calendar .rule { grid-template-columns: repeat(24, 4em); top: -0.5em; }
.calendar .rule span { display: none; }
.calendar .rule span:nth-child(4n-3) { display: inline; }
.calendar .rule span:nth-child(4n-3)::before { content: attr(h); font-family: Oswald; border: none; padding: 0; span: span4; }
.calendar .day { height: 11em; }
.calendar .day > div:not([class]) { position: absolute; height: 24%; width: 100%; min-width: 7em; background-color: var(--backlay); bottom: auto; padding: 0.35em 0; }
.calendar .day > div:nth-child(4n-2) { top: 0; }
.calendar .day > div:nth-child(4n-1) { top: 26%; }
.calendar .day > div:nth-child(4n) { top: 51%; }
.calendar .day > div:not([class]):nth-child(4n-3) { top: 76%; }
.calendar .day div > div { font-size: 0.6em; }
.calendar .day div > div * { padding: 0; }
.calendar .day div:not([class]) > span { display: block; position: absolute; top: 0; content: ' '; height: 100%; padding: 0; background-color: var(--text); z-index: -1; }
.calendar .day div:not([class]):hover { height: initial; width: initial; }
}
.event { }
.hourly .event { }
.popup.event { display: grid; }
.popup.event .button { position: absolute; right: 1em; bottom: 1em; }
.event .radio { width: fit-content; margin: 0; }
.event .radio p { display: none; }
.event .radio :checked + label p { display: inline; }
.event .radio label:hover p { display: inline; }