.bgcolor-pink {
    background-color: #fee2e2;
}
.bgcolor-skyblue {
    background-color: #e0f2fe;
}
.bgcolor-yellow {
    background-color: #fef3c7;
}
.bgcolor-purplelight {
    background-color: #ede9fe;
}
.bgcolor-greenlight {
    background-color: #dcfce7;
}
.bgcolor-yellow2 {
    background-color: #fef9c3;
}
.color-pink {
   color: #fee2e2;
}
.color-blue {
    color: #583fe2;
}
.color-orange {
    color: #ff9b24;
}

.color-skyblue {
   color: #e0f2fe;
}

.color-yellow {
  color: #fef3c7;
}

.color-purplelight {
   color: #ede9fe;
}

.color-greenlight {
   color: #dcfce7;
}

.color-yellow2 {
    color: #fef9c3;
}
.lh-fw {
    line-height: 65px !important;
    font-weight: 900 !important
}

.text-primary {
    color: #ff9b24 !important;
}
.btn-outline-primary {
    --bs-btn-color: #ff9b24;
    --bs-btn-border-color: #ff9b24;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff9b24;
    --bs-btn-hover-border-color: #ff9b24;
    --bs-btn-focus-shadow-rgb: 95, 65, 251;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ff9b24;
    --bs-btn-active-border-color: #ff9b24;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #ff9b24;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ff9b24;
    --bs-gradient: none;
}
.btn-primary-grad {
    color: #fff;
    background: -webkit-gradient(linear, left top, right top, from(#ff9b24), color-stop(51%, #543DE7), to(#ff9b24));
    background: linear-gradient(to right, #ff9b24 0%, #543DE7 51%, #ff9b24 100%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-size: 200% auto;
    border: 0;
    line-height: 1.62;
}
 
.content-above-video {
    position: absolute;
    z-index: 1; /* Asegura que el contenido esté sobre el video */
    /* Añade padding vertical para dar espacio al contenido */

    padding-top: 50px;
    padding-bottom: 50px;
    /* Opcional: color para mejorar contraste */
    top: 120px;
    color: #fff;
}




/* Contenedor: Asegura la posición relativa para posicionar elementos internos (icono, ítems) */
.video-container-relative {
    position: relative;
}

/* Video: Asegura que el elemento video llene completamente el contenedor y elimine espacios */
#main-video-player {
    /* Estos estilos ya estaban inline, pero es mejor tenerlos en CSS */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    object-position: top;
}

/* Estilo para el icono superpuesto */
.volume-overlay {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 24px;
    background-color: rgba(255, 255, 255, 0.5); /* Fondo blanco semitransparente */
    color: black; /* Texto/Emoji negro */
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease;
}

    /* Efecto al pasar el cursor sobre el icono */
    .volume-overlay:hover {
        background-color: rgba(255, 255, 255, 0.8);
    }

/* Estilos para el contenedor de los ítems de selección */
.selection-items-container {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 20;
    display: block;
    gap: 10px;
}

/* Estilos para las miniaturas (ítems) */
.video-select-item {
    width: 80px;
    height: 80px;
    border-radius: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border 0.2s ease;
    display: block
}

/* Estilo para el ítem seleccionado */
.active-selection {
    border-color: #007bff;
}

.z-index--1
{z-index:-1!important}



.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
    display: flex; /* Para centrar el spinner */
    justify-content: center;
    align-items: center;
    z-index: 1; /* Asegura que esté por encima del video y otros elementos */
    opacity: 0; /* Por defecto invisible */
    pointer-events: none; /* Permite hacer clic a través de él cuando es invisible */
    transition: opacity 0.3s ease;
}

/* El spinner en sí (ejemplo simple de un círculo) */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* Color claro del círculo */
    border-top: 5px solid #007bff; /* El color que se animará */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* Aplica la animación */
}

/* Keyframes para la animación de rotación */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Clase para mostrar el loading */
.is-loading {
    opacity: 1; /* Hace visible la capa */
    pointer-events: all; /* Bloquea clics durante la carga */
}



@media (max-width: 720px) {
    .lh-fw {
        line-height: 45px !important; margin-top:20px
         
    }
    .w-m-100
    {width:100%!important}
    .background-video-container {
        overflow:initial!important;
            margin:20px auto
    }
    .content-above-video {
        position: inherit;
        top: 0px!important;
        padding-top: 0px;
        padding-bottom: 0px;
    }
}