/* Estilo base para los sliders */
.slider {
	position: relative;
    width: 100%;
    margin: 10px auto;
}
/* Cambiar el color del control deslizante */
.slider .ui-slider-handle {
    background: #CC6677;
    border: 2px solid #882255;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
/* SLIDER AÑO */
/* Cambiar el color del control deslizante */
#year-slider.slider .ui-slider-handle, #mes-slider.slider .ui-slider-handle, #dia-slider.slider .ui-slider-handle, #hora-slider.slider .ui-slider-handle {
    background: #CC6677;
    border: 2px solid #882255;
    width: 20px;
    height: 21px;
    border-radius: 50%;
	
}

/* Cambiar el color del riel del slider */
.my-slider-track{
	position: relative;
	top: -26px;
    left: 0;
    height: 18px; /* Altura del riel */
    width: 101%; /* Ancho del riel */
    background-color: #FBF5D8; /* Color del riel */
	border: 2px solid #E6DBA2;
    z-index: 1;
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/* Estilo para el botón de reproducción/pausa */
#play-pause-button {
    background-color: #5bc0de;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}

/* Cambiar el color del botón cuando está activo (en estado de reproducción) */
#play-pause-button.playing {
    background-color: #d9534f;
}