:root {
    --vs-font-size: 2vmin;
    --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-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;
}

.watchvideo_body { 
    grid-area: watchvideo_body;
}
.watchvideo_sidebar_left { 
    grid-area: watchvideo_sidebar_left;
}
.watchvideo_sidebar_right { 
    grid-area: watchvideo_sidebar_right;
}
.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;
    overflow: hidden;
}
.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;
}



/* ------------------ this is stuff taken from Levin's watchvideo.css */

.watchvideo_container {
    width: 100%;
    height: 100%;
    display: block;
    /* overflow-x: hidden;
    overflow-y: scroll; */
}

.watchvideo_grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    /* overflow-x: hidden;
    overflow-y: scroll; */
    color: white;
    font-size: var(--vs-font-size);
}

.watchvideo_sidebar_left {
    width: 100%;
    height: 100%;
    display: block;
    color: white;
    /* overflow-x: hidden;
    overflow-y: scroll; */
}

.watchvideo_sidebar_right {
    width: 100%;
    height: 100%;
    display: block;
    color: white;
    /* overflow-x: hidden;
    overflow-y: scroll; */
}

.video-player_container {
    position: relative;
    display: block;
	width: 100%;
	height: 100%;
	justify-content: center;
	margin-bottom: 0vmin;
    overflow: hidden;
}

.bb-video_player {
	width: 60vw;
	height: 33.75vw;
	max-height: 70vh;
}

.video-details_container {
	width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: start;
    align-content: flex-start;    
    padding-top: 1vmin;
	padding-bottom: 1vmin;
	padding-left: 1vmin;
    row-gap: 2vh;
}

.video-details_container_right {
	width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4fr 4fr 1fr;
    grid-template-areas: 'video_details'
                        'inning_list'
                        'clip_add';

    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);

    border-style: none;
    border-width: 1px;
    border-color: yellow;
    background-color: black;

    padding-top: 1vmin;
	padding-bottom: 3vmin;
	padding-left: 1vmin;
    padding-right: 1vmin;

    row-gap: 1vh;
}

.video-details_container_right > div {
    display: block;
    width: 100%;
    height: 100%;

    overflow-y: hidden;
    overflow-x: hidden;
}

.video_details { 
    grid-area: video_details;
}

.inning_list { 
    grid-area: inning_list;
    font-size: var(--vs-font-size);
}

.clip_add { 
    grid-area: clip_add;
}

.video-details_innings_list_header {
    display: grid;
    grid-template-columns: 10fr 4fr 10fr 1fr;

    text-align: center;

    /*align-items: start;
    align-content: flex-start;    
    justify-items: center;
	padding-bottom: 1vmin;*/
}

.video-details_innings_list_header2 {
    display: grid;
    grid-template-columns: 6fr 4fr 4fr 4fr 6fr 1fr;

    /*align-items: start;
    align-content: flex-start;    
    justify-items: stretch;*/
    text-align: center;
    column-gap: 1px;
}

.video-details_innings_list {
    height: 80%;
    display: grid;
    grid-template-columns: 6fr 4fr 4fr 4fr 6fr 1fr;

    /*align-items: start;
    align-content: flex-start;    
    justify-items: stretch;*/
    text-align: center;
    column-gap: 1px;

    overflow-y: auto;
}

.innings_list_item {
    background-color: black;
}


.playlist-details_container_right {
	width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
    grid-template-areas: 'playlist_details'
                        'clip_list';

    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);

    border-style: none;
    border-width: 1px;
    border-color: yellow;
    background-color: black;

    padding-top: 1vmin;
    padding-bottom: 1vmin;
    padding-left: 1vmin;
    padding-right: 1vmin;

    row-gap: 1vh;
}

.playlist-details_container_right > div {
    display: block;
    width: 100%;
    height: 100%;
  
    overflow-y: auto;
    overflow-x: hidden;
}

.playlist_details { 
    grid-area: playlist_details;
}

.clip_list { 
    grid-area: clip_list;
}

.clip_add_grid {
	width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr 3fr 1fr;
    align-items: start;
    align-content: flex-start;    
    justify-items: center;
    overflow-x: hidden;
	padding-bottom: 1vmin;
}

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



.video-detail-inline {
	/*width: 100%;
    height: 100%;*/
    /*display: block;*/
    overflow-x: hidden;
}

.video-detail {
	width: 100%;
    /*height: 100%;*/
    display: grid;
    grid-template-columns: 3fr 7fr;
    align-items: start;
    align-content: flex-start;    
    overflow: hidden;
    text-overflow: ellipsis;
    column-gap: 3px;
	font-size: var(--vs-font-size);
}

.video-details_col1 {
	/*width: 100%;*/
	/*border: 1px solid white;*/
	border-collapse: collapse;
	text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.video-details_col2 {
	/*width: 100%;*/
	/*border: 1px solid white;*/
	border-collapse: collapse;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.video-extras_container {
	display: flex;
	margin-top: 2vmin;
	margin-bottom: 2vmin;
	margin-left: auto;
	margin-right: 16vmin;
}

.video-extras_container button {
	height: 25%;
	border-radius: 0;
	margin-left: 0.1vmin;
	margin-right: 0.1vmin;
	border: 1px solid white;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.video-extras_container button:hover {
	background-color: var(--billberries-blue);
	border-color: var(--billberries-blue);
}

footer {
	text-align: center;
}

.stream-overlay_container {
	position: absolute;
	z-index: 1001;
    left: 0vw;
	top: 0vw;
	height: 4vh;
    width: 100%;
    display: block;
    font-size: var(--vs-font-size);;
    background-color: var(--billberries-blue);
}

.stream-time_container {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.stream-time_content {
	background-color: rgba(41, 121, 237, 0.5);
	color: white;
	font-size: 3vmin;
	padding: 1vmin 2vmin 1vmin 2vmin;
}

.stream-overlay_box {
	display: inline-flex;
	background-color: rgba(41, 121, 237, 0.5);
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.stream-overlay_col {
	width: 12%;
	text-align: center;
	background-color: rgba(41, 121, 237, 0.5);
	margin-left: 0.5vmin;
	margin-right: 0.5vmin;
	border-left: 2px solid rgb(41, 121, 237);
	border-right: 2px solid rgb(41, 121, 237);
	font-size: 3vmin;
}

.stream-overlay_players {
	width: 100%;
	flex-wrap: nowrap;
	display: flex;
}

.stream-overlay_score {
	width: 100%;
	flex-wrap: nowrap;
	display: flex;
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
	.home_body {
		margin: 0 1vw 0 1vw;
	}
	
}

.video-display-none {
	display: none;
}

.bb_form_container_sidebar_right {
    /*width: 100%;
    height: 100%;
    display: block;*/
	color: white;
}

.bb_formfield_container {
	width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 3fr 7fr;
    align-items: start;
    align-content: flex-start;    
    overflow: hidden;
    text-overflow: ellipsis;
    column-gap: 3px;
    background-color: black;
	font-size: var(--vs-font-size);
	font-family: 'Titillium Web', sans-serif;
}

#edit_record_form {
	height: 100%;
}

.form_fieldname { 
    text-align: right;
	align-items: center;
	justify-content: right;
	font-size: var(--vs-font-size);
}

.form_fielddata { 
	padding-left: 1vmin;
    text-align: left;
	align-items: start;
	justify-content: left;
	font-family: 'Titillium Web', sans-serif;
	font-size: var(--vs-font-size);
}

.form_fielddata input{
	border-radius: 0;
	border: 1px solid white;
	background-color: transparent;
	color: white;
	font-family: 'Titillium Web', sans-serif;
	font-size: var(--vs-font-size);
	/* width: 50%; */
}

.form_fielddata select{
	border-radius: 0;
	border: 1px solid white;
	background-color: black;
	color: white;
	font-family: 'Titillium Web', sans-serif;
	font-size: var(--vs-font-size);
	/* width: 50%; */
}

.form_fielddata input[type=checkbox] {
	height: var(--vs-font-size);
	width: var(--vs-font-size);
}

.form_controls input {
	border-radius: 0;
	border: 1px solid white;
	background-color: transparent;
	color: white;
	font-size: var(--vs-font-size);
	margin-left: 0.5vmin;
	margin-right: 0.5vmin;
	font-family: 'Titillium Web', sans-serif;
	padding-left: 1vmin;
	padding-right: 1vmin;
	padding-top: 0.5vmin;
	padding-bottom: 0.5vmin;
	margin-bottom: 0.5vmin;
	margin-top: 0.5vmin;
} 

.bb-wv-oisb-billard-1line {
    height: 97%;
    display: grid;

    grid-template-columns: 2.5fr 1fr 1fr 3fr 1fr 2fr 1fr 3fr 1fr 1fr 2.5fr;
    grid-template-rows: 100%;
    grid-template-areas:  'oisb_rules oisb_white_ball oisb_break_p1 oisb_last_p1 oisb_pts_p1 oisb_inning_n_of_m oisb_pts_p2 oisb_last_p2 oisb_break_p2 oisb_yellow_ball oisb_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-wv-oisb-billard-1line > div {
    display: block;
    width: 100%;
    height: 100%;
  
    border-style: none;
    border-width: 1px;
    border-color: hotpink;
    background-color: var(--billberries-blue);

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

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

.oisb_rules { 
    grid-area: oisb_rules;
    text-align: center;
}
.oisb_frames { 
    grid-area: oisb_frames;
}
.oisb_match_clock { 
    grid-area: oisb_match_clock;
    text-align: center;
}
.oisb_match_status { 
    grid-area: oisb_match_status;
}
.oisb_loc_id { 
    grid-area: oisb_loc_id;
}
.oisb_tbl_id { 
    grid-area: oisb_tbl_id;
}
.oisb_sets { 
    grid-area: oisb_sets;
    text-align: center;
}
.oisb_last_p1 { 
    grid-area: oisb_last_p1;
    text-align: left;
}
.oisb_last_p2 { 
    grid-area: oisb_last_p2;
    text-align: right;
}
.oisb_first_p1 { 
    grid-area: oisb_first_p1;
    text-align: left;
}
.oisb_first_p2 { 
    grid-area: oisb_first_p2;
    text-align: right;
}
.oisb_lastf1_p1 { 
    grid-area: oisb_lastf1_p1;
    text-align: left;
}
.oisb_lastf1_p2 { 
    grid-area: oisb_lastf1_p2;
    text-align: right;
}
.oisb_sets_p1 { 
    grid-area: oisb_sets_p1;
    text-align: right;
}
.oisb_sets_p2 { 
    grid-area: oisb_sets_p2;
    text-align: left;
}
.oisb_pts_p1 { 
    grid-area: oisb_pts_p1;
    text-align: center;
}
.oisb_pts_p2 { 
    grid-area: oisb_pts_p2;
    text-align: center;
}
.oisb_break_p1 { 
    grid-area: oisb_break_p1;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.oisb_break_p2 { 
    grid-area: oisb_break_p2;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.oisb_curr_inning { 
    grid-area: oisb_curr_inning;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.oisb_inning_n_of_m { 
    grid-area: oisb_inning_n_of_m;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.oisb_curr_inning_p1 { 
    grid-area: oisb_curr_inning_p1;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.oisb_curr_inning_p2 { 
    grid-area: oisb_curr_inning_p2;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.oisb_average_p1 { 
    grid-area: oisb_average_p1;
    text-align: right;
}
.oisb_average_p2 { 
    grid-area: oisb_average_p2;
    text-align: right;
}
.oisb_inning_pts_p1 { 
    grid-area: oisb_inning_pts_p1;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.oisb_inning_pts_p2 { 
    grid-area: oisb_inning_pts_p2;
    text-align: center;
    color: var(--player-score-inningpts-color);
}
.oisb_hr_p1 { 
    grid-area: oisb_hr_p1;
    text-align: right;
}
.oisb_hr_p2 { 
    grid-area: oisb_hr_p2;
    text-align: right;
}
.oisb_white_ball { 
    grid-area: oisb_white_ball;
    text-align: center;
    background-color: white;
    color: white;
}
.oisb_yellow_ball { 
    grid-area: oisb_yellow_ball;
    text-align: center;
    background-color: yellow;
    color: yellow;
}

.video-details_clips_list_header {
	width: 95%;
    height: 100%;
    display: grid;
    grid-template-columns: 10fr 4fr 10fr 1fr;
    align-items: start;
    align-content: flex-start;    
    justify-items: center;
    overflow-x: hidden;
	padding-bottom: 2vmin;
}

.video-details_clips_list {
	width: 95%;
    height: 100%;
    display: grid;
    grid-template-columns: 4fr 8fr 4fr 3fr 3fr 1fr;
    align-items: start;
    align-content: flex-start;    
    justify-items: stretch;
    text-align: center;
    overflow-x: hidden;
    column-gap: 1px;
    background-color: black;
}

.clips_list_item {
    background-color: black;
}

.bb-wv-oisb-snooker_bt-1line {
    height: 97%;
    display: grid;

    grid-template-columns: 2.5fr 3fr 1fr 1fr 1fr 3fr 2.5fr;
    grid-template-rows: 100%;
    grid-template-areas:  'oisb_rules oisb_last_p1 oisb_pts_p1 oisb_sets oisb_pts_p2 oisb_last_p2 oisb_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-wv-oisb-snooker_bt-1line > div {
    display: block;
    width: 100%;
    height: 100%;
  
    border-style: none;
    border-width: 1px;
    border-color: hotpink;
    background-color: var(--billberries-blue);

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

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

.bb-wv-oisb-snooker_bt_bestof-1line {
    height: 97%;
    display: grid;

    grid-template-columns: 2.5fr 3fr 1fr 1fr 1fr 1fr 1fr 3fr 2.5fr;
    grid-template-rows: 100%;
    grid-template-areas:  'oisb_rules oisb_last_p1 oisb_pts_p1 oisb_sets_p1 oisb_sets oisb_sets_p2 oisb_pts_p2 oisb_last_p2 oisb_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-wv-oisb-snooker_bt_bestof-1line > div {
    display: block;
    width: 100%;
    height: 100%;
  
    border-style: none;
    border-width: 1px;
    border-color: hotpink;
    background-color: var(--billberries-blue);

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

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

.vjs-overlay {
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 1000;
    color: white;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    pointer-events: none;
}