:root {
  --back_color: #000 ;
  --text_color: #FFF ;
  --menu_color: #222 ;
  --menu_textcolor: #FFF ;
  --line_color: #222 ;

  --player_color  : #282828 ;
  
  --double_margin : 40px ;
  --default_margin: 20px ;
  --half_margin   : 10px ;
  --line_height   :  2px ;

  --item_width    : 60px ;
  
  --shadowdown: linear-gradient(to bottom,color-mix(in srgb, var(--back_color), transparent 30%), color-mix(in srgb, var(--back_color), transparent 100%)) ;
  --shadowup  : linear-gradient(to top   ,color-mix(in srgb, var(--back_color), transparent 30%), color-mix(in srgb, var(--back_color), transparent 100%)) ;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { background-color:var(--back_color) ; color:var(--text_color) ; }
body { font-family:"Work Sans", sans-serif; font-size:18px; line-height:120%; text-align:justify; background-color:transparent;
}

.stickyattop   { position:sticky ; top   :0px; width:100%; z-index:100; }
.fixedatbottom { position:fixed ; bottom:0px; width:100%; z-index:100; }
.limitedwidth  { min-width:300px; max-width:900px; }

dspacer { display:block; height:var(--double_margin); }
spacer  { display:block; height:var(--default_margin); }
hspacer { display:block; height:var(--half_margin   ); }
xline   { display:block; height:var(--line_height); background-color:var(--line_color); }

xminiline   { display:block; height:var(--line_height); background-color:var(--line_color); width:15%;}

divl, divr { display: block; }
divl { text-align: left; }
divr { text-align: right; }

divlp { display: block; text-align: left; padding-inline:var(--double_margin) }

divc { display: flex; justify-content: center;width: 100%; }

drow { display: contents; cursor:pointer; }
drow:hover > * { opacity: 80%; }
.active { font-weight: bold ; }

.leftandrightmargin { padding-inline:var(--default_margin);}

shadowdown {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: var(--default_margin) ;
    background: var(--shadowdown) ;
    z-index: 1;
    pointer-events: none;
}

xmenu {
    display: block;
}

.menuLMR {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    background-color: var(--menu_color);
    color: var(--menu_textcolor);
    padding:var(--half_margin) var(--default_margin) ;
}

menuitem {}
menuitem:hover {
    opacity : 80% ;
}

a            { color : var(--txtc) ; background-color: transparent; text-decoration: none; }
a.underlined { text-decoration: underline; }

audioplayerbox { display:block; opacity: 0; transition: opacity 0.5s ease-in-out ; }

linespacer    { display:block; }

sectiontitle { display:block; font-weight: bold ; }

img   { border-radius:5px; display:block; width:100%; }
video { border-radius:5px; display:block; width:100%; }

table { width:100% ; }
td    { padding: 5px; width:50% ; }
td.T  { width:auto ; text-align:justify; }
td.S  { width:10px; }
td.I  { width:30% ; }

td.AgendaL   { padding: 5px; width:50% ; text-align:right; }
td.AgendaR   { padding: 5px; width:50% ; }