/* Essential CSS for website video player */
/* Change all text and icon colors in the player. */
#detach-button-host {
    display: none !important;
}

.vjs-matrix.video-js {
    color: #ccc;
    border: 2px inset #ccc;
    font-size: 18px;
}

/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
    font-size: 24px;
    text-shadow: 1px 1px 2px #E5E5E5, 0 0 6px #ccc, 0 0 5px #B3B3B3;
    font-weight: bold;
    color: #ccc;
    transition-property: font-size;
    transition-duration: 5s;
}
.vjs-matrix .vjs-big-play-button:hover {
    font-size: 40px;
    box-shadow: 10px 10px 65px 11px #ccc;
    -webkit-box-shadow: 10px 10px 65px 11px #ccc;
    -moz-box-shadow: 10px 10px 65px 11px #ccc;
}

/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-slider-bar {
    background: #ccc;
}

.vjs-matrix .vjs-play-progress {
    background: black;
}

.vjs-matrix .vjs-play-progress:active {
    box-shadow: 10px 10px 65px 11px #ccc;
    -webkit-box-shadow: 10px 10px 65px 11px #ccc;
    -moz-box-shadow: 10px 10px 65px 11px #ccc;
}