.player-overlay{
    width: 100%;
    height: 100%;
}

/* Color style for Maxx-XS videojs player
   This will allow you to change the color style of the player
*/
#videoBox{
    width: 100%;
    height: 100%;
    /* hide scrollbars when scrubbing near the edges of the video */
    overflow: hidden;
}
.video-js {
    /* The main font color changes the ICON COLORS as well as the text */
    color: #ffffff;
}

/* The "Big Play Button" is the play button that shows before the video plays.
   To center it set the align values to center and middle. The typical location
   of the button is the center, but there is trend towards moving it to a corner
   where it gets out of the way of valuable content in the poster image.*/
.vjs-default-skin .vjs-big-play-button {
    border: 0.06666em solid #ffffff;
    border: none;
    transition: background ease-in 250ms !important;
}

.vjs-default-skin .vjs-big-play-button:focus, .video-js .vjs-big-play-button:hover {
    /* background: #FF4300; */
    background: rgb(123, 173, 233);
}

/* The default color of control backgrounds is mostly black but with a little
   bit of blue so it can still be seen on all-black video frames, which are common. */
.video-js .vjs-control-bar,
.video-js .vjs-menu-button .vjs-menu-content {
    background-color: transparent;
}

.video-js .vjs-big-play-button{
    background-color: #2d2d2d3b;
}

/* Slider - used for Volume bar and Progress bar */
.video-js .vjs-slider {
    background-color: rgba(150, 148, 148, 0.5);
}

/* The slider bar color is used for the progress bar and the volume bar
   (the first two can be removed after a fix that's coming) */
.video-js .vjs-slider-bar {
    background: rgba(0,0,0, 0.5);
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
    /* background: #FF4300 */
    background:rgb(123, 173, 233);
}

/* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress {
    /* For IE8 we'll lighten the color */
    background: rgba(0,0,0, 0.5);
}

/* The load progress bar also has internal divs that represent
   smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div {
    background: rgb(229 229 229 / 75%);
}

.video-js .vjs-control-bar button:hover .vjs-icon-placeholder, .video-js .vjs-trackselector-button:hover {
    /* color: #FF4300 !important; */
    color: rgb(123, 173, 233) !important;
    /* text-shadow: 0em 0em 1em #FF4300; */
    text-shadow: 0em 0em 1em rgb(123, 173, 233);
    transition: 0.25s;
    transition-timing-function: ease-in-out;
}

.vjs-icon-placeholder::before {
    font-size: 4em;
}

.videojs-mediainfo-texttrack-txt:hover, .videojs-mediainfo-audiotrack-txt:hover {
    /* color: #FF4300 !important; */
    color: rgb(123, 173, 233) !important;
    transition: 0.25s;
    transition-timing-function: ease-in-out;
}

.videojs-mediainfo-texttrack-txt.no-extra-tracks:hover, .videojs-mediainfo-audiotrack-txt.no-extra-tracks:hover {
    color: unset !important;
    transition: unset;
}

.video-js .videojs-mediainfo-resolution-txt{
    display:none;
}

.video-js .vjs-error-display {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-js .vjs-error-display .vjs-modal-dialog-description{
    display: none;
}

.video-js .vjs-error-display .vjs-modal-dialog-content{
    background: #030303;
    width: 25em;
    position: unset;
    border-radius: 1em;
    margin-top: unset;
}

.video-js .vjs-error-display .vjs-modal-dialog-content .btn{
    font-size: .7em;
    margin-top: .4em;
}

/* The player_back_button */
.btn-back {
    color: #ffffff;
    text-decoration: none;
    transition: color ease-in 250ms;
    padding-bottom: 1em; /* increase clickable area*/
}
.btn-back:hover {
    color: rgb(123, 173, 233);
    text-decoration: none;
}

.vjs-trackselector-close {
    border: 2px solid #323130;
}

.vjs-fill {
    width: 100%;
    height: 100%;
}

.vjs-video-title span {
    font-size: 2em;
}

.vjs-video-title span p.nowplaying-txt {
    margin-left: 0.2em;
}

.vjs-video-title span p:last-of-type {
    font-size: 0.5em;
}

.videojs-mediainfo-texttrack-text {
    align-items: center;
}

/* track selector */
.vjs-trackselector-container {
    background-color: #222b32;
}

.vjs-trackselector-close {
    background: transparent;
    border: 2px solid #ffffff20;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    line-height: 1.14em;
    transition: border ease-in 250ms;
}
.vjs-trackselector-close:hover {
    border: 2px solid #ffffff50;
}

/* Positioning media info */
.videohs-mediainfo-texttrack-txt {
    align-items: center;
}

.vjs-trackselector-buttons .btn {
    background: transparent;
    border-color: rgb(123, 173, 233);
}

.vjs-trackselector-content {
    border-color: #ffffff20;
}

.vjs-trackselector-ui .vjs-trackselector-item {
    border-color: #ffffff20;
}
.vjs-trackselector-ui .vjs-trackselector-item {
    border-color: #ffffff50;
}
.vjs-trackselector-ui .selected-track {
    background: rgb(123, 173, 233);
}

/* Player error contetn */
.content.player-error-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.5em;
    font-size: clamp(24px, 2vw, 48px);
    text-align: center;
    width: 80%;
}

@media screen and (max-width: 640px) {
    .video-js {
        font-size:1.5em;
    }
}

@media screen and (max-width: 640px) {
    .video-js .vjs-time-control.vjs-current-time,.video-js .vjs-time-control.vjs-duration,.video-js .vjs-time-control.vjs-time-divider {
        display:block
    }

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

    .video-js .vjs-time-control.vjs-remaining-time span {
        display: none
    }

    .video-js .vjs-time-control.vjs-remaining-time .vjs-remaining-time-display {
        display: none
    }

    .video-js.vjs-live .vjs-time-control.vjs-remaining-time {
        display: none
    }

    .video-js.vjs-live .vjs-time-control.vjs-current-time,.video-js.vjs-live .vjs-time-control.vjs-duration,.video-js.vjs-live .vjs-time-control.vjs-time-divider {
        display: block
    }
}

.vjs-body-android-player, .vjs-body-android-player .video-js{
    background: transparent !important;
}