#canvas_container, #download_model, #autorotation, #playblack_controller, #scene_toggle, #viewport_scene, #HDR, #view_center {
    background-color: var(--primary-color);
    border-radius: var(--rounded-corners);

    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #282828;

}

#playback_speed {
    border-radius: var(--rounded-corners);

    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #282828;
}

#play_pause, #playback_speed {
    cursor: pointer;
}

#download_model,
#autorotation,
#scene_toggle,
#viewport_scene,
#HDR,
#view_center {
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#download_model:hover,
#autorotation:hover,
#scene_toggle:hover,
#viewport_scene:hover,
#HDR:hover,
#view_center:hover {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

#download_model:active,
#autorotation:active,
#scene_toggle:active,
#viewport_scene:active,
#HDR:active,
#view_center:active {
    transform: scale(0.9);
    transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}



#canvas3D {

    border-radius: var(--rounded-viewport);
}

#image_viewer {
    background-color: #28282840;
    border-radius: var(--rounded-viewport);

}



/* Estilos de los botones de 'Atrás' y 'Siguiente' del Image Viewer*/
#previous,
#next {
    background-color: #28282812;
    opacity: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Añadimos el cubic-bezier para el "volver" */
}

#previous:hover,
#next:hover {
    background-color: #7A7A7A12;
    transform: scale(1.1);
}

#previous:active,
#next:active {
    background-color: #28282840;
    transform: scale(0.9);
    transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Añadimos el cubic-bezier para el rebote al pulsar */
}


/* Estilos para el contenedor de los puntos de cantidad */
.quantityDot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
    margin-right: 8px;
    cursor: pointer;
    opacity: 1;
    transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Añadimos el cubic-bezier para el "volver" */
}
.quantityDot:hover {
    transform: scale(1.2);
}
.quantityDot:active {
    transform: scale(0.8);
    transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Añadimos el cubic-bezier para el rebote al pulsar */
}

/* Estilos para los estados activo e inactivo */
.active {
    background-color: #69b8b8;
    opacity: 1;
}
.inactive {
    background-color: #ccc;
}





/* Estilos para el contenedor de la barra de progreso (el "track") */
#progress_track {
    background-color: #ccc; /* Color de fondo del track */
    border-radius: 5px; /* Bordes redondeados */
    height: 8px; /* Altura del track */
    width: 100%; /* Ocupa todo el ancho disponible dentro de su contenedor */
    cursor: pointer; /* Indica que es interactivo */
    margin: 0 10px; /* Un poco de margen a los lados */
}



/* Estilos para la barra de progreso que indica el avance */
#progress {
    background-color: #69b8b8; /* Color de la barra de progreso */
    /*background-image: linear-gradient(to right, #C4CBEB, #ACDAD4);*/ /* Izquierda a derecha */
    height: 100%; /* Ocupa toda la altura de su contenedor (#progress_bar) */
    width: 0%; /* Se llenará dinámicamente con JavaScript */
    border-radius: 5px; /* Bordes redondeados */
    transition: transform 0.15s ease-in-out; /* Mantenemos la transición */
    transform-origin: left center; /* Mantenemos el origen para consistencia, aunque no sea tan relevante para la escala Y pura */
}

#progress_track:hover #progress, #progress_track:active #progress {
    transform: scaleY(1.25); /* Escala solo en el eje Y (altura) al 150% */
}


.speedButton {
    background-color: #f9f9f9; /* Ejemplo de color de fondo */
    color: #333; /* Ejemplo de color de texto */
    padding: 8px 12px; /* Ejemplo de padding */
    text-align: left; /* Alineación del texto */
    display: block; /* Para que ocupe todo el ancho del menú */
    border: none;
    cursor: pointer;
}

.speedButton:hover {
    background-color: #e0e0e0; /* Ejemplo de color de fondo al pasar el ratón */
}




#playback_speed_menu {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    z-index: 10;
}