/*top*/

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */

/*
For reference, here are the Bootstrap screen size limits:
Small devices (landscape phones, 576px and up)				@media (min-width: 576px)
Medium devices (tablets, 768px and up)						@media (min-width: 768px)
Large devices (desktops, 992px and up)						@media (min-width: 992px)
Extra large devices (large desktops, 1200px and up)			@media (min-width: 1200px)
*/

/*********
* Phone *
*********/
@media (max-width: 767px) {
	.TitleLargeOrMediumBasedOnViewportSize {
		font-size:medium;
		text-align: center;
	}

	.TitleLargeOrSmallBasedOnViewportSize {
		font-size: small;
	}

	.TitleHugeOrLargeBasedOnViewportSize {
		font-size: x-large;
		text-align: center;
	}

	.FadedTextMediumOrSmallBasedOnViewportSize {
		font-size: small;
		color: darkgray;
	}

	.FadedTextMediumOrSmallerBasedOnViewportSize {
		font-size: smaller;
		color: darkgray;
	}

	.MediumOrSmallerBasedOnViewportSize {
		font-size: smaller;
	}

	.homeTeamTimeoutIndicator, .awayTeamTimeoutIndicator {
		width: 35px; /* 36px is about 65% */
		height: auto;
	}

	#sortableHomeBench,
	#sortableHomeLineup,
	#sortableAwayBench,
	#sortableAwayLineup {
		min-height: 80px;
	}

		#sortableHomeBench li,
		#sortableAwayBench li {
			font-size: small;
		}

		#sortableHomeLineup li,
		#sortableAwayLineup li {
			font-size: medium;
		}

	.BreakingStyle {
		font-size: x-small;
	}

	.LaggingStyle {
		font-size: x-small;
		color: greenyellow;
	}

	.OverallBodyWidth {
		width: 100%;
	}

	/* On a phone (but not on a computer) I want the RecentMatches <table> to have width=100% */
	.MakeRecentMatchesFullWidthOnPhones {
		width: 100%
	}

	.WidthOfBoxedNumber {
		width: 35px;
		text-align: center;
	}

	.WidthOfGrandTotalsBox {
		width: 40px;
	}

	.TotalBallsBox {
		width: 40px;
	}

	.OneGameRow td {
		min-height: 32px;
	}

	.RoundButtonDivStyle {
		margin-left: 5px;
		margin-right: 8px
	}
}

/************
* Non-Phone *
*************/
@media (min-width: 768px) {
	.TitleLargeOrMediumBasedOnViewportSize {
		font-size: x-large;
		text-align: center;
	}

	.TitleLargeOrSmallBasedOnViewportSize {
		font-size: large;
	}

	.TitleHugeOrLargeBasedOnViewportSize {
		font-size: xx-large;
		text-align: center;
	}

	.FadedTextMediumOrSmallBasedOnViewportSize {
		font-size: medium;
		color: darkgray;
	}

	.FadedTextMediumOrSmallerBasedOnViewportSize {
		font-size: medium;
		color: darkgray;
	}

	.MediumOrSmallerBasedOnViewportSize {
		font-size: medium;
	}

	.homeTeamTimeoutIndicator, .awayTeamTimeoutIndicator {
		width: 56px; /* 56px is 100% */
		height: auto;
	}

	#sortableHomeBench,
	#sortableHomeLineup,
	#sortableAwayBench,
	#sortableAwayLineup {
		min-height: 80px;
	}

		#sortableHomeBench li,
		#sortableAwayBench li {
			font-size: medium;
		}

		#sortableHomeLineup li,
		#sortableAwayLineup li {
			font-size: x-large;
		}

	.BreakingStyle {
		font-size: medium;
	}

	.LaggingStyle {
		font-size: medium;
		color:greenyellow;
	}

	.OverallBodyWidth {
		width: 60%;
	}

	.WidthOfBoxedNumber {
		width: 50px;
	}

	.WidthOfGrandTotalsBox {
		width: 60px;
	}

	.TotalBallsBox {
		width: 70px;
	}

	.OneGameRow td {
		min-height: 50px;
	}

	.RoundButtonDivStyle {
		margin-left:  35px;
		margin-right: 35px
	}
}

/*******************************************
* General - i.e. Viewport-Size Independent *
*******************************************/

body {
	padding-top: 10px;
	padding-bottom: 0px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
	padding-left: 15px;
	padding-right: 15px;
}

.homeTeamBanner {
	background-color: darkseagreen;
}

.awayTeamBanner {
	background-color: lightblue;
}

.NiceBlue {
	background-color: #3b82bb; /*Got this color to match the active tab color (a nice blue)*/
}

.WhiteOnBlue {
	background-color: #3b82bb; /*Got this color to match the active tab color (a nice blue)*/
	color: white;
}

.WhiteOnGreen {
	background-color: #50C878; /* A nice Emerald green */
	color: white;
}

.TotalBallsAndPoints {
	font-size: smaller;
	font-style: italic;
	color: darkgray
}

.SubTotalsBorders {
	border-style: solid !important;
	border-width: medium !important;
	border-color: darkgray !important;
}

.NonSubTotalsBorders {
	border-style: solid;
	border-width: thin;
}

.GrandTotalsBoxBorders {
	border-style: solid !important;
	border-width: medium !important;
	border-color: #3b82bb !important; /*Got this color to match the active tab color (a nice blue)*/
	text-align: center;
}

.TeamsRowTotalsBorders {
	border-style: solid;
	border-width: medium;
	border-color: gray;
	border-radius:10px;
}

.Bold {
	font-weight: bold;
}

.TimeoutsWatermarkStyles {
	position: absolute;
	width: 100%;
	top: 5px;
	text-align: center;
	color: green;
	font-size: large;
	opacity: 0.3;
	font-style: italic;
	transform: rotate(-10deg);
	z-index: -1
}

.homeTeamMatchTimeoutsLeft, .awayTeamMatchTimeoutsLeft {
	font-size: x-large;
}















/*From https://stackoverflow.com/questions/14537839/fill-remaining-space-with-left-div*/
.rightFixedDiv {
	float: right;
	border-style: solid;
	margin-right: 5px;
	/*width: 50px;*/
	border-width: thin;
	text-align: center;
}

.leftFixedDiv {
	float: left;
	border-style: solid;
	margin-left: 5px;
	/*width: 50px;*/
	border-width: thin;
	text-align: center;
}

#roundMainTable td {
	padding: 0 0 0 0;
	float: left;
	text-align: center;
	vertical-align: middle;
}

#roundMainTable {
	margin-bottom: 0; /*this is to undo the 20px that comes with the Bootstrap 'table' class*/
}


/*Want all the TD's to have no padding. Otherwise see lots of space at left and right*/
#myTestBootstrapTable td {
	padding: 0 0 0 0;
}

.TopLeftRightBorders {
	border-top: solid;
	border-left: solid;
	border-right: solid;
	border-color: lightblue;
	border-top-left-radius: 100px;
	border-width: 6px;
	border-top-right-radius: 100px;
}

.ButtonRowStyle {
	background-color: lightblue;
	color: cornflowerblue;
	font-weight:bold
}

.RoundTitleBarScoreStyle {
	font-size: small;
	color: forestgreen;
	font-style: italic;
}

.PathsToVictoryStyles {
	font-size: medium;
	font-weight: bold;
	color: mediumblue;
	text-align:center;
}

.NoBorders {
	border:none
}

#roundMainTable span {
	vertical-align: middle;
}















/* This styling is all for the tab strip that is visible on the phone only */
#mainTabstrip {
	
}
	#mainTabstrip a {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 0px;
		padding-right: 1px;
	}

	#mainTabstrip > li > a {
		border-radius: 5px;
	}

		#mainTabstrip > li > a:hover {
			background-color: #3D515F !important;
			border-radius: 5px;
			color: #fff;
			border: 0px solid black;
		}

	#mainTabstrip > li.active > a,
	#mainTabstrip > li.active > a:focus,
	#mainTabstrip > li.active > a:hover {
		background-color: deepskyblue !important;
		color: #fff;
		border: 2px solid #3F515F;
	}











/************************************************************
* These sortable... styles are for both Phone and Non-Phone *
************************************************************/
#sortableHomeBench,
#sortableHomeLineup,
#sortableAwayBench,
#sortableAwayLineup {
	/*min-height: 20px; Now done in a media query*/
	min-width: 150px;
	list-style-type: none;
	margin: 0;
	padding: 5px 0 0 0;
}

	#sortableHomeLineup li,
	#sortableAwayLineup li {
		margin: 0 5px 0 5px;
		padding: 5px;
		/*font-size: x-large; Now done in a media query*/
	}

	#sortableHomeBench li,
	#sortableAwayBench li {
		margin: 0 5px 0 5px; /*top right bottom left */
		padding: 5px;
		/*font-size: 18px; Now done in a media query*/
	}


.DraggableName {
	background-color: lightsteelblue;
}

.YellowBackground {
	background-color: yellow;
}

.TempPink {
	background-color: pink;
}

.TempRose {
	background-color: mistyrose;
}

.HugeTitle {
	font-size: xx-large;
	text-align: center;
}

.BigTitle {
	font-size: x-large;
	text-align: center
}

.BigText {
	font-size: x-large;
}

.MediumTitle {
	font-size: medium;
	text-align: center
}

.FlexCenter {
	display: flex;
	justify-content: center;
}

.FloatLeft {
	float: left;
}

.FloatRight {
	float: right;
}

.OuterDiv {
	white-space: nowrap;
}

.InnerDiv {
	display: inline-block;
}

.XSmallFaded {
	font-size: x-small;
	color: darkgray;
}

.XSmall {
	font-size: x-small;
}

.SmallFaded {
	font-size: small;
	color: darkgray;
}

.Italic {
	font-style: italic;
}

.MediumFaded {
	font-size: medium;
	color: darkgray;
}

.NoGutter { /* Since Bootstrap adds 15 pixels at far left and right of a column I often use this to get rid of that extra padding*/ 
	padding: 0 0 0 0
}

.YesGutter {
	padding-left: 15px;
	padding-right: 15px;
}

.No15ExtraPixelsAtRowEnds { /* By default, Bootstrap gives every row a -15 margin at the left and a -15 at the right (yes, NEGATIVE 15 at left and right). Not sure why, but this undoes that. */
	margin-left: 0px;
	margin-right: 0px;
}

.HandicapInParens {
	font-size: medium;
}

.BenchColor {
	background-color: lightgray
}

.SubstitutionDropdow {
	margin-left: 5px;
	margin-right: 5px;
	width: 180px;
}

.WinnerGreen {
	color: mediumseagreen;
}

.LoserRed {
	color: red;
}

.TiePurple {
	color: purple;
}

.Gray {
	color: gray;
}

.StartingHcpInfoColor {
	background-color: lightseagreen;
}

.LatestHcpInfoColor {
	background-color: lightsalmon;
}



.WhiteBackground {
	background-color: white;
}

.BlankRoundMessage {
	margin-bottom: 100px;
	margin-top: 100px;
	color: cadetblue;
}

.BreakingStyle {
	border-radius: 10px;
	/*font-size: medium; Now done in a media query*/
	font-weight: bold;
	background-color: springgreen;
	color: green;
}

.RackingStyle {
	border-radius: 10px;
	font-size: medium;
	font-weight: bold;
	color: purple;
}

.LaggingStyle {
	/*font-size: medium; Now done in a media query*/
	font-weight: bold;
	/*color: purple; Now done in a media query*/
}

hr {
	border-top: 2px solid #ccc;
	margin-top: 0px;
	margin-bottom: 0px;
	border-color: black;
}

#matchSummaryTable td,
#matchSummaryTable th {
	padding: 0;
	vertical-align: middle
}

.centerText {
	text-align: center
}

/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}


.SsGreen {
	color:green;
}
.SsRed {
	color: red
}

.ForfeitColor { /* This color is also hardcoded in EmailExcelHelpers. Search for ForfeitColor. */
	color: orange;
}

#messageThatFades {
	position: absolute;
	top: 50%;
	left: 50%;
	color: red;
	font-size: medium;
	font-weight: bold;
	background-color: yellow;
	padding: 20px;
}


.scoreTextboxSelectedStyle {
	background-color:yellow
}

.specialBallCountMsg {
	color: greenyellow
}

.ScorePadNumeric {
	background-color: yellow;
	font-size:large;
	height:50px;
	font-weight:bold;
}

.ScorePadClearButton {
	background-color: powderblue;
	font-size: smaller;
	height: 50px;
	padding:0;
}

.ScorePadCancel {
	background-color: lightpink;
	height: 50px;
}

.alertsRowStyles {
	border-color: red;
	border-style: solid;
	border-width: thick;
	padding-left: 10px;
}

.AddPlayerLink {
	color: white;
	font-style: italic;
	font-size: smaller;
}

.SignatureMissingStyle {
	border-style: solid;
	border-width: 3px;
	border-color: red;
}

.SignatureFoundStyle {
	border-style: solid;
	border-width: 1px;
	border-color: green;
}

.ConflictHeaderStyle {
	color: red;
	font-weight: bold;
}

a {
	cursor: pointer;
}


/*
The folloing classes are used for reporting conflicts:
	conflictUpperRedBorder
	conflictShortMessageRow
	gameTimeoutThisSheetIsMissing
	gameTimeoutOtherSheetIsMissingBorder
	alertAboutTheConflictRound
Explanation:
	When a conflit happens (like a score conflict), I highlight the problematic game row by adding a bright red border.
	But the conflict message appears in another row, right underneath, also with a bright red border.
	And in order to make the 2 rows have a single bright red border (to look like one box) ... the upper row (the game row) actually only has top/left/right bright red border,
	and the bottom row (with the conflict message) actually only has left/right/bottom bright red border.
	The class to highlight the upper row is conflictUpperRedBorder.
	The class to highlight the lower row is conflictShortMessageRow.
	The other class (alertAboutTheConflictRound) is for the OTHER tabs.
	For example, if the conflict is in round 3, then in all the OTHER tabs (i.e. round 1, round 2, round 4, round 5, and Summary),
	I show "Problem in Round 3". Without this, if the user was not on the round 3 tab they would not know there was a problem on round 3.
*/

.conflictUpperRedBorder {
	border-top:		4px solid red !important;
	border-left:	4px solid red !important;
	border-right:	4px solid red !important;
}

.conflictShortMessageRow {
	color:      red;
	font-size:  large;
	text-align: center;
	border-left:	4px solid red !important;
	border-right:	4px solid red !important;
	border-bottom:	4px solid red !important;
}

.alertAboutTheConflictRound {
	color:      red;
	font-size:  large;
	text-align: center;
	border-top:		4px solid red;
	border-left:	4px solid red;
	border-right:	4px solid red;
	border-bottom:	4px solid red;
}

.PlayerWobble {
	color: green;
	background-color: antiquewhite;
	border-radius: 20px !important;
	display: inline-block;
	animation: wobblePlayerAnimation 3s infinite;
	font-weight: bold;
}

/* Define the Player wobble animation */
@keyframes wobblePlayerAnimation {
	0%, 100%{	transform: rotate( 5deg);	}
	25%		{	transform: rotate(-5deg);	}
	50%		{	transform: rotate( 5deg);	}
	75%		{	transform: rotate(-5deg);	}
}

.gameTimeoutMarker {
	content: url('/images/TimeoutTaken_Smaller.png');
}

.gameTimeoutThisSheetIsMissing {
	content: url('/images/TimeoutMissing.png');
	border: 2px dashed red;
	padding: 3px 3px 3px 3px
}

.gameTimeoutOtherSheetIsMissingBorder {
	border: 2px dashed green;
	padding: 3px 3px 3px 3px
}

.strikethrough {
	text-decoration: line-through;
}

/*bottom*/