.pn-decoder{
    display: grid;
    grid-template-rows: repeat(17, auto); 
    max-width: 100%;
}

.pn-decoder.section-2{grid-template-columns: repeat(5, max-content) 1fr;}
.pn-decoder.section-3{grid-template-columns: repeat(7, max-content) 1fr;}
.pn-decoder.section-4{grid-template-columns: repeat(9, max-content) 1fr;}
.pn-decoder.section-5{grid-template-columns: repeat(11, max-content) 1fr;}
.pn-decoder.section-6{grid-template-columns: repeat(13, max-content) 1fr;}
.pn-decoder.section-7{grid-template-columns: repeat(15, max-content) 1fr;}
.pn-decoder.section-8{grid-template-columns: repeat(17, max-content) 1fr;}
.pn-decoder.section-9{grid-template-columns: repeat(19, max-content) 1fr;}

.pn-decoder > *{
    display: inline-block;
    grid-row-end: span 2;
    grid-column-end: span 2;
}

.pn-decoder > b{
    font-family: 'Courier New', monospace;
    font-size: 110%;
    margin: 0 1px;
}

.pn-decoder > span{
    grid-row-end: span 1;
    grid-column-end: span 1;
}

.pn-decoder .var {    
  border-bottom: thin solid black;
}

.pn-decoder .vline{
    grid-column-end: span 1;
    border-right: thin solid black;
}

.pn-decoder .vline, .pn-decoder .vspacer{
    min-height: 0.5em;
}

.pn-decoder .vline + * {
    grid-column-end: span 1;
}

.pn-decoder .hline{
    grid-row-end: span 1;
    border-bottom: thin solid black;    
}

.pn-decoder > table{
    padding-left: 0.5em;
    grid-column-end: span 1;  
    border-left: thin solid black;    
    margin:  0.5em 0 0.5em 0;
    margin-bottom: 0.5em !important; 
}

.pn-decoder > table th, .pn-decoder > table td{ 
    border: none;    
    padding: 0;
    vertical-align: top;
}

.pn-decoder > table th{ 
    font-weight: bold;
    text-align:left;
}

.pn-decoder > table td{ 
    margin-left: 0;
    /*padding-left: 1em;    */
    font-size: 90%;       
    vertical-align: top; 
}
/*
.pn-decoder > dl dd::before{ 
    content: "-";
    display:  inline-block;
    position:  relative;    
    width: 1em;
    left:-1em;
    margin-right:-1em;
}
*/

.pn-decoder > table td:nth-child(3n - 2){
    font-weight: bold;
}

@media (max-width: 450px) {
    .pn-decoder > table{
        padding-left: 0;
        grid-column-start: 1;
        grid-column-end: -1;
        grid-row-end: span 1;
        border-left: none;
    }    


    .pn-decoder > .row-end{
        grid-column-end: span 2;        
    }

    .pn-decoder > table:nth-of-type(1){grid-row-start: -1;}
    .pn-decoder > table:nth-of-type(2){grid-row-start: -2;}
    .pn-decoder > table:nth-of-type(3){grid-row-start: -3;}
    .pn-decoder > table:nth-of-type(4){grid-row-start: -4;}
    .pn-decoder > table:nth-of-type(5){grid-row-start: -5;}

    .pn-decoder > table th::before, .pn-decoder > .row-end::before{
        width:1.2em;
        display:  inline-block;
    }

    .pn-decoder>table:nth-last-of-type(1) th::before, .pn-decoder>*:nth-last-child(1 of .row-end)::before{content: "\2460";}
    .pn-decoder>table:nth-last-of-type(2) th::before, .pn-decoder>*:nth-last-child(2 of .row-end)::before{content: "\2461";}
    .pn-decoder>table:nth-last-of-type(3) th::before, .pn-decoder>*:nth-last-child(3 of .row-end)::before{content: "\2462";}
    .pn-decoder>table:nth-last-of-type(4) th::before, .pn-decoder>*:nth-last-child(4 of .row-end)::before{content: "\2463";}
    .pn-decoder>table:nth-last-of-type(5) th::before, .pn-decoder>*:nth-last-child(5 of .row-end)::before{content: "\2464";}        
}

.pn-decoder .spacer-1 {grid-column-end: span 2;}
.pn-decoder .spacer-2 {grid-column-end: span 4;}
.pn-decoder .spacer-3 {grid-column-end: span 6;}
.pn-decoder .spacer-4 {grid-column-end: span 8;}
.pn-decoder .spacer-5 {grid-column-end: span 10;}
.pn-decoder .spacer-6 {grid-column-end: span 12;}
.pn-decoder .spacer-7 {grid-column-end: span 14;}

.pn-decoder .vspacer{
    grid-row-end: span 1;    
}

.pn-decoder .row-end{
    grid-column-end: span 1;        
}

.pn-list{
    display: grid;     
    grid-template-columns:  50px repeat(auto-fit, minmax(180px, 1fr));
    grid-auto-flow: dense;
}

.pn-list > aside{
    grid-column-start: 1;
}

.pn-list > div{
    display: grid;
    grid-row-start: auto;
    grid-column-end: span 1;

    grid-template-rows: subgrid;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    margin-bottom: 0.5em;
    margin-right:-1px;
}

.pn-list.dyna-2 > *{grid-row-end: span 2;}
.pn-list.dyna-3 > *{grid-row-end: span 3;}
.pn-list.dyna-4 > *{grid-row-end: span 4;}
.pn-list.dyna-5 > *{grid-row-end: span 5;}
.pn-list.dyna-6 > *{grid-row-end: span 6;}
.pn-list.dyna-7 > *{grid-row-end: span 7;}
.pn-list.dyna-8 > *{grid-row-end: span 8;}
.pn-list.dyna-9 > *{grid-row-end: span 9;}
.pn-list.dyna-10 > *{grid-row-end: span 10;}
.pn-list.dyna-11 > *{grid-row-end: span 11;}
.pn-list.dyna-12 > *{grid-row-end: span 12;}
.pn-list.dyna-13 > *{grid-row-end: span 13;}
.pn-list.dyna-14 > *{grid-row-end: span 14;}
.pn-list.dyna-15 > *{grid-row-end: span 15;}
.pn-list.dyna-16 > *{grid-row-end: span 16;}
.pn-list.dyna-17 > *{grid-row-end: span 17;}
.pn-list.dyna-18 > *{grid-row-end: span 18;}
.pn-list.dyna-19 > *{grid-row-end: span 19;}

.pn-list > div{
    border:  thin solid black;
}

.pn-list h4 {
    text-align: center;
    padding: 0.5em 0.1em;
    margin: 0;
    font-size: 1em;
    background-color: #dbdbdb;
}

.pn-list > div > ul {
    display: contents;
    padding: 0;
    list-style-type: none;
    line-height: normal;
}

.pn-list > div > ul > li {
    margin: 0;;
    padding-left: 1.5em;   
    padding-right: 0.5em; 
    background-color: #dbdbdb;
    font-size: 90%;    
}

.pn-list > div > ul > li:last-child{
    border-bottom:  thin solid black;
}

.pn-list > div > ul > li:not(:empty)::before {
    content: "\2022";
    display:  inline-block;
    position:  relative;    
    width: 1em;
    left:-1em;
    margin-right:-1em;
}

.pn-list > div > span {
    text-align: center;
    margin: 0 0.1em;
}

.pn-list > div > span:nth-of-type(2n) {
    background-color: #f5f5f5;    
}
.pn-list > div > span:nth-of-type(2n-1) {
    background-color: white;
}

.option-list{
    display: grid;     
    grid-auto-flow: dense;
}

.option-list.column-2{grid-template-columns: fit-content(30%) repeat(1, minmax(120px, 1fr));}
.option-list.column-3{grid-template-columns: fit-content(30%) repeat(2, minmax(120px, 1fr));}
.option-list.column-4{grid-template-columns: fit-content(30%) repeat(3, minmax(120px, 1fr));}

.option-list > *, .option-list > h4 {   
    /*overrides h4 margin setting by .post-body*/
    margin : 0;
    padding: 0.5em 0.75em;
    border:  thin solid black;
    margin-right:-1px;
    margin-top:-1px;
}

.option-list > h4{
    background-color: #dbdbdb;
    text-align: center;
    margin-bottom: 0;
}

.option-list > div > span {
    display: block;
}

.option-list > div > span:not(:first-child) u {
    margin-top: 0.5em;
    display: block;
}

.option-list > div > h4 {
    display: none;
}

/*h3:has(+.pn-decoder)::before, h3:has(+.pn-list)::before{ */
#pn_wrapper h3::before{ 
    font-family: "Material Design Icons";
    content: "\F0431";  /*puzzle*/
    /*content: "\F1064";*/  /*tools*/
    display:  inline-block;
    position:  relative;    
    width: 1.2em;
}