/*--------*/
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.vjs-theme-music-ver1 {
    width: 100%;
    font-size: 16px;
    height: 60px;
    font-weight: bold;
}

.vjs-theme-music-ver1 .vjs-control-bar {
    background-color: #141414;
}

.vjs-theme-music-ver1 .vjs-progress-control .vjs-progress-holder .vjs-mouse-display .vjs-time-tooltip,
.vjs-theme-music-ver1 .vjs-progress-control .vjs-progress-holder .vjs-play-progress .vjs-time-tooltip {
    display: none;
}

.vjs-theme-music-ver1 .vjs-volume-panel {
    order: 0;
}

.vjs-theme-music-ver1 .vjs-skip-backward-10 {
    order: 2;
}

.vjs-theme-music-ver1 .vjs-time-control {
    order: 3;
    display: block;
}

.vjs-theme-music-ver1 .vjs-time-divider {
    padding: 0;
    min-width: unset;
}

.vjs-theme-music-ver1 .vjs-progress-control {
    order: 4;
}

.vjs-theme-music-ver1 .vjs-skip-forward-10 {
    order: 5;
}

.vjs-theme-music-ver1 .vjs-playback-rate > .vjs-menu {
    display: none !important;
}
/*--------*/

.vjs-button>.vjs-icon-placeholder:before {
    line-height: 60px !important;
}

.video-js .vjs-control {
    line-height: 60px!important;
}

.vjs-control-bar{
    width: 100%;
    transition: width 5s ease;
}

.vjs-playback-rate .vjs-playback-rate-value{
    line-height: 60px!important;
}

.vjs-theme-music-ver1 .vjs-control-bar {
    background-color: #4f4f4f!important;
    height: 60px!important;
    padding-left: 20px!important;
    padding-right: 20px!important;
    border-radius: 99rem 0 0 99rem!important;
    margin-left: 20px;
    transition: .5s cubic-bezier(0.25, 0.1, 0, 1.31);
}

.video-js {
    background-color: #9e9b9b!important;
    /* transition: all 2s ; */
}

.video-js .vjs-volume-panel {
    align-items: center!important;
}

.vjs-theme-music-ver1 .vjs-playing-title {
    order: 1;
    width: 300px;
    font-weight: bold;
}

.vjs-theme-music-ver1 .vjs-time-divider {
    line-height: 60px;
}

.vjs-theme-music-ver1 .vjs-seek-to-live-text {
    font-weight: bold;
}

.vjs-theme-music-ver1 .vjs-at-live-edge > .vjs-icon-placeholder {
    animation-name: breath;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes breath {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

/* ----------------------- */

@media screen and (max-width: 768px) {

    .vjs-control-bar{
        width: fit-content;
    }

    .vjs-theme-music-ver1 .vjs-control-bar {
        background-color: #4f4f4f!important;
        height: 60px!important;
        padding-left: 10px!important;
        border-radius: 0!important;
        margin-left: 0;
        font-size: 14px;
    }

    .vjs-theme-music-ver1 .vjs-playing-title-mobile {
        display: none !important;
    }

    .vjs-current-time .vjs-time-control .vjs-control{
        display: none !important;
    }

    .vjs-theme-music-ver1 .vjs-time-divider {
        display: none !important;
    }

    .video-js .vjs-progress-control{
        /*display: none !important;*/
    }

    .vjs-theme-music-ver1 .vjs-time-control{
        display: none !important;
    }

    .vjs-theme-music-ver1 .vjs-volume-panel {
        display: none !important;
    }

}
/* ----------------------- */

.tprSmaller{
    width: fit-content !important;
    transition: width 5s;
}

.tprSmaller .vjs-control-bar{
    width: fit-content !important;
    transition: width 5s;
}

.tprSmaller .vjs-playing-title{
    width: 100px !important;
    transition: width 5s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}