/******************************************************
/// switcheri
******************************************************/
:root {
  --sz: 3.5vmin;
  --on: #03A9F4;
  --of: #fff0;
  --gr: #666666;
  --tr: all 0.5s ease 0s;
  --lg: var(--of);
}

.toggleAudioSwitcher .toggle {
  position: relative;
  width: calc(var(--sz) * 4);
  height: calc(var(--sz) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggleAudioSwitcher input[type="checkbox"] ~ label:before,
.toggleAudioSwitcher input[type="checkbox"] ~ label:after {
  content: none !important;
}

.toggleAudioSwitcher label { padding-left: 0 !important; position: relative; margin-bottom: 0; margin-top: 0; }

.switcher-sfx { font-size: var(--font-size-8);
  color: var(--tg-theme-secondary);
  font-weight: var(--bold-700);
text-transform: uppercase; }

.toggleAudioSwitcher label {
  position: absolute;
  width: calc(var(--sz) * 4);
  height: calc(var(--sz) * 2);
  background: linear-gradient(0deg, #121720, #0d1217);
  border-radius: var(--sz);
  box-shadow: 0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0006,
              0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #0b0b10,
              0 0px calc(var(--sz) / 10) calc(var(--sz) / 50) #b9e1ff88,
              0 -4px calc(var(--sz) / 5) calc(var(--sz) / 50) #15182fcc;
  font-size: var(--font-size-10);
  color: var(--platinum);
  font-weight: var(--bold-600);
}

.toggleAudioSwitcher .thumb {
  position: absolute;
  width: calc(calc(var(--sz) * 2) - calc(var(--sz) / 8));
  height: calc(calc(var(--sz) * 2) - calc(var(--sz) / 8));
  top: calc(calc(var(--sz) / 10) + calc(var(--sz) / -20));
  left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc(var(--sz) / 10) + calc(var(--sz) / 5.75)));
  background:
    radial-gradient(circle at 48% 50%, #fff0 calc(var(--sz) / 1.05), var(--lg) calc(var(--sz) / 0.99)),
    radial-gradient(circle at 40% 50%, #fff0 calc(var(--sz) / 0.95), var(--lg) calc(var(--sz) / 0.75)),
    linear-gradient(180deg, #283349, #17212f);
  border-radius: var(--sz);
  box-shadow: calc(var(--sz) / -50) calc(var(--sz) / 50) calc(var(--sz) / 30) 0 #fff2 inset,
              0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c,
              0 calc(var(--sz) / 3) calc(var(--sz) / 3) 0 #000d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
  transition: var(--tr);
}

.toggleAudioSwitcher input[type="checkbox"]:checked + label .thumb {
  left: calc(calc(var(--sz) / 10) + calc(var(--sz) / -30));
}

.toggleAudioSwitcher .thumb:before {
  content: "";
  position: absolute;
  width: calc(var(--sz) / 0.5);
  height: calc(var(--sz) / 0.5);
  background: radial-gradient(circle at 45% 50%, #fff0 calc(var(--sz) / 1), var(--lg) calc(var(--sz) / 0.95));
  filter: blur(1px);
}

.toggleAudioSwitcher .light {
  position: absolute;
  width: calc(var(--sz) / 1.75);
  height: calc(var(--sz) / 1.75);
  right: calc(var(--sz) * -1.1);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #121212;
  border-radius: var(--sz);
  box-shadow: 0 0px calc(var(--sz) / 50) calc(var(--sz) / 50) #0008,
              0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #000,
              0 2px calc(var(--sz) / 10) calc(var(--sz) / 500) #fff8,
              0 0px calc(var(--sz) / 20) calc(var(--sz) / 25) #000;
  transition: var(--tr);
  z-index: 1;
}

.toggleAudioSwitcher .light:before {
  content: "";
  transition: var(--tr);
  width: calc(100% - calc(var(--sz) / 15));
  height: calc(100% - calc(var(--sz) / 15));
  position: absolute;
  background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3));
  border-radius: var(--sz);
  box-shadow: 0 0 calc(var(--sz) / 3) 0 #003ef520,
              0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #003ef520 inset;
}

.toggleAudioSwitcher input[type="checkbox"]:checked + label + .light:before {
  --lg: var(--on);
  transition: var(--tr);
  box-shadow: 0 0 calc(var(--sz) / 2.5) 0 var(--lg),
              0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset,
              0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000c inset;
  background: radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), var(--lg) calc(var(--sz) / 3) calc(var(--sz) / 3));
}



#volumeToggleBtn.btn-light-toggle {
  position: relative;
  width: calc(var(--sz) / 1.75);
  height: calc(var(--sz) / 1.75);
  background: #121212;
  border-radius: var(--sz);
  box-shadow: 
    0 0px calc(var(--sz) / 50) calc(var(--sz) / 50) #0008,
    0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #000,
    0 2px calc(var(--sz) / 10) calc(var(--sz) / 500) #fff8,
    0 0px calc(var(--sz) / 20) calc(var(--sz) / 25) #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  transition: var(--tr);
  top: 8px;
}

#volumeToggleBtn .light {
  position: absolute;
  width: calc(100% - calc(var(--sz) / 15));
  height: calc(100% - calc(var(--sz) / 15));
  background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3));
  border-radius: var(--sz);
  box-shadow: 
    0 0 calc(var(--sz) / 3) 0 #003ef520,
    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #003ef520 inset;
  transition: var(--tr);
  top: 0px;
}

#volumeToggleBtn.active .light {
  box-shadow: 
    0 0 calc(var(--sz) / 2.5) 0 var(--on),
    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--on) inset,
    0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000c inset;
  background: radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), var(--on) calc(var(--sz) / 3) calc(var(--sz) / 3));
}

/* Icon styling on top */
#volumeToggleBtn i {
  right: 20px;
  top: 50px;
  op: 30px;
  z-index: 2;
  position: relative;
  color: #ccc;
  font-size: calc(var(--sz) / 0.7);
  pointer-events: none;
  transition: var(--tr);
}

/* Red line when muted (cross line) */
#volumeToggleBtn.muted::after {
    content: "";
    transition: var(--tr);
    width: calc(100% - calc(var(--sz) / 15));
    height: calc(100% - calc(var(--sz) / 15));
    position: absolute;
    background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3));
    border-radius: var(--sz);
    box-shadow: 0 0 calc(var(--sz) / 3) 0 #003ef520, 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #003ef520 inset;
}


.vu-meter-horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-radius: 0;
  padding: 2px 10px;
   /* background: linear-gradient(180deg, #121720, #0d1217);
  box-shadow: inset 0 0 10px #000a, 0 0 5px #0008; */
  width: 100%;
  height: calc(var(--sz) * 1.5);
  position: relative;
  gap: 0px;
  left: -20px;
}
.vu-bars {
  display: flex;
  flex: 1;
  gap: 3px;
}


.vu-segment {
  flex: 1;
  height: 100%;
  background: #222;
  border-radius: 4px;
  box-shadow: inset 0 0 5px #000a;
  transition: background 0.1s ease, box-shadow 0.1s ease;
  height: 5px;
}

.vu-segment.on {
  background: #0f0;
  box-shadow: 0 0 5px #0f0;
}
.vu-segment:nth-child(n+8).on { background: #ff0; box-shadow: 0 0 5px #ff0; }
.vu-segment:nth-child(n+10).on { background: #f00; box-shadow: 0 0 5px #f00; }

/* dB scale overlay */
.vu-scale {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 93%;
  font-size: 8px;
  color: var(--platinum);
  text-shadow: 0 0 2px #000;
  top: 7px;
  position: absolute;
  left: 20px;
}

.vu-scale span {
  line-height: 1;
  white-space: nowrap;
}
/* Optional glow on hover or active */
.vu-segment.on:hover {
  filter: brightness(1.3);
}




/* Switch starts here */
.rocker {
  display: inline-block;
  position: relative;
  /*
  SIZE OF SWITCH
  ==============
  All sizes are in em - therefore
  changing the font-size here
  will change the size of the switch.
  See .rocker-small below as example.
  */ 
  font-size: 1em; font-weight: bold; text-align: center; text-transform: uppercase; color: #888; 
  width: 7em; height: 4em; overflow: hidden; border-bottom: 0.5em solid #eee; }

.rockerWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rockerTitle {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgb(0 0 0 / 25%);
  text-transform: uppercase;
}
.rocker-small {font-size: 0.75em;margin: 0em 1em 2em 1em;}
.rocker::before { content: ""; position: absolute; top: 0.5em; left: 0; right: 0; bottom: 0; background-color: #999; border: 0.5em solid #eee; border-bottom: 0; }
.rocker input { opacity: 0; width: 0; height: 0; }
.switch-left, .switch-right { cursor: pointer; position: absolute; display: flex; align-items: center; justify-content: center; height: 2.5em; width: 3em; transition: 0.2s; }
.switch-left { height: 2.4em; width: 2.75em; left: 0.85em; bottom: 0.4em; background-color: #ddd; transform: rotate(15deg) skewX(15deg); }
.switch-right { right: 0.5em; bottom: 0; background-color: #bd5757; color: #fff; }
.switch-left::before, .switch-right::before { content: ""; position: absolute; width: 0.4em; height: 2.45em; bottom: -0.45em; background-color: #ccc; transform: skewY(-65deg); }
.switch-left::before { left: -0.4em; }
.switch-right::before { right: -0.375em; background-color: transparent; transform: skewY(65deg); }
input:checked + .switch-left {background-color: #00b33c; color: #fff;bottom: 0px;left: 0.5em;height: 2.5em;width: 3em;transform: rotate(0deg) skewX(0deg);text-shadow: 0 0.5px 1px #777, 0 2px 6px #f2f2f2;}
input:checked + .switch-left::before { background-color: transparent; width: 3.0833em; }
input:checked + .switch-left + .switch-right { background-color: #ddd; color: #888; bottom: 0.4em; right: 0.8em; height: 2.4em; width: 2.75em; transform: rotate(-15deg) skewX(-15deg); }
input:checked + .switch-left + .switch-right::before { background-color: #ccc; }

/* Keyboard Users */
input:focus + .switch-left { color: #333; }
input:checked:focus + .switch-left { color: #fff; }
input:focus + .switch-left + .switch-right { color: #fff; }
input:checked:focus + .switch-left + .switch-right { color: #333; }







.led {
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%,-50%);
  display: inline-block;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  margin: 0px;
  background: #0f0;
  background-image:
  -webkit-linear-gradient(top, #13fB04 0%, #a9f69d 50%, #647e5c 100%);
  box-shadow: 0 0 4px #333a33;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  animation: blinkGreen 1s infinite;
  opacity: 0.4;
}

@keyframes blinkGreen {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}

.led.off {
     background-image: -webkit-linear-gradient(top, #fb1304 0%, #e35843 50%, #edad99 100%);
  box-shadow: 0 0 4px #900;
}
/* Dark Theme (default) */
.dark .led:not(.off) {
  background: #0f0;
  box-shadow: 0 0 4px #0f0;
  animation: blinkRed 1s infinite;

}

@keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #0f0; }
}

/* Blueprint Theme */
.blueprint .led:not(.off) {
  background: #0ff;
  box-shadow: 0 0 4px #0ff;
}

.blueprint .led.off {
  background: #044;
  box-shadow: 0 0 4px #044;
}

/* Magic Theme */
.magic .led:not(.off) {
  background: #f0f;
  box-shadow: 0 0 6px #f0f;
}

.magic .led.off {
  background: #402040;
  box-shadow: 0 0 4px #402040;
}
.btn-ui.playing .fa-shuffle {
  color: #0f0;
  text-shadow: 0 0 6px #0f0;
}

.blueprint .btn-ui.playing .fa-shuffle {
  color: #0f0;
  text-shadow: 0 0 6px #0f0;
}

.magic .btn-ui.playing .fa-shuffle {
  color: #f0f;
  text-shadow: 0 0 6px #f0f;
}







.audio-progress-combined {
  display: flex;
  align-items: center;
  width: 95%;
  gap: 0.5em;
  font-size: 12px;
  position: relative;
  top: 16px;
}

.range-wrapper {
  position: relative;
  flex: 1;
  height: 6px;
  display: flex;
  align-items: center;
}

.range-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #222, #3f3);
  border-radius: 2px;
  pointer-events: none;
}

/* No z-index or top offset here! */
.audio-progress-combined input[type="range"] {
  all: unset;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
}

/* Track fallback (in case fill isn't visible underneath) */
.audio-progress-combined input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border-radius: 2px;
}

.audio-progress-combined input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
  border-radius: 2px;
}

/* Thumb */
.audio-progress-combined input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 4px #044;
  cursor: pointer;
  margin-top: -4px; /* perfectly centers it in 4px track */
}

.audio-progress-combined input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 4px #00ff00;
  cursor: pointer;
  border: none;
}



.blueprint .progress-bar {
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 255, 255, 0.1),
    rgba(0, 255, 255, 0.1) 4px,
    transparent 4px,
    transparent 8px
  );
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.blueprint .progress-fill {
  background: linear-gradient(90deg, #0ff, #5ff);
  box-shadow: 0 0 6px #0ff;
}

.magic .progress-bar {
  background: rgba(255, 0, 255, 0.1);
  border: 1px solid rgba(255, 0, 255, 0.25);
}

.magic .progress-fill {
  background: linear-gradient(90deg, #a0f, #f0f);
  box-shadow: 0 0 6px #f0f;
}

.audio-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #513e3e;
  width: 94%;
  margin: 10px 7px;
  position: relative;
}

.audio-progress-wrapper input[type="range"] {
  flex: 1;
  height: 4px;
  appearance: none;
  background: rgb(0 0 0 / 25%);
  border-radius: 2px;
  outline: none;
}

.audio-progress-wrapper input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 4px #044;
  cursor: pointer;
  margin-top: -2px;
}

.audio-progress-wrapper input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 4px #00ff00;
  cursor: pointer;
}





.volume-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
  padding: 0.5em;
  height: 140px;
  justify-content: center;
  position: relative;
}

/* Container for natural vertical flow */
.volume-track {
  writing-mode: bt-lr;
  height: 100px;
  display: flex;
  align-items: center;
}
input[type="range"].vertical {
  writing-mode: vertical-lr;
  direction: rtl;
}

/* Slider appearance */
.volume-track input[type="range"] {
  background: transparent;
  width: 4px;
  height: 100%;
  background: #00ff00;
  border-radius: 5px;
  cursor: pointer;
}

.volume-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 4px #044;
  cursor: pointer;
}

.volume-track input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #00ff00;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.volume-control-compact {
  display: flex;
  align-items: center;
  gap: 0.5em;
  max-width: 8em;
  margin-left: auto;
  margin-right: auto;
  padding: 0.25em 0.5em;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.volume-control-compact .btn-ui {
  /* font-size: 1.1em; */
  /* width: 2.2em; */
  /* height: 2.2em; */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e1e1e1;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.volume-control-compact .btn-ui:hover {
  background: #ccc;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #888;
  border-radius: 2px;
  flex: 1;
  cursor: pointer;
}
.volume-control-compact input[type="range"] {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: #888;
  border-radius: 2px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  top: 30px;
}

.volume-control-compact input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 4px #044;
  cursor: pointer;
  position: relative;
  z-index: 3;
}

.volume-control-compact input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #00ff00;
  border-radius: 50%;
  cursor: pointer;
}


.audio-toolbar.controlPlayer {
	border-radius: 15px;
	padding: 15px;
	position: relative;
	bottom: 0;
	left: 0;
	/* display: flex; */
	flex-direction: row;
	align-items: center;
	width: 100%;
	z-index: 1000;
}


.btn-ui {
  position: relative;
  width: calc(var(--sz) * 2);
  height: calc(var(--sz) * 2);
  background: linear-gradient(180deg, #283349, #17212f);
  border-radius: var(--sz);
  box-shadow: 
    calc(var(--sz) / -50) calc(var(--sz) / 50) calc(var(--sz) / 30) 0 #fff2 inset,
    0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c,
    0 calc(var(--sz) / 3) calc(var(--sz) / 3) 0 #000d;
  cursor: pointer;
  outline: none;
  border: none;
  /* display: inline-flex; */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: var(--tr);
  margin: 0 25px;
}

.btn-ui::before {
  content: "";
  position: absolute;
  width: calc(var(--sz) / 0.5);
  height: calc(var(--sz) / 0.5);
  background: radial-gradient(circle at 45% 50%, #fff0 calc(var(--sz) / 1), var(--on) calc(var(--sz) / 0.95));
  filter: blur(1px);
  border-radius: var(--sz);
  z-index: 1;
  transition: var(--tr);
}

.btn-ui i {
  z-index: 2;
  position: relative;
  color: var(--platinum);
  font-size: calc(var(--sz) / 1.5);
  pointer-events: none;
  transition: var(--tr);
}

/* Active (playing) state matching thumb active */
.btn-ui.playing {
  --on: #03A9F4;
  width: calc(var(--sz) * 3);
  height: calc(var(--sz) * 3);
  border-radius: 50%;
}

@keyframes rotateGlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn-ui.playing::before {
  background: radial-gradient(circle at 45% 50%, #fff0 calc(var(--sz) / 1), var(--on) calc(var(--sz) / 0.95));
  animation: rotateGlow 2s linear infinite;
  transform-origin: center;
}
/* Muted / off state - red glow and cross line */
.btn-ui.muted {
  --on: #ff0033;
}

.btn-ui.muted::before {
  background: radial-gradient(circle at 45% 50%, #fff0 calc(var(--sz) / 1), var(--on) calc(var(--sz) / 0.95));
}

.btn-ui.muted::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 2px;
  background-color: #ff0033;
  transform: rotate(-45deg);
  z-index: 3;
  transition: var(--tr);
}

/* Hover / active feedback */
.btn-ui:hover {
  filter: brightness(1.1);
}

.btn-ui:active {
  transform: translateY(2px);
}
.ego_player { display: flex; }
.ego_player {border-radius: 0.75em;align-items: center;margin: 0 auto;padding: 0em 1em 0.5em 1em;position: relative;
width: auto;display: flex;background: linear-gradient(135deg, #c9c9c9, #a3a3a5), #b4b4b4;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;box-shadow: inset 0.5em 0.5em 0 rgba(255, 255, 255, 0), -5em -5em 18em rgba(255, 255, 255, 0), 0.5em 0.5em 0 rgba(0, 0, 0, 0), 0.5em 0.5em 0 0em rgba(0,0,0,0.4), 0em 0em 0em rgba(0, 0, 0, 0.2), 2em 2em 8em rgba(0, 0, 0, 0);}



.ego_player {
	display: flex;
	align-items: center;
	gap: 0;
	  margin: 10px auto;
	  position: relative;
	  background: linear-gradient(135deg, #c9c9c9, #a3a3a5);
	  background: linear-gradient(to bottom, #1e2228, #252b33);
	  border-radius: 10px;
	  padding: 20px;
	  border: 3px solid #2a313a;
	  /* background: linear-gradient(to bottom, #21262e, #1a1e24); */
	  box-shadow: 0 4px 8px var(--raisin-black-1), inset 0 1px 1px var(--raisin-black-3);
	}
	.ego_player.r-90 {}
	.ego_player_modul.r-90 { width:17em; max-height:150px; display: inline;}


.ego_player h4.audio-control-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--platinum);
    text-transform: uppercase;
    margin: 0;
    position: relative;
    top: 0px;
    letter-spacing: 3px;
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(245,245,245,0.5) 2px 1px 1px;
    background: rgba(0,0,0, 0.1);
    padding: 0.1em 0.3em;
    border-radius: 0  0 8px  8px;
    transform: rotate(-90deg);
	text-align: center;
}

/* Small devices (mobile) */
@media (max-width: 576px) {
  .ego_player h4.audio-control-title {
	  transform: rotate(0deg); /* On mobile, rotate label back upright if you prefer */
	  text-align: center; 
	}

}


.screwIt {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #3e3737;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 1px #0008;
  color: #0004;
  text-shadow: 1px 0 0px #1118, 0 1px 0px #2228, 0 0 1px #3338;
  transform: rotate(32deg);
}

.screwIt::before {
  content: "+";
}

.screwIt.top-left { top: 0.5em; left: 0.5em; }
.screwIt.top-right { top: 0.5em; right: 0.5em; }
.screwIt.bottom-left { bottom: 0.5em; left: 0.5em; }
.screwIt.bottom-right { bottom: 0.5em; right: 0.5em; }

.toggleAudioSwitcher {

  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #513e3e;
  width: 100%;
  margin: 10px 7px;
  position: relative;

}

.audio-switcher-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #513e3e;
  width: 100%;
  margin: 10px 7px;
  position: relative;
}

.switch-holder {
  display: inline-block;
  padding: 10px 0px 0 0;
  border-radius: 0;
}
.switch-label {
  padding: 0;
  font-size: 12px;
  font-weight: 300;
  color: #222;
}
.switch-label i {
  margin-right: 5px;
  font-size: 12px;
  font-weight: 600;
}
.switch-toggle {
  height: 40px;
}
.switch-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -2;
}
.switch-toggle input[type="checkbox"]+label {
  position: relative;
  display: inline-block;
  width: 130px;
  color: #fff;
  height: 40px;
  border-radius: 8px;
  margin: 5px;
  cursor: pointer;
  box-shadow: inset -8px -8px 15px rgba(255, 255, 255, .6),
        inset 10px 10px 10px rgba(0, 0, 0, .25);
}
.switch-toggle input[type="checkbox"]+label::before {
  position: absolute;
  content: 'OFF';
  font-size: 13px;
  text-align: center;
  line-height: 25px;
  top: 8px;
  left: 8px;
  width: 45px;
  height: 25px;
  border-radius: 8px;
  background-color: #ff0000;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
        3px 3px 5px rgba(0, 0, 0, .25);
  transition: .3s ease-in-out;
}

.switch-toggle input[type="checkbox"]:checked+label::before {
  left: 50%;
  content: 'ON';
  color: #fff;
  background-color: #00b33c;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
        3px 3px 5px #00b33c;
}