ul.sub {
    padding-left:30px; 
    background-color: var(--x-light);
    list-style-type: '';
    
}
ul.sub > li:before {
    
    content: "\25BA"
}
ul.sub >  a {
    /*border-top: dotted 1px var(--dark);*/
    text-decoration: none; font-weight: bold;
    color: var(--dark);
    display: inline-block; width: 100%;
    
    background-color: var(--x-light);
}

#top_menu .top > summary {
    cursor  : pointer; 
    list-style-type: '';
}
details > summary {
  list-style: none;
}

details > summary::marker, /* Latest Chrome, Edge, Firefox */ 
details > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

details.top > summary > a {
    text-decoration: none; font-weight: bold;
    color: var(--dark);
    display: inline-block; width: 100%;
    
}
details.top > summary > a::before {
    content : '☰'; display:inline-block; text-align: center;
    width: 30px; height: 30px; font-size: 20px; line-height: 30px; font-weight: bold; color: var(--dark);
    background-color: var(--light);
    
}

details.top[open] > summary > a::before {
    content : '⛌'; display:inline-block; text-align: center;
    /*U+2261; \00D7*/
    width: 30px; height: 30px; font-size: 20px; line-height: 30px; font-weight: bold; color: var(--dark);
    background-color: var(--light);
    
}
ul.top {
    list-style-type: none;
    padding-left: 0px; margin: 0px;
    position: absolute;
    z-index:100;
    display: block; width:90%;
}

ul.top > li {
    
    background-color: var(--light);
    padding: 0px; padding: 2px 10px;
    width:60vw;
}

ul.top li > a {
    padding: 2px 10px;
    text-decoration: none; font-weight: bold;
    color: var(--dark);
}