/*need for dynamic size*/
.vp-controlbar svg {
    height: 0px;
    width: 0px;
}

.vp-overlay {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, .4);

    display: -webkit-box !important;
    display: -moz-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}


.vp-window,
.vp-window * {
    user-select: none;
    /* Safari */
    -webkit-user-select: none;
    /* IE/Edge */
    -ms-user-select: none;
}

.vp-window {
    overflow: hidden;
    background-color: #000;

    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

@media (min-width: 768px) {
    .vp-overlay {
        top: 0;
    }

    .vp-window {
        max-height: 95vh;
        max-width: 95vw;
    }

    .vp-product-video,
    .vp-product-video video {
        max-height: calc(-30px + 95vh);
    }
}

@media (max-width: 767px) {
    .vp-overlay {
        top: -10%;
    }

    .vp-window {
        max-height: 90vh;
        max-width: 95vw;
        margin: 0 !important;
    }

    .vp-product-video,
    .vp-product-video video {
        max-height: calc(-30px + 90vh);
    }
}

@media (max-width: 992px) {
    .vp-window {
        margin-left: -15px;
        margin-right: -15px;
    }
}

.youtube_previews {
    cursor: pointer;
    border-color: #fff;
    border-width: 3px;
    border-style: solid;
    border-radius: 3px;
    overflow-y: auto;
    height: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    flex-direction: column;
}

.youtube_previews>img {
    margin: 5px;
}

.vp-product-video {
    overflow: auto;
    object-fit: contain;
    margin: 15px 0;

    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;

    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    flex-direction: row;
}

.vp-product-video video {
    width: 100%;
    background-color: black !important;
    object-fit: contain;

    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;

    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    flex-direction: row;
}

.ytp-embed-playlist .ytp-playlist-menu {
    left: none !important;
    width: 120px !important;
}

.vp-controlbar {
    position: absolute;
    right: 0;
    align-self: stretch;

    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    flex-direction: column;
    /*background-color: aqua;*/
}

.vp-controlbar div {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    flex-direction: column;
}

.vp-controlbar svg {
    fill: #FFFFFF;
    text-decoration: none;
    outline: 0;
    border-radius: 100%;
}

.vp-controlbar svg:hover {
    background-color: #17171a;
}

#close-btn {
    cursor: pointer;
}