:root {
    --snooker-ball-color: white;
    --snooker-ball-bg: gray;
    --snooker-ball-font-size: 2.5vmin;
    --snooker-ball-border-width: 1px;
    --snooker-ball-border-style: none;
    --snooker-ball-border-color:  white;
    --snooker-ball-border-radius: 50%;
}
  
  /* sb-snooker balls do show the current count of balls on the table */
  .bb-show-snooker-ball {
    width: 100%;
    height: 100%;
    background-color: var(--snooker-ball-bg);
    color: var(--snooker-ball-color);
    font-size: var(--snooker-ball-font-size);
    border-width: var(--snooker-ball-border-width);
    border-style: var(--snooker-ball-border-style);
    border-color: var(--snooker-ball-border-color);
    border-radius: var(--snooker-ball-border-radius);
    text-align: center;   /* this works for horizontal alignment */
    vertical-align: center;   /* tried a lot, nothing works */
}


.sb_1 { 
    grid-area: sb_1;
}
.sb_2 { 
    grid-area: sb_2;
}
.sb_3 { 
    grid-area: sb_3;
}
.sb_4 { 
    grid-area: sb_4;
}
.sb_5 { 
    grid-area: sb_5;
}
.sb_6 { 
    grid-area: sb_6;
}
.sb_7 { 
    grid-area: sb_7;
}
.sb_8 { 
    grid-area: sb_8;
}
.sb_9 { 
    grid-area: sb_9;
}
.sb_10 { 
    grid-area: sb_10;
}

.bb-db-inplace-scoreboard-container { 
    display: block;
    width: 98%;
    height: 100%;
    
    padding-left: var(--bb-db-inplace-scoreboard-padding-left);
    padding-right: var(--bb-db-inplace-scoreboard-padding-right);
    padding-top: var(--bb-db-inplace-scoreboard-padding-top);
    padding-bottom: var(--bb-db-inplace-scoreboard-padding-bottom);
    border-style: var(--bb-db-inplace-scoreboard-border-style);
    border-width: var(--bb-db-inplace-scoreboard-border-width);
    border-radius: var(--bb-db-inplace-scoreboard-border-radius);
    border-color: var(--bb-db-inplace-scoreboard-border-color);
    font-size: var(--bb-db-inplace-scoreboard-font-size);
    color: var(--bb-db-inplace-scoreboard-color);
    text-align: var(--bb-db-inplace-scoreboard-text-align);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.bb-db-inplace-scoreboard-snooker-sbs {
    height: 97%;
    display: grid;
    grid-template-columns: 2fr 3.5fr 1.5fr 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 2fr 2fr;
    grid-template-areas:  'isb_tbl_id isb_match_status isb_rules isb_rules isb_link_scoreboard isb_link_livestream'
                            'isb_tbl_id isb_match_status isb_match_clock isb_frames isb_link_scoreboard isb_link_livestream'
                            'isb_last_p1 isb_last_p1 isb_set_p1 isb_pts_p1 isb_break_p1 isb_break_p1'
                            'isb_last_p2 isb_last_p2 isb_set_p2 isb_pts_p2 isb_break_p2 isb_break_p2';

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

    grid-column-gap: var(--bb-isb-grid-column-gap);
    grid-row-gap: var(--bb-isb-grid-row-gap);
    background-color:  rgba(41, 121, 237, 0.5);

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

.bb-db-inplace-scoreboard-snooker-sbs-bestof-1line {
    height: 97%;
    display: grid;
    grid-template-columns: 2fr 3fr 1.5fr 1.5fr 1fr 1fr 1fr 1.5fr 1.5fr 3fr 2fr;
    grid-template-rows: 100%;
    grid-template-areas:  'isb_rules isb_last_p1 isb_break_p1 isb_pts_p1 isb_set_p1 isb_frames isb_set_p2 isb_pts_p2 isb_break_p2 isb_last_p2 isb_match_clock';

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

    grid-column-gap: var(--bb-isb-grid-column-gap);
    grid-row-gap: var(--bb-isb-grid-row-gap);
    background-color: rgba(41, 121, 237, 0.5);

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

.bb-db-inplace-scoreboard-snooker-sbs-1frame-1line {
    height: 97%;
    display: grid;
    grid-template-columns: 2fr 3fr 1.5fr 1.5fr 1.5fr 1.5fr 3fr 2fr;
    grid-template-rows: 100%;
    grid-template-areas:  'isb_rules isb_last_p1 isb_break_p1 isb_pts_p1 isb_pts_p2 isb_break_p2 isb_last_p2 isb_match_clock';

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

    grid-column-gap: var(--bb-isb-grid-column-gap);
    grid-row-gap: var(--bb-isb-grid-row-gap);
    background-color: rgba(41, 121, 237, 0.5);

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

.bb-db-inplace-scoreboard-snooker-bt {
    height: 97%;
    display: grid;
    grid-template-columns: 2fr 3.5fr 1.5fr 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 2fr 2fr;
    grid-template-areas:  'isb_tbl_id isb_match_status isb_rules isb_rules isb_link_scoreboard isb_link_livestream'
                            'isb_tbl_id isb_match_status isb_match_clock isb_frames isb_link_scoreboard isb_link_livestream'
                            'isb_last_p1 isb_last_p1 isb_set_p1 isb_pts_p1 isb_break_p1 isb_break_p1'
                            'isb_last_p2 isb_last_p2 isb_set_p2 isb_pts_p2 isb_break_p2 isb_break_p2';

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

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

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

.bb-db-inplace-scoreboard-snooker-bt-1frame-1line {
    height: 97%;
    display: grid;
    grid-template-columns: 2fr 3fr 1.5fr 1.5fr 3fr 2fr;
    grid-template-rows: 100%;
    grid-template-areas:  'isb_rules isb_last_p1 isb_pts_p1 isb_pts_p2 isb_last_p2 isb_match_clock';

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

    grid-column-gap: var(--bb-isb-grid-column-gap);
    grid-row-gap: var(--bb-isb-grid-row-gap);
    background-color:  rgba(41, 121, 237, 0.5);

    justify-content: var(--bb-isb-grid-justify-content);
    justify-items: var(--bb-isb-grid-justify-items);
    align-content: var(--bb-isb-grid-align-content);
    align-items: var(--bb-isb-grid-align-items);
    font-size: var(--bb-db-inplace-scoreboard-font-size-mi);
}

.bb-db-inplace-scoreboard-snooker-bt-bestof-1line {
    height: 97%;
    display: grid;
    grid-template-columns: 2fr 3fr 1.5fr 1fr 1fr 1fr 1.5fr 3fr 2fr;
    grid-template-rows: 100%;
    grid-template-areas:  'isb_rules isb_last_p1 isb_pts_p1 isb_set_p1 isb_frames isb_set_p2 isb_pts_p2 isb_last_p2 isb_match_clock';

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

    grid-column-gap: var(--bb-isb-grid-column-gap);
    grid-row-gap: var(--bb-isb-grid-row-gap);
    background-color:  rgba(41, 121, 237, 0.5);

    justify-content: var(--bb-isb-grid-justify-content);
    justify-items: var(--bb-isb-grid-justify-items);
    align-content: var(--bb-isb-grid-align-content);
    align-items: var(--bb-isb-grid-align-items);
    font-size: var(--bb-db-inplace-scoreboard-font-size-mi);
}

.bb-db-inplace-scoreboard-3C {
    height: 97%;
    display: grid;
    grid-template-columns: 4fr 6fr 3fr 5fr 2fr 2fr;
    grid-template-rows: 5fr 5fr 6fr 4fr 6fr 4fr;
    grid-template-areas:  'isb_tbl_id isb_match_status isb_rules isb_rules isb_link_scoreboard isb_link_livestream'
                        'isb_tbl_id isb_match_status isb_match_clock isb_frames isb_link_scoreboard isb_link_livestream'
                        'isb_last_p1 isb_last_p1 isb_curr_inning_p1 isb_pts_p1 isb_inning_pts_p1 isb_inning_pts_p1'
                        'isb_last_p1 isb_last_p1 isb_average_p1 isb_pts_p1 isb_inning_pts_p1 isb_inning_pts_p1'
                        'isb_last_p2 isb_last_p2 isb_curr_inning_p2 isb_pts_p2 isb_inning_pts_p2 isb_inning_pts_p2'
                        'isb_last_p2 isb_last_p2 isb_average_p2 isb_pts_p2 isb_inning_pts_p2 isb_inning_pts_p2';

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

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

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

.bb-db-inplace-scoreboard-3C-1line {
    height: 97%;
    display: grid;

    grid-template-columns: 3fr 4vh 3fr 1fr 1fr 2fr 1fr 1fr 3fr 4vh 3fr;
    grid-template-rows: 100%;
    grid-template-areas:  'isb_rules isb_white_ball isb_last_p1 isb_break_p1 isb_pts_p1 isb_inning_n_of_m isb_pts_p2 isb_break_p2 isb_last_p2 isb_yellow_ball isb_match_clock';

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

    grid-column-gap: var(--bb-isb-grid-column-gap);
    grid-row-gap: var(--bb-isb-grid-row-gap);
    background-color:  rgba(41, 121, 237, 0.5);

    justify-content: var(--bb-isb-grid-justify-content);
    justify-items: var(--bb-isb-grid-justify-items);
    align-content: var(--bb-isb-grid-align-content);
    align-items: var(--bb-isb-grid-align-items);
    font-size: var(--bb-db-inplace-scoreboard-font-size-mi);
}

.bb-db-inplace-scoreboard-3C-1set-1line {
    height: 97%;
    display: grid;

    grid-template-columns: 4vh 3fr 3fr 1fr 1fr 1fr 3fr 3fr 4vh;
    grid-template-rows: 100%;
    grid-template-areas:  'isb_white_ball isb_break_p1 isb_last_p1 isb_pts_p1 isb_curr_inning isb_pts_p2 isb_last_p2 isb_break_p2 isb_yellow_ball';

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

    grid-column-gap: var(--bb-isb-grid-column-gap);
    grid-row-gap: var(--bb-isb-grid-row-gap);
    background-color:  rgba(41, 121, 237, 0.5);

    justify-content: var(--bb-isb-grid-justify-content);
    justify-items: var(--bb-isb-grid-justify-items);
    align-content: var(--bb-isb-grid-align-content);
    align-items: var(--bb-isb-grid-align-items);
    font-size: var(--bb-db-inplace-scoreboard-font-size-mi);
}

.bb-db-inplace-scoreboard-snooker-sbs > div {
    display: block;
    width: 100%;
    height: 100%;
  
    border-style: none;
    border-width: 1px;
    border-color: hotpink;
    background-color: black;

    padding-left: 0.3vmin;
    padding-right: 0.3vmin;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.bb-db-inplace-scoreboard-snooker-bt > div {
    display: block;
    width: 100%;
    height: 100%;
  
    border-style: none;
    border-width: 1px;
    border-color: hotpink;
    background-color: black;

    padding-left: 0.3vmin;
    padding-right: 0.3vmin;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.bb-db-inplace-scoreboard-3C > div {
    display: block;
    width: 100%;
    height: 100%;
  
    border-style: none;
    border-width: 1px;
    border-color: hotpink;
    background-color: black;

    padding-left: 0.3vmin;
    padding-right: 0.3vmin;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

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

.isb_link_scoreboard { 
    grid-area: isb_link_scoreboard;
}
.isb_link_livestream { 
    grid-area: isb_link_livestream;
}
.isb_rules { 
    grid-area: isb_rules;
}
.isb_frames { 
    grid-area: isb_frames;
}
.isb_match_clock { 
    grid-area: isb_match_clock;
}
.isb_match_status { 
    grid-area: isb_match_status;
}
.isb_loc_id { 
    grid-area: isb_loc_id;
}
.isb_tbl_id { 
    grid-area: isb_tbl_id;
}
.isb_last_p1 { 
    grid-area: isb_last_p1;
}
.isb_last_p2 { 
    grid-area: isb_last_p2;
}
.isb_first_p1 { 
    grid-area: isb_first_p1;
}
.isb_first_p2 { 
    grid-area: isb_first_p2;
}
.isb_lastf1_p1 { 
    grid-area: isb_lastf1_p1;
}
.isb_lastf1_p2 { 
    grid-area: isb_lastf1_p2;
}
.isb_set_p1 { 
    grid-area: isb_set_p1;
    text-align: right;
}
.isb_set_p2 { 
    grid-area: isb_set_p2;
    text-align: right;
}
.isb_pts_p1 { 
    grid-area: isb_pts_p1;
    text-align: right;
}
.isb_pts_p2 { 
    grid-area: isb_pts_p2;
    text-align: right;
}
.isb_break_p1 { 
    grid-area: isb_break_p1;
    text-align: right;
    color: var(--player-score-inningpts-color);
}
.isb_break_p2 { 
    grid-area: isb_break_p2;
    text-align: right;
    color: var(--player-score-inningpts-color);
}
.isb_curr_inning { 
    grid-area: isb_curr_inning;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.isb_inning_n_of_m { 
    grid-area: isb_inning_n_of_m;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.isb_curr_inning_p1 { 
    grid-area: isb_curr_inning_p1;
    text-align: right;
    color: var(--player-score-inningpts-color);
}
.isb_curr_inning_p2 { 
    grid-area: isb_curr_inning_p2;
    text-align: right;
    color: var(--player-score-inningpts-color);
}
.isb_average_p1 { 
    grid-area: isb_average_p1;
    text-align: right;
}
.isb_average_p2 { 
    grid-area: isb_average_p2;
    text-align: right;
}
.isb_inning_pts_p1 { 
    grid-area: isb_inning_pts_p1;
    text-align: right;
    color: var(--player-score-inningpts-color);
}
.isb_inning_pts_p2 { 
    grid-area: isb_inning_pts_p2;
    text-align: right;
    color: var(--player-score-inningpts-color);
}
.isb_hr_p1 { 
    grid-area: isb_hr_p1;
    text-align: right;
}
.isb_hr_p2 { 
    grid-area: isb_hr_p2;
    text-align: right;
}
.isb_white_ball { 
    grid-area: isb_white_ball;
}
.isb_yellow_ball { 
    grid-area: isb_yellow_ball;
}