:root{
     --font-sans:system-ui,sans-serif;
     --ff-body:var(--font-sans);
     --ff-heading:var(--font-sans);
     --fs-header-h1:clamp(1.5rem,5vw,2rem);
     --fs-header-date:clamp(.75rem,3vw,1.2rem);
     --font-weight:400;
     --font-lineheight:1.375;
     --font-color:hsl(0,0%,0%);
     --theme-hue:266; /*the color theme orinally 173 */
     --navbar-bkg:#f2f2f2;
     --navbar-font:hsl(0,0%,0%);
     --navbar-hover:#444;
     --navbar-link-hover:#f2f2f2;
     --navbar-drop-bkg:hsl(var(--theme-hue),100%,30%);
     --navbar-drop-font:#fff;
     --navbar-drop-hover:#444;
     --navbar-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     --navbar-shadow-mobile:0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
     --bkg-color:hsl(0,0%,100%);
     --date-bar: hsl(var(--theme-hue), 100%, 86%); 
      --room-bar:  canvas;
      --pick-room: hsl(var(--theme-hue), 100%, 86%);
      --tbl-head: hsl(var(--theme-hue), 79%, 42%);
      --bookmark: url('data:image/svg+xml,utf8,<use href="#bookmark"/></svg>');
      --theme-alpha: 0.3;
    }
    @media (prefers-color-scheme: dark){
      :root{
          --font-color:hsl(0,0%,100%);
          --bkg-color:hsl(0,0%,20%);
          --body-outline:hsl(0,0%,100%);
          --navbar-shadow:0 4px 8px 0 #ffffff80 0 6px 20px 0 #fff6;
          --navbar-shadow-mobile:0 -4px 8px 0 #ffffff80 0 -6px 20px 0 #fff6
            --theme-alpha: 0.15;
      }
}


 *,::before,::after{
    box-sizing:border-box
}

p{
    margin-block:1rem
}
html {scrollbar-gutter: stable;}
body{
    font-size:1rem;
    line-height:var(--font-lineheight);
    font-family:var(--ff-body);
    height:100%;
    font-weight:var(--font-weight);
    scroll-behavior:smooth;
    margin: auto;
    max-width:800px;
    padding-block-end:2rem;
    color:var(--font-color);
    background-color:var(--bkg-color)
}
 .header-center{
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: hsl(var(--theme-hue), 55%, 35%);
    background-repeat:no-repeat;
    height:160px;
    background-position:top center;
    min-width: 360px;
    /*background-image:url("/assets/logos/banner-800x162e.avif");*/
    background-image:url("/assets/logos/banner-icons-800x162.avif");
}
h1{
    text-align:center;
    color:#fff;
    line-height:1;
    font-size:var(--fs-header-h1);
    text-shadow:0px 4px 3px rgba(0,0,0,0.4),0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1),-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    ;
}
h1 > time{
    font-size:var(--fs-header-date);
    line-height:.8
}
.text-center{
    text-align:center
}
.p1{
    padding:1rem;
}
 .navbar{
    display:flex;
    justify-content:space-evenly;
    background-color: hsl(var(--theme-hue) 60% 38%);
    box-shadow:var(--navbar-shadow)
}
 .navbar a{
    color:white;
    background-color: hsl(var(--theme-hue), 100%, 22%);
    padding:14px 16px;
    text-decoration:none;
    font-weight: bold;
}
 .dropdown .dropbtn{
    font-size:16px;
    border:none;
    font-weight: bold;
    color:white;
    padding:14px 16px;
    background-color: hsl(var(--theme-hue) 100% 22%);
    font-family:inherit;
    margin:0;
}
.navbar a:hover,.dropdown:hover .dropbtn{
    background:var(--navbar-drop-hover);
    color:var(--navbar-link-hover);
    z-index:100
}
.dropdown-content{
    display:none;
    position:absolute;
    background-color:var(--navbar-drop-bkg);
    min-width:160px;
    box-shadow:0 8px 16px 0 #0003;
    z-index:1
}
.dropdown-content a{
    color:var(--navbar-drop-font);
    padding:12px 16px;
    text-decoration:none;
    display:block;
    text-align:left
}
.dropdown-content a:hover{
    background-color:var(--navbar-link-hover);
    color:var(--navbar-drop-hover)
}
.dropdown:hover .dropdown-content{
    display:block
}
/*dropdown arrow*/
.caret{
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:4px solid currentcolor;
    display:inline-block;
    height:0;
    margin-left:2px;
    vertical-align:middle;
    width:0
}
 .active{
    
    outline:2px solid white;
    outline-offset:-5px
}

.drop-item {font-size: 1rem;padding: 14px 16px 14px 0;background-color: #007063;width:100%;border:none; font-weight: bold; color:white}
main{
    background-color:var(--bkg-color);
    color:var(--font-color);

    padding-inline: 5px;
}
@supports(position:sticky){
    .sticky-nav{
        height:50px;
        position:-webkit-sticky;
        position:sticky;
        top:0;
        z-index:200
    }
    .tbl-head {
    background-color: var(--tbl-head);
    /* color: var(--room-bar); */
    position: sticky;
    top: 116px;
    z-index: 51;
}
}

.dropdown-content > a[target="_blank"]:link,.dropdown-content > a[target="_blank"]:visited{
    color:#fff
}
.dropdown-content > a[target="_blank"]:hover,.dropdown-content > a[target="_blank"]:focus{
    color:#000
}

   

 .mobile{
    display:none
}
 @media only screen and (max-width: 750px){
    .caret,.hide{
        display:none
    }
    .mobile{
        position:fixed;
        bottom:0;
        display:flex;
        justify-content:space-evenly;
        align-items:center;
        /*background-color:var(--navbar-bkg)*/
        background-color: hsl(var(--theme-hue) 100% 38%);
        width:100%;
        height:48px;
        box-shadow:var(--navbar-shadow-mobile);
        z-index:100
    }
}
/* program */
      .bookmark {background-image:var(--bookmark);}
      .sticky-nav {z-index:100;}
      .sticky-date {z-index:50;position:sticky; top:50px;border-top: 2px solid transparent;border-bottom: 2px solid transparent;}
      .date-bar{display: flex; justify-content: center; gap:1rem;align-items: center;background-color: var(--room-bar); box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); color:black;}
      .svg {margin-top:5px;}
      .left{padding-left: 1rem;position: sticky; top:90px;}
      .nav-label1, .nav-label2, .nav-label3 {cursor: pointer;}
      .nav-label1 {position: sticky; top:90px;}
      .nav-label2{position: sticky; top:90px;}
      .nav-label3{position: sticky; top:90px;}
      .room-bar {position: sticky; top:88px; height:30px; background-color: var(--room-bar);}
      .toggle-column-2:not(:checked)~table td:nth-child(2) {display: none; }
      .toggle-column-3:not(:checked)~table td:nth-child(3) {display: none;}
      .toggle-column-4:not(:checked)~table td:nth-child(4) {display: none;}
      #coln2,  #coln3,  #coln4{ display: none;}
      input:checked + .rm {color: black; font-weight: bold; text-decoration: none; background-color: hsl(var(--theme-hue), 55%, 85%);padding: 4px 8px 4px 8px; border-radius:10px;  outline:1px solid black;
    outline-offset:-5px;}
      input:not(:checked) + .rm { text-decoration: underline;padding: 0 4px 4px 4px;}


        [class^="theme-"] {
        color: var(--text-main); /* Dynamically bound to the current mode */
        padding: 1rem;
        margin: 0.5rem 0;
        border-radius: 6px;
        font-weight: 500;
        }

        /* 3. Theme Classes Using Dynamic Alpha Channels */
        .theme-1 { background-color: hsl(30, 100%, 50%, var(--theme-alpha)); }
        .theme-2 { background-color: hsl(60, 100%, 50%, var(--theme-alpha)); }
        .theme-3 { background-color: hsl(90, 50%, 50%, var(--theme-alpha)); }
        .theme-4 { background-color: hsl(120, 100%, 50%, var(--theme-alpha)); }
        .theme-5 { background-color: hsl(150, 100%, 50%, var(--theme-alpha)); }
        .theme-6 { background-color: hsl(180, 60%, 50%, var(--theme-alpha)); }
        .theme-7 { background-color: hsl(210, 100%, 50%, var(--theme-alpha)); }
        .theme-8 { background-color: hsl(240, 100%, 50%, var(--theme-alpha)); }
        .theme-9 { background-color: hsl(270, 60%, 50%, var(--theme-alpha)); }
        .theme-10 { background-color: hsl(300, 100%, 50%, var(--theme-alpha)); }
        .theme-11 { background-color: hsl(330, 100%, 50%, var(--theme-alpha)); }
        .theme-12 { background-color: hsl(360, 60%, 50%, var(--theme-alpha)); }

      /*bookmark*/
      [type=radio] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      }
      input + label {
      fill: white;
      stroke: black;
      cursor: pointer;
      padding: 10px 0px 10px 10px;
      }
      input:checked + label {
      fill: hsl(var(--theme-hue), 100%, 38%);;
      }
      /*.bookmark {padding:0 1rem;}*/ svg {width:24px; height: 24px;}
      footer .text-center {font-size: 10pt;padding-top:2rem}
/*nav buttons day bar*/
    .date-bar {background-color: var(--room-bar); box-shadow:none;margin: 2rem 0;}
    .btn-day {border: 1px solid black;}
    .btn-day:hover{background-color: hsl(var(--theme-hue), 100%, 38%); color:white}
    .active {background-color: hsl(var(--theme-hue), 100%, 38%); color:white}
    .is-small {
      display: inline-flex;
      height: 1.5rem;
      align-items: center;
      padding: 1rem .75rem;
      font-size:1rem;
      line-height:.8125rem;
      font-weight: 600;
      border-radius: 12px;;
      text-decoration: none;
      }
      table {padding: 0 1rem; width:100%;}
      .timeslot {padding-right:4em;}
      .session-heading {background-color: hsl(var(--theme-hue), 100%, 38%);; color: white;}
      details {padding-left: 2rem;}
      details p {margin:0;padding:0;}
      /*modal*/
      html {scrollbar-gutter: stable;}
      html:has(dialog[open]) {overflow:hidden;}/*remove background scrolling*/
      .view-abstract:hover { background-color: #e0e0e0;color: #000;}      
      .modal-btn {cursor: pointer;padding: 2px 5px;}

    dialog[open] {max-width:105ch; width:100%; overflow: hidden;overflow-y: auto;border:none;box-shadow: 0 5px 15px rgba(0,0,0,0.5);/*margin: auto;padding-right: 1.6rem;box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);*/}
    dialog article { width: 100%; max-height: 600px; padding: 1rem;border: none; /*background-image: url("./photos/speakers/Loading_icon.gif");background-repeat: no-repeat;*/}
    dialog::backdrop { backdrop-filter: blur(2px);}
    .close { font-size: 16px; background: black; color: white; position: absolute; right: 0%; top: 0%; cursor: pointer; /*display: inline-block;*/ border-radius: 50%;}
    .close:has(+ p) { top:1rem;}
    .sticky-btn {position: sticky; right: 0%; top: 0%; cursor: pointer;}

       @media (prefers-color-scheme: dark) {
        .room-bar, .date-bar { background: #333; color: #eee; }
        }
   article {font-style:normal;padding: 0 2ch 5rem 0;/*margin-bottom: 4rem;*/}
.title {font:bold 16pt/1.1 Arial, sans-serif;}
.author     {font: normal 12pt/1.1 Arial, serif;}
.affiliate {font: italic 12pt/1.1 Arial, serif;padding:0;}
.email {font-style:italic;}
.abody      {font: normal 11pt/1.1 Arial,sans-serif; padding:0.4rem 1ch 2rem 0; }
.abody p {text-indent: 2rem; margin-top: 0; margin-bottom:0;}
.abody ul { margin-top: 0; margin-bottom:0;}
.references{font-size: 10pt;margin-block: 0; padding-inline-start: 20px;}
.bracketed li::marker {content:"(" counter(list-item)") ";}
.artwork {width:100%; max-width:80ch;}
img, figure, figcaption {margin: 0; padding:0;}
img {width:100%;}
figure {margin-top: 1rem;}
@media screen and (max-width: 700px) {
  .content {padding:0;}
  table{padding:0;}
  .timeslot {padding-right:unset;}
}
@media print {
section {visibility: hidden;}
dialog {visibility: visible; position: absolute;left: 0;top: 5rem; border-color: white;overflow: hidden;}
article { max-width:100ch; margin:0;padding:0;}
p.hide {display: none;}
}