/*

Boostrap Videos
https://www.youtube.com/watch?v=oF1WER30dU8&index=1&list=PLiH_qbTmMNfhcZazOxjK9hFdtRfq_NLld

sets the max width of twitter bootstrap's responsive layout to 980
https://gist.github.com/liangzan/2225036

Aktuelle Breite
Breite: 980px # Eigentlich
Breite: 960px # Real
*/

.text-decoration-none,
.text-decoration-none:hover {
    text-decoration: none;
}

a:hover{
    text-decoration: none;
    color: inherit;
}

#recomm_more_menu .dd-options{
    width: 277px;
}

/* SkyClick Player --> Fix auto-sizing related content
   Workaround with !important must be fixed later by load skyclick css also in header before custom style
*/

.vjs-related-viewer .vjs-related-grid{
    margin-top: 0px !important;
    padding-top: 12%!important;
    align-items: flex-start !important;
}
.vjs-related-viewer .vjs-related-item-video{
    margin-top: 0px !important;
}
.vjs-related-viewer .vjs-related-grid-center-content{
    width: 88% !important;
}
.vjs-related-viewer .vjs-related-header{
    position: relative;
    z-index: 1; /* Header must be over related content, that close x can be clicked */
}
.vjs-related-viewer .vjs-icon-cancel{
    position: absolute;
    right: 1%;
    top: 0px;
    /* Trick to increase click area around close icon by 10 pixel around x */
    margin-top: -10px !important;
    padding: 10px;
}

/* SkyClick Player --> fix subtitle view
*/

.vjs-subtitles-button .vjs-menu li {
    text-transform: none;
}

.video-js .vjs-control-bar .vjs-subtitles-button.vjs-menu-button-popup .vjs-menu {
    left: unset;
    right: -70px;
    width: auto;
    height: auto;
    max-height: 600%;
    overflow-y: scroll;
    margin-bottom: 3em;
    font-family: "Open sans", sans-serif;
    font-weight: bold;
    min-width: 130px;
}

.video-js .vjs-control-bar .vjs-subtitles-button.vjs-menu-button-popup .vjs-menu-content {
    margin-bottom: -2em;
    padding-left: 2em;
    font-size: .93em;
}

.video-js .vjs-control-bar .vjs-subtitles-button.vjs-menu-button-popup .vjs-menu-content .vjs-menu-item {
    text-align: start;
}

/* .video-js .vjs-control-bar .vjs-menu-button-popup .vjs-menu::-webkit-scrollbar {
    display: none;
} */

.video-js .vjs-control-bar .vjs-subtitles-button.vjs-menu-button-popup .vjs-menu::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.video-js .vjs-control-bar .vjs-subtitles-button.vjs-menu-button-popup .vjs-menu::-webkit-scrollbar-thumb {
    background: #ababab;
    border-radius: 10px;
    /* border: 2px solid transparent; */
    background-clip: padding-box; /* <== make the border work */
}

.video-js .vjs-control-bar .vjs-subtitles-button.vjs-menu-button-popup .vjs-menu::-webkit-scrollbar-thumb:hover {
    /* border: 0; */
}

::-webkit-scrollbar-track {
    background: rgba(84, 97, 120, 0.8);
}

.video-js .vjs-control-bar .vjs-subtitles-button.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    width: 25em;
    padding-top: 15px;
    position: relative;
    left: 0;
}