:root {
	--imgHeader:			url("images/theme-main/bg-tiles.png");
	--imgBg:				url("images/theme-main/bg-shades.png");
	
	--mainBG:				rgba(  0,  0,  0, 1);
	--mainText:				rgba(192,192,192, 1);
	--brandPrimary:			rgba(255,255,135, 1);
	--brandOnPrimary:		rgba( 75, 75, 75, 1);
	--brandAccent:			rgba( 58,150,214, 1);
	--brandOnAccent:		rgba(255,255,255, 1);
	--brandSecondary:		rgba(111,168, 32, 1);
	--fog:					rgba(255,255,255,0.05);
	--error: 				rgba(255,  0,  0, 1); /* sometimes displayed over fog */
	--anchorDim:			rgba(100,100,100, 1);
	
	--showEnded:			var(--error);
	--snackbarText:			var(--brandOnPrimary);
	--snackbarBG:			var(--brandPrimary);
	--myBtnText:			var(--brandOnAccent);
	--myBtnBG:				var(--brandAccent);
	--myBtnHover:			var(--brandPrimary);
	--statusBtnText:		var(--brandOnAccent);
	--statusBtnBG:			var(--brandSecondary);
	--statusBtnHover:		var(--brandPrimary);
	--statusBtnWatchedText:	var(--anchorDim);
	--statusBtnWatchedBG:	rgba(  0,  0,  0, 0);
}

/* Snackbar / Toast Styling */
/* ============================================================ */
	#snackbar {
		visibility: hidden; /* Hidden by default. Visible on click */
		text-align: center; /* Centered text */
		position: fixed; /* Sit on top of the screen */
		z-index: 1; /* Add a z-index if needed */
		bottom: 30px; /* 30px from the bottom */
		width: 100%;
	}
	#snackbar.show {
		visibility: visible;
		-webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
		animation: fadein 0.5s, fadeout 0.5s 4s;
	}
	#snackbarText {
		display: inline-block;
		text-align: center;
		min-width: 250px;
		border-radius: 50px;
		padding: 10px 16px 10px 16px; /* Top Right Bottom Left */
		font-weight: bold;
		background-color: var(--snackbarBG);
		color: var(--snackbarText);
	}
	/* Animations to fade the snackbar in and out */
	@-webkit-keyframes fadein {
		from {bottom: 0; opacity: 0;}
		to {bottom: 30px; opacity: 1;}
	}
	@keyframes fadein {
		from {bottom: 0; opacity: 0;}
		to {bottom: 30px; opacity: 1;}
	}
	@-webkit-keyframes fadeout {
		from {bottom: 30px; opacity: 1;}
		to {bottom: 0; opacity: 0;}
	}
	@keyframes fadeout {
		from {bottom: 30px; opacity: 1;}
		to {bottom: 0; opacity: 0;}
	}
/* ============================================================ */
/* End of Snackbar/Toast styling */

/* Loading Bars (LDS) */
/* ============================================================ */
	#loader {
		display: none;
	}
	
	#loader.fullscreen {
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -100px;
		margin-top: -40px;
	}
	
	#loader.inline {
		display: inline-block;
	}
	
	.lds-bars {
		position: relative;
		width: 200px !important;
		height: 80px !important;
		-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
		transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
	}

	.lds-bars div {
		position: absolute;
		width: 20px;
		height: 40px;
		top: 20px;
		-webkit-animation: lds-bars 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
		animation: lds-bars 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	}

	.lds-bars div:nth-child(1) {
		left: 30px;
		background: var(--brandAccent);
		-webkit-animation-delay: -0.6s;
		animation-delay: -0.6s;
	}

	.lds-bars div:nth-child(2) {
		left: 70px;
		background: var(--brandPrimary);
		-webkit-animation-delay: -0.4s;
		animation-delay: -0.4s;
	}

	.lds-bars div:nth-child(3) {
		left: 110px;
		background: var(--brandPrimary);
		-webkit-animation-delay: -0.2s;
		animation-delay: -0.2s;
	}

	.lds-bars div:nth-child(4) {
		left: 150px;
		background: var(--brandAccent);
	}

	@keyframes lds-bars {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0.4;
		}
		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes lds-bars {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0.4;
		}
		100% {
			opacity: 1;
		}
	}
/* ============================================================ */
/* End of Loading Bars */
html, body {
	color: var(--mainText);
	font-family: 'Nunito', 'Verdana', sans-serif;
	font-size: 18px;
	height: 100%;
	margin: 0;
}
body {
	background-color: var(--mainBG);
	/* to position footer at bottom of page */
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.bg {
	width: 100vw;
	height: 100vh;
	z-index: -1;
	background-image: var(--imgBg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: fixed;
}

header, footer {
	background-image: var(--imgHeader);
	background-repeat: repeat;
	background-position: left;
}

footer {
	margin-top: auto; /* to position footer at bottom of page */
	width: 100%;
	height: auto !important;
	height: 100%;
	min-height: 3rem;
	text-align: center;
	font-size: 0.75rem;
	padding-top: 1rem;
}

@media (min-width:1200px) {
	#body, .contained {
		width: 100%;
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}
}

.vertFlex {
	display: flex;
	flex-direction: column;				/* row, row-reverse, column, column-reverse */
	flex-wrap: nowrap;					/* nowrap, wrap, wrap-reverse */
	align-items: center;
	justify-content:space-between;		/* flex-start, flex-end, center, space-between, space-around, space-evenly */
	
	height: 100vh;
	min-height: fit-content;
}
.horzFlex {
	display: flex;
	flex-direction: row;				/* row, row-reverse, column, column-reverse */
	flex-wrap: wrap;					/* nowrap, wrap, wrap-reverse */
	align-items: center;				/* stretch, flex-start, flex-end, center, baseline */
	justify-content:space-evenly;		/* flex-start, flex-end, center, space-between, space-around, space-evenly */
	
	position: relative;
}
.season > * {
	padding: 5px;
}
.sOverview {
	flex: 1;
}
.sTitle, .sInfo, .sActions{
	flex: 0 0 100px;
}
.sTitle {
	display: flex;
	flex-direction: column;
}
.sActions > *{
	margin: 2px;
}
.sOverview, .sInfo > *, .sActions {
	text-align: center;
}

/* mobile devices */
@media screen and (max-width: 800px) {
	.sTitle, .sOverview {
		flex: 1 0 100%;
		flex-direction: row;
	}
	.sInfo, .sActions {
		flex: 1 0 40%;
		display: flex;
		flex-direction: row;
	}
	.sInfo {
		justify-content: flex-start;
	}
	.sInfo > * {
		flex: 1 0 40%;
	}
	.sActions {
		justify-content: flex-end;
		padding: 0px;
	}
	.sActions > * {
		flex: 0 0 auto;
	}
}

.error {
	color: var(--error);
}

.ended {
	color: var(--showEnded);
}

/* TODO: I dont think this is used anywhere, check and delete */
#login-controls {
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 1px solid var(--red);
	padding: 50px;
	padding-top: 30px;
	width: 300px;
	text-align: center;
}

input[type=submit], input[type=button] {
	font-weight: bold;
    color: var(--myBtnText);
    background-color: var(--myBtnBG);
    border: 0;
    border-radius: 2px;
    text-transform: uppercase;
    padding: 10px 0px;
	cursor: pointer;
    width: 100%;
	transition: 0.3s;
}

input[type=submit]:hover, input[type=button]:hover {
	color: var(--myBtnBG);
	background: var(--myBtnHover);
}

div.search {
	margin-top: 25px;
}

input[type=text] {
	font-weight: bold;
    color: var(--brandOnAccent);
    background-color: var(--brandAccent);
	border: 2px solid var(--brandAccent);
	border-radius: 4px;
    padding: 8px 12px;
    width: 100%;
	outline: none;
}
input[type=text]::placeholder {
    color: var(--brandOnAccent);
}
input[type=text]:focus::placeholder {
    color: var(--brandSecondary);
}
input[type=text]:focus
 {
    color: var(--brandOnPrimary);
    background-color: var(--brandPrimary);
}

.fog {
	background-color: var(--fog);
	padding: 10px;
	margin: 10px;
	border-radius: 5px;
}

/* #header {} */
#titlebar {
	text-align: center;
	margin-top: 10px;
}
#title {
	font-size: 2em;
	font-weight: bold;
	width: 100%;
	text-align: center;
	color: var(--brandPrimary);
}

#menubar {
	position: relative;
	text-align: center;
	margin-bottom: 25px;
}
#welcomebar {
	position: absolute;
	top: 0px;
	left: 25px;
	margin-top: 0px;
}
#toolbar {
	position: absolute;
	top: 0px;
	right: 25px;
	font-size: 1.25em;
	font-weight: bold;
}
@media screen and (max-width: 800px) {
	#welcomebar, #toolbar {
		position: static;
	}
}

.tv-widget {
	color: var(--brandAccent);
	cursor: pointer;
}
.tv-widget:before {
	content: "\A";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	margin-left: 10px;
	margin-top: 7px;
}
.tv-widget:hover {
	color: var(--brandPrimary);
}

span.num {
	float: left;
	width: 30px;
	font-weight: bold;
	text-align: center;
}

a, a:visited {
	color: var(--brandAccent);
	text-decoration: none;
}
.dim, a.dim, a.dim:visited {
	color: var(--anchorDim);
}
a:hover, a.dim:hover {
	color: var(--brandPrimary);
}

.mybtn, .mybtn:visited {
	width: 60px;
	height: 40px;
    border: 0;
    border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	font-size: 14px;
	/* text centering */
	display: inline-block;
	text-align: center;
	line-height: 40px;
	/* color coding */
	color: var(--myBtnText);
	background: var(--myBtnBG);
	border: 2px solid var(--myBtnBG);
	transition: 0.3s;
}
.mybtn:hover {
	color: var(--myBtnBG);
	background: var(--myBtnHover);
	border-color: var(--myBtnHover);
}

span.waitBtn {
	font-size: 0.75em;
	width: 60px;
	height: 40px;
    border: 0;
    border-radius: 5px;
	font-weight: bold;
	/* text centering */
	display: inline-block;
	text-align: center;
	line-height: 40px;
	/* color coding */
	color: var(--brandPrimary);
	transition: 0.3s;
}
span.statusBtn {
	font-size: 0.75em;
	width: 60px;
	height: 40px;
    border: 0;
    border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	/* text centering */
	display: inline-block;
	text-align: center;
	line-height: 40px;
	/* color coding */
	color: var(--statusBtnText);
	background: var(--statusBtnBG);
	border: 2px solid var(--statusBtnBG);
	transition: 0.3s;
}
span.statusBtn:hover {
	color: var(--statusBtnBG);
	background: var(--statusBtnHover);
	border-color: var(--statusBtnHover);
}
span.statusBtn.watched {
	color: var(--statusBtnWatchedText);
	border-color: var(--statusBtnWatchedText);
	background: var(--statusBtnWatchedBG);
	transition: 0.3s;
}
span.statusBtn.watched:hover {
	color: var(--statusBtnWatchedText);
	background: var(--brandPrimary);
	border-color: var(--brandPrimary);
}

.center * {
	text-align: center;
	margin:auto;
}

table {
	width: 100%;
}

th, .th {
	text-align: center;
	font-weight: bold;
	text-decoration: underline;
}

/* Bootstrap overrides */
.alert {
	padding: 0.5em;
	margin: 0.5em;
}
.col-2 {
	max-width: 50px;
}