/* Last update 2022-05-04 kjarri-thaiiceland */
/*------------------------------------------------------*/
/*  Radio - last updated 2022-05-04 kjarri-thaiiceland  */
.myRadio {margin-left: auto;margin-right: auto;text-align: center;}
.theRadio {.borderTop5px00d6d6;width:420px;height:38px;background: #000;
 border-radius: 22px; box-shadow: 0 8px 10px rgba(0,0,0,0.8);
 position:fixed;top:36px;z-index:100;margin-left:-30px;}

.coyright {width:150px;border:2px solid gold;border-radius: 10px;text-align:center;
 font-size:.75rem;color:#521191;margin-top:4px;background-color:#aaa;}
.playPausenohover {width:76px;height:76px;margin:-38px -18px;padding:0 0;float:left;
 border-radius: 50%;box-shadow: 0 0 10px aqua, 0 0 8px aqua inset;transition:0.9s;}
.playPausehover {width:58px;height:58px;margin:-22px -8px;padding:0 0;float:left;
 border-radius: 50%;box-shadow: 0 0 10px aqua, 0 0 8px aqua inset;transition:0.9s;}
#play01 {color: #eaaeae;margin: 0;vertical-align: middle;}
/* for shadow around play arrow when playing but
  the color on play arrow is in radio.js */
.radioPlaying {text-shadow: 0 -5px 10px #55eded, 0 5px 10px #55eded,
    -5px 0 10px #55eded, 5px 0 10px #55eded;}
/* I have remove the speaker but keep css if in case later */
#speaker {color:aqua;margin:3px 10px;float:right;}
#tracktime {color:aqua;float:left;font-size: 0.85rem;margin-top:2px;}
#volControl {width:110px;float:right;margin-right:8px;z-index:1000;}

.textscroll {width:80%;font-size:0.80rem;color:white;margin-top:3px;
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: my-animation 12s linear infinite;
  -webkit-animation: my-animation 12s linear infinite;
  animation: my-animation 12s linear infinite;}
  /* for Firefox */
  @-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }}
  /* for Chrome */
  @-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }}
  @keyframes my-animation {
  from {-moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);}
  to {-moz-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);}
}

/*  Slider (range) more like native Firefox  */
input[type=range] {height: 5px;-webkit-appearance: none;
  margin: 5px 0;width: 100%;}
input[type=range]:focus {outline: none;}
input[type=range]::-webkit-slider-runnable-track {width: 100%;
  height: 5px;cursor: pointer;animate: 0.2s;background: #9149E3;
  border-radius: 2px;}
input[type=range]::-webkit-slider-thumb {border: 2px solid #FFFFFF;height: 18px;
  width: 18px;border-radius: 25px;background: #695F70;cursor: pointer;
  -webkit-appearance: none;margin-top: -7.5px;}
input[type=range]:focus::-webkit-slider-runnable-track {background: #9149E3;}
input[type=range]::-moz-range-track {width: 100%;height: 5px;cursor: pointer;
  animate: 0.2s;background: #9149E3;border-radius: 2px;}
input[type=range]::-moz-range-thumb {border: 2px solid #FFFFFF;height: 18px;
  width: 18px;border-radius: 25px;background: #695F70;cursor: pointer;}
input[type=range]::-ms-track {width: 100%;height: 5px;cursor: pointer;animate: 0.2s;
  background: transparent;border-color: transparent;color: transparent;}
input[type=range]::-ms-fill-lower {background: #9149E3;border-radius: 4px;}
input[type=range]::-ms-fill-upper {background: #9149E3;border-radius: 4px;}
input[type=range]::-ms-thumb {margin-top: 1px;border: 2px solid #FFFFFF;
  height: 18px;width: 18px;  border-radius: 25px;background: #695F70;
  cursor: pointer;}
input[type=range]:focus::-ms-fill-lower {background: #9149E3;}
input[type=range]:focus::-ms-fill-upper {background: #9149E3;}
/* End slider (range) to look like native Firefox */

audio:hover, audio:focus, audio:active {
  -webkit-box-shadow: 5px 5px 8px rgba(0,0, 0, 0.8);
  -moz-box-shadow: 5px 5px 8px rgba(0,0, 0, 0.8);
  box-shadow: 5px 5px 8px rgba(0,0, 0, 0.8);
 /*-webkit-transform: scale(1.05);-moz-transform: scale(1.05);transform: scale(1.05);*/}