
<!-- Custom Css For: Official Website Yogyakarta-->
<!-- Name : OneWebApi SaaS -->
<!-- Version : 1.9.3 -->
<!-- Owner : By Direktorat IKC -->
<!-- File Name : dengerinbejoradio -->
<!-- @11-03-2026 17:11:43 -->


            .radio-player {
                margin: 30px;
                /* background-color: #7e8ef2; */
                background-color: #003366;
                border-radius: 10px;
                padding: 10px 10px 10px 10px;
                opacity: 0.9;
            }

            .button {
                vertical-align: middle;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border: none;
                background-color: #F59E0B;
                color: #fff;
                border-radius: 100%;
            }

            .play-pause-button {
                width: 70px;
                height: 70px;
                font-size: 25px;
                margin-right: 24px;
            }

            .mute-button {
                width: 30px;
                height: 30px;
                margin-right: 12px;
            }

            .player-controls {
                display: flex;
                align-items: center;
            }

            .currently-playing {
                display: flex;
                flex-direction: column;
                margin-bottom: 12px;
            }

            .volume-controls {
                display: flex;
                align-items: center;
            }

            .currently-playing-label {
                font-size: 12px;
                font-weight: 300;
            }

            .currently-playing-title {
                font-size: 22px;
            }

            .volume {
                -webkit-appearance: none;
                appearance: none;
                border: 1px solid #000;
                border-radius: 50px;
                overflow: hidden;
                /* This will help with styling the thumb */
            }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                height: 15px;
                width: 15px;
                cursor: ew-resize;
                background: #F59E0B;
                box-shadow: -400px 0 0 390px #FDE68A;
                border-radius: 50%;
            }

            input[type="range"]::-moz-range-thumb {
                /* same as above */
            }

            input[type="range"]::-ms-thumb {
                /* same as above */
            }

            input[type="range"]:focus {
                border-radius: 50px;
                box-shadow: 0 0 15px -4px #F59E0B;
            }

            #FixedPositionWrapper {
                margin: auto;
                position: fixed;
                margin: auto;
                right: 0;
                bottom: 0;
                z-index: 99999;
            }

            #FixedPositionOuter {
                width: 100%;
            }

            #FixedPositionInner {
                font-size: 18pt;
                font-family: Tahoma;
                text-align: right;
                color: white;
                margin-bottom: 30px;
            }