:root {
  --site-color: #FFF;
  --key-color: hsl(40, 100%, 45%);
  --img-shuffle:url(gfx/shuffle.png);
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-color: #202020;
    --key-color: hsl(40, 100%, 32%);
		--img-shuffle:url(gfx/dark-shuffle.png);
  }
}

a{color:var(--key-color);text-decoration:none;border-bottom:1px dashed var(--key-color);}

body {    
  margin: 0 !important;
  padding: 0 !important;
}

html {    
  margin: 0 !important;
  padding: 0 !important;
  scrollbar-color: var(--key-color) var(--site-color);
  scrollbar-width:thin;
  background-color:var(--site-color);
}

.popuplink{
  font-size: smaller;
  font-family: Arial, Helvetica, sans-serif;
  top:-30px;
  position:relative;
  padding-left: 10px;;
}

#radiowidget-todamax {
  width:200px;
  height:280px;
  margin: 5px;
}
#radiowidget-todamax-audioelement-wrapper{
  position:relative;
  top:20px;
  width:100%;
}
#radiowidget-todamax-audioelement{
  width:100%;
  border:1px solid var(--key-color);
  background:var(--site-color);
}

#radiowidget-todamax-canvas{
  border:0px solid var(--site-color);
}

#radiowidget-todamax-canvas-wrapper{
  display:block;
  position:relative;
  width:170px;
  height:50px;
  top:15px;
  left:7px;
  border:5px solid var(--key-color);
  background-color:var(--key-color);
  border-radius: 5px;
}

#radiowidget-todamax-disclaimer {
  font-size:10px;
  line-height:12px;
  margin: 20px 0 0 0;
  font-family: deja-vu, arial, sans-serif;
}

#radiowidget-todamax-links {
  position: relative;
  overflow: hidden;
  top:0px;
  padding: 5px 0 5px 0;
  font-family:arial, helvetica, sans-serif;
  font-size:14px;
}

.radiowidget-todamax-playbutton {
  width: 0;
  height: 0;
  border-bottom: 25px solid transparent;
  /* left arrow slant */
  border-top: 25px solid transparent;
  /* right arrow slant */
  border-left: 38px solid var(--site-color);
  /* bottom, add background color here */
  font-size: 0;
  line-height: 0;
  position:relative;
  left:38px;
  top:24px;
}

#radiowidget-todamax-playbutton-outer {
  display:block;
  border-radius: 50%;
  width:100px;
  height:100px;
  background:var(--key-color);
  position:relative;
  top:-3px;
  /*left:58px;*/
  left:48px;
}

#radiowidget-todamax-player {
  width:194px;
  height:200px;
  border:2px solid var(--key-color);
  background:var(--site-color);
  border-radius: 5px;
}

#radiowidget-todamax-popoutbutton{
  position:relative;
  top:5px;
  left:170px;
  background:url(gfx/radioplayerpopout.png);
  width:19px;
  height:19px
}
.radiowidget-todamax-stopbutton {
  width: 40px;
  height: 40px;
  background: var(--site-color);
  border:0px;
  font-size: 0;
  line-height: 0;
  position:relative;
  left:30px;
  top:30px;
}

.radiowidget-todamax-volume-slicecontainer {
  border: none;
  position: relative;
  top:-160px;
  left:60%;
  width:200px;
  height:15px;
  margin:50px 0px 5px 0;
  transform: rotate(-90deg);
}

#radiodebug {
  display:none;
  width:190px; 
  top:30px;
  position:relative;
  border:1px solid var(--key-color);
}

.radiowidget-todamax-volume-slider {
  -webkit-appearance: none; /* Override default look */
  height: 3px;
  width:195px; 
  background: var(--key-color);
  outline: none;
  opacity: 1.0;
  -webkit-transition: .2s;
  transition: opacity .2s;
}


.radiowidget-todamax-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none; /* Override default look */
  width: 2em;
  height: 1em;
  background: var(--key-color);
  cursor: pointer;
}

.radiowidget-todamax-volume-slider::-moz-range-thumb {
  width: 1em;
  height: 2em;
  background: var(--key-color);
	border: none;
  cursor: pointer;
}