/* *********************** */
/* 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: 7.5dvw 85dvw 7.5dvw; 
    grid-template-rows: 16dvh 4dvh 76dvh;
    grid-gap: 0; }


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

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

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


/* ********************** */
/* 2: deal with scrolling */
/* ********************** */
#fixed_panel{   
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sitedark), 1) rgba(var(--sitedark), 0.3); 
    overflow-x: hidden;
    margin-top: 1dvh;
}

/* ************************* */
/* 3: general table settings */
/* ************************* */
table, th, td, tr{ border-collapse: collapse; }
td{ background: rgba(var(--sitedark), 0.1); }

/* ******************** */
/* 4: styling the lines */
/* ******************** */
.fixture_head{
    background-color: rgba(var(--sitedark), 0.7);
    backdrop-filter: blur(2px);
    color: rgba(var(--sitewhite), 0.9);
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 0.8);
    outline: 1px solid rgba(var(--sitegold), 1);
    height: 4dvh;
    position: sticky;
    font-size: 0.9rem;
    top: 0;
    z-index: 10;
}
.fixture_head { font-size: 0.9rem; }

.fixture_head_date      { width: 11dvw; }
.fixture_head_teams     { width: 32dvw; text-align: left; }
.fixture_head_result    { width: 32dvw; text-align: left; }
.fixture_head_scorecard { width: 10dvw; }

.fixture_line{
    height: 4.5dvh;
    background: rgba(var(--sitedark), 0.7);
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 0.8);
    font-size: 0.9rem;
}
.blank_fixture_line { 
    height: 2dvh; 
    background: rgba(var(--sitedark), 0.1);
}
.countyofinterest { color: rgba(249 166 2); }

.fixture_date { 
    text-align: center; 
    font-size: 115%; 
    color: rgba(var(--sitewhite), 0.9); 
}
.fixture_teams { 
    border-bottom: 0.4px solid rgba(var(--sitegold), 1); 
    padding-right: 3dvw; 
    line-height: 150%;
}
.fixture_result { 
    color: rgba(var(--sitewhite), 0.9); 
    border-bottom: 0.4px solid rgba(var(--sitegold), 1); 
}
.fixture_scorecard { 
    text-align: center; 
    border-bottom: 0.4px solid rgba(var(--sitegold), 1);
}
.ko_match,
.int_match {
    color:rgba(var(--sitewhite), 0.9);
}
a.fixture_scorecard { 
    color: rgba(var(--sitecream), 1); 
    text-decoration: none;
}
a.fixture_scorecard:hover { font-weight: bold; }
.fixture_nolink { border-bottom: 0.4px solid rgba(var(--sitegold), 1); }

/* ******************** */
/* 5: responsive layout */
/* ******************** */
@media (min-width: 801px) and (max-width: 1400px) {
    #display_wrapper { grid-template-rows: 12dvh 4dvh 78dvh; }
}
@media (max-width: 800px) {
    #display_wrapper { 
        grid-template-columns: 2.5dvw 95dvw 2.5dvw; 
        grid-template-rows: 8dvh 4dvh 82dvh; 
    }
    .fixture_head { font-size: 0.75rem; }
    .fixture_list {
        width: 100%;
        font-size: 0.8rem;
        display: flex;
        flex-direction: column; 
    }
    #fixture_list th, #fixture_list td { 
        display: block; 
        text-align: center;
        width: 100%;
        margin-bottom: 2px;
    }
    #table_sticky { display: none; }
    .fixture_line {
        height: auto;
        line-height: 1.70rem;
    }
    .fixture_teams,
    .fixture_result {
        border-bottom: none;
        padding-right: 0;
    }
    .fixture_date { background-color: rgba(var(--sitedark), 0.9); }
}