/*Style für Laptop = GROß*/

.icecast-component {
    height: 100px;
    width: 100%;
    }

    :root {
        /*--main-color: 86,127,205 oder 567fcd DAS IST DAS BLAU*/
        --percentage: 30%;
        --main-color: 184,184,184;
        --bg-color: 0,0,0;
    }
    
    /*Visualisierungs-Canvas*/
    #canvas {
        /*top: 10%;*/
        top: 22%;
        margin: 0;
        position: absolute;
        left: 50%;
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        z-index: 1;
        border-radius: 100px;
        will-change: transform;
    }

    /*Ladeanimation*/
    #load {
        position: absolute;
        left: 50%;
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        top: -26%;
        display: none;
    }

    /*Play-Button*/
    #playpause {
        box-sizing: border-box;
        background-color: transparent;
        border: 4px solid white;
        color: white;
        /*padding: 10px 0px;*/
        font-size: 1px;
        width: 71px;
        height: 71px;
        text-decoration: none;
        border-radius: 35px;
        transition-duration: 0.7s;
        margin: 0;
        position: absolute;
        left: 50%;
        -ms-transform: translate(-50%);
        transform: translate(-50%);
        top: 22%;
        z-index: 5;
        cursor: pointer;
    }

     /*Farbe für Play Icon*/
    #SVplay path {
        stroke: white;
        transition: fill 0.3s ease, stroke 0.3s ease;
        fill: transparent;
    }

    #playpause:hover #SVplay path {
        stroke: #D6D6D6;
        fill: transparent;
    }

     /*Farbe für Pause Icon*/
    #SVpause path {
        stroke: white;
        transition: fill 0.3s ease, stroke 0.3s ease;
        fill: transparent;
    }

    #playpause:hover #SVpause path {
        stroke: #D6D6D6;
        fill: transparent;
    }
    
    /*Titel-Anzeige*/
    #text {
        display: flex;
        justify-content: space-between;
        align-items: center; 
        background: white;
        position: absolute;
        left: 10%;
        right: 10%;
        top: 60%;
        padding: 5px 0px;
        font-size: 1.1rem;
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        font-style: normal;
        color: #37548B;
        border: 1px solid black;
        border-radius: 100px;
        z-index: 1;
    }

    /*Text Element im Feld*/
    .text-content {
        flex-grow: 1; /* Text nimmt den verfügbaren Platz ein */
        text-align: center; /* Zentriert den Text im verfügbaren Raum */
    }

    /*Lautstärke Button*/
    #VolBut {
        border: none;
	    background-color: transparent;
	    cursor: pointer;
        padding: 0; /* Entfernt Standard-Padding */
        display: flex; /* Flexbox für das SVG */
        align-items: center; /* Zentriert das SVG im Button */
        height: 100%; /* Gleiche Höhe wie der Textcontainer */
        margin-left: 10px;
        margin-right: 10px;
        z-index: 2;
        position: relative;
    }
    
    /*SVG für Lautstärke*/
    #SVvolume {
        cursor: pointer; /* Zeigt eine Hand über dem SVG */;
        flex-shrink: 0;
        z-index: 5;
    }

    #SVvolume path {
        stroke: #37548B;
        fill: transparent;
        transition: fill 0.3s ease, stroke 0.3s ease;
    }

    #VolBut:hover #SVvolume path {
        stroke: #37548B;
        fill: #37548B;
    }

    /*SVG für Mute*/
    #SVnovolume {
        cursor: pointer; /* Zeigt eine Hand über dem SVG */;
        flex-shrink: 0;
        z-index: 5;
    }

    #SVnovolume path {
        stroke: #37548B;
        fill: transparent;
        transition: fill 0.3s ease, stroke 0.3s ease;
    }

    #VolBut:hover #SVnovolume path {
        stroke: #37548B;
        fill: #37548B;
    }

    /* Musik SVG */
    #musicsvg {
        cursor: default;
        margin-right: 10px;
        margin-left: 10px;
        width: 24px; /* Breite des SVG */
        height: 24px; /* Höhe des SVG */
        flex-shrink: 0;
        z-index: 5;
    }

    #musicsvg path {
        stroke: #37548B;
        fill: transparent;
    }

    /*PopUp Box*/
    #volume-popup {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%) scale(0);
        opacity: 0;
        background-color: white; /* Grüne Fläche um den Slider */
        padding: 10px; /* Abstand zwischen dem Slider und Fläche*/
        border-radius: 100px; /* Abgerundete Ecken */
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
        /*border: 1px solid black;*/
      }
      
      /*PopUp Box Aktiv*/
      #volume-popup.active {
        transform: translateX(-50%) scale(1);
        opacity: 1;
        pointer-events: auto;
      }
      
      /*Slider*/
      #volume-slider {
        width: 200px; /* Breite des Sliders */
        background: transparent; /* Entfernt den Hintergrund des Sliders */
        -webkit-appearance: none; /* Entfernt das Standard-Styling des Sliders */
        height: 10px; /* Höhe des Sliders */
        border-radius: 10px; /* Abgerundete Ecken des Sliders */
      }
      
      /*Slider Weg*/
      #volume-slider::-webkit-slider-runnable-track {
        background: linear-gradient(to right, #D6D6D6, #567fcd);
        height: 10px; /* Höhe des Weges */
        border-radius: 10px; /* Abgerundete Ecken des Weges */
      }
      
      /*Slider Knopf*/
      #volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 15px; /* Höhe des Daumens */
        width: 15px; /* Breite des Daumens */
        background-color: #37548B; /* Schieberegler-Farbe */
        border-radius: 25%; /* Abgerundete Ecken des Daumens */
        cursor: pointer;
        position: relative;
        top: -2px; /* Verschiebt den Daumen nach oben, damit er mittig sitzt */
      }