/**
 * CSS Principal - ChancayPlay
 * Organizado por prioridad: Base → Móviles → Smart TV
 */

/* ===== ESTILOS BASE ===== */
/* Asegurar que el reproductor esté oculto por defecto */
#divconvideo {
    display: none;
}

/* ===== ESTILOS PARA ELEMENTOS ESPECÍFICOS ===== */
/* Loader principal */
#wloaderMasterHome {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #000000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: block;
}

/* Contenedor del logo en el loader */
.loader-logo-container {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 212px;
    top: 30%;
}

/* Logo en el loader */
.loader-logo {
    width: 100%;
    margin-left: -2px;
}

/* Contenedor del loading spinner */
.loading-container {
    text-align: center;
    color: #fff;
}

/* Reproductor de video */
#divconvideo {
    display: none;
}

/* Botón de cerrar reproductor */
#close-player {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000001;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#close-player:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Lista de canales */
.channel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 10px 0;
    max-height: 80vh;
    overflow-y: auto;
}

/* ===== ESTILOS ESPECÍFICOS PARA PWA FULLSCREEN ===== */
/* Optimizar para modo standalone (PWA instalada) */
@media (display-mode: standalone) {
    /* Ocultar elementos innecesarios en PWA */
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Asegurar que el contenido use toda la pantalla */
    html, body {
        height: 100vh !important;
        height: 100dvh !important;
        width: 100vw !important;
    }
    
    /* Optimizar el reproductor para PWA */
    #divconvideo.show {
        height: 100vh !important;
        height: 100dvh !important;
        width: 100vw !important;
    }
    
    /* Mejorar la experiencia táctil en PWA */
    .channel {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Ocultar scrollbars innecesarios en PWA */
    ::-webkit-scrollbar {
        width: 6px !important;
    }
    
    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1) !important;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(142, 24, 234, 0.5) !important;
        border-radius: 3px !important;
    }
}

/* Configuración inicial del video - RESPONSIVE */
/* Solo aplicar cuando NO esté en layout vertical móvil */
@media screen and (min-width: 769px) {
    #hls-example_html5_api {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        margin: 0;
        padding: 0;
        position: relative;
        display: block;
        z-index: 1;
        box-sizing: border-box;
        border: none;
        outline: none;
        float: none;
        clear: none;
        text-align: center;
    }
}

/* ===== ESTILOS PARA MÓVILES ===== */
/* ===== LAYOUT ESPECÍFICO PARA MÓVILES VERTICAL ===== */

/* Detectar dispositivos móviles en orientación vertical */
@media only screen and (max-width: 768px) and (orientation: portrait) {
    /* DIV EN PANTALLA COMPLETA - MÓVILES VERTICAL */
    #divconvideo.show {
        /* PANTALLA COMPLETA FORZADA */
        width: 100vw !important;        /* Ancho completo de la ventana */
        height: 100vh !important;       /* Alto completo de la ventana */
        height: 100dvh !important;      /* Dynamic viewport height para móviles */
        position: fixed !important;     /* Posición fija */
        top: 0 !important;              /* Desde la parte superior */
        left: 0 !important;             /* Desde la parte izquierda */
        z-index: 999999 !important;     /* Z-index máximo */
        background-color: #000 !important; /* Fondo negro */
        margin: 0 !important;           /* Sin márgenes */
        border: none !important;        /* Sin bordes */
        padding: 0 !important;          /* Sin padding */
        display: flex !important;       /* Flexbox para layout */
        flex-direction: column !important; /* Columna: reproductor arriba, lista abajo */
        justify-content: flex-start !important; /* Alineación al inicio */
        align-items: stretch !important; /* Elementos ocupan todo el ancho */
        overflow: hidden !important;    /* Sin scroll */
        transform: none !important;     /* Sin transformaciones */
        float: none !important;         /* Sin float */
    }
    
    /* REPRODUCTOR EN VERTICAL - PARTE SUPERIOR - MÓVILES - AJUSTADO AL ANCHO */
    html body #divconvideo.show #fullscreen,
    html body #divconvideo.show #doonplayer,
    html body #divconvideo.show #element,
    body #divconvideo.show #fullscreen,
    body #divconvideo.show #doonplayer,
    body #divconvideo.show #element {
        width: 100% !important;         /* Ancho completo del div */
        height: 25% !important;         /* 25% de la altura de la pantalla */
        margin: 0 !important;           /* Sin márgenes */
        padding: 0 !important;          /* Sin padding */
        position: relative !important;  /* Posición relativa */
        display: flex !important;       /* Display flex para centrar */
        align-items: center !important; /* Centrar verticalmente */
        justify-content: center !important; /* Centrar horizontalmente */
        flex-shrink: 0 !important;      /* No se encoge */
    }
    
    /* VIDEO CENTRADO EN EL REPRODUCTOR - MÓVILES */
    html body #divconvideo.show video,
    body #divconvideo.show video,
    html body #divconvideo.show #hls-example_html5_api,
    body #divconvideo.show #hls-example_html5_api,
    html body #divconvideo.show .vjs-tech,
    body #divconvideo.show .vjs-tech {
        width: 100% !important;         /* Ancho completo del reproductor */
        height: 100% !important;        /* Alto completo del reproductor */
        object-fit: contain !important; /* Contener el video manteniendo proporción */
        object-position: center !important; /* Centrar el video */
        margin: 0 !important;           /* Sin márgenes */
        padding: 0 !important;          /* Sin padding */
        position: absolute !important;  /* Posición absoluta */
        top: 50% !important;            /* Centrar verticalmente */
        left: 50% !important;           /* Centrar horizontalmente */
        transform: translate(-50%, -50%) !important; /* Centrar perfectamente */
        display: block !important;      /* Display block */
    }
    
    /* LISTA DE CANALES EN LA PARTE INFERIOR - MÓVILES */
    html body #divconvideo.show #listcanales {
        width: 100% !important;         /* Ancho completo */
        height: 75% !important;         /* 75% de la altura de la pantalla */
        margin: 0 !important;           /* Sin márgenes */
        padding: 10px !important;       /* Padding pequeño */
        position: relative !important;  /* Posición relativa */
        display: block !important;      /* Display block */
        overflow-y: auto !important;    /* Scroll vertical */
        background-color: rgba(0, 0, 0, 0.8) !important; /* Fondo semi-transparente */
        flex-shrink: 0 !important;      /* No se encoge */
    }
}

/* ===== OCULTAR CONTROLES DEL REPRODUCTOR ===== */
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-loading-spinner,
.video-js .vjs-error-display,
.video-js .vjs-text-track-display,
.video-js .vjs-poster,
.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-duration,
.video-js .vjs-remaining-time,
.vjs-play-control,
.video-js .vjs-volume-panel,
.video-js .vjs-progress-control,
.video-js .vjs-fullscreen-control,
.video-js .vjs-playback-rate,
.video-js .vjs-chapters-button,
.video-js .vjs-descriptions-button,
.video-js .vjs-captions-button,
.video-js .vjs-subtitles-button,
.video-js .vjs-audio-button,
.video-js .vjs-picture-in-picture-control {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* ===== LAYOUT ESPECÍFICO PARA MÓVILES HORIZONTAL ===== */

/* Detectar dispositivos móviles en orientación horizontal - MEJORADO */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
    /* DIV EN PANTALLA COMPLETA - MÓVILES HORIZONTAL - MÁXIMA ESPECIFICIDAD */
    html body #divconvideo.show,
    body #divconvideo.show,
    #divconvideo.show {
        /* PANTALLA COMPLETA FORZADA */
        width: 100vw !important;        /* Ancho completo de la ventana */
        height: 100vh !important;       /* Alto completo de la ventana */
        height: 100dvh !important;      /* Dynamic viewport height para móviles */
        position: fixed !important;     /* Posición fija */
        top: 0 !important;              /* Desde la parte superior */
        left: 0 !important;             /* Desde la parte izquierda */
        z-index: 999999 !important;     /* Z-index máximo */
        background-color: #000 !important; /* Fondo negro */
        margin: 0 !important;           /* Sin márgenes */
        border: none !important;        /* Sin bordes */
        padding: 0 !important;          /* Sin padding */
        display: flex !important;       /* Flexbox para layout */
        flex-direction: row !important; /* Fila: reproductor izquierda, lista derecha */
        justify-content: flex-start !important; /* Alineación al inicio */
        align-items: stretch !important; /* Elementos ocupan todo el alto */
        overflow: hidden !important;    /* Sin scroll */
        transform: none !important;     /* Sin transformaciones */
        float: none !important;         /* Sin float */
    }
    
    /* REPRODUCTOR EN HORIZONTAL - CONTENEDOR PRINCIPAL - MÓVILES HORIZONTAL */
    html body #divconvideo.show #fullscreen,
    body #divconvideo.show #fullscreen {
        width: 70% !important;          /* 70% del ancho para el reproductor */
        height: 100vh !important;       /* Alto completo de la ventana */
        height: 100dvh !important;      /* Dynamic viewport height para móviles */
        margin: 0 !important;           /* Sin márgenes */
        padding: 0 !important;          /* Sin padding */
        position: relative !important;  /* Posición relativa */
        display: flex !important;       /* Flexbox para centrado perfecto */
        align-items: center !important; /* Centrar verticalmente */
        justify-content: center !important; /* Centrar horizontalmente */
        flex-shrink: 0 !important;      /* No se encoge */
        max-height: 100vh !important;   /* Máximo alto de ventana */
        max-height: 100dvh !important;  /* Máximo dynamic viewport height */
    }
    
    /* CONTENEDORES INTERNOS - OPTIMIZADOS */
    html body #divconvideo.show #doonplayer,
    body #divconvideo.show #doonplayer,
    html body #divconvideo.show #element,
    body #divconvideo.show #element {
        width: 100% !important;         /* Ancho completo del contenedor padre */
        height: 100% !important;        /* Alto completo del contenedor padre */
        margin: 0 !important;           /* Sin márgenes */
        padding: 0 !important;          /* Sin padding */
        position: relative !important;  /* Posición relativa */
        display: flex !important;       /* Flexbox para centrado */
        align-items: center !important; /* Centrar verticalmente */
        justify-content: center !important; /* Centrar horizontalmente */
        flex-shrink: 0 !important;      /* No se encoge */
    }
    
    /* VIDEO CENTRADO EN EL REPRODUCTOR - MÓVILES HORIZONTAL - OPTIMIZADO */
    html body #divconvideo.show video,
    body #divconvideo.show video,
    html body #divconvideo.show #hls-example_html5_api,
    body #divconvideo.show #hls-example_html5_api,
    html body #divconvideo.show .vjs-tech,
    body #divconvideo.show .vjs-tech {
        max-width: 100% !important;     /* Máximo ancho del contenedor */
        max-height: 100% !important;    /* Máximo alto del contenedor */
        width: 100% !important;         /* Ancho completo del contenedor */
        height: 100% !important;        /* Alto completo del contenedor */
        object-fit: contain !important; /* Contener el video manteniendo proporción */
        object-position: center !important; /* Centrar el video */
        margin: 0 !important;           /* Sin márgenes */
        padding: 0 !important;          /* Sin padding */
        position: relative !important;  /* Posición relativa (flexbox se encarga del centrado) */
        display: block !important;      /* Display block */
        border: none !important;        /* Sin borde para mejor visualización */
        flex-shrink: 0 !important;      /* No se encoge */
    }
    
    /* LISTA DE CANALES EN EL LADO DERECHO - MÓVILES HORIZONTAL */
    html body #divconvideo.show #listcanales {
        width: 30% !important;          /* 30% del ancho para la lista */
        height: 100vh !important;       /* Alto completo de la ventana */
        height: 100dvh !important;      /* Dynamic viewport height para móviles */
        margin: 0 !important;           /* Sin márgenes */
        padding: 10px !important;       /* Padding pequeño */
        position: relative !important;  /* Posición relativa */
        display: block !important;      /* Display block */
        overflow-y: auto !important;    /* Scroll vertical */
        background-color: rgba(0, 0, 0, 0.8) !important; /* Fondo semi-transparente */
        flex-shrink: 0 !important;      /* No se encoge */
        max-height: 100vh !important;   /* Máximo alto de ventana */
        max-height: 100dvh !important;  /* Máximo dynamic viewport height */
    }
}

/* ===== CONFIGURACIÓN ESPECÍFICA PARA PANTALLAS HASTA 311px ===== */
@media only screen and (max-height: 311px) and (orientation: landscape) {
    /* ASEGURAR QUE EL REPRODUCTOR ESTÉ OCULTO EN HORIZONTAL INICIAL */
    #divconvideo {
        display: none !important;
    }
    
    /* PERMITIR QUE EL REPRODUCTOR SE MUESTRE CUANDO TIENE LA CLASE SHOW */
    #divconvideo.show {
        display: flex !important;
        flex-direction: row !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999999 !important;
        background-color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    /* ASEGURAR QUE EL VIDEO SEA VISIBLE EN HORIZONTAL */
    #divconvideo.show video,
    #divconvideo.show #hls-example_html5_api,
    #divconvideo.show .vjs-tech {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* CONFIGURACIÓN DEL REPRODUCTOR EN HORIZONTAL */
    #divconvideo.show #fullscreen,
    #divconvideo.show #doonplayer,
    #divconvideo.show #element {
        width: 85% !important;          /* Actualizado a 85% para consistencia */
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
    
    /* CONFIGURACIÓN DE LA LISTA DE CANALES EN HORIZONTAL */
    #divconvideo.show #listcanales {
        width: 15% !important;          /* Actualizado a 15% para consistencia */
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 10px !important;
        position: relative !important;
        display: block !important;
        overflow-y: auto !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
        flex-shrink: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
    
    /* ELEMENTOS NO NECESARIOS EN HORIZONTAL - ELIMINADOS */
    
    .videoPlayerLayout {
        display: none !important;
    }
    
    /* MOSTRAR SOLO LA LISTA DE CANALES EN PANTALLAS PEQUEÑAS HORIZONTALES */
    #listcanales {
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 20px !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        display: block !important;
        overflow-y: auto !important;
        background-color: #000 !important;
        z-index: 1000 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
    
    /* ESTILOS PARA LOS CANALES EN HORIZONTAL */
    #listcanales .channel {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        cursor: pointer !important;
    }
    
    #listcanales .channel img {
        width: 60px !important;
        height: 40px !important;
        margin-right: 15px !important;
        border-radius: 5px !important;
    }
    
    #listcanales .channel .number {
        font-size: 18px !important;
        font-weight: bold !important;
        color: #fff !important;
        margin-right: 15px !important;
    }
}

/* ===== CONFIGURACIÓN CUANDO EL REPRODUCTOR ESTÁ VISIBLE ===== */
/* Esta configuración se maneja ahora en las media queries específicas */

/* ===== CONFIGURACIÓN ESPECÍFICA PARA MÓVILES EN HORIZONTAL ===== */
/* Esta sección se ha consolidado con la sección principal de horizontal */

/* ===== BOTONES DE PRUEBA ELIMINADOS ===== */

/* ===== REGLA FINAL PARA SOBRESCRIBIR SMART TV EN MÓVILES - MÁXIMA PRIORIDAD ===== */
@media only screen and (max-width: 1024px) and (orientation: portrait) {
    /* SOBRESCRIBIR COMPLETAMENTE LOS ESTILOS DE SMART TV EN MÓVILES VERTICAL */
    html body #divconvideo.show video,
    body #divconvideo.show video,
    html body #divconvideo.show #hls-example_html5_api,
    body #divconvideo.show #hls-example_html5_api,
    html body #divconvideo.show .vjs-tech,
    body #divconvideo.show .vjs-tech,
    html body #divconvideo[style*="display: block"] video,
    body #divconvideo[style*="display: block"] video,
    html body #divconvideo[style*="display: block"] #hls-example_html5_api,
    body #divconvideo[style*="display: block"] #hls-example_html5_api,
    html body #divconvideo[style*="display: block"] .vjs-tech,
    body #divconvideo[style*="display: block"] .vjs-tech {
        /* FORZAR CENTRADO EN MÓVILES VERTICAL - SOBRESCRIBE SMART TV */
        width: 100% !important;
        height: 28% !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        top: 50% !important;            /* SOBRESCRIBE top: 0 de Smart TV */
        left: 50% !important;           /* SOBRESCRIBE left: 0 de Smart TV */
        transform: translate(-50%, -50%) !important; /* Centrado perfecto */
        display: block !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-width: auto !important;
        min-height: auto !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        border: none !important;
        outline: none !important;
        float: none !important;
        clear: none !important;
        text-align: center !important;
    }
}

/* ===== REGLA FINAL CON MÁXIMA ESPECIFICIDAD PARA PANTALLAS HASTA 311px ===== */
@media only screen and (max-height: 311px) and (orientation: landscape) {
    /* ASEGURAR QUE EL REPRODUCTOR ESTÉ OCULTO EN HORIZONTAL INICIAL */
    #divconvideo {
        display: none !important;
    }
    
    /* PERMITIR QUE EL REPRODUCTOR SE MUESTRE CUANDO TIENE LA CLASE SHOW */
    #divconvideo.show {
        display: flex !important;
        flex-direction: row !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999999 !important;
        background-color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    /* CONFIGURACIÓN DEL REPRODUCTOR EN HORIZONTAL PARA PANTALLAS PEQUEÑAS */
    #divconvideo.show #fullscreen,
    #divconvideo.show #doonplayer,
    #divconvideo.show #element {
        width: 70% !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
    
    /* VIDEO OPTIMIZADO PARA PANTALLAS PEQUEÑAS HORIZONTALES */
    html body #divconvideo.show #hls-example_html5_api.vjs-tech,
    body #divconvideo.show #hls-example_html5_api.vjs-tech,
    html body #divconvideo[style*="display: block"] #hls-example_html5_api.vjs-tech,
    body #divconvideo[style*="display: block"] #hls-example_html5_api.vjs-tech,
    html body #hls-example_html5_api.vjs-tech,
    body #hls-example_html5_api.vjs-tech {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        border: none !important;
        outline: none !important;
        float: none !important;
        clear: none !important;
        text-align: center !important;
    }
    
    /* CONFIGURACIÓN DE LA LISTA DE CANALES EN HORIZONTAL PARA PANTALLAS PEQUEÑAS */
    #divconvideo.show #listcanales {
        width: 30% !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 10px !important;
        position: relative !important;
        display: block !important;
        overflow-y: auto !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
        flex-shrink: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
}

/* ===== ESTILOS PARA SMART TV ===== */
/* ===== REGLAS ESPECÍFICAS PARA SMART TV (PANTALLAS GRANDES) ===== */
@media only screen and (min-width: 1025px) {
    /* Mostrar reproductor en Smart TV cuando tiene clase show */
    html body #divconvideo.show,
    body #divconvideo.show,
    #divconvideo.show {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        background-color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }
    
    /* Contenedores del reproductor en Smart TV */
    html body #divconvideo.show #fullscreen,
    html body #divconvideo.show #doonplayer,
    html body #divconvideo.show #element,
    body #divconvideo.show #fullscreen,
    body #divconvideo.show #doonplayer,
    body #divconvideo.show #element {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Video en Smart TV */
    html body #divconvideo.show video,
    body #divconvideo.show video,
    html body #divconvideo.show #hls-example_html5_api,
    body #divconvideo.show #hls-example_html5_api,
    html body #divconvideo.show .vjs-tech,
    body #divconvideo.show .vjs-tech {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Lista de canales en Smart TV (oculta cuando el reproductor está abierto) */
    html body #divconvideo.show #listcanales {
        display: none !important;
    }
    
    /* Botones de control en Smart TV */
    html body #divconvideo.show #cont_play,
    body #divconvideo.show #cont_play,
    html body #divconvideo.show #playbtton,
    body #divconvideo.show #playbtton,
    html body #divconvideo.show #close-player,
    body #divconvideo.show #close-player {
        position: absolute !important;
        z-index: 1000000 !important;
        display: block !important;
    }
    
    html body #divconvideo.show #close-player {
        top: 20px !important;
        right: 20px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        color: white !important;
        border: none !important;
        padding: 10px 15px !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        font-size: 16px !important;
    }
    
    html body #divconvideo.show #cont_play {
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    html body #divconvideo.show #playbtton {
        background: rgba(0, 0, 0, 0.7) !important;
        color: white !important;
        border: none !important;
        padding: 15px 20px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        font-size: 24px !important;
    }
}