/* styles.css */

#playPauseButton {
    font-size: 16px;
    padding: 10px 20px;
    background-color: #3c6998;
    color: white;
    border: none;
    cursor: pointer;
    outline: none;
}

#volumeSlider {
    appearance: none; /* Отменяем дефолтный стиль */
    writing-mode: bt-lr; /* Мобильные устройства */
    -webkit-appearance: slider-vertical; /* Safari */
    width: 15px; /* Ширина полосы */
    height: 90px; /* Высота полосы */
    margin-left: 10px;
    vertical-align: middle;
    background: linear-gradient(to bottom, #cccccc 0%, #ffffff 100%); /* Фон полоски */
    border-radius: 5px;
}

#volumeSlider::-webkit-slider-thumb {
    appearance: none; /* Отменяем дефолтный стиль маркера */
    width: 20px; /* Ширина бегунка */
    height: 20px; /* Высота бегунка */
    background: #007bff; /* Цвет бегунка */
    border-radius: 50%; /* Круглый бегунок */
    cursor: pointer;
}

#volumeSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}

#volumeSlider::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}

#volumeSlider::-ms-fill-upper {
    background: #ffffff;
}

#volumeSlider::-ms-fill-lower {
    background: #cccccc;
}

#volumeSlider::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}