.vjs-theme-city {
    --vjs-theme-city--primary: #00b3ff00;
    --vjs-theme-city--secondary: #fff;
}

.my-video.video-js .vjs-big-play-button {
    font-size: 3em;
    line-height: 1.5em;
    height: 1.63332em;
    width: 3em;
    display: inline-block;
    position: absolute;
    top: 52%;
    left: 49.5%;
    padding: 0;
    margin-top: -0.81666em;
    margin-left: -1.5em;
    cursor: pointer;
    opacity: 1;
    border: none;
    background-color: transparent;
    border-radius: none;
    transition: 3s;
    color: black;
}

.my-video.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    height: 50px;
    width: 50px;
    left: 27%;
    border-radius: 50%;
    background-color: #ffffff;
    display: grid;
    place-content: center;
    cursor: pointer;
}

.video-js .vjs-subs-caps-button .vjs-icon-placeholder::before,
.video-js .vjs-subtitles-button .vjs-icon-placeholder::before,
.video-js.video-js:lang(en-AU)
    .vjs-subs-caps-button
    .vjs-icon-placeholder::before,
.video-js.video-js:lang(en-GB)
    .vjs-subs-caps-button
    .vjs-icon-placeholder::before,
.video-js.video-js:lang(en-IE)
    .vjs-subs-caps-button
    .vjs-icon-placeholder::before,
.video-js.video-js:lang(en-NZ)
    .vjs-subs-caps-button
    .vjs-icon-placeholder::before,
.vjs-icon-subtitles::before {
    content: "";
    background-image: url(../../../../../images/VideoPlayer-icon/subtitle.svg) !important;
    width: 60%;
    height: 69%;
    top: 37%;
    left: 51%;
    background-size: 24px;
}

.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before,
.vjs-icon-volume-mute::before {
    content: "";
    background-image: url(../../../../../images/VideoPlayer-icon/MuteIcon.svg) !important;
    width: 24%;
    height: 29%;
    top: 19%;
    left: 26%;
    background-size: 15px;
}

body.light-theme span{
    color: white !important;
}

.video-js .vjs-mute-control .vjs-icon-placeholder:before {
    content: "";
    background-image: url(../../../../../images/VideoPlayer-icon/Volume.svg);
    width: 60%;
    height: 32%;
    top: 17%;
    left: 12px;
    background-size: 31px;
}

.my-video.video-js
    .vjs-picture-in-picture-control
    .vjs-icon-placeholder:before {
    background-image: url(../../../../../images/VideoPlayer-icon/pip.svg);
    left: 7px;
}

.video-js .vjs-quality-selector{
    left: 10px;
}

.vjs-menu-button .vjs-menu-button-popup .vjs-control .vjs-button .vjs-quality-selector {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.my-video.vjs-fluid {
    padding-top: 0 !important;
    height: 98vh !important;
}

.my-video.video-js .vjs-tech {
    object-fit: contain;
}

.my-video.video-js.vjs-playing{
  pointer-events: auto;
}

.vjs-has-started .vjs-big-play-button {
    pointer-events: none;
}

.vjs-paused .vjs-big-play-button {
    pointer-events: none;
}

.my-video.vjs-theme-city .vjs-control-bar {
    height: 64px;
}

.my-video.video-js .vjs-control-bar {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    background: var(--plyr-video-controls-background, linear-gradient(transparent, rgb(0 0 0 / 0%)));
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    z-index: 3;
}

.my-video.vjs-theme-city .vjs-play-control .vjs-icon-placeholder:before {
    margin-top: 0.33em;
    border-radius: 4px;
    border: 0px solid #fff0;
    font-size: 28px;
}

.my-video.vjs-button > .vjs-icon-placeholder:before {
    font-size: 3em;
}

.my-video.vjs-theme-city .vjs-play-control .vjs-icon-placeholder.vjs-svg-icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    fill: currentColor;
    height: 3.8em;
    width: 3.8em;
}

.my-video.vjs-theme-city .vjs-play-control:hover .vjs-icon-placeholder:before {
    border: 0px solid var(--vjs-theme-city--secondary);
    background: var(--vjs-theme-city--primary);
}

.my-video.vjs-theme-city .vjs-volume-panel {
    order: 1;
}

.my-video.video-js .vjs-volume-bar {
    margin: 0;
}

.my-video.vjs-volume-bar.vjs-slider-horizontal {
    width: 5em;
    height: 0.5em;
}

.my-video.video-js
    .vjs-volume-panel
    .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,
.my-video.video-js
    .vjs-volume-panel
    .vjs-volume-control:active.vjs-volume-horizontal,
.my-video.video-js
    .vjs-volume-panel.vjs-hover
    .vjs-mute-control
    ~ .vjs-volume-control.vjs-volume-horizontal,
.my-video.video-js
    .vjs-volume-panel.vjs-hover
    .vjs-volume-control.vjs-volume-horizontal,
.my-video.video-js
    .vjs-volume-panel:active
    .vjs-volume-control.vjs-volume-horizontal,
.my-video.video-js
    .vjs-volume-panel:focus
    .vjs-volume-control.vjs-volume-horizontal {
    width: 5em;
    height: 2em;
    margin-top: 1.25em;
    top: 1.25em;
}

.vjs-volume-panel .vjs-control .vjs-volume-panel-vertical {
    right: 10px;
}

.my-video.vjs-theme-city .vjs-progress-control {
    font-size: 12px;
}

.my-video.video-js .vjs-slider {
    border-radius: 3px;
}

.my-video.vjs-slider-horizontal .vjs-volume-level {
    height: 0.5em;
}

.my-video.video-js .vjs-volume-level:before {
    font-size: 1.4em;
}

.my-video.video-js .vjs-progress-holder .vjs-load-progress,
.my-video.video-js .vjs-progress-holder .vjs-load-progress div,
.video-js .vjs-progress-holder .vjs-play-progress {
    border-radius: 3px;
}

.my-video.vjs-theme-city .vjs-play-progress:before {
    border-radius: 0.8em;
}

.my-video.vjs-theme-city .vjs-play-progress {
    background-color: #1e94f5;
}

.my-video.vjs-theme-city .vjs-play-progress:before {
    background-color: white;
}

.my-video.video-js .vjs-progress-holder {
    flex: auto;
    transition: all 0.2s;
    height: 0.2em;
}

.my-video.video-js .vjs-time-tooltip {
    border-radius: 1.3em;
    top: -3.8em;
}

.my-video.video-js
    .vjs-progress-control:hover
    .vjs-progress-holder:focus
    .vjs-time-tooltip,
.my-video.video-js .vjs-progress-control:hover .vjs-time-tooltip {
    font-size: 0.8em;
}

.vjs-playback-rate .vjs-playback-rate-value {
    line-height: 3em;
    left: 15%;
}

.my-video.vjs-menu li {
    padding: 0.5em 0;
    line-height: 1.5em;
    font-size: 1.5em;
}

.my-video.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background-color: #2b333f;
    background-color: rgb(0 0 0 / 70%);
    position: absolute;
    width: 100%;
    bottom: 3.5em;
    max-height: 25em;
    border-radius: 5px;
    font-size: 13px;
}

.my-video.video-js .vjs-control.vjs-menu-button {
    height: 50%;
    border-radius: 3px;
    margin-bottom: 22px;
    margin-top: 10px;
    margin-right: 10px;
}

.vjs-icon-picture-in-picture-enter:before,
.my-video.video-js
    .vjs-picture-in-picture-control
    .vjs-icon-placeholder:before {
    line-height: 62.57px;
}

.vjs-icon-play,
.my-video.video-js .vjs-play-control .vjs-icon-placeholder,
.my-video.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}

.my-video.video-js .vjs-fullscreen-control .vjs-icon-placeholder,
.my-video.video-js .vjs-fullscreen-control .vjs-icon-placeholder,
.vjs-icon-fullscreen-enter {
    font-size: 1.3em;
}

/* .vjs-icon-fullscreen-enter:before,
.my-video
.video-js
.vjs-fullscreen-control
.vjs-icon-placeholder:before {
content: "\f108";
line-height: 2.1em;
} */

.my-video.video-js .vjs-mute-control {
    cursor: pointer;
    flex: none;
    line-height: 3.3em;
    margin-top: 10px;
    right: 5px;
}

.vjs-fullscreen-control .vjs-icon-placeholder:before {
    content: "\f108";
    font-size: 30px;
    margin-top: 7px;
}

.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,
.vjs-icon-fullscreen-exit:before ~ .custom-skip-backward-button {
    display: inline-block;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.my-video.vjs-theme-city .vjs-progress-control .vjs-progress-holder,
.my-video.vjs-theme-city .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 1.5em;
}

.my-video.vjs-play-progress .vjs-svg-icon {
    position: absolute;
    top: -0.7em;
    right: -0.4em;
    width: 1.7em;
    height: 1.5em;
    pointer-events: none;
    line-height: 0.15em;
    z-index: 1;
}

.my-video.video-js .vjs-remaining-time {
    display: block;
}

.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,
.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
    content: "";
}

.my-video.video-js .vjs-time-control {
    flex: none;
    font-size: 1.3em;
    line-height: 4.8em;
    display: block;
    left: 3px;
}

.video-js .vjs-volume-level{
    right: -6px !important;
}

.video-js .vjs-time-control{
    padding-left: 1px !important;
}

.my-video.vjs-paused .vjs-big-play-button {
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.5s;
}

.my-video.vjs-big-play-button .vjs-svg-icon {
    width: 1.2em;
    height: 1.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 0;
    transform: translate(-50%, -50%);
}

.my-video.vjs-theme-city .vjs-fullscreen-control {
    order: 3;
}

.fds {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: x-large;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.my-video.video-js .vjs-mute-control .vjs-icon-placeholder.vjs-svg-icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    fill: currentColor;
    height: 2.8em;
    width: 2.8em;
}

.my-video.vjs-play-progress .vjs-svg-icon {
    position: absolute;
    top: -0.35em;
    right: -0.4em;
    width: 0.9em;
    height: 0.9em;
    pointer-events: none;
    line-height: 0.1em;
    z-index: 1;
}

.my-button {
    display: block;
}

.my-video.video-js .vjs-modal-dialog {
    background: #454545;
    overflow: visible;
    box-shadow: 5px 5px 10px gray;
    border-radius: 2px;
}

.vjs-modal-dialog .vjs-modal-dialog-content {
    padding: 20px 24px;
    z-index: 1;
    display: flex;
}

.speech-bubble {
    background: #454545;
    color: #fff;
    position: relative;
    text-align: center;
    vertical-align: top;
    min-width: 7em;
}

.speech-bubble:after {
    border: 2em solid transparent;
    border-top-color: #454545;
    content: "";
    position: absolute;
    top: 100%;
    left: 80%;
    width: 0;
    height: 0;
}

.my-video.video-js.vjs-quality-selector {
    display: block;
}

.my-video.video-js.vjs-http-source-selector {
    display: block;
}

.my-video.vjs-icon-cog:before {
    content: "\f114";
    font-size: x-large;
}

.backbutton {
    pointer-events: auto;
    position: absolute;
    color: white;
    top: 0;
    background: transparent;
    z-index: 1;
}

.custom-skip-forward-button,
.custom-skip-backward-button {
    color: white;
    background: transparent;
    border: none;
    padding: 0px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 2em;
    position: absolute;
    top: calc(100% - 51%);
    width: 40px;
    height: 40px;
}

.custom-skip-forward-button{
    left: 63%;
}

.custom-skip-backward-button{
    left: 33%;
}

.custom-skip-forward-button svg,
.custom-skip-backward-button svg {
    width: 36px;
    height: 36px;
}

.vjs-fullscreen .custom-skip-forward-button,
.vjs-fullscreen .custom-skip-backward-button {
    width: 70px;
    height: 70px;
    font-size: 2.5em;
    padding: 0px 35px;
    position: absolute;
    top: calc(100% - 52.5%);
}

.vjs-fullscreen .custom-skip-forward-button svg,
.vjs-fullscreen .custom-skip-backward-button svg {
    width: 42px;
    height: 42px;
}

.vjs-title-bar {
    /* display: inline-block; */
    position: absolute;
    background: transparent;
    z-index: 1;
    top: 5.6%;
    left: 4%;
    color: white;
    font-size: 20px;
    font-weight: 500;
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-left: 3px solid #fd0000;
    padding-left: 10px;
    height: 25px;
    display: flex;
    align-items: center;
}

.vjs-fg-skip-button{
    bottom: 8.3em !important;
    left: 86%;
    border: 2px solid !important;
    right: 0 !important;
    width: 10% !important;
}

.ad-information-card {
    position: absolute;
    top: 70px;
    right: 30px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    z-index: 100;
}

.skipRecapWrapper {
    bottom: 70px;
    right: 50px;
}

.skipText {
    font-size: 15px;
}

.endCard {
    position: relative;
    z-index: 1;
}

.endCardBanner {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.endCardImage {
    animation: zoomIn 0.5s linear;
}

@keyframes zoomIn {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

/* .customVideoPlayer .vjs-icon-placeholder::before {
content: "" !important;
} */

.my-video.video-js .vjs-control.kkk {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 1.2em;
    flex: none;
    background: none;
    line-height: 60px;
    font-size: 25px;
    border: none;
    top: -9px;
    left: -190%;
    color: #ffffff;
}

.video-js .vjs-time-control {
    display: block;
}

/* .video-js .vjs-remaining-time{display: none;} */

.my-video.video-js:hover .vjs-big-play-button {
    border-color: #fff;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5);
    transition: all 3s;
}

/* .my-video.video-js.vjs-user-active.vjs-big-play-button {
  display: block !important;
  visibility: visible;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
} */

.my-video.vjs-controls-disabled .vjs-big-play-button .vjs-icon-placeholder,
.my-video.vjs-has-started .vjs-big-play-button .vjs-icon-placeholder,
.my-video.vjs-using-native-controls .vjs-big-play-button .vjs-icon-placeholder {
    content: "\f103";
}

.my-video.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
    content: "\f103" !important;
    /* pointer-events: auto; */
}

/* .my-video.vjs-paused .vjs-big-play-button {
  display: block !important;
} */

.my-video.video-js button {
    background: transparent;
    border: none;
    color: white;
    display: inline-block;
    font-size: 13px;
    text-transform: capitalize;
    text-decoration: none;
    /* transition: none; */
    appearance: none;
    /* font-family: "Poppins"; */
    font-weight: 500;
}

.vjs-button > .vjs-icon-placeholder {
    display: block;
    line-height: 3em;
}

.my-video.video-js:hover .vjs-big-play-button,
.my-video.video-js .vjs-big-play-button:focus {
    border-color: #fff;
    background-color: transparent;
}

.my-video .vjs-audio-button {
    display: block !important;
}

/* .my-video .vjs-subtitles-button {
display: block !important;
} */

.vjs-captions-button {
    display: block !important;
}

.my-video.vjs-button:focus-visible {
    outline: transparent;
}

.my-video.video-js .vjs-volume-panel .vjs-volume-control {
    visibility: visible;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 45px 0px 0px 4px;
}

.my-video.video-js.vjs-volume-level {
    background-color: #095ae5;
}

.my-video.video-js.vjs-playing
    .vjs-big-play-button
    .vjs-icon-placeholder:before {
    content: "\f103";
    /* pointer-events: all; */
}

.vjs-icon-play,
.my-video .video-js .vjs-play-control .vjs-icon-placeholder,
.my-video.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
    font-family: VideoJs;
    font-weight: normal;
    font-style: normal;
    font-size: 36px;
}

.my-video.video-js:hover .vjs-big-play-button,
.my-video.video-js .vjs-big-play-button:focus {
    border-color: #fff;
    background-color: transparent;
    transition: all 0s;
}

.vjs-icon-play:before,
.my-video .video-js .vjs-play-control .vjs-icon-placeholder:before,
.my-video.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "\f101";
    /* font-size: 2em; */
}

.vjs-loading-spinner-myvideo {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.85;
    text-align: left;
    border: 0.3em solid #095ae5;
    box-sizing: border-box;
    background-clip: padding-box;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    visibility: hidden;
}

.vjs-seeking .vjs-loading-spinner-myvideo,
.vjs-waiting .vjs-loading-spinner-myvideo {
    display: block;
    animation: vjs-spinner-showw 0s linear 0.3s forwards;
}

.vjs-error .vjs-loading-spinner-myvideo {
    display: none;
}

.vjs-loading-spinner-myvideo:before,
.vjs-loading-spinner-myvideo:after {
    content: "";
    position: absolute;
    margin: -0.3em;
    box-sizing: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: 1;
    border: inherit;
    border-color: transparent;
    border-top-color: #095ae5;
}

.vjs-seeking .vjs-loading-spinner-myvideo:before,
.vjs-seeking .vjs-loading-spinner-myvideo:after,
.vjs-waiting .vjs-loading-spinner-myvideo:before,
.vjs-waiting .vjs-loading-spinner-myvideo:after {
    animation: vjs-spinner-spinn 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,
        vjs-spinner-fadee 1.1s linear infinite;
}

.vjs-seeking .vjs-loading-spinner-myvideo:before,
.vjs-waiting .vjs-loading-spinner-myvideo:before {
    border-top-color: deepskyblue;
}

.vjs-seeking .vjs-loading-spinner-myvideo:after,
.vjs-waiting .vjs-loading-spinner-myvideo:after {
    border-top-color: deepskyblue;
    animation-delay: 0.44s;
}

@keyframes vjs-spinner-showw {
    to {
        visibility: visible;
    }
}

@keyframes vjs-spinner-spinn {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes vjs-spinner-fadee {
    0% {
        border-top-color: #095ae5;
    }

    20% {
        border-top-color: #095ae5;
    }

    35% {
        border-top-color: deepskyblue;
    }

    60% {
        border-top-color: #095ae5;
    }

    100% {
        border-top-color: #095ae5;
    }
}

.my-video.vjs-live .vjs-progress-control {
    display: flex;
}

.my-video.video-js .vjs-live-control {
    display: contents;
    align-items: center;
    line-height: 2em;
    padding: 10px;
    font-family: Roboto;
    font-weight: 600;
    font-size: 18px;
}

.my-video.video-js .vjs-live-control .vjs-hidden {
    display: contents !important;
}

.live_dot {
    color: red;
    font-size: 60px;
}

.vjs-menu-button-popup .vjs-menu {
    display: none;
    position: absolute;
    bottom: 0;
    width: 10em;
    left: -2.2em;
    height: 0em;
    margin-bottom: 2.5em;
    border-top-color: rgba(43, 51, 63, 0.7);
}

.vjs-menu-button-popup .vjs-menu::after {
    content: "";

    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 8px;
    border-style: solid;
    border-color: #2b333f transparent transparent transparent;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    position: absolute;
    width: 100%;
    bottom: 0.9em;
    max-height: 15em;
    background-color: #2b333f;
    border-radius: 5px;
}

.vjs-menu li {
    list-style: none;
    margin: 0;
    padding: 0.6em 0;
    line-height: 1.2em;
    font-size: 1.2em;
    font-family: Roboto;
    text-align: center;
    text-transform: capitalize;
}
.vjs-menu-item {
    line-height: 5em;
}

.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover,
.js-focus-visible .vjs-menu li.vjs-selected:hover {
    color: white;
    background-color: #095ae5;
}

.vjs-menu li.vjs-menu-item:focus,
.vjs-menu li.vjs-menu-item:hover,
.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
    /* background-color: #73859f; */
    background-color: #095ae5;
}

.my-video.video-js .vjs-play-progress:before {
    font-size: 0.8em;
    position: absolute;
    right: -0.5em;

    z-index: 1;
    text-align: center;
    color: white;
    background-color: white;
}

.my-video.video-js .vjs-slider {
    position: relative;
    cursor: pointer;
    padding: 0;
    margin: 0 0.45em 0 0.55em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    background-color: #73859f;
}

.my-video.video-js .vjs-load-progress div {
    background: #73859f;
}

.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,
.video-js .vjs-volume-panel:active .vjs-volume-control,
.video-js .vjs-volume-panel:focus .vjs-volume-control,
.video-js .vjs-volume-panel .vjs-volume-control:active,
.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
    visibility: visible;
    opacity: 1;
    position: relative;
    transition: none;
    font-size: 1.3em;
}

.vjs-volume-bar.vjs-slider-horizontal {
    width: 0.3em;
    height: 8em;
    margin: 1.35em auto;
}

@supports (-ms-ime-align: auto) {
    /* Microsoft Edge specific CSS here */
    .vjs-text-track-cue{
        inset: 535px 0px 0px !important;
    }
}

.vjs-text-track-cue{
    white-space: pre-line !important;
    inset: 500px 0px 0px !important;
    height: 65px !important;
    font-size: 20px !important;
}

.vjs-text-track-cue div{font-size: 22px !important;background-color: rgb(0 0 0 / 25%) !important;}

.vjs-fullscreen .vjs-text-track-cue{
    inset: 645px 0px 0px !important;
}

@media only screen and (max-width: 400px) {
    .vjs-fullscreen .custom-skip-backward-button {
        left: 17% !important;
    }
}

/* For screens up to 600px */
@media only screen and (max-width: 600px) {
    .my-video.vjs-paused .vjs-big-play-button {
        pointer-events: auto !important;
    }
    .vjs-has-started .vjs-big-play-button {
        pointer-events: auto !important;
    }
    .vjs-title-bar {
        font-size: 15px !important;
        left: 10% !important;
    }
    .custom-skip-forward-button,
    .custom-skip-backward-button {
        top: calc(100% - 55%);
    } 
    .custom-skip-backward-button {
        left: 27%;
    }
    .vjs-fullscreen .custom-skip-forward-button,
    .vjs-fullscreen .custom-skip-backward-button {
        top: calc(100% - 53%);
    } 
    .vjs-fullscreen .custom-skip-backward-button {
        left: 23%;
    }
    .my-video.vjs-fluid {
        padding-top: 0 !important;
        height: 45vh !important;
    }
    .live_dot {
        color: red;
        font-size: 60px;
        right: 62%;
        position: relative;
        top: 11%;
    }
    .my-video.video-js .vjs-live-control {
        line-height: 0.6em;
    }
    .vjs-text-track-cue{
        inset: 166.812px 0px 0px !important;
    }
    .vjs-text-track-cue div{
        font-size: 10px !important;
    }
    .staticback-btn {
        top: 3% !important;
        font-size: 15px !important;
    }

    .my-video.video-js button {
        font-size: 9px;
    }
    .my-video.video-js .vjs-tech {
        object-fit: contain;
    }
    [title*="Picture-in-Picture"] {
        display: none !important;
    }
    .video-js .vjs-mute-control .vjs-icon-placeholder:before,
    .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before,
    .vjs-icon-volume-mute::before,
    .my-video.video-js
        .vjs-picture-in-picture-control
        .vjs-icon-placeholder:before {
        content: "" !important;
        display: none !important;
    }
    .vjs-icon-cog:before {
        line-height: 4.5em;
        font-size: 10px;
    }
    .my-video.video-js .vjs-control.vjs-menu-button {
        width: 5%;
    }
    .vjs-control-bar {
        top: 85%;
    }
    .vjs-fullscreen-control .vjs-icon-placeholder:before {
        font-size: 20px;
        margin-top: 17px;
    }
    .vjs-button > .vjs-icon-placeholder {
        line-height: 5em !important;
    }

    /* resoltion & settings */
    .vjs-menu-button-popup .vjs-menu {
        position: absolute;
        bottom: 0;
        width: 10em;
        left: -3.3em;
        height: 0;
        margin-bottom: 2.7em;
    }

    .vjs-control-bar {
        margin-top: 5%;
    }

    .my-video.video-js .vjs-time-control {
        font-size: 1.2em;
        line-height: 5.5em;
    }

    .vjs-watermark {
        top: 65% !important;
        left: 80% !important;
    }

    .vjs-settings-menu{
        padding-left: 15px;
    }
    .video-js .vjs-time-control{
        padding-right: 0px !important;
    }
}

@media (max-width: 767px) {
    .vjs-volume-panel.vjs-control.vjs-volume-panel-vertical {
        display: none;
    }
    .vjs-text-track-cue{
        inset: 150px 0px 0px !important;
    }
    .vjs-text-track-cue div{
        font-size: 10px !important;
    }
    .vjs-fullscreen .vjs-text-track-cue {
        inset: 515px 0px 0px !important;
    }
}

/* Screens between 600px and 767px */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    .custom-skip-forward-button,
    .custom-skip-backward-button {
        top: calc(100% - 55%);
    } 
    .vjs-text-track-cue{
        inset: 175px 0px 0px !important;
        height: 45px !important;
    }
    .vjs-text-track-cue div{font-size: 15px !important;}
    .vjs-fullscreen .vjs-text-track-cue{
        inset: 560px 0px 0px !important;
    }
    .vjs-title-bar {
        font-size: 15px !important;
        left: 6% !important;
        top: 5% !important;
    }
    .my-video.vjs-fluid {
        padding-top: 0 !important;
        height: 45vh !important;
    }
    .live_dot {
        color: red;
        font-size: 60px;
        right: 62%;
        position: relative;
        top: 11%;
    }
    .my-video.video-js .vjs-live-control {
        line-height: 0.6em;
    }
    .staticback-btn {
        top: 3% !important;
        font-size: 15px !important;
    }
    .my-video.video-js button {
        font-size: 9px;
    }
    .my-video.video-js .vjs-tech {
        object-fit: contain;
    }
    [title*="Picture-in-Picture"] {
        display: none !important;
    }
    .video-js .vjs-mute-control .vjs-icon-placeholder:before,
    .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before,
    .vjs-icon-volume-mute::before,
    .my-video.video-js
        .vjs-picture-in-picture-control
        .vjs-icon-placeholder:before {
        content: "" !important;
        display: none !important;
    }
    .vjs-icon-cog:before {
        line-height: 4.5em;
        font-size: 10px;
    }
    .my-video.video-js .vjs-control.vjs-menu-button {
        width: 5%;
    }
    .vjs-control-bar {
        top: 90%;
        margin-top: 0%;
    }
    .vjs-fullscreen-control .vjs-control-bar {
        top: 95%;
        margin-top: -3%;
    }
    .vjs-fullscreen-control .vjs-icon-placeholder:before {
        font-size: 20px;
        margin-top: 17px;
    }
    .vjs-button > .vjs-icon-placeholder {
        line-height: 5em !important;
    }
    /* resoltion & settings */
    .vjs-menu-button-popup .vjs-menu {
        position: absolute;
        bottom: 0;
        width: 10em;
        left: -3.3em;
        height: 0;
        margin-bottom: 2.7em;
    }
    .my-video.vjs-theme-city .vjs-play-control .vjs-icon-placeholder:before {
        font-size: 25px !important;
    }
    /* .vjs-watermark{
    top: 65% !important;
    left: 80% !important;
  } */
}

/* Screens between 768px and 991px */
/* @media only screen and (min-width: 768px) and (max-width: 991px) {
    .custom-skip-backward-button
    .custom-skip-forward-button {
        right: 30%;
        top: -108px !important;
    }
} */

/* Screens between 992px and 1199px */
@media only screen and (min-width: 769px) and (max-width: 1201px) {
    .my-video.video-js .vjs-tech {
        object-fit: contain;
    }
    .vjs-text-track-cue {
        inset: 395px 0px 0px !important;
    }
    .vjs-fullscreen .vjs-text-track-cue{
        inset: 550px 0px 0px !important;
    }
}

/* Screens 1200px and 1339px */
@media only screen and  (min-width: 1201px) and (max-width: 1339px) {
    .vjs-text-track-cue {
        inset: 405px 0px 0px !important;
    }
    .vjs-fullscreen .vjs-text-track-cue{
        inset: 545px 0px 0px !important;
    }
}

@media only screen and  (min-width: 1400px) {
    .vjs-text-track-cue {
        inset: 455px 0px 0px !important;
    }
    .vjs-fullscreen .vjs-text-track-cue{
        inset: 620px 0px 0px !important;
    }
}