html body main {

    .cv {
        width: 100%;
    }

    .pplc-video {
        border-radius: 8px;
        overflow:      hidden;
        @media only screen and (min-width: 1025px) {
            filter: drop-shadow(0px 40px 60px rgba(0, 0, 0, 0.24));
        }

        @media only screen and (max-width: 1024px) {
            border-radius: 16px;
            box-shadow:    0 40px 60px -20px rgba(0, 0, 0, 0.24);
        }
    }

    .cv-aspect {
        position:   relative;
        @media only screen and (min-width: 1025px) {
            aspect-ratio:  16/9;
            margin-bottom: -24px;
            margin-top:    -24px;
        }
        background: #000;
        overflow:   hidden;
        @media only screen and (max-width: 479px) {
            border-radius: 16px !important;
        }
    }

    .cv-video {
        width:      100%;
        height:     100%;
        display:    block;
        object-fit: cover;
        background: #000;
        @media only screen and (max-width: 479px) {
            margin-top:    -7px;
            margin-bottom: -7px;
        }
    }

    .cv-toggle,
    .cv-mute {
        position:   absolute;
        border:     0;
        background: transparent !important;
        cursor:     pointer;
        opacity:    0;
        transition: opacity .2s ease;
    }

    .cv-mute {
        padding: 0;
        @media only screen and (max-width: 479px) {
            bottom: 12px !important;
            right:  12px !important;
        }
    }

    /*.cv-toggle {*/
    /*    inset:       0;*/
    /*    margin:      auto;*/
    /*    width:       72px;*/
    /*    height:      72px;*/
    /*    display:     grid;*/
    /*    place-items: center;*/
    /*    padding:     0;*/
    /*}*/

    /*.cv-toggle svg,*/

    .cv-mute svg {
        width:         56px;
        height:        56px;
        padding:       12px;
        background:    #DD042B;
        border-radius: 100%;
        border:        0 !important;
        overflow:      visible;
    }

    .cv-mute svg {
        width:      20px;
        height:     20px;
        border:     0 !important;
        padding:    0;
        background: transparent;
        overflow:   visible;
    }

    .cv-toggle {
        position:        absolute;
        inset:           0;
        margin:          auto;
        width:           56px;
        height:          56px;
        display:         grid;
        place-items:     center;
        align-content:   center;
        justify-content: center;
        padding:         0;
    }

    .cv-toggle::before {
        content:       "";
        position:      absolute;
        inset:         0;
        width:         56px;
        height:        56px;
        border-radius: 50%;
        background:    #DD042B;
    }

    .cv-toggle svg {
        width:      24px;
        height:     24px;
        padding:    0; /* geen padding meer */
        background: none; /* cirkel zit op de knop */
        position:   relative; /* boven de pseudo */
        z-index:    1;
    }

    .cv-toggle svg path,
    .cv-mute svg path {
        width:         20px;
        height:        20px;
        color:         #fff;
        fill:          #fff;
        border-radius: 0 !important;
    }

    .cv-mute {
        bottom: 70px;
        right:  32px;
        width:  40px;
        height: 40px;
    }

    .cv-aspect:hover .cv-toggle,
    .cv-aspect:focus-within .cv-toggle {
        opacity:    1;
        transition: ease-in-out .3s all;
    }

    .cv-aspect:hover .cv-toggle:hover,
    .cv-aspect:focus-within .cv-toggle:hover {
        transform: scale(1.1);
    }

    .cv-aspect:hover .cv-mute,
    .cv-aspect:focus-within .cv-mute {
        opacity: .5;
    }

    .cv-aspect:hover .cv-mute:hover,
    .cv-aspect:focus-within .cv-mute:hover {
        opacity: 1;
    }

    .cv-toggle:focus-visible,
    .cv-mute:focus-visible {
        outline:        2px solid #fff;
        outline-offset: 2px;
    }


    /* Zorg dat de knop altijd boven de video ligt */

    .cv-aspect {
        position: relative;
    }

    .cv-video {
        position: relative;
        z-index:  1;
    }

    .cv-toggle,
    .cv-mute {
        z-index: 2;
    }

    /* Default: zichtbaar */

    .cv-toggle {
        opacity: 1;
    }

    /* Tijdens afspelen verbergen (overrulet hover-regels) */

    .cv.cv--playing .cv-toggle {
        opacity: 0 !important;
    }

    .cv.cv--playing:hover .cv-toggle {
        opacity: 1 !important;
    }

    /* Optioneel: zodra gepauzeerd/idle/ended, altijd tonen */

    .cv.cv--paused .cv-toggle,
    .cv.cv--idle .cv-toggle,
    .cv.cv--ended .cv-toggle {
        opacity: 1 !important;
    }

    @media only screen and (max-width: 479px) {
        /* Hover only op devices met muis */
        @media (hover: hover) and (pointer: fine) {
            .cv-aspect:hover .cv-toggle,
            .cv-aspect:focus-within .cv-toggle {
                opacity:    1;
                transition: ease-in-out .3s all;
            }

            .cv-aspect:hover .cv-toggle:hover,
            .cv-aspect:focus-within .cv-toggle:hover {
                transform: scale(1.1);
            }

            .cv-aspect:hover .cv-mute,
            .cv-aspect:focus-within .cv-mute {
                opacity: .5;
            }

            .cv.cv--playing:hover .cv-toggle {
                opacity: 1 !important;
            }
        }

        /* Touch devices: geen hover-gedrag; knoppen gewoon zichtbaar */
        @media (hover: none) {
            .cv-toggle {
                opacity: 1 !important;
            }

            .cv-mute {
                opacity: .75 !important;
            }
        }
    }
}