/* *********************** */
/* 1: grid layout for page */
/* *********************** */
#display_wrapper {
    /* like a circle within a circle, it's a grid within a grid */ 
    display: grid;
    grid-template-columns: 5dvw 90dvw 5dvw; 
    grid-template-rows: 16dvh 4dvh 76dvh;
    grid-gap: 0; }

#heading_wrapper { grid-column: 1 / 4; 
                   grid-row: 1 / 2; }

#county_submenu  { grid-column: 1 / 4;
                   grid-row: 2 / 3; }

#fixed_panel     { grid-column: 2 / 3;
                   grid-row: 3 / 4; }
#fixed_panel     { margin-top: 1dvh; }

/* ********************** */
/* 2: deal with scrolling */
/* ********************** */
#fixed_panel{   
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sitedark), 1) rgba(var(--sitedark), 0.7); 
    display: flex; 
    flex-direction: column;
}

/* ************************* */
/* 3: general table settings */
/* ************************* */
table, th, td, tr{
    border-collapse: collapse;
}
table{
    table-layout: auto;
}

/* ******************** */
/* 4: responsive layout */
/* ******************** */
@media (min-width: 801px) and (max-width: 1400px) { #display_wrapper { grid-template-rows: 12dvh 4dvh 80dvh; } }
@media (max-width: 800px) { 
    #display_wrapper { 
        grid-template-columns: 2dvw 96dvw 2dvw; 
        grid-template-rows: 10dvh 4dvh 82dvh; 
    }
}