body {
    overflow: hidden;
}

* {
    margin: 0vh;
    user-select: none;
    padding: 0vh;
    line-height: normal;
    -webkit-user-drag: none;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;

    width: 41.6667vh;
}

#upperContainer {
    display: flex;
    flex-direction: column;

    width: 41.6667vh;
    min-height: 12.5556vh;

    background: var(--containerBackground);
    border-radius: 2.4074vh 2.4074vh 0vh 0vh;
}

#bottomContainer {
    animation: slideInFromTop 0.4s ease-out;

    margin-top: 0.3704vh;

    width: 41.6667vh;
    height: 7.4074vh;

    background: var(--containerBackground);
    border-radius: 0vh 0vh 2.4074vh 2.4074vh;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.close-btn {
    top: 2.04vh;
    right: 1.39vh;
    width: 3.24vh;
    height: 3.24vh;
    position: absolute;
    display: flex;
    align-items: center;
    transform: scale(.8);
    justify-content: center;
    border-radius: 0.37vh;
    transition: .3s ease;
    background: radial-gradient(115.72% 115.72% at 51.43% 51.43%,var(--color-closeBtn) 0%, var(--color-closeBtnSec) 100%);
}

.close-btn:hover {
    box-shadow: 0vh 0vh 0.28vh 0vh var(--color-closeBtnHover) inset, 0vh 1.2vh 1.48vh 0vh var(--color-closeBtnShadow);
}

.close-btn svg {
    transition: .3s ease;
}

.close-btn:hover svg {
    transform: rotate(-90deg);
}

.close-btn:active {
    opacity: .8;
}

.circle {
    position: absolute;
    width: 12.1296vh;
    height: 12.1296vh;
    left: -1.0185vh;
    top: 13.1481vh;

    background: var(--mainColor);
    filter: blur(10.1852vh);
}

.effektLinksOben {
    position: absolute;
    margin-top: -9vh;
    width: 18.8806vh;
    height: 21.9111vh;
}

.striche {
    position: absolute;

    right: -3.5vh;
    bottom: 16vh;

    width: 11.9444vh;
    height: 1.2963vh;

    font-family: 'Gilroy-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 1.1111vh;
    letter-spacing: 0.75em;

    background: var(--rightBottomEffectGradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;

    transform: rotate(90deg);
}

.bottomLine {
    width: 41.6667vh;
    height: 0.3704vh;
    margin-bottom: 0;
    margin-top: auto;

    background: radial-gradient(150% 150% at 50% -50%, var(--quaternary) 0%, #1b98d100 100%);
    filter: drop-shadow(0vh 0vh 7.963vh var(--quaternary));
}

.header {
    display: flex;
    flex-direction: column;
    margin-left: 5.0926vh;
    margin-top: 4.3519vh;
}

.serverNameWrapper {
    display: flex;
    flex-direction: row;
    gap: 0.7407vh;
}

.serverName {
    font-family: 'Gilroy-ExtraBold';
    font-style: normal;
    font-weight: 800;
    font-size: 3.3333vh;

    background: var(--serverNameGradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.serverSecName {
    font-family: 'BrothershipRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 2.963vh;
    line-height: 5.4vh;

    background: var(--serverSecNameGradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.serverDesc {
    margin-top: -1.5vh;

    font-family: 'Gilroy-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 1.2037vh;

    background: var(--serverSecNameGradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}


@keyframes slideInFromTop {
    0% {
        transform: translateY(-10%);
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}




#volumeContainer {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 33.8889vh;
    height: 4.6296vh;

    background: var(--volumeContainerColor);
}

#leftTextContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 8.3333vh;
    height: 4.6296vh;

    background: var(--volumeContainerColor);
}

#leftTextContainer span:first-child {
    width: 7.2222vh;

    margin-left: 1.1111vh;

    font-family: 'Gilroy-Regular';
    font-weight: 400;
    font-size: 1.3889vh;

    color: var(--white);
}

#leftTextContainer span:last-child {
    margin-left: 1.1111vh;
    width: 7.2222vh;

    font-family: 'Gilroy-Regular';
    font-weight: 400;
    font-size: 1.1111vh;

    color: #ffffff8c;
}

#volumeSliderContainer {
    width: 21.4815vh;
    height: 2.963vh;
    margin-left: auto;
    margin-right: 2.037vh;
}

#volumeSliderBg {
    display: flex;
    flex-direction: row;

    margin-top: 0.2778vh;
    margin-bottom: 1.0185vh;

    width: 21.4815vh;
    height: 0.3704vh;

    background: #ffffff14;
}

#volumeSlider {
    width: 10%;
    height: 100%;

    background: var(--mainColor);
    box-shadow: 0vh 0vh 0.9259vh var(--volumeSliderShadow);
}

#volumeTextContainer {
    display: flex;
    flex-direction: row;

    width: 100%;
    height: 1.2963vh;
}

#volumeTextContainer span{
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 1.1111vh;

    color: var(--white);
}

#volumeTextContainer span:nth-child(2) {
    margin-left: auto;
    padding-left: 2vh;
}

#volumeTextContainer span:last-child{
    margin-left: auto;
}

#knob {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: -0.3vh;
    width: 0.9259vh;
    height: 0.9259vh;

    background: var(--white);

    transition: all 0.2s ease;
}

#knob:hover div {
    background: #00000069;
}

#knob:active {
    filter: brightness(80%);
}

#knob div {
    width: 0.5556vh;
    height: 0.5556vh;

    background: #0000003d;
}


#settingsSVG {
    margin-top: 1vh;
    margin-left: auto;
    margin-right: 5vh;

    width: 6.0185vh;
    height: 4.7194vh;

    transition: all 0.2s ease;
}

#settingsSVG:hover #hoverPath {
    fill: var(--mainColor);
}

#settingsSVG:hover stop {
    stop-color: var(--mainColor);
}

#settingsSVG:active stop{
    stop-color: var(--volumeSliderShadow);
}

#settingsSVGcolor {
    margin-top: 1vh;
    margin-left: auto;
    margin-right: 5vh;

    width: 6.0185vh;
    height: 4.7194vh;

    transition: all 0.2s ease;
}

#settingsSVGcolor:hover stop {
    stop-color: var(--volumeSliderShadow);
}

#contentContainer {
    display: flex;
    flex-direction: column;

    margin-top: 1.8519vh;
    margin-left: 5.0926vh;

    width: 31.4815vh;
}

#radioInputContainer {
    z-index: 999;
    display: flex;
    flex-direction: row;
    align-items: center;

    box-sizing: border-box;

    width: 31.4815vh;
    height: 5.7407vh;

    margin-bottom: 2.3148vh;

    background: var(--inputContainerBackground);
    border-radius: 0.5556vh;
}

#radioInputContainerStroke {
    z-index: 0;
    pointer-events: none;
    position: absolute;
    width: 31.4815vh;
    height: 5.7407vh;
    left: 5.0926vh;
    top: 11.8519vh;
}

#micStatusContainer {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: 1.3889vh;

    width: 3.1481vh;
    height: 3.1481vh;

    background: var(--inputContainerBackground);
    border: 0.0926vh solid var(--secondaryColor);
    border-radius: 0.2778vh;
}

#micInactive {
    display: flex;

    width: 1.4963vh;
    height: 1.8667vh;
}

#micActive {
    display: none;

    width: 1.9667vh;
    height: 1.9667vh;
}

#frequenzTextContainer {
    display: flex;
    flex-direction: column;

    margin-left: 0.6481vh;
    max-width: 15.7407vh;
    height: 2.8704vh;
}

#radioFrequencyText {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 1.1111vh;

    color: #ffffff8c;
}

.input-wrapper {
    position: relative;
    display: inline-block;
}

#input {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 1.2963vh;

    background: transparent;
    border: none;
    outline: none;

    color: var(--white);
    
    width: auto;
    min-width: 1ch;
}

#input::placeholder {
    color: var(--white);
    opacity: 0.5;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.mhz {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 1.2963vh;

    background: var(--blueMHzGradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.row {
    display: flex;
    flex-direction: row;
}

@keyframes slideOutFromLeft {
    from {
        transform: translateX(0);
        opacity: 0;
    }
    to {
        transform: translateX(100%);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.favoriteButton {
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);

    margin-left: auto;
    margin-right: 0.6481vh;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 2.2222vh;
    height: 2.2222vh;

    border-radius: 0.3704vh;
    transition: all 0.2s ease;
}

.favoriteButton.visible {
    visibility: visible;
    animation: slideInFromRight 0.3s ease forwards;
}

.favoriteButton.hiding {
    animation: slideOutFromLeft 0.3s ease forwards;
}



.favoriteButton.true {
    background: var(--favButtonBackground);
    border: 0.0463vh solid var(--favButtonBorder);
    box-shadow: 0vh 0.7407vh 1.4815vh var(--favButtonShadow);
}

.favoriteButton.false {
    background: #cfcfcf4d;
    border: 0.0463vh solid #cfcfcf4d;
    box-shadow:none;
}

.favoriteButton.false:hover {
    background: var(--favButtonBackground);
    border: 0.0463vh solid var(--favButtonBorder);
    box-shadow: 0vh 0.7407vh 1.4815vh var(--favButtonShadow);
    opacity: 0.8;
}

.favoriteButton.true:hover {
    filter: brightness(90%);
}

.favoriteButton:active {
    filter: brightness(80%);
}

.starSVG {
    width: 1.2963vh;
    height: 1.2963vh;
    transition: all 0.2s ease;
}

.joinButton {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 1.3889vh;

    min-width: 6.2963vh;
    padding-left: 0.5vh;
    padding-right: 0.5vh;
    height: 3.1481vh;

    background: var(--joinButtonBackground);
    border: 0.0926vh solid var(--mainColor);
    box-shadow: 0vh 0vh 3.3333vh var(--joinButtonShadow), inset 0vh 0vh 1.2037vh var(--joinButtonShadow);
    border-radius: 0.1852vh;

    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 1.2037vh;
    display: flex;
    align-items: center;
    text-align: center;

    color: var(--white);

    transition: all 0.2s ease;
}

.joinButton.leave {
    background: var(--leaveButtonBackground);
    border: 0.0926vh solid var(--leaveButtonBorder);
    box-shadow: 0vh 0vh 3.3333vh var(--leaveButtonShadow), inset 0vh 0vh 1.2037vh var(--leaveButtonShadow);
}

.joinButton:hover {
    background: var(--inputContainerBackground);
}

.joinButton.leave:hover {
    background: var(--leaveButtonHoverBackground);
}

.joinButton:active {
    filter: brightness(90%);
}


#favoritesContainer {
    display: flex;
    flex-direction: column;

    width: 31.4815vh;
    height: 6.9444vh;

    margin-bottom: 2.3148vh;
}

#favoritesHeadingContainer {
    display: flex;
    align-items: center;
    gap: 0.4704vh;
}

.line {
    flex: 1;
    height: 0.0926vh;
    background: linear-gradient(90deg, #ffffff29 0%, #99999900 100.75%);
}

.line.left {
    transform: scaleX(-1);
}

#favoritesHeadingContainer span {
    font-family: 'Gilroy-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 1.2037vh;
    text-align: center;
    color: var(--white);
    white-space: nowrap;
}

#favoriteItemsContainer {
    align-items: center;
    justify-content: center;

    margin-top: auto;

    gap: 0.8333vh;
}

#favoriteItems {
    overflow-x: scroll;
    gap: 0.8333vh;
}

#favoriteItems::-webkit-scrollbar {
    display: none;
}

#favoriteLeftButton {
    z-index: 1000;
}

.favoriteArrowSVG {
    width: 1vh;
    height: 1vh;
    pointer-events: none;
}

.favoriteArrow {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 1.4815vh;
    height: 2.3981vh;

    background: radial-gradient(81.11% 81.11% at 50% 38.29%, #ffffff26 0%, #ffffff00 100%);
    border-radius: 0.2778vh;
    transition: all 0.2s ease;
}

.favoriteArrow:hover {
    background: var(--inputContainerBackground);
}

.favoriteArrow:active {
    filter: brightness(80%);
}

.favoriteElementContainer {
    display: flex;
    align-items: center;

    min-width: 12.963vh;
    height: 4.8148vh;

    background: radial-gradient(81.11% 81.11% at 50% 38.29%, #ffffff26 0%, #ffffff00 100%);
    border-radius: 0.5556vh;
    transition: all 0.2s ease;
}

.favoriteElementContainer:hover {
    background: var(--inputContainerBackground);
}

.favoriteElementContainer:active {
    filter: brightness(80%);
}

.favoriteButton2 {
    pointer-events: none;

    margin-left: 0.9259vh;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 2.037vh;
    height: 2.037vh;

    background: var(--favButtonBackground);
    border: 0.0463vh solid var(--favButtonBorder);
    box-shadow: 0vh 0.7407vh 1.4815vh var(--favButtonShadow);
    border-radius: 0.3704vh;
}

.frequenzText {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 1.2963vh;

    color: var(--white);
}

.mhz.gray {
    background: radial-gradient(70.24% 70.24% at 50% 50%, var(--white) 0%, #cfcfcf 200%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}







































/* Zwei */

.settingsContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;

    width: 41.6667vh;
    min-height: 20.2963vh;
    max-height: 66.2963vh;

    background: var(--containerBackground);
    border-radius: 2.4074vh;
}

#toggleElementsContainer {
    display: flex;
    flex-direction: column;

    gap: 0.9259vh;

    width: 31.4815vh;
    max-height: 60.7407vh;

    margin-top: 1.8519vh;
    margin-bottom: 2.8519vh;
}

.toggleElement {
    min-width: 31.4815vh;
    min-height: 5.7407vh;

    background: var(--inputContainerBackground);
    border-radius: 0.5556vh;

    font-family: 'Gilroy-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 1.3889vh;
    display: flex;
    align-items: center;

    color: var(--white);
}

.toggleElement span {
    margin-left: 0.9259vh;
}

.toggleElementStroke {
    position: absolute;
    pointer-events: none;
    width: 31.4815vh;
    height: 5.7407vh;
}

.checkbox {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 0.9259vh;
    margin-left: auto;

    box-sizing: border-box;

    width: 3.1481vh;
    height: 3.1481vh;

    border: 0.0926vh solid var(--secondaryColor);
    border-radius: 0.2778vh;
    transition: all 0.2s ease;
}

.checkbox:hover {
    background: var(--checkboxGradient);
    box-shadow: 0vh 0vh 1.8519vh var(--checkboxShadow);
    filter: brightness(90%);
}

.checkbox:active {
    filter: brightness(80%);
}

.checkbox.active{
    background: var(--checkboxGradient);
    border: 0.0926vh solid var(--secondaryColor);
    box-shadow: 0vh 0vh 1.8519vh var(--checkboxShadow);
    border-radius: 0.2778vh;
}

.striche.links {
    top: 14vh;
    left: -3.3vh;
}

.striche.rechts {
    bottom: 10vh;
}

.effektLinksOben2 {
    position: absolute;
    margin-left: -5.1vh;
    margin-top: -12vh;
    width: 18.8806vh;
    height: 21.9111vh;
}



.radio-list-container {
    display: none;
    position: static;
    z-index: 9999;
    top: 40%;
    right: 0%;

    padding: 0.463vh;

    font-family: 'Gilroy-Regular';
    user-select: none;

    font-size: 1.1111vh;
    text-align: right;

    color: var(--radioListPlayerName);

    text-shadow: 0vh 0.3704vh 0.3704vh #0000004d;

    background: linear-gradient(270deg, var(--listCubeShadow) 0%, #00000000 100%);
}

#radio-list-header {
    font-family: 'Gilroy-ExtraBold';
    font-style: normal;
    font-weight: 400;
    font-size: 1.2963vh;
    text-align: right;

    color: var(--white);

    text-shadow: 0vh 0.3704vh 0.3704vh #0000004d;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.talking {
    color: var(--mainColor);
}

.radio-list-item.talking .würfel {
    animation: pulse 1.5s infinite;
}

.würfel {
    margin-left: auto;
    margin-top: 0.1vh;

    width: 0.4778vh;
    height: 0.4778vh;

    background: var(--mainColor);
    box-shadow: 0vh 0vh 0.3704vh var(--listCubeShadow);
    transform: rotate(-45deg);
}

.radio-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5vh;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.radio-list-draggable-wrapper {
    position: fixed;
    /* Initialposition - wird durch JS überschrieben */
    top: 40%;
    right: 0;
    z-index: 9999;
    transition: opacity 0.2s ease;
    /* Neue Eigenschaften für freie Bewegung */
    margin: 0;
    padding: 0;
    transform: none;
}

.radio-list-draggable-wrapper.draggable-mode {
    cursor: grab;
}

.radio-list-draggable-wrapper.draggable-mode:hover {
    cursor: grab;
}

.radio-list-draggable-wrapper.draggable-mode:active {
    cursor: grabbing;
    opacity: 0.9;
}

#changeOwnNameInput {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    margin-left: 0.9259vh;

    font-family: 'Gilroy-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 1.3889vh;

    color: var(--white);
}

#changeChannelNameInput {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    margin-left: 0.9259vh;

    font-family: 'Gilroy-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 1.3889vh;

    color: var(--white);
}




.gradientPickerWrapper {
    display: flex;
    flex-direction: column;
    gap: 0.2vh;
    width: 70%;
    margin-top: 0.9259vh;
    margin-bottom: 0.9259vh;
    margin-left: 0.9259vh;
}

.gradientPickerRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1vh;
}

.gradientPickerRow input[type="color"] {
    width: 3.7037vh;
    height: 3.7037vh;
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
}

.gradientPickerRow input[type="range"] {
    /* flex: 1; */
    width: 80%;
}



input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 0.463vh;
    background: linear-gradient(to right, var(--mainColor) 50%, var(--volumeSliderShadow) 50%);
    border-radius: 0.1852vh;
    cursor: pointer;
    outline: none;
  }
  
  /* Thumb – Chrome, Safari, Edge */
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.6944vh;
    height: 0.9259vh;
    background: #FFFFFF;
    border-radius: 0.0926vh;
    border: none;
    margin-top: -0.23vh; /* Thumb vertikal zentrieren */
    position: relative;
    z-index: 2;
  }
  
  /* Track wird überschrieben durch background im input */
  input[type=range]::-webkit-slider-runnable-track {
      -webkit-appearance: none;
      height: 0.463vh;
      background: transparent;
      border: none;
      border-radius: 0.1852vh;
      transition: all 0.2s ease;
  }
  
  input[type=range]::-webkit-slider-runnable-track:hover {
      filter: brightness(90%);
  }
  
  input[type=range]::-webkit-slider-runnable-track:active {
      filter: brightness(80%);
  }
  
  
  input[type=range]::-moz-range-track {
    height: 0.463vh;
    background: transparent;
    border-radius: 0.1852vh;
  }