.ASMMobileContainer {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ASMLayoutRoot {
	flex: 1;
}
.ASMPlayControlBar {
	background-color: lightblue;
	height: 20vw;
}
.ASMInvisible {
	display: none;
}

.BMLWrapper {
	border: 0 red solid;
	width: 100%;
	height: 100%;
}
.BMLContainer {
	border: 0 blue solid;
	background-color: transparent;
	width: 100%;
	height: 100%;
}
.BMLLayoutRoot {
	width: 100%;
	height: 100%;
}
.BMLViewPort {
	width: 100%;
	height: 100%;
	background-color: transparent;
	outline: 0 solid gainsboro;
	display: flex;
	flex-direction: row;
}
.BMLView {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: transparent;
	position: relative;
	outline: 0 solid darkcyan;

	-webkit-transition: width .5s ease-in-out;
	-moz-transition: width .5s ease-in-out;
	-o-transition: width .5s ease-in-out;
	transition: width .5s ease-in-out;
}
.BMLHiddenView {
	width: 0;
	-webkit-transition: width .5s ease-in-out;
	-moz-transition: width .5s ease-in-out;
	-o-transition: width .5s ease-in-out;
	transition: width .5s ease-in-out;
}
.BMLHeader {
	background-color: gold;
	width: 100%;
	display: inline-block;
	height: 38px;
}
.BMLHeaderTable {
	width: 100%;
	height: 100%;
	display: table;
}
.BMLButtonCell {
	width: 36px;
	padding: 0;
}
.BMLButton {}
.BMLButton:active {
	opacity: 0.25;
}
.BMLButtonBack {
	cursor: pointer;
	background-color: gray;
	float: left;
	width: 36px;
	height: 32px;
}
.BMLButtonForward {
	cursor: pointer;
	background-color: transparent;
	float: right;
	width: 36px;
	height: 32px;
}
.BMLCell {
	/*
	height: calc(100% - 38px);
	*/
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.BMLCellNumber {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	outline: 5px dotted violet;
	padding: 10px;
	font-size: xxx-large;
}
.BMLTitle {
	text-align: center;
	font-size: unset;
	white-space: nowrap;
	color: darkgoldenrod;
}
.WMGLWrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--list-bg-color);
}
.WMGLContainer {
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow-y: auto;
}

.Genre-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.Genre-list li {
    border-bottom: 0 solid #000;
    color: var(--list-text-color);
}
.Genre-list li a {
    display: block;
    width: calc(100% - 30px);
    height: 100%;
    padding: 5px 15px;
    text-align: left;
    text-decoration: none;
    color: inherit;
}
.Genre-list p {
    display: inline;
    margin-right: .5em;
    font-size: 8vw !important;
}
.Genre-list span {
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 8vw;
}
.Genre-list h2 {
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 8vw;
    display: inline;
    font-weight: 400;
    margin: 0;
}
.Genre-paragraph {
    margin-right: 1.5em!important;
}

.Genre-list-button-bar-container {
    background-color: #222222;
    height: 20vw;
}
.Genre-list-container {
    flex: 1;
    position: absolute;
    height: calc(100% - 20vw);
    width: 100%;
}
.Genre-list-top-row {
    width: 100%;
    height: 20vw;
    background-color: var(--play-bar-bg-color);
    color: var(--title-text-color);
    position: absolute;
}
.Genre-list-top-row table {
    border-collapse: collapse;
    width: 100%;
}
.Genre-list-button-row {
    display: flex;
    justify-content: space-between;
    height: 20vw;
}
.Genre-list-caption {
 /*   position: absolute;
 */   display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /*
    height: 100%;
    */
    height: 20vw;
    pointer-events: none;
}
.Genre-list-caption p {
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 8vw;
}


.MMFrame {
	position: absolute;
	top: 72px;
	padding: 32px 0;
	right: 0;
	z-index: 999999;
	background-color: #222222;
}
.MMLink {
	text-decoration: none
}
.MMLine {
	padding: 10px 48px;
	color: var(--list-text-color);
	font-size: xx-large;
}
.MM-inner-button {
	width: 68px;
	height: 20vw; /* match menu button height */
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.MM-inner-button .tm-svg {
	width: 68px;
	height: 20vw;
	fill: var(--list-text-color);
}
.MM-inner-button .tm-svg {
	display: block;
	margin: auto;
}

.WMSLWrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--list-bg-color);
}
.WMSLContainer {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.Stream-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    color: var(--list-text-color);
}
.Stream-list tr:nth-child(even) {
    background-color: var(--list-bg-color-even);
}
.Stream-list tr:nth-child(odd) {
    background-color: var(--list-bg-color-odd);
}

.Stream-list p {
}
.Stream-list li {
    border-bottom: 1px solid gray;
    color: white;
}
.Stream-list li a {
    display: block;
    width: calc(100% - 30px);
    height: 100%;
    padding: 5px 15px;
    text-align: left;
    text-decoration: none;
    color: inherit;
}
.Stream-list li div {
    display: table;
    width: calc(100% - 30px);
    height: 100%;
    padding: 5px 15px;
    text-align: left;
    text-decoration: none;
    color: inherit;
}

.Stream-list-First-column {
    display: table-cell!important;
    vertical-align: middle;
    width: 3em;
    text-align: center;
}
.Stream-list-First-column div {
    display: inline;
    vertical-align: sub;
    padding-left: 11px;
}
.Stream-list-First-column img {
    width: 2em;
}
.Stream-list-hide-image {
    display: none;
}
.Stream-list-Icon-column {
    padding-right: .5em;
    font-size: 8vw !important;
    height: 48px;
    display: block!important;
    align-content: center;
}
.Stream-List-Icon {
    height: 48px;
    width: 37px;
    display: block!important;
    background: var(--music-icon);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 82% 82%;
}
.Stream-list-Text-column {
    display: table-cell!important;
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 8vw;
    text-align: left;
}

.Stream-list-button-bar-container {
    background-color: #222222;
    height: 20vw;
}
.Stream-list-container {
    flex: 1;
    position: absolute;
    height: calc(100% - 20vw);
    width: 100%;
}
.Stream-list-top-row {
    width: 100%;
    height: 20vw;
    background-color: var(--play-bar-bg-color);
    color: var(--title-text-color);
    position: absolute;
}
.Stream-list-top-row table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;

}
.Stream-list-button-row {
    display: flex;
    justify-content: space-between;
    height: 20vw;
}
.Stream-list-menu-button {
    display: flex;
    justify-content: right;
    width: 68px;
    /*
    height: 100%;
    */
    height: 20vw;
    fill: var(--list-text-color);
}
.Stream-list-menu-button {
    position: relative;
    z-index: 10;
    overflow: visible;
}

.Stream-list-menu-button svg {
    /*
    width: 100%;
    height: 100%;
    */
    width: 68px;
    height: 20vw;
    fill: var(--list-text-color);
}

.Stream-list-menu-button svg path {
    fill: var(--list-text-color);
}

.SL-back-button {
    background: var(--back-icon);
    width: 68px;
    height: 68px;
    background-repeat: no-repeat;
    background-position: center;
}
.Stream-list-caption {
    /*
    position: absolute;
    */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20vw;
    pointer-events: none;
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 8vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.Stream-list-caption p {
    color: var(--title-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.Stream-list-station-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.Stream-list-availability {
    display: table-cell;
    vertical-align: middle;
    width: 3em;
    text-align: left;
}

/*---Progress---*/
.mobile-progress-bar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 5em);
}

.mobile-progress-bar {
    width: 12em;
    height: .5em;
    position: relative;
    background: var(--progress-bar-bg-color);
    overflow: hidden;
    border-radius: 1em;
}

.mobile-progress-indicator {
    position: absolute;
    width: 30%;
    height: 100%;
    background: #3b82f6; /* Blue */
    animation: mobileProgressMove 2s infinite ease-in-out;
}

@keyframes mobileProgressMove {
    0% {
        left: 0%;
    }
    50% {
        left: 70%;
    }
    100% {
        left: 0%;
    }
}

.WMSWrapper {
	width: 100%;
	height: 100%;
	background-color: black;
}

.WMSWrapper table {
	width: 100%;
}

.WMSWrapper table, .WMSWrapper td {
	border: 1px solid black;
	border-collapse: collapse;
}
.WMSWrapper td {
	padding: 10px;
	text-align: left;
}


.WMSWrapper input {
	width: calc(100% - 15px);
	height: 1.8em;
}

.WMSWrapper select {
	width: calc(100% - 7px);
	height: 2em;
}


#idSHPWrapper {
	border: 0 red solid;
	width: 100%;
	height: 100%;
}
#idSHPContainer {
	border: 0 blue solid;
	background-color: whitesmoke;
	width: 100%;
	height: 100%;
}
.SHPButtonRow {
	width: 100%;
	background-color: whitesmoke;
}
.SHPButton {
	padding: 8px;
	border: 1px gainsboro solid;
	cursor: pointer;
	display: inline;
}
.SHPTextRow {
	width: 100%;
	height: calc(100% - 20vw);
	background-color: var(--playing-bg-color);
	pointer-events: none;
}
.SHPMemo {
	height: 100%;
	overflow: auto;
	outline: 0 solid gainsboro!important;
	outline-offset: 0!important;
	color: black;
	padding: 0 0;
/*	background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);

 */
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0;
	background-repeat: repeat;
	/*
	box-shadow: inset 0 0 30px 0 rgb(0 0 0 / 75%);
	*/
	/*
	border-bottom-left-radius: 0.8rem!important;
	border-bottom-right-radius: 0.8rem!important;
	*/
}
.SHPTable {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	position: relative;
}
.SHPTable tr {
	padding: 0;
	margin: 0;
}
.SHPTable td {
	position: relative;
}
.SHPFavoriteCell {
	position: absolute;
	right: 0;
	top: 0;
	width: 64px;
	height: 64px;
	background-color: transparent;
}
.SHPFavoriteCell {
	position: absolute;
	top: 0;
	right: 0;
}
.SHPFavoriteMark {
	font-size: 64px!important;
	cursor: pointer;
	background-color: transparent;
	pointer-events: visible;
	/*
	display: flex;
	align-items: center;
	justify-content: center;
	*/
	padding: 0!important;
	margin: 0;
}
.SHPHeart-frame::before {
	content: "♡"; /* ♡♥ */
	color: var(--list-text-color)!important;
}
.SHPHeart-filled::before {
	content: "♥";
	color: red!important;
}

.SHPText {}
.SHPText table, .SHPText tr, .SHPText td, .SHPText p, .SHPText pre {
	user-select: text;
}
.SHPText p, .SHPText pre {
	background-color: white;
	width: max-content;
	padding: 0 10px;
	margin: 10px auto;
}

.SHPText td {
	border: 1px solid gainsboro;
	padding: 0 5px;
}

.SHPPlayButtonRow {
	display: grid;
	place-items: center;
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: var(--play-bar-bg-color);
}
.SHPPlayButtonMiddle {
	display: grid;
}

.SHPCanvasWrapper {
	/*
	position: absolute;
	left: 0;
	top: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 8em);
	width: calc(100% - 0px);
	padding: 20px;
	box-sizing: border-box;
	*/
	position: absolute;
	bottom: 0;
}
.SHPCanvasWrapper {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw; /* or 100% if parent is correctly sized */
	box-sizing: border-box;
}

.SHPCanvasPanel {
	width: 100%;
	height: min(44vw, 300px);
	min-height: 120px;
	background-color: transparent;
	/* border-radius: 5vw; */
	/* position: absolute; */
	overflow: hidden;
}
.SHPCanvas {
	width: 100%;
	height: 100%;
	left: 0;
	background-color: transparent;
}
#idSHPCanvas {
	visibility: visible !important;
	opacity: 1;
	transform: translateZ(0); /* Force GPU layer */
	backface-visibility: hidden;
	will-change: transform; /* Hint for optimization */
}
.SHPResponsiveSvg {
	width: 45%;
	height: 100%;
	color: white;
	fill: white;
}
.SHPProgressBackground {
	width: 100%;
	height: 4em;
	background-color: aqua;
	position: absolute;
	bottom: 0;
}
.SHPProgressBar {
	height: 100%;
	width: 0;
	background-color: lime;
}
.SHPAvailability {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 8vw;

}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.SHPFadeOut {
	animation: fadeOut 1.5s ease-in 1.5s forwards;
}

.marquee-container {
	width: calc(100vw - 2em);
	margin: 0 1em;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	/*
	bottom: 4em;
	*/
}

.marquee {
	/*
	display: inline-block;
	*/
	display: block;
	margin-bottom: 0.5em;
}

.marquee-text {
	display: inline-block;
	animation: marquee-animation 15s linear infinite;
	color: var(--list-text-color);
	font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 40px;
	font-weight: bolder;
}

.mobile-description {
	display: inline-block;
	animation: marquee-animation 15s linear infinite;
	color: var(--list-text-color);
	font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: large;
	font-weight: 100;
}

/*

@keyframes marquee-animation {
	0% {
		transform: translateX(0%); !* Start position: text aligned to the right *!
	}
	10% {
		transform: translateX(0%); !* Pause at the start *!
	}
	30% {
		transform: translateX(0%); !* Pause at the start *!
	}
	40% {
		transform: translateX(0%); !* Pause at the start *!
	}
	100% {
		transform: translateX(-100%); !* Pause at the end *!
	}
}
*/
@keyframes marquee-animation {
	0% {
		transform: translateX(0%);
	}
	5% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}

.row {
	display: flex;
	justify-content: space-between;
	padding: 10px;
}

.left-button {
	float: left;
	/*
	padding: 0 32px;
	*/
	border: none;
	color: black;
	background-color: gray;

	display: flex;
	justify-content: center; /* Center horizontally */
	align-items: center;     /* Center vertically */
	padding: 10px;           /* Optional: adjust spacing */
	background-color: transparent;  /* Example styling */

}
.left-button img {
	vertical-align: middle;
}

.right-buttons {
	float: right;
}
.right-buttons button {
}
.svg-share {
	/*
	height: 1em;
	width: 1em;
	padding-top: 5px;
	padding-right: 2px;
	transform: scale(3);
	*/
}

:root {
    --player-button-color: #0075FF;/*cornflowerblue*/
    --border-shadow-color: transparent;
    --toolbar-background-color: gainsboro;
}

/*
:root {
    --player-button-color: white;
    --player-time-color: white;
    --border-shadow-color: black;
    --toolbar-background-color: black;
}
*/

.CRPCBContainer {
    height: 20vw;
    line-height: 48px;
    display: flex;
    font-size: 109%;
    text-align: left;
    direction: ltr;
    /*
    text-shadow: 0 0 2px rgb(0 0 0.5);
    */
    font-family: Roboto,Arial,Helvetica,sans-serif;
    color: #eee;
    /*
    color: #eee;
    background-color: black;
    */
    background-color: var(--toolbar-background-color);
}
.CRPCBControls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    height: 100%;
}
.CRPCBContainer button {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}
.CRPCBButton {
    width: 48px;
    padding: 0 2px;
    height: 100%;
    transition: opacity .1s cubic-bezier(0.4,0,1,1);
    overflow: hidden;
    background-color: var(--play-bar-bg-color)!important;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.CRPCBButton:not([aria-disabled=true]):not([disabled]):not([aria-hidden=true]) {
    cursor: pointer;
}
.CRPCBButton:hover .CRPCBSvgFill {
    /*
    fill: #0053b5;
    */
    fill: var(--play-bar-text-color);
}
.CRPCBContainer a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: color .1s cubic-bezier(0,0,0.2,1);
    transition: color .1s cubic-bezier(0,0,0.2,1);
    outline: 0;
}
.CRPCBButtonFirm {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.CRPCBContainer svg {
    pointer-events: none;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.CRPCBSvgShadow {
    stroke: var(--border-shadow-color);
    /*
    stroke: #000;
    */
    stroke-opacity: .15;
    stroke-width: 2px;
    fill: none;
}
.CRPCBSvgFill {
    /*
    fill: var(--player-button-color);
    */
    fill: var(--play-bar-text-color);
}
.CRPCBNoWidth {
    width: 0 !important;
}
.CRPCBInvisible {
    display: none;
}

:root {
    --log-background-color: rgba(0,0,0,0.8);
}

.logWidget {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    backdrop-filter: blur(3px);
    background-color: var(--log-background-color);
    border-bottom-left-radius: 0.8rem!important;
    border-bottom-right-radius: 0.8rem!important;
    font-size: x-small;
}
.logRow {
    background-color: transparent;
    color: lawngreen;
    text-align: left;
    padding: 0;
    width: calc(100% - 16px);
    margin: 0 8px;
    user-select: text;
}
.logRow:first-of-type {
    margin-top: 8px;
    border-top: transparent solid 1px;
}
.logRow:last-of-type {
    margin-bottom: 33px;
    border-bottom: transparent solid 1px;
}
.logRow:last-of-type::after {
    content: " _";
    font-weight: bold;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
}

.logRow span {
    color: white;
}

.logRow a {
    color: deepskyblue;
    text-decoration: none;
}

@keyframes blink {
    from, to {
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
}

@-moz-keyframes blink {
    from, to {
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
}

@-webkit-keyframes blink {
    from, to {
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
}

@-ms-keyframes blink {
    from, to {
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
}

@-o-keyframes blink {
    from, to {
        opacity: 0.0;
    }
    50% {
        opacity: 1.0;
    }
}
.WDLContainer {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.WDLTopRow {
	flex: 1;
	overflow: auto;
	background-color: lightblue;
	max-height: 72px;
}
.WDLBottomRow {
	flex: 1;
	overflow: auto;
	background-color: lightgreen;
	display: flex;
	height: 100%;
}
.WDLLeftCell {
	flex: 1;
	overflow: auto;
	background-color: lightcoral;
	max-width: 25%;
	position: relative;
}
.WDLRightCell {
	flex: 1;
	overflow: auto;
	background-color: lightseagreen;
	position: relative;
}

.WDTRContainer {
	width: 100%;
	height: 100%;
	background-color: cyan;
	border-collapse: collapse;
	border: none;
	padding: 0;
	margin: 0;
}
.WDTRContainer td {
	padding: 0;
	margin: 0;
}
.WDTRLeft {
	width: 25%;
	background-color: palevioletred;
}
.WDTRMiddle {
	width: 50%;
	background-color: chartreuse;
}
.WDTRRight {
	width: 25%;
	background-color: var(--play-bar-bg-color);
}
.WDCSControlContainer {
	width: 100%;
	height: 72px;
	background-color: springgreen;
	border-collapse: collapse;
	position: relative;
}
.WDCSControlContainer td {
	padding: 0;
	margin: 0;
	width: 50%;
}
/*
.WDCSControlLeft {
	background-color: var(--play-bar-bg-color);
	position: absolute;
	width: 50%;
	height: 100%;
}
*/
.WDCSControlLeft {
	background-color: var(--play-bar-bg-color);
	position: relative; /* needed as anchor for .WDPCContainer */
	height: 100%;       /* allow child centering to work properly */
}

.WDCSControlRight {
	background-color: gold;
	position: relative;
}
.WDCSControlRight {
	position: relative;
	height: 72px; /* or match your top bar height */
}

/*
.WDPCContainer {
	position: absolute;
	width: 100%;
	height: 100%;
}

.WDPCContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
*/
.WDPCContainer {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: auto;
}


/*
.WDPCControls {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-moz-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 100%;
	justify-content: center;

}
*/
.WDPCControls {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;

	/* Your existing flex settings */
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-moz-box-flex: 1;
	-ms-flex: 1;
	flex: 1;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 100%;

	justify-content: center;
	align-items: center; /* <-- This is the missing piece */
}

/*.cbSliderContainer {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.cbSlider {
	position: absolute;
	top: 26px;
	width: 100%;
	left: 0;
	cursor: grab;
}*/
.cbSliderContainer {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;  /* center slider vertically */
	justify-content: center;
	padding: 0 10px;       /* optional horizontal padding */
	box-sizing: border-box;
}

.cbSlider {
	position: relative;
	width: 100%;
	max-width: 100%;
	cursor: grab;
}

/*.WDVTable {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	border-collapse: collapse;
	font-size: 22px;
	color: white;
}*/
.WDVLeft {
	background-color: var(--play-bar-bg-color);
	color: var(--play-bar-text-color);
	width: 42px;
}
.WDVMiddle {
	background-color: var(--play-bar-bg-color);
	position: relative;
}
.WDVRight {
	background-color: var(--play-bar-bg-color);
	color: var(--play-bar-text-color);
	width: 42px;
}

.WDVTable {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-collapse: collapse;
	color: white;
	font-size: 22px;
}
.WDVFlexWrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	width: 100%;
	background-color: var(--play-bar-bg-color);
	color: var(--play-bar-text-color);
	padding: 0 10px;
	box-sizing: border-box;
}


.WDGLWrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--list-bg-color);
    overflow: hidden;
}
.WDGLContainer {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    color: white;
    font-size: 18px;
}

.WDGLGenre-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    background-color: var(--list-bg-color);
}
.WDGLGenre-list th {
    position: sticky;
    top: 0;
    background-color: var(--list-header-bg-color);
    z-index: 2;
    height: 60px;
    font-weight: lighter;
    font-size: 22px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    padding: 0;
    margin: 0;
    color: var(--list-header-text-color);
}
.WDGLGenre-list td {
    padding: 0;
    margin: 0;
}
.WDGLGenre-list li {
    border-bottom: 0 solid #000;
}
.WDGLGenre-list li:hover {
    -webkit-box-shadow:inset 0px 0px 0px 3px blue;
    -moz-box-shadow:inset 0px 0px 0px 3px blue;
    box-shadow:inset 0px 0px 0px 3px blue;
}
.WDGLGenre-list tr:hover {
    -webkit-box-shadow:inset 0px 0px 0px 3px blue;
    -moz-box-shadow:inset 0px 0px 0px 3px blue;
    box-shadow:inset 0px 0px 0px 3px blue;
}

.WDGLGenre-list-selected {
    background-color: blue;
    color: var(--list-item-selected-text-color);
}

.WDGLGenre-list-selected a {
    color: var(--list-item-selected-text-color)!important;
}

.WDGLGenre-list li a {
    display: block;
    width: calc(100% - 30px);
    height: 100%;
    padding: 5px 15px;
    text-align: left;
    text-decoration: none;
    color: inherit;
}

.WDGLGenre-list a {
    display: block;
    width: calc(100% - 30px);
    height: 100%;
    padding: 5px 15px;
    text-align: left;
    text-decoration: none;
    color: var(--list-text-color);
    float: left;
}

.WDGLGenre-list p {
    display: inline;
    margin-right: .5em;
}
.WDGLGenre-list h2 {
    font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1em;
    display: inline;
    font-weight: 400;
    margin: 0;
}
.WDGLGenre-paragraph {
    margin-right: 1.5em!important;
}

.WDGLGenre-list-button-bar-container {
    background-color: transparent;
    height: 60px;
}
.WDGLGenre-list-container {
    flex: 1;
    position: absolute;
    height: 100%;
    width: 100%;
}
.WDGLGenre-list-top-row {
    width: 100%;
    background-color: whitesmoke;
    position: absolute;
}
.WDGLGenre-list-button-row {
    display: flex;
    justify-content: space-between;
    height: 60px;
    background-color: black;
}
.WDGLGenre-list-caption {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: white;
    font-size: 22px;
}



.WDSLWrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--list-bg-color);
}
.WDSLContainer {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    color: white;
    font-size: 18px;

    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
}
.WDSLStream-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
}
.WDSLStream-list li {
    border-bottom: 0 solid #000;
}
.WDSLStream-list li:nth-child(odd) {
}
.WDSLStream-list li:hover {
    -webkit-box-shadow:inset 0px 0px 0px 3px blue;
    -moz-box-shadow:inset 0px 0px 0px 3px blue;
    box-shadow:inset 0px 0px 0px 3px blue;
}
.WDSLStream-list tr:hover {
    -webkit-box-shadow:inset 0px 0px 0px 3px blue;
    -moz-box-shadow:inset 0px 0px 0px 3px blue;
    box-shadow:inset 0px 0px 0px 3px blue;
    cursor: pointer;
}
.WDGLStream-list-selected {
    background-color: blue!important;
}
.WDGLStream-list-selected td div{
    color: var(--list-item-selected-text-color)!important;
}
.WDSLStream-list li a {
    display: block;
    width: calc(100% - 30px);
    height: 100%;
    padding: 5px 15px;
    text-align: left;
    text-decoration: none;
    color: inherit;
}
.WDSLStream-list-First-column {
    display: table-cell!important;
    vertical-align: middle;
    padding-right: 1.5em;
}
.WDSLStream-list-Icon-column {
    padding-right: .5em;
}
.WDSLStream-list-Text-column {
    display: table-cell!important;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: anywhere;
}

.WDSLStream-list-button-bar-container {
    background-color: transparent;
    height: 2.4em;
}
.WDSLStream-list-container {
    flex: 1;
    position: absolute;
    height: 100%;
    width: 100%;
}
.WDSLStream-list-top-row {
    width: 100%;
    background-color: whitesmoke;
    position: absolute;
}
.WDSLStream-list-button-row {
    display: flex;
    justify-content: space-between;
    height: 2.4em;
}
.WDSLStream-list-caption {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/*-----------------------------------------*/

.WDSLStream-list th {
    cursor: default;
    position: sticky;
    top: 0;
    background-color: var(--list-header-bg-color);
    z-index: 2;
    height: 60px;
    font-weight: lighter;
    font-size: 22px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    padding: 0;
    margin: 0;
    color: var(--list-header-text-color)
}
.WDSLStream-list tr {
    background-color: var(--list-bg-color);
}
.WDSLStream-list tr:nth-child(odd) {
    background-color: var(--list-bg-color-odd);
}

.WDSLStream-list tr:nth-child(even) {
    background-color: var(--list-bg-color-even);
}

.WDSLStream-list td {
    padding: 0;
    margin: 0;
}
.WDSLStream-list > tbody > tr > td:nth-child(1),
.WDSLStream-list > thead > tr > th:nth-child(1) {
    min-width: 160px;
    max-width: 230px;
}
.WDSLStream-list > tbody > tr > td:nth-child(3),
.WDSLStream-list > thead > tr > th:nth-child(3) {
    min-width: 90px;
    max-width: 110px;
}

.WDSLStream-list td div {
    display: block;
    width: calc(100% - 30px);
    height: 100%;
    padding: 5px 15px;
    text-align: left;
    text-decoration: none;
    color: var(--list-text-color);
    float: left;
}
.WDSLStream-list a {
    display: block;
    width: calc(100% - 30px);
    height: 100%;
    padding: 5px 15px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    float: left;
}
.WDSLColorBox{
    min-width: .1em;
    height: .7em !important;
    padding: 5px 5px!important;
}
.WDSLBitRate {
    width: 100px;
}
.WDSLStream-bitrate-column {
    width: 5em;
}
.WDSLStream-list-empty-wrapper {
    width: 100%;
    height: calc(100% - 5em);
}
.WDSLStream-list-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border: 0px solid #ccc;
    font-size: 1.2em;
}
/*---Progress---*/
.progress-bar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 5em);
}

.progress-bar {
    width: 12em;
    height: .5em;
    position: relative;
    background: var(--progress-bar-bg-color);
    overflow: hidden;
    border-radius: 1em;
}

.progress-indicator {
    position: absolute;
    width: 30%;
    height: 100%;
    background: #3b82f6; /* Blue */
    animation: progressMove 2s infinite ease-in-out;
}

@keyframes progressMove {
    0% {
        left: 0%;
    }
    50% {
        left: 70%;
    }
    100% {
        left: 0%;
    }
}
/* rating */
.stars-align {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    height: 100%!important;
}
.star-rating {
    display: inline-block;
    position: relative;
    font-size: 1em;
    font-family: Arial, sans-serif;
    line-height: 1;
    width: 5em;
    height: 1em;
    white-space: nowrap;
    vertical-align: middle;
}

.stars-background,
.stars-foreground {
    color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
}

.stars-background {
    color: transparent;
    -webkit-text-stroke: 1px #555;
    text-stroke: 1px #ccc;
}

.stars-clip {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 1em;
    width: 0; /* will be set via JS */
}

.stars-foreground {
    color: gold;
}
/***/
.availability-bar {
    border-collapse: separate;
}
.availability-bar tr:hover {
    -webkit-box-shadow:inset 0px 0px 0px 0 transparent;
    -moz-box-shadow:inset 0px 0px 0px 0 transparent;
    box-shadow:inset 0px 0px 0px 0 transparent;
}

.availability-bar td {
    width: 2px;
    height: 15px;
    background-color: var(--availability-bg-color);
    border: 1px solid transparent;
    padding: 0;
}

.availability-bar td.active {
    background-color: #4caf50;
}

.WDSDWrapper {
	width: 100%;
	height: 100%;
	background-color: var(--canvas-bg-color);
	position: relative;
	overflow: hidden;
}
.WDSDContainer {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	position: absolute;
}
.WDSDTopCell h1 {
	font-size: 20px;
	margin: 0;
	padding: 0;
	color: var(--title-text-color);

}
.WDSDTopCell p {
	font-size: 14px;
	margin: 0;
	padding: 0 20px;
	color: var(--title-text-color);
}
.WDSDFavoriteMarkWrapper {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background-color: transparent;
}
.WDSDFavoriteMark {
	font-size: 36px!important;
	/*
	font-size: 2rem!important;
	*/
	cursor: pointer;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0!important;
}
.WDSDHeart-frame::before {
	content: "♡"; /* ♡♥ */
	color: var(--list-text-color)!important;
}
.WDSDHeart-filled::before {
	content: "♥";
	color: red!important;
}
.WDSDMarquee-container {
	width: calc(100% - 2em);
	margin: 0 1em;
	overflow: hidden;
	white-space: nowrap;
}
.WDSDMarquee {
	display: inline-block;
}
.WDSDMarquee-text {
	display: inline-block;
	font-size: xx-small;
	animation: WDSDMarquee-animation 15s linear infinite;
}
@keyframes WDSDMarquee-animation {
	0% {
		transform: translateX(0%); /* Start position: text aligned to the right */
	}
	10% {
		transform: translateX(0%); /* Pause at the start */
	}
	30% {
		transform: translateX(0%); /* Pause at the start */
	}
	40% {
		transform: translateX(0%); /* Pause at the start */
	}
	100% {
		transform: translateX(-100%); /* Pause at the end */
	}
}
.WDSDCanvas {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	background-color: transparent;
}
.WDSDProgress {
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
}
.WDPBProgressBackground {
	left: 0;
	width: 100%;
	height: 5px;
	background-color: transparent;
	position: absolute;
	bottom: 0;
}
.WDPBProgressBar {
	height: 100%;
	width: 0;
	background-color: lime;
}
.WDPBAvailability {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
@keyframes WDPB_FadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.WDPBFadeOut {
	animation: WDPB_FadeOut 1.5s ease-in 1.5s forwards;
}
.WDMBOuter {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.WDMBSearch-wrapper {
	height: 100%;
	width: 10em;
	float: left;
	padding-left: 0.5em;
}
.WDMBSearch-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
}
.WDMBSearch {
	width: 100%;
	padding: 5px;
	padding-right: 30px;
	border-radius: 3em;
}
.WDMBSearch-close-button {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	background: #ccc;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-family: sans-serif;
}
.WDMBOuter svg {
	height: 100%;
	cursor: pointer;
	fill: var(--play-bar-text-color);
}
.WDMBSelected {
	background-color: var(--play-bar-button-selected-bg-color);
}

.WDMBFrame {
	position: absolute;
	top: 72px;
	padding: 32px 0;
	right: 0;
	z-index: 999999;
	background-color: var(--menu-bg-color);
}
.WDMBLink {
	text-decoration: none
}
.WDMBLine {
	padding: 10px 48px;
	color: var(--list-header-text-color);
}
.WDMBLine:hover {
	background-color: var(--menu-bg-hover);
	cursor: pointer;
}

.WDCBackground {
	width: 100%;
	height: 100%;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	z-index: 999999998;
	pointer-events: none;
	background-color: white;
	opacity: 0.5;
}
.WDCEntireScreen {
	width: 100%;
	height: 100%;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	z-index: 999999999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.WDCFrame {
	border: 1px solid aqua;
	background-color: aliceblue;
}
.contact-body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

.contact-frame {
	max-width: 21cm;
}

.contact-content {
	/*
			  padding: 10px;
			  border-bottom: 1px solid #ccc;
	*/
}

.contact-content input[type="text"] {
	width: 96%;
	height: 30px;
	border: none;
	text-align: left;
}

.contact-content input[type="email"] {
	width: 96%;
	height: 30px;
	border: none;
	text-align: left;
}

.contact-body .form-container {
	max-width: 21cm; /* A4 paper width */
	/* margin: 2rem auto;*/
	padding: 2rem;
}

.contact-body label {
	display: block;
	margin-bottom: 0.5rem;
	text-align: left;
}

.contact-body input,	textarea {
	display: block;
	width: 100%;
	height: 100px;
	margin-bottom: 1.5rem;
	padding: 0.5rem;
	border: 1px solid #ddd;
	font-size: 1.1rem;
	font-family: Arial, Helvetica;
	background-color: aliceblue;
	outline-width: 1px;
	outline-color: lightskyblue;
	outline-style: auto;
}

/*
        .contact-body input:invalid:required {
			background-color: whitesmoke;
		    outline-color: darkgrey;
		    outline-style: auto;
        }
        .contact-body textarea:invalid:required {
			background-color: whitesmoke;
		    outline-color: darkgrey;
		    outline-style: auto;
        }
*/

.contact-body textarea {
	/*			  height: 17rem;*/
	width: 96%;
}

/* Set button container styles */
.contact-body .button-container {
	display: flex;
	justify-content: space-between;
	margin-top: 1.5rem;
}

/* Set button styles */
.contact-body button {
	width: calc(50% - 0.5rem); /* take 50% width minus 0.5rem */
	padding: 0.5rem;
	border: none;
	border-radius: 4px;
	background-color: #008080;
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}

/* Set button hover and focus styles */


.contact-body .table-layout {
	width: 100%;
	table-layout: fixed;
	display: table;
	border-spacing: 2rem;
	margin-top: -3rem;
}

.contact-body .buttons button {
	display: block;
	width: 100%;
	height: 3rem;
	border: none;
	border-radius: 5px;
	background-color: #fff;
	font-size: 1.1rem;
	font-family: Arial, Helvetica;
	color: #444;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: -1px 1px 3px darkgray;
}

.contact-body .buttons button:hover {
	background-color: #ccc;
	color: #fff;
	box-shadow: -1px 1px 3px gray;
}

.contact-body .buttons button:active {
	transition: all 0s;
}

.contact-body .buttons .close {
	background-color: #EEE;
	color: black;
}
.contact-body .buttons .close:hover {
	background-color: whitesmoke;
	color: black;
	box-shadow: -1px 1px 3px gray;
}
.contact-body .buttons .close:active {
	background-color: whitesmoke;
	outline-color: gainsboro;
	outline-style: solid;
	outline-width: 3px;
	outline-offset: 2px;
}

.contact-body .buttons .calculate {
	background-color: #0068b5;
	color: #fff;
}
.contact-body .buttons .calculate:hover {
	background-color: #0254b0;
}
.contact-body .buttons .calculate:active {
	background-color: darkblue;
	outline-color: navy;
	outline-style: solid;
	outline-width: 3px;
	outline-offset: 2px;
}