/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////////  -------   S0RTER   -------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.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   --------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.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 { }


/* this is necessary because the li gets moved into popups, outside of the .epcis 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   --------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


/* ul.itemlist.tasks */
.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; }





/* /////////////////////////////////////////////////////// */
/*                                                         */
/* ///////////  --------   MESSAGES  -------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.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  --------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.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   -------  /////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.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 { /*display: none; */}

.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{ /*position: relative; top: -1.1em; padding: 0; margin-top: -1.3em; */}


.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; } /* doit être après .pm sinon overridden */

.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%; }  

  /* This order is because of now div */
  .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   --------  //////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */

/* in list */
.event 					{  }


/* in scale */
.hourly .event 			{  }

/* in popup */
.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; }