:root {
    --s-font-size: 2.5vmin;
    --l-font-size: 3vmin;
    --xl-font-size: 7vmin;
    --xxl-font-size: 12vmin;
    --xxxl-font-size: 15vmin;

    --xs-font-size: 5.5vmin;
    --xxs-font-size: 9vmin;
  
    --player-last-font-size: var(--xxl-font-size);
    --player-last-color: white;
    --player-last-text-align: inherit;
    --player-last-margin-left: 0vmin;
    --player-last-margin-right: 0vmin;
    --player-last-margin-top: 0vmin;
    --player-last-margin-bottom: 0vmin;
    --player-last-padding-left: 0vmin;
    --player-last-padding-right: 0vmin;
    --player-last-padding-top: 0vmin;
    --player-last-padding-bottom: 0vmin;
    --player-last-border-style: none;                     /* today: none */
    --player-last-border-width: 1px;
    --player-last-border-color: var(--item-border-color);
    --player-last-border-radius: 1vmin;
  
    --player-lastf1-font-size:  var(--xxxl-font-size);
    --player-lastf1-color: white;
    --player-lastf1-text-align: inherit;
    --player-lastf1-margin-left: 0vmin;
    --player-lastf1-margin-right: 0vmin;
    --player-lastf1-margin-top: 0vmin;
    --player-lastf1-margin-bottom: 0vmin;
    --player-lastf1-padding-left: 0vmin;
    --player-lastf1-padding-right: 0vmin;
    --player-lastf1-padding-top: 0vmin;
    --player-lastf1-padding-bottom: 0vmin;
    --player-lastf1-border-style: none;                     /* today: none */
    --player-lastf1-border-width: 1px;
    --player-lastf1-border-color: var(--item-border-color);
    --player-lastf1-border-radius: 1vmin;
  
    --player-first-font-size: var(--xl-font-size);
    --player-first-color: white;
    --player-first-text-align: inherit;
    --player-first-margin-left: 0vmin;
    --player-first-margin-right: 0vmin;
    --player-first-margin-top: 0vmin;
    --player-first-margin-bottom: 0vmin;
    --player-first-padding-left: 0vmin;
    --player-first-padding-right: 0vmin;
    --player-first-padding-top: 0vmin;
    --player-first-padding-bottom: 0vmin;
    --player-first-border-style: none;                     /* today: none */
    --player-first-border-width: 1px;
    --player-first-border-color: var(--item-border-color);
    --player-first-border-radius: 1vmin;
  
    --player-score-inningpts-font-size: var(--xl-font-size);
    --player-score-inningpts-color: orange;
    --player-score-inningpts-text-align: inherit;
    --player-score-inningpts-border-style: none;
    --player-score-inningpts-border-width: 1px;
    --player-score-inningpts-border-color: var(--cols-bg);
    --player-score-inningpts-border-radius: 1vmin;
  
    --player-score-pts-font-size: var(--xxl-font-size);
    --player-score-pts-color: white;
    --player-score-pts-text-align: inherit;
    --player-score-pts-border-style: none;
    --player-score-pts-border-width: 1px;
    --player-score-pts-border-color: var(--cols-bg);
    --player-score-pts-border-radius: 1vmin;
  
    --player-score-set-font-size: var(--xl-font-size);
    --player-score-set-color: white;
    --player-score-set-text-align: inherit;
    --player-score-set-border-style: none;
    --player-score-set-border-width: 1px;
    --player-score-set-border-color: var(--cols-bg);
    --player-score-set-border-radius: 1vmin;

    --score-sets-explain-font-size: var(--l-font-size);
    --score-sets-explain-color: white;
    --score-sets-explain-text-align: center;
    --score-sets-explain-border-style: none;
    --score-sets-explain-border-width: 1px;
    --score-sets-explain-border-radius: 1vmin;
    --score-sets-explain-border-color: var(--cols-bg);
      
    --score-points-explain-font-size: var(--l-font-size);
    --score-points-explain-color: white;
    --score-points-explain-text-align: center;
    --score-points-explain-border-style: none;
    --score-points-explain-border-width: 1px;
    --score-points-explain-border-radius: 1vmin;
    --score-points-explain-border-color: var(--cols-bg);

    --score-innings-explain-font-size: var(--l-font-size);
    --score-innings-explain-color: orange;
    --score-innings-explain-text-align: center;
    --score-innings-explain-border-style: none;
    --score-innings-explain-border-width: 1px;
    --score-innings-explain-border-radius: 1vmin;
    --score-innings-explain-border-color: var(--cols-bg);

    --bb-grid-font-size: 2.5vmin;
    --bb-grid-color: white;
    --bb-grid-background-color: gray;

    --bb-grid-margin: 0vmin;
    --bb-grid-margin-left: var(--bb-grid-margin);
    --bb-grid-margin-right: var(--bb-grid-margin);
    --bb-grid-margin-top: var(--bb-grid-margin);
    --bb-grid-margin-bottom: var(--bb-grid-margin);

    --bb-grid-padding: 5px;
    --bb-grid-padding-left: var(--bb-grid-padding);
    --bb-grid-padding-right: var(--bb-grid-padding);
    --bb-grid-padding-top: var(--bb-grid-padding);
    --bb-grid-padding-bottom: var(--bb-grid-padding);

    --bb-grid-column-gap: 3px;
    --bb-grid-row-gap: 3px;

    --bb-grid-border-style: none;
    --bb-grid-border-width: 1px;
    --bb-grid-border-color: var(--billberries-blue);
    --bb-grid-border-radius: 1vmin;


    --bb-db-inplace-scoreboard-font-size-mi: var(--list-item-font-size);

    --bb-grid-justify-content: space-evenly;        /* The justify-content property is a sub-property of the Flexible Box Layout module. */ 
                                                    /* It defines the alignment along the main axis. It helps distribute extra free space leftover when */
                                                    /* either all the flex items on a line are inflexible, or are flexible but have reached their maximum size */
                                                    /* valid: space-evenly, space-between, space-around, start, center */

    --bb-grid-align-content: space-evenly;          /* The justify-content property is a sub-property of the Flexible Box Layout module. */ 
                                                    /* It defines the alignment along the main axis. It helps distribute extra free space leftover when */
                                                    /* either all the flex items on a line are inflexible, or are flexible but have reached their maximum size */
                                                    /* valid: space-evenly, space-between, space-around, start, center */

    --bb-grid-justify-items: stretch;               /* The justify-items property aligns grid items by distributing free space in the columns (not the overall container) */
                                                    /* valid: stretch, start, center, end */

    --bb-grid-align-items: center;                  /* The CSS property align-items is for vertical positioning of the items in a grid. */
                                                    /* valid: stretch, start, center, end */
}

.bb_grid_landscape {
    padding-top: var(--bb-grid-padding-top);
    padding-bottom: var(--bb-grid-padding-bottom);
    padding-left: var(--bb-grid-padding-left);
    padding-right: var(--bb-grid-padding-right);

    grid-column-gap: var(--bb-grid-column-gap);
    grid-row-gap: var(--bb-grid-row-gap);
    background-color: var(--bb-grid-background-color);

    justify-content: var(--bb-grid-justify-content);
    justify-items: var(--bb-grid-justify-items);
    align-content: var(--bb-grid-align-content);
    align-items: var(--bb-grid-align-items);
}

.bb_grid_landscape > div {
    display: block;
    width: 100%;
    height: 100%;
  
    border-style: none;
    border-width: 1px;
    border-color: yellow;
    background-color: black;
}

.db_body { 
    grid-area: db_body;
}
.edit_table { 
    grid-area: edit_table;
}
.g_template_alias { 
    grid-area: g_template_alias;
}
.g_login_status_short { 
    grid-area: g_login_status_short;
}
.g_login_ctrl { 
    grid-area: g_login_ctrl;
}
.wtf_login_main { 
    grid-area: wtf_login_main;
}
.wtf_body_main { 
    grid-area: wtf_body_main;
}
.t_body_main_left { 
    grid-area: t_body_main_left;
}
.t_body_main_right { 
    grid-area: t_body_main_right;
}
.t_body_main { 
    grid-area: t_body_main;
}
.h_db_title { 
    grid-area: h_db_title;
}
.h_logo { 
    grid-area: h_logo;
}
.h_loc { 
    grid-area: h_loc;
}
.h_mp { 
    grid-area: h_mp;
}
.h_date { 
    grid-area: h_date;
}
.h_mdt { 
    grid-area: h_mdt;
}
.h_debug { 
    grid-area: h_debug;
}
.first_p1 {
    grid-area: first_p1;
    text-align: right;
}
.first_p2 { 
    grid-area: first_p2;
    text-align: left;
}
.last_p1 { 
    grid-area: last_p1;
    text-align: right;
}
.last_p2 { 
    grid-area: last_p2;
    text-align: left;
}
.lastf1_p1 { 
    grid-area: lastf1_p1;
}
.lastf1_p2 { 
    grid-area: lastf1_p2;
}
.set_p1 { 
    grid-area: set_p1;
    text-align: right;
}
.set_p2 { 
    grid-area: set_p2;
    text-align: left;
}
.pts_p1 { 
    grid-area: pts_p1;
    text-align: right;
}
.pts_p2 { 
    grid-area: pts_p2;
    text-align: left;
}
.break_p1 { 
    grid-area: break_p1;
    text-align: right;
}
.break_p2 {
    grid-area: break_p2;
    text-align: left;
}
.numpad_p1 { 
    grid-area: numpad_p1;
}
.numpad_p2 { 
    grid-area: numpad_p2;
}
.m_hist { 
    grid-area: m_hist;
}
.f_qr_sb { 
    grid-area: f_qr_sb;
}
.f_qr_stream { 
    grid-area: f_qr_stream;
}
.f_ad { 
    grid-area: f_ad;
}
.ctrl_start { 
    grid-area: ctrl_start;
}
.ctrl_start_p1 { 
    grid-area: ctrl_start_p1;
}
.ctrl_start_p2 { 
    grid-area: ctrl_start_p2;
}
.match_clock { 
    grid-area: match_clock;
    text-align: center;
}
.match_clock_p1 { 
    grid-area: match_clock_p1;
}
.match_clock_p2 { 
    grid-area: match_clock_p2;
}
.ps_frames { 
    grid-area: ps_frames;
}
.ps_break { 
    grid-area: ps_break;
}
.ps_points { 
    grid-area: ps_points;
}
.empty { 
    grid-area: empty;
}
.empty_ctrls { 
    grid-area: empty_ctrls;
}

.material-icons.mi-font-sizer {
    font-size: var(--bb-db-inplace-scoreboard-font-size-mi);
}