:root {
	--main: #202020;
	--main-darker: #161616;
	--main-darkest: #131313;
	--red: #900000;
	--red-darker: #600000;
	--red-darkest: #300000;
}

.mainDrawer {
	background-color: var(--main) !important;
}

.drawer-open {
	border-right: var(--red) !important;
	/*
    -webkit-box-shadow: 2px 0 12px rgba(0,0,0,.4);
    box-shadow: 2px 0 12px rgba(0,0,0,.4);
    border-right: 1px solid #300000;
    box-shadow: 2px 0 12px rgba(62,0,0,.25);
	*/
}

/* =========================================================================== */
/*Make Count/Played Indicator into Ribbon RHS*/
div.cardIndicators {
	right: -1.5em;
}

div.countIndicator,
div.playedIndicator {
	width: 75px;
	transform: rotate(45deg);
	border-radius: 0%;
	background: #52B54B;
	border-style: solid;
	border-width: 1px;
}

div.playedIndicator i {
	transform: rotate(-45deg);
}

/*Make Folder Indicator into Ribbon LHS*/
div.videoIndicator {
	transform: rotate(-45deg);
	width: 75px;
	left: -21px;
	border-radius: 0%;
	background: rgba(30, 30, 30, .7);
	border-style: solid;
	border-width: 1px;
}

div.videoIndicator i {
	transform: rotate(45deg);
}

/* Episode Vertical List Played Indicator into Ribbon LHS*/
#childrenContent .listItem[data-action=none] {
	padding: 0 0 30px 0;
}

#childrenContent .listItemIndicators {
	top: 4px;
	left: -21px;
}

#childrenContent .listItemImage-large {
	width: 400px;
	height: 225px;
}

#childrenContent .playedIndicator {
	width: 75px;
	height: 25px;
	border-radius: 0%;
	transform: rotate(-45deg);
	border-style: solid;
	border-width: 1px;
}

#childrenContent .indicatorIcon {
	transform: rotate(45deg);
}

/*Move Library Progress Ring*/
.progressring {
	left: -30px;
}

/* =========================================================================== */
/* Make Played Indicator into Ribbon RHS */
.cardIndicators {
	right: -21px !important;
	top: 4px !important;
	left: initial;
}

.card .playedIndicator,
.card .countIndicator {
	width: 75px;
	height: 25px;
	border-radius: 0%;
	transform: rotate(45deg) !important;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	left: 7px;
	right: unset;
}

div.playedIndicator i {
	transform: rotate(-45deg);
}

.listItemIndicators {
	top: 4px !important;
	right: -21px !important;
}

.playedIndicator {
	width: 75px !important;
	height: 25px !important;
	border-radius: 0% !important;
	transform: rotate(45deg) !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: rgba(255, 255, 255, 1) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.progressring {
	right: 28px;
}

/* Ribbon For Video Indicator LHS */
.videoIndicator {
	background: #c33 !important;
	left: -21px !important;
	top: 4px !important;
	width: 75px !important;
	height: 25px !important;
	border-radius: 0% !important;
	transform: rotate(-45deg) !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: rgba(255, 255, 255, 1) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

div.videoIndicator i {
	transform: rotate(45deg);
}

/* Make all Screenshot 16:9 */
.listItemImage-large {
	width: 400px !important;
	height: 225px !important;
	margin-bottom: 1em;
	overflow: hidden;
}

.listItemImage {
	background-size: cover !important;
}

#itemDetailPage > div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg > div.nextUpSection.verticalSection.detailVerticalSection > div > div > div > div.cardScalable > button {
	background-size: cover !important;
}

.cardContent-button:not(.defaultCardBackground) {
	background-size: cover !important;
}

/* =========================================================================== */
/* Change Overlay Transparency */
.cardOverlayContainer {
	background: rgba(0, 0, 0, 0.25) !important;
}

/* Make Background Image Lighter */
.backgroundContainer.withBackdrop {
	background-color: rgba(0, 0, 0, .5) !important;
}

/* Blur Background */
.backdropImage.displayingBackdropImage {
	-webkit-filter: blur(4px);
	filter: blur(4px);
}

/* =========================================================================== */
/* Experimental */
.mainDrawer {
	/* backdrop-filter does not work well with box-shadow */
	box-shadow: 2px 0 12 backdrop-filter: blur(5px);
	/* Can only have one active, combining blur with grayscale would be cool */
	/* backdrop-filter: grayscale(100%); */
}