.vjs-theme-fanhero {
    --vjs-theme-fanhero--primary: #1d55c4;
    --vjs-theme-fanhero--secondary: #fff
}

.vjs-theme-fanhero.vjs-live .vjs-live-control {
    margin-left: 1em;
}

.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 18em;
}

.vjs-theme-fanhero .vjs-big-play-button {
    width: 70px;
    height: 70px;
    background: 0 0;
    line-height: 70px;
    font-size: 50px;
    border: none;
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -35px;
    background-color: rgba(65, 78, 77, 0.7);
    border-radius: 0.6em;
    color: var(--vjs-theme-fanhero--secondary)
}

.vjs-theme-fanhero.vjs-big-play-button:focus,
.vjs-theme-fanhero:hover .vjs-big-play-button {
    background-color: rgba(65, 78, 77, 0.7);
    color: var(--vjs-theme-fanhero--primary)
}

.vjs-theme-fanhero .vjs-play-progress,
.vjs-theme-fanhero .vjs-play-progress::before {
    background-color: var(--vjs-theme-fanhero--primary)
}

.vjs-theme-fanhero .vjs-control-bar {
    height: 54px
}

.vjs-theme-fanhero .vjs-button>.vjs-icon-placeholder::before,
.vjs-theme-fanhero .vjs-time-control {
    line-height: 54px
}

.vjs-theme-fanhero .vjs-play-control {
    font-size: 1.5em;
    position: relative
}

.vjs-theme-fanhero .vjs-volume-panel {
    order: 4
}

.vjs-theme-fanhero .vjs-volume-bar {
    margin-top: 2.5em
}

.vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
    height: 100%
}

.vjs-theme-fanhero .vjs-progress-control .vjs-progress-holder,
.vjs-theme-fanhero .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 1.5em
}

.vjs-theme-fanhero .vjs-play-control .vjs-icon-placeholder::before {
    height: 1.3em;
    width: 1.3em;
    margin-top: .2em;
    border-radius: 1em;
    border: 3px solid var(--vjs-theme-fanhero--secondary);
    top: 2px;
    left: 9px;
    line-height: 1.1
}

.vjs-theme-fanhero .vjs-play-control:hover .vjs-icon-placeholder::before {
    border: 3px solid var(--vjs-theme-fanhero--secondary)
}

.vjs-theme-fanhero .vjs-play-progress::before {
    height: .8em;
    width: .8em;
    content: '';
    border: 4px solid var(--vjs-theme-fanhero--secondary);
    border-radius: .8em;
    top: -.25em
}

.vjs-theme-fanhero .vjs-progress-control {
    font-size: 14px
}

.vjs-theme-fanhero .vjs-fullscreen-control {
    order: 6
}

.vjs-theme-fanhero .vjs-remaining-time {
    display: none
}

.vjs-theme-fanhero .vjs-playback-rate .vjs-playback-rate-value {
    pointer-events: none;
    font-size: 1.5em;
    line-height: 3.5;
    text-align: center
}

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

.vjs-theme-fanhero .vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
.vjs-theme-fanhero .vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 20em
}