/* CSS Render Custom Theme */
:root {
	--content_colour: #FFFFFF;
	--content_text_colour: #800080;
	--accent_colour: #018297;
	--header_colour: #800080;
	--header_text_colour: #FFFFFF;
	--border_radius: 5px;
}

body {
	background: var(--content_colour);
	color: var(--content_text_colour);
}

#page-bar {
    background-color: var(--header_colour);
	border-bottom: 0.5px solid rgba(255,255,255, 0.6);
	border-bottom: 0.5px solid color-mix(in srgb, var(--header_text_colour) 60%, transparent);
	color: var(--header_text_colour);
}

#page-hr {
    background-color: var(--header_colour);
	border-bottom: 0.5px solid rgba(255,255,255, 0.6);
	border-bottom: 0.5px solid color-mix(in srgb, var(--header_text_colour) 60%, transparent);
	color: var(--header_text_colour);
	margin-bottom: 30px;
}

[id="page-bar"] .icon-button {
	color: var(--header_text_colour);
}

#pagebar-fixed
{
	
	background-color: var(--header_colour);
	border-bottom: 0.5px solid color-mix(in srgb, var(--header_text_colour) 60%, transparent);
	color: var(--header_text_colour);
}

.button {
	color: var(--content_text_colour);
}

.button {
	border-color: var(--content_text_colour);
}

.button:focus {
	color: var(--content_text_colour);
	border-color: var(--content_text_colour);
}

.button:active {
	color: var(--accent_colour);
	border-color: var(--accent_colour);
}

.icon-button {
	color: var(--content_text_colour);
}

.icon-button:focus {
	color: var(--content_text_colour);
}

.icon-button:active {
	color: var(--accent_colour);
}

.turbolinks-progress-bar  {
    height: 4px;
    /* background-color: rgba(255, 255, 255, 0.3); */
    background-color: var(--header_text_colour);
}

#cover {
	background-color: var(--content_colour);
}

#header {
    background-color: var(--header_colour);
    color: var(--header_text_colour);
	border-bottom: 0.5px solid rgba(255,255,255, 0.6);
    border-bottom: 0.5px solid color-mix(in srgb, var(--header_text_colour) 60%, transparent);
}

[id="header"] .icon-button,
[id="header"] .button {
	color: var(--header_text_colour);
	border-color: var(--header_text_colour);
}

.header-home
{
	position: fixed;
	background-color: transparent !important;
	border-bottom: 0.5px solid rgba(255,255,255, 0.6);
	border-bottom: 0.5px solid color-mix(in srgb, var(--header_text_colour) 0%, transparent);
}

#butMenu
{
	background-color: var(--header_colour);
}

#menusvg {
	fill: var(--header_text_colour);
}

#menuclosesvg {
	fill: var(--header_text_colour);
}

#prov-banner H1 {
	color: var(--header_text_colour);
}

.header-right-color {
	background-color: var(--header_colour) !important;
}

#notifications H4 {
	background-color: var(--header_colour);
	color: var(--header_text_colour);
	border: 1.5px solid var(--header_text_colour);
}

#menu {
    background-color: var(--content_colour);
    color: var(--content_text_colour);
}

#menu-head {
	border-bottom: 0.5px solid var(--content_text_colour);
	color: var(--content_text_colour);
}

.menu-item {
	color: var(--content_text_colour);
}

.menu-item:focus {
	color: var(--content_text_colour)}

.menu-item:active {
	color: var(--accent_colour);
}

.tabsvg {
	fill: var(--content_text_colour);
}

.backsvg {
	fill: var(--header_text_colour);
}

#title-bar {
    background-color: var(--header_colour);
	border-bottom: 0.5px solid var(--header_text_colour);
	color: var(--header_text_colour);
}

#title-bar a {
	color: var(--header_text_colour);
}

.arrowdown {
	fill: var(--header_text_colour);
}

.channel-info
{
	fill: var(--header_text_colour);
}

.arrowup {
	fill: var(--header_text_colour);
}

.channel-exit
{
	fill: var(--header_text_colour);
}

#sort-btn {
	color: var(--header_text_colour);
}

#sort-bar {
	background-color: var(--header_colour);
	border-bottom: 0.5px solid var(--header_text_colour);
}

#sort-bar a {
	color: var(--header_colour);
}

.sort-select {
	background: var(--content_colour);
	color: var(--content_text_colour);
	border: 1.5px solid var(--content_text_colour);
}

.home-menu-item {
	color: var(--content_text_colour);
}

input[type="radio"] {
	border: 0.5px solid rgba(128,0,128, 0.5);
	border: 0.5px solid color-mix(in srgb, var(--content_text_colour) 50%, transparent);
}

input[type="radio"]:after {
	background: var(--accent_colour);
}

.newsitem {
	background-color: var(--content_colour);
	color: var(--content_text_colour);
	/* border-bottom: 0.5px solid color-mix(in srgb, var(--content_text_colour) 50%, transparent); */
}

.newsitem-img {
	border: 1px solid rgba(128,0,128, 0.5);
	border: 1px solid color-mix(in srgb, var(--content_text_colour) 50%, transparent);
	border-radius: var(--border_radius);
}

.newsitem-info {
	color: var(--content_text_colour);
}

.arrowright {
	fill: var(--content_text_colour);
}

#livestream {
	background-color: var(--content_colour);
	color: var(--content_text_colour);
}

.liveplaypause {
	width: 120px;
	height: auto;
	fill: var(--header_text_colour);
	cursor: pointer;
}

#nowplaying-info {
	color: var(--content_text_colour);
}

.schedule {
	color: var(--content_text_colour);
	border-bottom: 1px solid var(--content_text_colour);
}

.schedule H4 {
	color: var(--content_text_colour);
}

.show-list {
	color: var(--content_text_colour);
	/* border: 0.5px solid color-mix(in srgb, var(--content_text_colour) 20%, transparent); */
	border-top: none;
}

.showitem:focus .show-info-title {
	color: currentColor;
}

.showitem:active .show-info-title {
	color: var(--accent_colour);
}

.showitem-img {
	border: 1px solid rgba(128,0,128, 0.5);
	border: 1px solid color-mix(in srgb, var(--content_text_colour) 50%, transparent);
	border-radius: var(--border_radius);
}

.show-info {
	color: var(--content_text_colour);
}

.chanschedule-title {
	border-bottom: 1px solid var(--content_text_colour);
	color: var(--content_text_colour);
}

.channelshow-list {
	color: var(--content_text_colour);
	/* border: 0.5px solid color-mix(in srgb, var(--content_text_colour) 20%, transparent); */
	border-top: none;
}

#podcasts {
	background-color: var(--content_colour);
	color: var(--content_text_colour);
}

.podcast-item {
	background-color: var(--content_colour);
	color: var(--content_text_colour);
	/* border-bottom: 0.5px solid color-mix(in srgb, var(--content_text_colour) 50%, transparent); */
}

.podcast-img {
	border: 1px solid rgba(128,0,128, 0.5);
	border: 1px solid color-mix(in srgb, var(--content_text_colour) 50%, transparent);
	border-radius: var(--border_radius);
}

.podcast-info {
	color: var(--content_text_colour);
}

.load-more-button H4 {
	background-color: var(--content_colour);
	color: var(--content_text_colour)!important;
	border: 1.5px solid var(--content_text_colour);
}

#episodes {
	background-color: var(--content_colour);
	color: var(--content_text_colour);
}

.no-episodes {
	color: var(--content_text_colour);
}

.episode-list-item,
.podcast-list-item {
	color: var(--content_text_colour);
	outline: none;
}

.quality-item:focus .quality-name,
.episode-list-item:focus .episode-name,
.podcast-list-item:focus .podcast-channel-name {
	color: var(--content_text_colour);
}

.quality-item:active .quality-name,
.episode-list-item:active .episode-name,
.podcast-list-item:active .podcast-channel-name {
	color: var(--accent_colour);
}

.path-episode-play {
	fill: var(--content_text_colour);
}

.episode-info {
	color: var(--content_text_colour);
}

.episode-details {
	color: var(--content_text_colour);
}

.episodedetails-play {
	fill: var(--header_text_colour);
}

.channel-details {
	color: var(--content_text_colour);
}

.channel-details-img {
	border: 1px solid rgba(128,0,128, 0.5);
	border: 1px solid color-mix(in srgb, var(--content_text_colour) 50%, transparent);
}

.chansvg-path {
	fill: var(--content_text_colour);
}

.chan-view-eps H4 {
	color: var(--content_colour);
	background-color: var(--content_text_colour);
}

#provider-info {
	background-color: var(--content_colour);
	color: var(--content_text_colour);
}

.contacttabs {
	fill: var(--content_text_colour);
}

#reload {
	color: var(--header_text_colour);
}

.install-instructions {
	background-color: var(--content_colour);
	color: var(--content_text_colour);
}

.img-strip
{
	background: var(--accent_colour);
}

#player-bar {
    background-color: var(--header_colour);
    color: var(--header_text_colour);
    /* border-top: 0.5px solid var(--header_text_colour); */
	border-top: 0.5px solid rgba(255,255,255, 0.6);
    border-top: 0.5px solid color-mix(in srgb, var(--header_text_colour) 60%, transparent);
}

#player-bar-timeline .iono-slider-progress {
	background-color: var(--accent_colour);
}

#player-bar-timeline .iono-slider-knob,
#player-bar-timeline .iono-slider-knob:after {
	background-color: var(--accent_colour);
}

#player-bar-timeline .iono-slider-track,
#player-bar-timeline .iono-slider-track:after {
	background-color: rgba(128,0,128, 0.6);
	background-color: color-mix(in srgb, var(--content_text_colour) 60%, transparent);
}

#player-bar-timeline .iono-slider-buffered {
	background-color: rgba(1,130,151, 0.4);
	background-color: color-mix(in srgb, var(--accent_colour) 40%, transparent);
}

#player-bar-playpause {
	color: var(--accent_colour);
}

#btn-playpause {
	color: var(--accent_colour);
}

.nowplaypause {
	width: 20px;
	height: auto;
}

.pathnowplaypause {
	fill: var(--header_text_colour);
}

#animated-bars {
	fill: var(--header_text_colour);
}

.prov-info-link {
	color: var(--content_text_colour)}

.news-list-item:focus .newsitem-title {
	color: var(--content_text_colour);
}

.news-list-item:active .newsitem-title {
	color: var(--accent_colour);
}

.iono-path {
	fill: var(--content_text_colour);
}

.iono-accent-path {
	fill: var(--accent_colour);
}

#about a {
	color: var(--accent_colour);
}

@media (hover:hover) {
	.home-menu-item:hover {
		color: var(--accent_colour);
	}

	.home-menu-item:hover svg {
		fill: var(--accent_colour);
	}

	.quality-item:hover .quality-name {
		color: var(--accent_colour);
	}

	.icon-button:hover {
		color: var(--accent_colour);
	}

	.button:hover {
		color: var(--accent_colour);
		border-color: var(--accent_colour);
	}

	.menu-item:hover {
		color: var(--accent_colour);
	}

	.prov-info-link:hover {
		color: var(--accent_colour);
		fill: var(--accent_colour);
	}

	.news-list-item:hover .newsitem-title,
	.episode-list-item:hover .episode-name,
	.podcast-list-item:hover .podcast-channel-name,
	.showitem:hover .show-info-title {
		color: var(--accent_colour);
	}

	.news-list-item:hover .icon,
	.episode-list-item:hover .icon,
	.podcast-list-item:hover .icon,
	.showitem:hover .icon {
		fill: var(--accent_colour);
	}	
}

#material-tabs {
	background: var(--header_colour);
	border-bottom: 0.5px solid rgba(255,255,255, 0.6);
	border-bottom: 0.5px solid color-mix(in srgb, var(--header_text_colour) 60%, transparent);
}

#material-tabs>a {
	color: rgba(255,255,255, 1);
	color: color-mix(in srgb, var(--header_text_colour) 100%, transparent);
}

#material-tabs>a:not(.active):hover {
	color: rgba(255,255,255, 0.8);
	color: color-mix(in srgb, var(--header_text_colour) 80%, transparent);
}

#tab1-tab.active 
{
	border-bottom: 3px solid var(--accent_colour);
}

#tab2-tab.active
{
	border-bottom: 3px solid var(--accent_colour);
}

#tab3-tab.active 
{
	border-bottom: 3px solid var(--accent_colour);
}