[data-theme="light"]
    {
    --navColor:		#2538b0;
    --bgColor:		white;
    --fgColor:		black;
    --bgColorRgba:	rgba(0, 0, 0, .5);
    --bgColorHead:	#555;
    --fgColorTC:	red;
    --bgColorGstd:	green;
    --bgColorAlt:	#EEE;
    --bgColorThead:	#222;
    --fgColorWeb:	yellow;
    --bgColorHover:	#F8DE7E;/*yellow;*/
    --fgColorHover:	black;
    }

[data-theme="dark"]
    {
    --navColor:		#F44336;
    --bgColor:		black;
    --fgColor:		white;
    --bgColorRgba:	rgba(255, 255, 255, .5);
    --bgColorHead:	#EEE;
    --fgColorTC:	yellow;
    --bgColorGstd:	#00AA00;
    --bgColorAlt:	#333;
    --bgColorThead:	#DDD;
    --fgColorWeb:	black;
    --bgColorHover:	#BBBB00;
    --fgColorHover:	black;
    }

.hidden
    {
    display:            none;
    }

#TnSB_div
    {
    position:           absolute;
    z-index:            0;
    left:               2px;
    top:                22px;
    }

body
    {
    margin:		0;
    background:		var(--bgColor);
    }

.head1,
.head1x
    {
    font-size:		var(--headerFontSize);
    font-style:		normal;
    position:		-webkit-sticky;
    position:		sticky;
    left:		0;
    top:		var(--titleTop);
    width:		100%;
    white-space:	nowrap;
    text-overflow:	visible;
    text-align:		left;
    background:		var(--bgColorHead);
    color:		var(--bgColor);
    border:		thin solid yellow;
    z-index:		5;
    }

.head2
    {
    position:		absolute;
    left:		0;
    width:		100%;
    z-index:		1;
    white-space:	nowrap;
    text-overflow:	visible;
    text-align:		left;
    }

.head3,
.head3x
    {
    background:		#888	!important;
    color:		#FFF	!important;
    border:		0	!important;
    z-index:		1	!important;
    }

.head33
    {
    position:		absolute;
    left:		0;
    width:		100%;
    z-index:		1;
    white-space:	nowrap;
    text-overflow:	visible;
    text-align:		left;
    }

.time
    {
    width:		var(--timeWidth);
    text-align:		center;
    }

.timechange
    {
    width:		var(--timeWidth);
    text-align:		center;
    color:		var(--fgColorTC);
    }

.timechange-started
    {
    width:		var(--timeWidth);
    text-align:		center;
    color:		yellow;
    }

.timechange-final
    {
    width:		var(--timeWidth);
    text-align:		center;
    color:		yellow;
    }

.gnum
    {
    width:		var(--gnumWidth);
    text-align:		center;
    }

.team
    {
    width:		var(--teamWidth);
    text-align:		left;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    }

.team-circled
    {
    width:		var(--teamWidth);
    text-align:		left;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    color:		var(--fgColorTC);
    }

.team-circled-started
    {
    width:		var(--teamWidth);
    text-align:		left;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    color:		yellow;
    }

.team-circled-final
    {
    width:		var(--teamWidth);
    text-align:		left;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    color:		yellow;
    }

.score
    {
    width:		var(--scoreWidth);
    text-align:		left;
    }

.separator
    {
    background-color:	var(--fgColor);
    width:		var(--separatorWidth);
    text-align:		left;
    padding-left:	0px !important;
    padding-right:	0px !important;
    }

.game-started
    {
    width:		var(--scoreWidth);
    text-align:		left;
    background:		green			!important;
    color:		white			!important;
    }

.circled-game-started
    {
    width:		var(--scoreWidth);
    text-align:		left;
    background:		green			!important;
    color:		red			!important;
    }

.game-final
    {
    width:		var(--scoreWidth);
    text-align:		left;
    background:		#CC0000			!important;
    color:		white			!important;
    }

.circled-game-final
    {
    width:		var(--scoreWidth);
    text-align:		left;
    background:		#CC0000			!important;
    color:		yellow			!important;
    }

.center-game-started
    {
    width:		var(--scoreWidth);
    text-align:		center;
    background:		green			!important;
    color:		white			!important;
    }

.center-game-final
    {
    width:		var(--scoreWidth);
    text-align:		center;
    background:		#CC0000	!important;
    color:		white	!important;
    }

.book
    {
    width:		var(--bookWidth);
    text-align:		right;
    text-overflow:	ellipsis;
    overflow:		hidden;
    z-index:		1;
    }

.book:hover
    {
    cursor:             pointer;
    }

.book_header
    {
    width:		var(--bookWidth);
    text-align:		center;
    text-overflow:	ellipsis;
    overflow:		hidden;
    z-index:		2;
    position:		-webkit-sticky;
    position:           sticky;
    top:                var(--headerTop);
    }

.reg
    {
    background:		var(--bgColor);
    color:		var(--fgColor);
    }

.alt
    {
    background:		var(--bgColorAlt);
    color:		var(--fgColor);
    }

.ln
    {
    white-space:	nowrap;
    text-overflow:	ellipsis;
    overflow:		hidden;
    }

.lt2min
    {
    background:		#990000;
    color:		white;
    white-space:	nowrap;
    text-overflow:	ellipsis;
    overflow:		hidden;
    }

.lt5min
    {
    background:		#FFFF00;
    color:		black;
    white-space:	nowrap;
    text-overflow:	ellipsis;
    overflow:		hidden;
    }

.lt10min
    {
    background:		#00FF00;
    color:		black;
    white-space:	nowrap;
    text-overflow:	ellipsis;
    overflow:		hidden;
    }

#table_scroll
    {
    z-index:		2;
    margin:             auto;
    display:		none;
    align:              left;
    border-collapse:	collapse;
    border-spacing: 	0;
    padding:        	0;
    margin:             0;
    }

#schedule
    {
    font-family:	Open Sans,Arial,Helvetica,sans-serif;
    font-size:		0.8rem;
    font-style:		normal;
    table-layout:	fixed;
    width:              820px;
    min-width:		800px;
    margin:             0;
    border-collapse:	separate;
    border-spacing:	0;
    border:             thin solid black;
    }

#table_scroll th,
#table_scroll td
    {
    border:             thin solid var(--fgColor);
    padding-left:	2px;
    padding-right:	2px;
    border-top:		0;
    border-right:	0;
    font-weight:	normal;
    }

#table_scroll #headerOfTable th,
#table_scroll #footerOfTable th
    {
    background:         var(--mainbgColor) !important;
    }

.tnTD0 /* in-between the team and pitcher */
    {
    width:              5%;
    border:             0;
    padding-left:	0px;
    padding-right:	0px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

.tnTD1 /* the team abbr part */
    {
    width:              25%;
    text-align:		left;
    border:             0;
    padding-left:	0px;
    padding-right:	0px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

.tnTD2 /* the pitcher part */
    {
    width:              60%;
    text-align:		left;
    border:             0;
    padding-left:	0px;
    padding-right:	0px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

.tnTD3 /* the -L part */
    {
    width:              10%;
    text-align:		left;
    border:             0;
    padding-left:	0px;
    padding-right:	0px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

.scTD0 /* in-between the score and status */
    {
    width:              10%;
    border:             0;
    padding-left:	0px;
    padding-right:	0px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

.scTD1 /* the score part */
    {
    width:              30%;
    text-align:		right;
    border:             0;
    padding-left:	0px;
    padding-right:	0px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

.scTD2 /* the status part */
    {
    width:              60%;
    text-align:		left;
    border:             0;
    padding-left:	0px;
    padding-right:	0px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

.scTD3 /* no score, just status */
    {
    width:              100%;
    text-align:		center;
    border:             0;
    padding-left:	0px;
    padding-right:	0px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

#schedule th:nth-child(1),
#schedule th:nth-child(2),
#schedule th:nth-child(3),
#schedule th:nth-child(4),
#schedule th:nth-child(5)
    {
    position:		-webkit-sticky;
    position:		sticky;
    z-index:		3;
    background:		inherit;
    }

#schedule th:nth-child(1)
    {
    left:		0;
    }

#schedule th:nth-child(2)
    {
    left:		var(--gnumLeft);
    }

#schedule th:nth-child(3)
    {
    left:		var(--teamLeft);
    }

#schedule th:nth-child(4)
    {
    left:		var(--scoreLeft);
    }

#schedule th:nth-child(5)
    {
    left:               var(--separatorLeft);
    width:              1px;
    background:		var(--fgColor);
    }

#schedule thead th
    {
    position:		-webkit-sticky;
    position:		sticky;
    background:		var(--bgColorThead);
    color:              var(--bgColor);
    top:                var(--headerTop);
    z-index:		2;
    }

#schedule tfoot,
#schedule tfoot th
    {
    background:		var(--bgColor);
    color:              var(--bgColor);
    }

#schedule thead th:nth-child(1),
#schedule thead th:nth-child(2),
#schedule thead th:nth-child(3),
#schedule thead th:nth-child(4),
#schedule thead th:nth-child(5)
    {
    background:		var(--bgColorThead);
    z-index:		6;
    }

#schedule thead th:nth-child(5)
    {
    background:		var(--fgColor);
    }

.dark-mode
    {
    background-color:	white;
    color:              black;
    z-index:        	100;
    position:       	absolute;
    font-family:    	Open Sans,Arial,Helvetica,sans-serif;
    font-size:      	0.75rem;
    font-style:     	bold;
    top:                5px;
    left:               300px;
    cursor:             pointer;
    }

#table_scroll a
    {
    color:              var(--bgColor);
    }

.headTD1 /* the dash part */
    {
    font-size:		var(--headerTD1FontSize);
    font-style:		bold;
    width:		20px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

.headTD2 /* the header part */
    {
    font-size:		var(--headerFontSize);
    font-style:		bold;
    width:		100%;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

.headTD0 /* the middle part */
    {
    font-size:		var(--headerFontSize);
    font-style:		bold;
    width:		5px;
    text-overflow:	ellipsis;
    overflow:		hidden;
    white-space:	nowrap;
    display:		inline-block;
    }

a.weblink
    {
    color:		var(--fgColorWeb);
    }

div.pitching-change
    {
    color:		var(--fgColorTC);
    }

div.pitching-change-started
    {
    color:              yellow;
    }

div.pitching-change-final
    {
    color:              yellow;
    }

.multi_level, .item ul, .nav input[type="checkbox"]
    {
    display:		none;
    }

.rightClickMenu
    {
    width:		150px;
    box-shadow:		0 4px 5px 3px rgba(0, 0, 0, 0.2);
    position:		fixed;
    display:		none;
    background:		white;
    z-index:		300;
    }

.rightClickMenu .menu_options
    {
    list-style:		none;
    padding:		2px 0;
    }

.rightClickMenu .menu_options .menu_option
    {
    font-weight:	500;
    font-size:		14px;
    padding:		5px 10px 5px 10px;
    cursor:             pointer;
    }

.rightClickMenu .menu_options .menu_option:hover
    {
    background:		rgba(0, 0, 0, 0.2);
    }

.LH_header
    {
    font-family:	Open Sans,Arial,Helvetica,sans-serif;
    font-size:		0.8rem;
    font-style:		bold;
    font-weight:	bold;
    width:              100%;
    border:             none;
    background:         grey;
    color:              white;
    }

.LH_text
    {
    font-family:	Open Sans,Arial,Helvetica,sans-serif;
    font-size:		0.8rem;
    font-style:		bold;
    font-weight:	bold;
    background:         var(--navColor);
    color:              yellow;
    }

.popupDiv
    {
    left:		0;
    top:		0;
    width:		99%;
    height:		99%;
    box-shadow:		0 4px 5px 3px rgba(0, 0, 0, 0.2);
    position:		absolute;
    overflow:		auto;
    display:		none;
    background:		white;
    z-index:		300;
    border:		4px solid blue;
    background-color:   rgb(0,0,0); /* Fallback color */
    background-color:   rgba(0,0,0,0.4); /* Black w/ opacity */
    }

.popupDiv2
    {
    width:		var(--lhWidth);
    height:		var(--lhHeight);
    left:		var(--lhLeft);
    top:		var(--lhTop);
    position:		absolute;
    overflow:		auto;
    display:		block;
    background:		white;
    z-index:		301;
    border:		1px solid black;
    }

.popupDiv3
    {
    width:		var(--lhWidth2);
    height:		var(--lhHeight2);
    left:		0;
    top:		22;
    position:		absolute;
    overflow:		auto;
    display:		block;
    background:		white;
    z-index:		301;
    border:		1px solid black;
    }
/*
.popupData
    {
    left:		0px;
    top:		20px;
    max-width:		100%;
    max-height:		100%;
    }
*/
.title
    {
    font-family:	  Open Sans,Arial,Helvetica,sans-serif;
    font-size:            9pt;
    color:                var(--mainfgColor);
    background-color:     var(--mainbgColor);
    }

.title_center
    {
    font-family:	  Open Sans,Arial,Helvetica,sans-serif;
    font-size:            9pt;
    color:                var(--mainfgColor);
    background-color:     var(--mainbgColor);
    text-align:           center;
    }

.header
    {
    font-family:	  Open Sans,Arial,Helvetica,sans-serif;
    font-size:            8pt;
    color:                #FFFFFF;
    background-color:     #555555;
    }

.header_center
    {
    font-family:	  Open Sans,Arial,Helvetica,sans-serif;
    font-size:            8pt;
    color:                #FFFFFF;
    background-color:     #555555;
    text-align:           center;
    }

.data
    {
    font-family:	  Open Sans,Arial,Helvetica,sans-serif;
    font-size:            8pt;
    color:                var(--fgColor);
    background-color:     var(--bgColor);
    text-align:           right;
    }

.data_left
    {
    font-family:	  Open Sans,Arial,Helvetica,sans-serif;
    font-size:            8pt;
    color:                var(--fgColor);
    background-color:     var(--bgColor);
    text-align:           left;
    }

.tennis_ball
    {
    overflow:           hidden;
    height:             10px;
    width:              10px;
    border-radius:      5px;
    background-color:   #cc0;
    box-sizing:         border-box;
    display:            inline-block;
    }

.prop_divider
    {
    border-bottom:      thin solid #CCC;
    }

.tennis_score_main
    {
    height:             15px;
    }

.tennis_score
    {
    display:            inline-block;
    width:              14px;
    text-align:         right;
    vertical-align:     middle;
    font-size:		0.6rem;
    }