body {
	background-color: #343a40;    /* copy the bg-dark bootstrap color as a backup */
	background-image: url("/images/bknd.jpg");
	padding-top:56px;		/* needed to compensate for single fixed height foixed-top-header. Handle d-height on a page by page bases. */
}
body.fcsc-bg-no-image { background-image: none;}
body.double-nav { padding-top:110px; }

#fcscMainNav { min-height:56px; }
#fcscMainNav, #fcscSecNav, #fcscSecNavDir { 
	background-color: #343a40;
}

/**********************************************
*** allow dropdown menu on 1st navbar to show up in front of 2nd navbar.
*** https://github.com/twbs/bootstrap/issues/10229
**********************************************/
#fcscSecNav, #fcscSecNavDir { top: 56px; z-index:1029; }

	/* using the nav color (bg-dark) as the background also on the assign page body, to help the iOS wide screen cutout display */
	/* and then set the 888 color on the container. Should look the same everywhere else but fix the iOS cutout color isse on wide screens */
.fcsc-bg-gray {
	background-color: #888;
}

	/* special header color to help identify staging */
nav.navbar.staging.bg-dark {
	background-color: #448322!important;
}

a.navbar-brand.rslogo {
	background-image: url("/images/rs-full.png");
	background-repeat: no-repeat;
	background-size: 155px 30px;
	cursor: pointer;
	height: 30px;
	width: 156px;
	opacity: 0.6;
}
a.navbar-brand.rslogo.center {
	position:absolute;
	left: 50%;
	transform: translateX(-50%);
}
a.navbar-brand.rslogo:hover { opacity: 0.9; }

.rsJumbotron.about {
	background-image: url("/images/carousel/soccer2.jpg");
	background-size: cover;
	background-color: transparent;
	height: 200px;
}

.rsJumbotron.home {
	position:relative;
	background-color: transparent;
	min-height: 350px;		/* helps on the beta page but most content pages will be larger than this */
}

#jumboCarousel {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}

#jumboCarousel .carousel-inner, #jumboCarousel .carousel-item { height: 100%; }
#jumboCarousel .carousel-item { background: no-repeat center/cover; }
#mainJumboContainer { position: relative; }


/**********************************************
***	Added for Assign page
**********************************************/
/*
	for mini view, we need to add more classes. For some reason bootstrap didn't setup row-cols-* to work for more than 6 columns
	https://stackoverflow.com/questions/71617553/why-doesnt-row-cols-n-work-for-any-value-greater-than-6
	
	and these need to be defined before my 100% headers just below, so the headers get the 100%
*/

@media (min-width: 992px) {
	.row-cols-lg-8>* {
		-ms-flex: 0 0 12.5%;
		flex: 0 0 12.5%;
		max-width: 12.5%;
	}
}

@media (min-width: 1200px) {
	.row-cols-xl-12>* {
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
}

/* special headers in the new team, current team and field views */
.fcsc-field-header, .fcsc-prevteam-header, .fcsc-age-header {
	background-color:#e0e0e0;
	border: 5px solid transparent;
}
.fcsc-newteam-header, .fcsc-newteam-card {
	background-color:transparent;
}

.fcsc-assign-well { border: 3px solid transparent; background-color: #555; color: #FFF; }
.fcsc-assign-well.selected { border-color: #F00; }
.fcsc-assign-well:hover { cursor:pointer; }
.fcsc-assign-detail-border { border-top: 1px solid #FFF; }

.fcsc-assign-well { width: 336px; }			/* all sizes except mini */
.fcsc-assign-well.miniWidth { 
	width: auto;
	min-width: 100px;
}

.fcsc-playername-firstl {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

.phone a, .phone a:hover, 
.groupLink a, .groupLink a:hover,
.email a, .email a:hover {text-decoration: none; color:inherit; }

#mainAssignListClasses, #mainAssignListMiniClasses { display:none; }	/* sources for the classes to use on the main assign list */

/**********************************************
***	Sortable on the main assign page - for ranking
**********************************************/
.rs-sortable-ghost {	/* Class name for the drop placeholder */
	opacity: 0.4;
	border-top: 8px dashed white;
	border-left: 8px dotted lightgreen;
	border-bottom: 8px dashed red;
	border-right: 8px dotted yellow;
}

.fcsc-ranking-separator {
	display: flex;
	align-items: center; /* Centers vertically */
}

/**********************************************
***	Added for Assign & Admin reorder dialogs (alts and teams)
**********************************************/
#dlgReorderList li:hover, #dlgReorderTeamList li:hover { cursor: move; }


/**********************************************
***	Director pages - summary table subtle off-white for sub rows just to break it up visually
**********************************************/
tr.callSummaryTeamRow, tr.callSummaryGroupLink { background-color: #f4f6f8; }

/* bootstrap has a small, but I wanted something in between */
.table-md td, .table-md th { padding: .5rem; }


/**********************************************
***	Admin page
**********************************************/
.bt-none { border-top: none; }
#fcscAdminList .fcsc-assignRemove { cursor:pointer; }
.searchresultline:hover { cursor:pointer; }


/**********************************************
***	Misc & Multiple places
**********************************************/
.masterTeamHeader, .masterAssignCard, .masterAssignCardThin, .masterAssignCardMini, .masterCoachCard,
.masterAssignItem, .masterFieldHeader, .masterAgeHeader, .masterPrevTeamHeader, .masterGroupCard,
.masterGroupItem, .masterCoachLine, .masterAlertHeader { display:none; }

.forceStayHidden, .mlrOnlyTesting, .deluxeOnlyUI {display:none !important; }


/**********************************************
***	Multi-select support
**********************************************/
.dropdown.rsMultiSelect .dropdown-header {
	font-size: 1.25rem;
	font-weight: 700;
}

.dropdown.rsMultiSelect label, .dropdown.rsMultiSelect input {
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: 400;
}

.dropdown.rsMultiSelect .dropdown-item:focus, .dropdown.rsMultiSelect .dropdown-item:active {
	background: transparent;
	color:inherit;
}

/* set a max height for long dropdown menus like the sensory menu */
.dropdown.rsMultiSelect .dropdown-menu {
	overflow: hidden auto;
}

/* don't let text wrap the buutton */
.dropdown.rsMultiSelect > button.btn, select.previous {
	white-space: nowrap; 		/* Prevent text from wrapping */
	overflow: hidden; 			/* Hide overflowing text */
	text-overflow: ellipsis;
	border: var(--bs-border-width) solid var(--bs-border-color);		/* match the standard styling of bootstrap 5 select "button" */
}

.dropdown.rsMultiSelect > button.btn:focus {
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}


/**********************************************
***	Home and info pages
**********************************************/
img.imgInfo { height: auto; max-width:100%; }

div.videoPlayOverlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0,0,0,0.5); /* Transparent black */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4em;
}
div.videoPlayOverlay:hover {background-color: rgba(0,0,0,0.6);}

/**********************************************
***	Wait cursor
**********************************************/
#WaitPanel {
	background: #14264C url("/images/waitLogo.gif") no-repeat center center;
    position: absolute;
	left: 0;
    top: 0;
    width: 100%;
	height: 100%;
	z-index:100;
}