:root {
	--fsg-yellow: #ffc907;
	--fsg-green: #a1ca3a;
	--fsg-primary: #22798f;
	--fsg-secondary: #67b3c6;
	--fsg-active: #da5253;

	--fsg-error: #da5253;
	--fsg-error-border: aqua;
	--fsg-notice: #67b3c6;
	--fsg-notice-border: #22798f;
	--fsg-success: #a1ca3a;
	--fsg-success-border: aqua;

	--fsg-bg: #f2efec;

	--fsg-text: #3c2415;
	--fsg-text-secondary: #a99682;
	--fsg-text-tertiary: #cec2b7;
	--fsg-text-disabled: #e2dbd5;

	--fsg-outwit-primary: #d88028;
	--fsg-outwit-secondary: #FCAF17;
	--fsg-outplay-primary: #22798f;
	--fsg-outplay-secondary: #67b3c6;
	--fsg-outlast-primary: #77ac43;
	--fsg-outlast-secondary: #a1ca3a;

	--fsg-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2860, 36, 21, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	--fsg-accordian-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	--fsg-accordian-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	}
@font-face {
	font-family: "Survivant Regular";
	font-style: normal;
	font-weight: 600;
	src: local("Survivant Regular"), url("/fonts/survi_glyph.woff") format("woff");
	font-display: swap;
}
body {
	font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-style: normal;
	background-color: var(--fsg-bg);
	color: var(--fsg-text);
}
.italic {
	font-style: italic;
}
.small-caps {
	font-variant: small-caps;
}
.thin {
	font-weight: 100;
}
.extralight {
	font-weight: 200;
}
.light {
	font-weight: 300;
}
.medium {
	font-weight: 500;
}
.semibold {
	font-weight: 600;
}
.bold {
	font-weight: 700;
}
.extrabold {
	font-weight: 800;
}
.black {
	font-weight: 900;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Survivant Regular", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}
h1.xspace, h2.xspace, h3.xspace, h4.xspace, h5.xspace, h6.xspace {
	margin-top: 2.5rem;
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: "Survivant Regular", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 900;
	text-transform: uppercase;
}
.survivorfont {
	font-family: "Survivant Regular", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 900;
	text-transform: uppercase;
	color: var(--fsg-text);
}
.card {
	background-color: transparent;
}
.fsg-yellow-color {
	color: var(--fsg-yellow);
}
.fsg-green-color {
	color: var(--fsg-green);
}
.fsg-primary-color {
	color: var(--fsg-primary);
}
.fsg-secondary-color {
	color: var(--fsg-secondary);
}

.pghead {
	text-align: center;
	margin: 14px auto;
	text-shadow: 0 0 8px var(--fsg-text);
}
.pgheadTitle {
	margin: 0px auto;
	text-shadow: 0 0 8px var(--fsg-text);
	text-align: center;
	text-transform: uppercase;
}
.pgheadSeason {
	margin: 0px auto 6px auto;
	text-shadow: 0 0 8px var(--fsg-text);
}
p.bigger {
	font-size: 1.2rem;
}
.survivant {
	font-family: "Survivant Regular", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-transform: uppercase;
}
.text-warning {
	color: var(--fsg-active);
}
.blue {
	color: var(--fsg-primary);
}
p.lore {
	text-align: center;
	font-style: italic;
	font-weight: 200;
	color: var(--fsg-text-secondary);
	letter-spacing: 1px;
}

/*------- BUTTONS -------*/
.fsg-btn {
	padding: .5rem 2.5rem;
	font-weight: 700;
	border-width: .25rem;
}
.fsg-primary {
	background-color: var(--fsg-primary);
	color: white;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: var(--fsg-primary);
	border-width: .25rem;
}
.fsg-primary:hover {
	background-color: var(--fsg-secondary);
	border-color: var(--fsg-secondary);
	color: white; 
}
.fsg-primary-sm {
	background-color: var(--fsg-primary);
	color: white;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: .2rem;
	padding-bottom: .2rem;
	font-weight: 700;
	border-color: var(--fsg-primary);
	border-width: .25rem;
}
.fsg-primary-sm:hover {
	background-color: var(--fsg-secondary);
	border-color: var(--fsg-secondary);
	color: white; 
}
.fsg-secondary {
	color: var(--fsg-primary);
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: var(--fsg-secondary);
	border-width: .25rem;
}
.fsg-secondary:hover {
	color: var(--fsg-primary);
	border-color: var(--fsg-primary);
}
.fsg-secondary-sm {
	color: var(--fsg-primary);
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: .2rem;
	padding-bottom: .2rem;
	font-weight: 700;
	border-color: var(--fsg-secondary);
	border-width: .25rem;
}
.fsg-secondary-sm:hover {
	color: var(--fsg-primary);
	border-color: var(--fsg-primary);
}
.fsg-primary-outplay {
	background-color: var(--fsg-outplay-primary);
	color: white;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: var(--fsg-outplay-primary);
	border-width: .25rem;
}
.fsg-primary-outplay:hover {
	background-color: var(--fsg-outplay-secondary);
	border-color: var(--fsg-outplay-primary);
	color: white;
}
.fsg-secondary-outplay {
	color: var(--fsg-outplay-primary);
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: var(--fsg-outplay-secondary);
	border-width: .25rem;
}
.fsg-secondary-outplay:hover {
	color: var(--fsg-outplay-primary);
	border-color: var(--fsg-outplay-primary);
}
.fsg-primary-outlast {
	background-color: var(--fsg-outlast-primary);
	color: white;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: var(--fsg-outlast-primary);
	border-width: .25rem;
}
.fsg-primary-outlast:hover {
	background-color: var(--fsg-outlast-secondary);
	border-color: var(--fsg-outlast-primary);
	color: white;
}
.fsg-secondary-outlast {
	color: var(--fsg-outlast-primary);
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: var(--fsg-outlast-secondary);
	border-width: .25rem;
}
.fsg-secondary-outlast:hover {
	color: var(--fsg-outlast-primary);
	border-color: var(--fsg-outlast-primary);
}
.fsg-primary-outwit {
	background-color: var(--fsg-outwit-primary);
	color: white;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: var(--fsg-outwit-primary);
	border-width: .25rem;
}
.fsg-primary-outwit:hover {
	background-color: var(--fsg-outwit-secondary);
	border-color: var(--fsg-outwit-primary);
	color: white;
}
.fsg-secondary-outwit {
	color: var(--fsg-outwit-primary);
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: var(--fsg-outwit-secondary);
	border-width: .25rem;
}
.fsg-secondary-outwit:hover {
	color: var(--fsg-outwit-primary);
	border-color: var(--fsg-outwit-primary);
}
.fsg-danger {
	background-color: var(--fsg-error);
	color: white;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: var(--fsg-error);
	border-width: .25rem;
}
.fsg-danger:hover {
	background-color: #F37B70;
	border-color: var(--fsg-error);
	color: white;
}
.fsg-shop {
	background-color: var(--fsg-secondary);
	color: white;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	font-weight: 700;
	border-color: white;
	border-width: .25rem;
}
.fsg-shop:hover {
	background-color: white;
	border-color: white;
	color: var(--fsg-secondary); 
}

/* overriding colors from the Bootstrap defaults here, but keeping the same names */
.btn-outline-secondary {
	color: var(--fsg-secondary);
	border-color: currentcolor;
}
.btn-outline-secondary:hover {
	color: white;
	background-color: var(--fsg-secondary);
	border-color: var(--fsg-secondary);
}
.btn-success {
	background-color: var(--fsg-green);
	border-color: var(--fsg-green);
}
.btn-success:hover {
	/* TODO: What color when hovering a button? */ 
	background-color: var(--fsg-green);
	border-color: var(--fsg-green);
}
.btn-link {
	font-weight: 500;
	color: var(--fsg-primary);
}
.btn-link-secondary {
	font-weight: 500;
	color: var(--fsg-secondary);
}
.btn-link:hover {
	font-weight: 500;
	color: var(--fsg-secondary);
}
.btn-link-secondary:hover {
	font-weight: 500;
	color: var(--fsg-primary);
}
.btn-link-danger {
	font-weight: 500;
	color: var(--fsg-error);
}
.btn-link-danger:hover {
	font-weight: 500;
	color: #F37B70;
}
.btn-link-success {
	font-weight: 500;
	color: var(--fsg-outlast-primary);
}
.btn-link-success:hover {
	font-weight: 500;
	color: var(--fsg-success);
}
.btn-link-cancel {
	font-weight: 500;
	color: var(--fsg-text-tertiary);
}
.btn-link-cancel:hover {
	font-weight: 500;
	color: var(--fsg-text-secondary);
}
.btnOutPlay {
    color: #FCFFF9;
    background-color: #d88028;
    border-color: #d88028;
}
.btnOutlast {
    color: #FCFFF9;
    background-color: var(--fsg-outlast-primary);
    border-color: var(--fsg-outlast-primary);
}
.btn:active {
	color: var(--fsg-text);
    border-color: var(--fsg-text);
}
.btn:first-child:active {
	color: var(--fsg-text);
    border-color: var(--fsg-text);
}

/*------- BUTTONS END -------*/

/*------- NAVIGATION -------*/
.container-fluid:has(.navbar) {
	background-color: white;
}
.navbar {
	background-color: white;
	color: var(--fsg-text-secondary);
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	list-style-type: none;
}
.navbar-brand {
	flex-grow: 10;
}
.navbar-brand img {
	max-height: 2.5rem;
}
.navbar .btn {
	border-width: .25rem;
	font-weight: 700;
	padding-left: 2rem;
	padding-right: 2rem;
}
.navbar .navbar-toggler-icon {
	background-image: var(--fsg-navbar-toggler-icon-bg);
	padding: .75rem .375rem;
	border-width: 0;
}
#navbar-toggle-checkbox {
	display: none;
}
#navbar-toggle-checkbox:checked ~ .collapse {
	display: flex;
}
#navbar-toggle-reset-radio, #navbar-toggle-menu-radio, #navbar-toggle-groupmenu-radio {
	display: none;
}
#navbar-toggle-menu-radio:checked ~ .collapse, #navbar-toggle-groupmenu-radio:checked ~ .collapse {
	display: flex;
}
label[for="navbar-toggle-reset-radio"] {
	display: none;
}
label[for="navbar-toggle-menu-radio"],
label[for="navbar-toggle-groupmenu-radio"] {
	display: flex;
}
#navbar-toggle-menu-radio:checked ~ label[for="navbar-toggle-menu-radio"],
#navbar-toggle-groupmenu-radio:checked ~ label[for="navbar-toggle-groupmenu-radio"] {
	display: none;
}
#navbar-toggle-menu-radio:checked ~ label[for="navbar-toggle-reset-radio"],
#navbar-toggle-groupmenu-radio:checked ~ label[for="navbar-toggle-reset-radio"] {
	display: flex;
}
.nav-fsg-underline .nav-link {
	text-decoration-color: white;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, text-decoration-color .15s ease-in-out;
}
.nav-fsg-underline .nav-link:hover {
	text-decoration: underline solid var(--fsg-text-secondary);
	text-underline-offset: .5rem;
	text-decoration-thickness: 0.125rem;
}
.nav-fsg-underline .nav-link.active {
	color: var(--fsg-primary);
	text-decoration: underline solid var(--fsg-active);
	text-underline-offset: .5rem;
	text-decoration-thickness: 0.125rem;
	font-weight: 600;
}
.menu, .dropmenu {
	/* this is the drop-down menu by default (small screens) */
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	list-style-type: none;
	text-align: center;
	position: absolute;
	top: 2rem;
	right: -3rem;
	border: 1px solid var(--fsg-text-tertiary); 
	border-radius: 0.375rem;
	box-shadow: rgba(0,0,0,0.3) 0 2px 5px;
	z-index: 1023;
}
.menu .nav-link, .dropmenu .nav-link {
	display: inline-block;
	color: inherit;
}
.menu li, .dropmenu li {
	flex: 1 1 auto; /* allows flexible width */
	margin-top: .5em;
	margin-bottom: .5em;
}
.dropmenu {
	right: 1rem;
}
#navbar-groupname {
	min-width: 0;
	position: relative;
}
#navbar-groupname .dropmenu {
	width: max-content;
	right: -2.5rem;
}
#navbar-groupname .dropmenu .group-name {
	max-width: 95vw;
}
#navbar-groupname .dropmenu .group-name.active {
	background-color: var(--fsg-bg);
}
#navbar-groupname .dropmenu .group-name .active {
	text-decoration: none;
}
.dropmenu .secondary-link {
	color: var(--fsg-secondary);
	padding: 0 .75rem;
	margin: 0;
}
@media (min-width: 992px) {
	/* these apply only when the screen is "lg" or larger; overwrites declarations from above */
	.menu {
		flex-wrap: nowrap;
		flex-direction: row;
		position: relative;
		top: 0;
		right: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	.menu li {
		flex: none;
	}
	.navbar-brand img {
		max-height: 4rem;
	}
}
.donate-button img {
	height: 3rem;
}
.fsg-bg-color {
	background-color: var(--fsg-bg);
}
/*------- NAVIGATION END -------*/

/*------- ALERT BAR START -------*/
#alertbar {
	margin: 0 auto;
	padding: .5rem;
	line-height: 1.5;
	color: white;
	overflow: hidden;
	overflow-anchor: none;
	transition: all .5s ease-in-out;
	opacity: 1;
	z-index: 1024;
}
#alert-message {
	color: white;
	margin-right: -1rem;
	text-align: center;
	padding: 0 1rem;
}
#alertbar a:hover {
	color: #0d5a6c;
}
#alertbar a#alertbarclosebtn {
	color: white;
	padding-right: 0.5rem;
	font-size: 100%;
	text-decoration: none;
}
#alertbar a#alertbarclosebtn:hover {
	color: white;
}
#alertbar.notice {
	background-color: var(--fsg-notice);
}
#alertbar.error {
	background-color: var(--fsg-error);
}
#alertbar.success {
	background-color: var(--fsg-success);
}
#alertbar.inactive {
	/* this .inactive should be below the other types of alert bars */
	line-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-width: 0;
	opacity: 0;
}
#alertbar.inactive * {
	padding-top: 0;
	padding-bottom: 0;
}
#alertbar.inactive a#alertbarclosebtn {
	font-size: 100%;
}
/*------- ALERT BAR END -------*/

/*------- SURVIVOR IMAGES -------*/
.survivor-circle-img {
	text-align: center;
	position: relative;
}
.survivor-circle-img > a > img:first-of-type,
.survivor-circle-img > img:first-of-type {
	border-radius: 50%;
	object-position: top;
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
	display: block;
}
.survivor-circle-img a {
	text-decoration: none;
}
.survivor-circle-img a:hover {
	text-decoration: underline;
}
img.thumbnail {
	border-radius: 50%;
	height: auto;
	max-width: 100%;
	border: solid 2pt var(--fsg-text-secondary);
}
/*------- SURVIVOR IMAGES END -------*/

/*------- BGs -------*/
#header.beach-bg {
	background-image:url('/images/bg/hero_beach.jpg');
	background-position: center top;
	background-size: cover;
	padding-bottom: 3.5rem;
	color: white;
}
#header.contact-bg {
	background-image: url('/images/bg/header-contact.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
#header.vote-bg {
	background-image: url('/images/bg/header-vote.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
#header.survivorscores-bg {
	background-image: url('/images/bg/header-survivors.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
#header.scores-bg {
	background-image: url('/images/bg/header-scores.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
#header.overview-bg {
	background-image: url('/images/bg/header-overview.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
#header.setup-bg {
	background-image: url('/images/bg/header-setup.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
#header.solesurvivor-bg {
	background-image: url('/images/bg/header-solesurvivor.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
#header.donatenew-bg {
	background-image: url('/images/bg/header-donatenew.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
#header.draft-bg {
	background-image: url('/images/bg/header-draft.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
#header.league-bg {
	background-image: url('/images/bg/header-league.jpg');
	background-position: center top;
	background-size: cover;
	color: white;
}
hr.bamboo {
	height: 12px;
	border-width: 0;
	border-radius: 12px;
	margin: 2.5rem auto;
	background-image: url(/images/bamboo-divider.png);
	background-repeat: repeat-x;
	opacity: 1;
}
.headertexture {
	background-image: url('/images/bg/bg-texture-t.png');
	background-position: center;
	height: 12px;
	margin-top: -6px;
}
.headerbamboo {
	background-image: url('/images/bamboo-divider.png');
	background-repeat: repeat-x;
	opacity: 1;
	height: 12px;
	border-width: 0;
	margin-top: -2px;
}
.parchBG::before {
	display: block;
	content: "";
	width: 100%;
	height: 40px;
	position: absolute;
	top: -40px;
	background-image: url("/images/bg/parchBG_t.png");
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: auto 40px;
	background-color: transparent;
}
.parchBG {
	position: relative;
	margin-top: 34px;
	margin-bottom: 34px;
	padding-left: 0;
	padding-right: 0;
	background-image: url(/images/bg/parchBG.jpg);
	background-repeat: repeat;
	background-position: center;
}
.parchBG::after {
	display: block;
	content: "";
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: -40px;
	background-image: url("/images/bg/parchBG_b.png");
	background-repeat: repeat-x;
	background-position: center top;
	background-size: auto 40px;
	background-color: transparent;
}
.roughBG::before {
	display: block;
	content: "";
	width: 100%;
	height: 12px;
	position: absolute;
	top: -12px;
	background-image: url("/images/bg/callout-texture-t.png");
	background-position: center bottom;
	background-size: auto 12px;
	background-color: transparent;
}
.roughBG {
	position: relative;
	margin-top: 34px;
	margin-bottom: 34px;
	padding-left: 0;
	padding-right: 0;
	background-color: var(--fsg-text-disabled);
}
.roughBG::after {
	display: block;
	content: "";
	width: 100%;
	height: 12px;
	position: absolute;
	bottom: -12px;
	background-image: url("/images/bg/callout-texture-b.png");
	background-position: center top;
	background-size: auto 12px;
	background-color: transparent;
}
.limit-width-600 {
	max-width: 600px;
}
.limit-width {
	max-width: 1200px;
}
#footer {
	background-color: transparent;
	background-image: url('/images/bg/footer-bg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	padding-bottom: 0;
}
#footer a {
	color: var(--fsg-text);
	text-decoration: none;
	font-weight: 600;
}
#footer a:hover {
	color: var(--fsg-primary);
}
#footer img {
	max-width: 9rem;
}
#footer #footer-logo {
	max-width: 300px;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
#bottom-bar {
	background-color: #392516;
	color: #a69684;
	margin-bottom: 0;
	font-size: 50%;
}
/*------- BGs END -------*/

/*------- GLOBAL STYLES -------*/
a {
	color: var(--fsg-primary);
}
a:hover {
	color: var(--fsg-secondary);
}
a.help {
	cursor: help;
}
.survivorname {
}
a:has(span.survivorname) {
	color: var(--fsg-text);
	text-decoration: none;
}
a:has(span.survivorname):hover {
	color: var(--fsg-primary);
}
.tribename {
	text-transform: uppercase;
}
.invalid-feedback {
	color: var(--fsg-error); 
}
.groupcodeBG {
	background-color: #FFF;
	border-radius: 12px;
}
a.player-profilelink {
	text-decoration: none;
}
.player-tribename {
	font-weight: 500;
}
.feedsurvivor .survivorname {
	font-weight: 500;
	color: var(--fsg-outlast-primary);
}
.player-realname {
	color: var(--fsg-text-secondary);
}
table .player-realname {
	/* in a table, put the name on a second line */
	display: block;
}

.profile-img-torch {
	width: 40px; /* mobile (default) */
}

@media (min-width: 400px) { /* sm 576*/
.profile-img-torch {
	width: 56px;
	}
}

@media (min-width: 768px) { /* md */
.profile-img-torch {
	width: 72px; /* your original size */
	}
}
/*----- Callout Background -----*/
.calloutBG::before {
	display: block;
	content: "";
	width: 100%;
	height: 12px;
	position: absolute;
	top: -12px;
	background-image: url("/images/callout-texture-t.png");
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: auto 12px;
	background-color: transparent;
}
.calloutBG {
	position: relative;
	padding-top: 1.5em;
	padding-bottom: 1.3em;
	padding-left: 0;
	padding-right: 0;
	background-color: #E2DBD5;
}
.calloutBG::after {
	display: block;
	content: "";
	width: 100%;
	height: 12px;
	position: absolute;
	bottom: -12px;
	background-image: url("/images/callout-texture-b.png");
	background-repeat: repeat-x;
	background-position: center top;
	background-size: auto 12px;
	background-color: transparent;
}
.survivorLabel {
	color: var(--fsg-text-secondary);
}
.survivorValue {
	color: var(--fsg-text);
}
.fanRankLabel {
	color: var(--fsg-text-secondary);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
}
.fanRankValue {
	color: var(--fsg-text);
	text-align: center;
}
img.flag {
	max-width: 100%;
}
hr.basic {
	border: 1px solid var(--fsg-text);
	border-radius: 2px;
	opacity: .75;
}
#seasonsetup {
	max-width: 980px;
}
.statcol160 {
	max-width: 160px;
}
/*------- GLOBAL STYLES END -------*/

/*------- RULES -------*/
.changedrule:before {
	font-weight: bold;
	color: #C48134;
	content: "[!]";
	letter-spacing: .15rem;
	margin-right: .25rem;
}

.newrule:before {
	font-weight: bold;
	color: #7AAD42;
	content: "[+]";
	margin-right: .4rem;
}

.term {
	color: black;
	font-weight: bold;
}
.description {
	letter-spacing: 0.05em;
}
.definition {
	
}
.ruleexample {
	font-style: italic;
	padding: 0 1.5em;
}
.emphasis {
	color: #42648a;
	font-style: italic;
}
.outwitcolor {
	color: var(--fsg-outwit-primary);
}
.outplaycolor {
	color: var(--fsg-outplay-primary);
}
.outlastcolor {
	color: var(--fsg-outlast-primary);
}
/*------- RULES END -------*/
/*------- CONTACT -------*/
.faq-item {
	border: 2px solid var(--fsg-bg);
}
.faq-item:first-of-type {
	border-top-left-radius: 0.375rem;
	border-top-right-radius: 0.375rem;
}
.faq-item:last-of-type {
	border-bottom-left-radius: 0.375rem;
	border-bottom-right-radius: 0.375rem;
	border-bottom-width: 0;
}
.faq-item input {
	display: none;
}
.faq-question {
	background-color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 1rem 1.25rem;
	text-align: left;
	border: 0;
	border-radius: inherit;
	overflow-anchor: none;
	transition: background-color .5s ease-in-out;
}
.faq-item input:checked + .faq-question {
	background-color: var(--fsg-primary);
	color: white;
}
.faq-item input:checked + .faq-question::after {
	background-image: var(--fsg-accordian-btn-active-icon);
	transform: rotate(-180deg);
}
.faq-question::after {
	background-image: var(--fsg-accordian-btn-icon);
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-left: auto;
	content: "";
	background-repeat: no-repeat;
	background-size: 1.25rem;
	transition: transform 0.2s ease-in-out;
}
.faq-answer {
	padding: 0 1.25rem;
	background-color: white;
	line-height: 0;
	border-bottom-width: 0;
	opacity: 0;
	transition: padding .5s ease-in-out, line-height .5s ease-in-out, opacity .5s ease-in-out;
	overflow: hidden;
}
.faq-item input:checked ~ .faq-answer {
	padding: 1rem 1.25rem;
	line-height: 1.5;
	opacity: 1;
}
/*------- CONTACT END -------*/
/*------- SURVIVORS TABLE -------*/
.epilabel {
	margin: auto 0;
	padding-top: .25rem;
	padding-right: .5rem;
}
table {
	color: #3c2415;
	width: 100%;
}
th {
    background-color: #f2efec;
    border-top: 1px solid var(--fsg-text-tertiary);
    border-bottom: 1px solid var(--fsg-text-tertiary);
    font-size: .875rem;
    padding: 12px 0px;
    line-height: 1.1;
}
th.TableStat {
    padding: 0 6px;
    width: auto;
}
tr, td {
    border-bottom: 1px solid #e2dbd5;
}
td {
    font-size: 1rem;
    line-height: 1;
    padding: 6px 3px;
}
tr:nth-child(odd) {
    background-color: #ece7e2;
}
td.isplaying {
    width: 30px;
    text-align: end;
}
td.isplaying img.torch {
	height: 36px;
}
td.TableSurvImg {
	margin-bottom: 0;
	width: 42px;
	min-width: 42px;
}
td.TableSurvImg .survivor-circle-img {
	margin-bottom: 0;
}
td.TableSurvImg .survivor-circle-img img {
	margin-bottom: 0;
	min-width: 36px;
}
th.SurvInfo, td.SurvInfo {
    text-align: left;
    min-width: 120px;
    padding-right: 0;
}
/* Colors injected inline from variable tribe colors */
span.TableTribeName {
	font-size: .75rem;
	text-transform: uppercase;
}
#leaderboard-self {
	background-color: white;
}

/*------- SURVIVORS TABLE END -------*/
/*------- LEADERBOARDS -------*/
#leaderboard img {
	height: 40px;
}
/*------- LEADERBOARDS END -------*/
/*------- JOIN GROUP TABLE -------*/
th.tblGrpJoin {
	background-color: var(--fsg-text-secondary);
	color: #fff;
}
.fsg-join-sm {
	background-color: var(--fsg-secondary);
	color: #fff;
	padding-top: 0;
	padding-bottom: 0;
	font-weight: 500;
	border-color: var(--fsg-secondary);
	border-width: .25rem;
}
.fsg-join-sm:hover {
	color: var(--fsg-primary);
	border-color: var(--fsg-primary);
}
.disabledbutton-sm {
	background-color: var(--fsg-text-tertiary);
	color: #fff;
	padding-top: 0;
	padding-bottom: 0;
	font-weight: 500;
	border-color: var(--fsg-text-tertiary);
	border-width: .25rem;
}
.disabledbutton-sm:hover {
    background-color: var(--fsg-text-tertiary);
	color: #fff;
	border-color: var(--fsg-text-tertiary);
}
.btn.disabled {
	color: #fff;
    pointer-events: none;
    background-color: var(--fsg-text-tertiary);
    border-color: var(--fsg-text-tertiary);
    opacity: var(--bs-btn-disabled-opacity);
}
/*------- JOIN GROUP TABLE END -------*/
/*------- INVITE -------*/
#groupcode-invite {
	border: 3px solid white;
	border-radius: 6px;
	background-color: white;
	padding: 0.5em;
	cursor: pointer;
}
#groupcode-invite>i {
	color: var(--fsg-primary);
}
#grouplink-invite {
	display: inline-block;
	border: 3px solid transparent;
	border-radius: 6px;
	padding: 0.5rem;
	cursor: pointer;
}
/*------- INVITE END -------*/
/*------- OVERVIEW -------*/
.TribeSurvivorName {
    font-family: "Survivant Regular", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    text-align: left;
}
.TribeSurvivorTribe1 {
    font-weight: 800;
    color: #0094c9;
    text-align: left;
    line-height: 1;
    text-transform: uppercase;
}
.TribeSurvivorTribeOut {
    font-weight: 800;
    color: var(--fsg-text-seconary);
    text-align: left;
    line-height: 1;
    text-transform: uppercase;
}
.LgStatNum {
    font-family: "Survivant Regular", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-weight: 800;
    margin: 0;
}
.LgStatLbl {
    font-family: "Survivant Regular", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-weight: 800;
    line-height: 1;
}
/*------- OVERVIEW END -------*/
/*------- VOTE -------*/
.voteflag {
	position: relative;
	top: -6px;
	z-index: 1;
}
.voteflag img.flag {
	height: 90%;
}
input.vote:focus::placeholder {
	/* hide the placeholder text once the user taps on the vote input */
	color: transparent;
}
.votewrap input.vote {
	width: 70px;
	border: 3px solid var(--fsg-text-secondary);
}
.votewrap {
	scroll-margin-top: 4em;
}
.votebtnSM {
	background-color: var(--fsg-text-secondary);
	min-width: 60px;
	border: solid 3px var(--fsg-text-secondary);
	color: white;
	font-family: "Survivant Regular", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	display: none; /* JavaScript takes care of showing this if enabled */
	touch-action: manipulation;
}
.votebtnSM:hover {
	background-color: var(--fsg-text-secondary);
	border: solid 3px var(--fsg-text-secondary);
	color: var(--fsg-text-primary);
}
.voteoutpic {
	vertical-align: middle;
	border-radius: 50%;
	width: 36px;
	border: 2px solid #67B3C6;
}
.rating:after {
	content: '';
	display: block;
	height: 0;
	width: 0;
	clear: both;
	visibility: hidden;
}
.cancel,
.star {
	float: left;
	width: 30px;
	height: 30px;
	overflow: hidden;
	text-indent: -999em;
	cursor: pointer;
	margin-right: 8px;
}
.cancel,
.cancel a { background: url('/images/vote_cancel.png') no-repeat 0 -32px; }

.star,
.star a { background: url('/images/vote_cast.png') no-repeat 0 0px; }

.cancel a,
.star a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0 0px;
}

div.rating div.on a {
	background-position: 0 -64px;
}
div.rating div.hover a {
	background-position: 0 -32px;
}
/* only do the hover effects if they are supported and using a mouse */
@media(hover: hover) and (pointer: fine) {
	div.rating div a:hover {
		background-position: 0 -32px;
	}
}
.vote-history-entry img {
	width: 40px;
}
/*------- VOTE END -------*/

/*------- DRAFT START -------*/
.draftpicks {
    border: solid 2px var(--fsg-text-secondary);
	border-radius: 10px;
}
.customdrafttime {
	text-transform: uppercase;
	font-size: .75em;
}
.draftlist {
	border-bottom: solid 1px #E2DBD5;
}
.pickbox {
	border-bottom: solid 1px #E2DBD5;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	display: flex;
	align-items: center;
}
.pickbox.list-shift {
	background-color: var(--fsg-text-tertiary);
	opacity: 10%;
}
.pickbox img {
	width: 40px;
}
.systempick { 
	color: var(--fsg-text-tertiary); 
}
.pickname {
	padding-left: 0.5em;
}
.draftplaceholder .pickname {
	color: var(--fsg-text-tertiary);
}
.draftcard {
	margin-top: .5rem;
	margin-bottom: .5rem;
	padding-left: .25rem;
	padding-right: .25rem;
}
.draftwrap {
    	border: solid 2px var(--fsg-text-secondary);
	border-radius: 12px;
	text-align: center;
	max-width: 190px;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	cursor: pointer;
	touch-action: manipulation;
}
.draftwrap a {
	color: var(--fsg-text);
	text-decoration: none;
}
.draftwrap a:hover {
	color: var(--fsg-primary);
}
.draftnumber {
	width: 1.65rem;
	color: var(--fsg-text-secondary);
}
.draftplaceholder .draftnumber {
	color: var(--fsg-text-tertiary);
}
.draftimg {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top;
}
.draft-tribe {
	display: block;
    position: relative;
    width: 190px;
    height: auto;
    top: -5px;
}
.draft-occupation {
	margin-bottom: 0.75em;
	font-size: clamp(0.25rem, 5vw, 1rem);
}
.draft-grab-grips {
	margin-left: auto;
	display: none;
	padding: 0 .75rem;
	font-size: 160%;
	touch-action: manipulation;
	margin-bottom: -.25rem;
	color: var(--fsg-text-secondary);
	cursor: grab;
}
#draggable-placeholder {
	background-color: white;
}
#draggable-placeholder * {
	pointer-events: none; /* the placeholder should not have drag events, fix for iOS */
}
/*------- DRAFT END -------*/
/*------- SOLE SURVIVOR PICK -------*/
#sole-picked {
	border: 5px solid var(--fsg-green);
}
.sole-img {
	border: 5px solid var(--fsg-text-disabled);
	width: 200px; /* since the old images are 100x100, this will force them to fit */
}
a:hover > .sole-img {
	border: 5px solid var(--fsg-secondary);
}
/*------- SOLE SURVIVOR PICK END -------*/
/*------- LEAGUES -------*/
.leag-capsul {
	background-color: white;
	border-radius: 12px;
}
.selected-league {
	border: .15rem solid var(--fsg-green);
}
/*------- LEAGUES END -------*/
.recapbox {
    border: 3px solid var(--fsg-text-secondary);
	border-radius: 6px;
	height: 120px;
    display: flex;
    align-items: center;
}
.recapbox img {
    width: 80px;
    height: 80px;
    object-fit: cover;
	flex-shrink: 0;
}
.recap-episode {
	scroll-margin-top: 2em;
}

.page-link {
    	color: var(--fsg-text-secondary);
	background-color: var(--fsg-bg);
	border: var(--fsg-bg);
	transition: none;
}
.page-link:hover {
	color: var(--fsg-primary);
	background-color: white;
	border: none;
	transition: none;
}
.form-control {
	color: var(--bs-body-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--fsg-text-disabled);
	border: 3px solid var(--fsg-text-disabled);
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
    	border-color: var(--fsg-text-secondary);
	box-shadow: 0 0 0 .25rem rgba(255,255,255,.25);
}
.form-select {
	color: var(--fsg-text);
	background-color: var(--fsg-text-disabled);
	border: 3px solid var(--fsg-text-disabled);
}
.form-select:focus {
    	border-color: var(--fsg-text-secondary);
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(255,255,255,.25);
}
.form-check-input {
	color: var(--fsg-text);
    border: 3px solid var(--fsg-text-tertiary);
}
.form-check-input:checked {
    background-color: var(--fsg-primary);
    border-color: var(--fsg-primary);
}
.form-check-input:focus {
    	border-color: var(--fsg-text-secondary);
	box-shadow: 0 0 0 .25rem rgba(255,255,255,.25);
}

.setupLbl {
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: var(--fsg-text);
}
.hr-container {
    position: relative; /* Essential for positioning the text relative to the HR */
    text-align: center; /* Adjust as needed for text alignment */
}

.line-with-text {
    border: none;
    border-top: 1px solid var(--fsg-text); /* Customize the line's style */
    margin-top: 20px; /* Adjust spacing as needed */
    margin-bottom: 20px; /* Adjust spacing as needed */
}

.overlapping-text {
    position: absolute;
    top: 50%; /* Center vertically over the line */
    left: 50%; /* Center horizontally over the line */
    transform: translate(-50%, -50%); /* Precisely center the text */
    background-color: var(--fsg-bg); /* Match your background color */
    padding: 0 10px; /* Adjust padding around the text */
    z-index: 1; /* Ensure the text is above the line */
}
/*------- LEADERBOARDS -------*/
li.selected-episode .page-link {
	font-weight: bold;
	color: var(--fsg-text);
}
/*------- LEADERBOARDS END -------*/
/*------- HOW TO -------*/
ul.howto {
	/* list-style-type: '◯'; */
	list-style-type: none;
}
ul.howto li {
	margin-bottom: .5rem;
}
ul.howto li::before {
	content: '◯';
	font-weight: bold;
	color: var(--fsg-text-tertiary);
	margin-left: -1rem;
	margin-right: 1rem;
}
/*------- HOW TO END -------*/

/* responsive column count */
@media (min-width: 576px) {
    .player-columns {
        column-count: 2;
    }
}
@media (min-width: 768px) {
    .player-columns {
        column-count: 2;
    }
}
@media (min-width: 992px) {
    .player-columns {
        column-count: 3;
    }
}
@media (min-width: 1200px) {
    .player-columns {
        column-count: 5;
    }
}
.player-columns {
    column-gap: 1rem;
    text-align: center;
}
.player-columns li {
    break-inside: avoid;
}