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

.videocenter_body { 
    grid-area: videocenter_body;
}
.videocenter_sidebar_left { 
    grid-area: videocenter_sidebar_left;
}
.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;
}



/* ------------------ this is stuff taken from Levin's videocenter.csse */

.header-container {
	width: 100%;
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
}

.header-col {
	display: inline-flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
}

.header-1 {
	width: 10%;
}

.header-2 {
	width: 80%;
}

.header-3 {
	width: 10%;
	font-size: 2vmin;
}

.logo-image {
	width: 35%;
}

.heading1 {
	border-bottom: 1px solid white;
	font-size: 3.5vmin;
	letter-spacing: 0.2vmin;
}

.heading2 {
	letter-spacing: 0.2vmin;
	font-size: 2.5vmin;
}

.container {
    width: 100%;
    height: 100%;
    display: block;
    overflow: auto;
}

.container-content {
	color: white;
}

.video-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.video-grid_element {
	color: white;
	width: 30%;
	border: 3px solid var(--bb_blue);
	display: block;
	background-color: rgba(41, 121, 237, 0.5);
	padding: 2vmin 0;
	font-size: 2.4vmin;
	margin-bottom: 2vmin;
	transition: all 0.3s ease;
}

.video-grid_element:hover {
	background-color: var(--bb_blue);
}

.video-element_link {
	width: 100%;
}

.video-element_link:hover {

}

a, a:hover {
	text-decoration: none;
}

a:hover {
	color: white;
}

a:visited {
	color: initial;
}

.video-element_title {
	font-size: 2vmin;
	color: white;
	margin-left: 5%;
}

.video-element_name {
	font-size: 1.4vmin;
	color: white;
	margin-left: 5%;
}

.video-element_date {
	font-size: 1.4vmin;
	color: white;
	margin-left: 5%;
}

.video-element_img {
	position: relative;
}

.video_overlay {
	left: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
	align-items: center;
	display: flex;
	justify-content: center;
}

.material-icons {
	font-size: 8vmin;
	color: var(--bb_blue);
}

a:visited {
	color: inherit;
}

a:hover .material-icons {
	color: white;
}

.video-element_poster {
	width: 100%;
}

.video-element_duration {
	font-size: 1.4vmin;
	color: white;
	margin-left: 5%;
}

footer {
	text-align: center;
}

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

.bb_form_container_sidebar_left {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns:  1fr;
    grid-template-rows:  1fr 1fr 8fr 1fr;
    grid-template-areas: 'form_title'
                            'form_errors'
                            'form_fields'
                            'form_controls';
    background-color: black;
    overflow-y: auto;
	color: white;
	font-size: var(--s-font-size);
}

.bb_formfield_container {
    display: grid;
    grid-template-columns:  1fr 3fr;
    /* background-color: white; */
	margin-bottom: 1vmin;
	font-family: 'Titillium Web', sans-serif;
}

#edit_record_form {
	height: 100%;
}

.form_title { 
    grid-area: form_title;
	margin-left: 1vmin;
}
.form_errors { 
    grid-area: form_errors;
}
.form_fields { 
    grid-area: form_fields;
    display: block;
    width: 100%;
    height: 100%;
}
.form_controls { 
    grid-area: form_controls;
    background-color: black;
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
}

.form_fieldname { 
    text-align: right;
	align-items: center;
	justify-content: right;
}
.form_fielddata { 
	margin-left: 1vmin;
    text-align: left;
	align-items: start;
	justify-content: left;
}

.form_fielddata input{
	border-radius: 0;
	border: 1px solid white;
	background-color: transparent;
	color: white;
	font-family: 'Titillium Web', sans-serif;
	font-size: var(--s-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(--s-font-size);
	/* width: 50%; */
}

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

.form_controls input {
	border-radius: 0;
	border: 1px solid white;
	background-color: transparent;
	color: white;
	font-size: 2vmin;
	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;
} 

.form_controls input:hover {
	border-radius: 0;
	border: 1px solid var(--billberries-blue);
	color: var(--billberries-blue);
	cursor: pointer;
}

#record_cancel {
	border-color: red;
}

#record_cancel:hover {
	border-color: var(--billberries-blue);
}