#VideoPopup {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 50;
    display: none;
    height: 100%;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#VideoPopup.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#VideoPopup .backdrop {
    position: absolute;
    z-index: 30;
    height: 100%;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(44 44 60 / var(--tw-bg-opacity));
    opacity: 0.97;
}

#VideoPopup .content {
    position: relative;
    z-index: 50;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    max-height: 500px;
    width: 100%;
    max-width: 800px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

@media (max-width: 900px) {

    #VideoPopup .content {
          max-height: 400px;
    }

    #VideoPopup .content {
          max-width: 600px;
    }
}

@media (max-width: 650px) {

    #VideoPopup .content {
          max-height: 250px;
    }

    #VideoPopup .content {
          max-width: 400px;
    }
}

#VideoPopup .mdi-close {
    position: absolute;
    top: -5.5rem;
    right: 0px;
    z-index: 40;
    cursor: pointer;
    font-size: 35px;
    --tw-text-opacity: 1;
    color: rgb(249 40 40 / var(--tw-text-opacity));
    opacity: 0.5;
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, fill, stroke, opacity, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
    -o-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
}

#VideoPopup .mdi-close:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
}

#VideoPopup iframe {
    position: absolute;
    z-index: 40;
    height: 100%;
    max-height: 500px;
    width: 100%;
    max-width: 800px;
    border-radius: 4px;
    --tw-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    --tw-shadow-colored: 0 2px 12px var(--tw-shadow-color);
    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (max-width: 900px) {

    #VideoPopup iframe {
          max-height: 400px;
    }

    #VideoPopup iframe {
          max-width: 600px;
    }
}

@media (max-width: 650px) {

    #VideoPopup iframe {
          max-height: 250px;
    }

    #VideoPopup iframe {
          max-width: 400px;
    }
}