[unselectable="on"] 
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.video-player-root::-webkit-input-placeholder { color:#000000; text-align: center;}
.video-player-root::-moz-placeholder { color:#000000; text-align: center;} 
.video-player-root:-ms-input-placeholder { color:#000000; text-align: center;} 
.video-player-root .input:-moz-placeholder { color:#000000; text-align: center;}

.player-playlist-presenter 
{
position: absolute;
left: 0;
width: 100%;
height: 100%;
}

.playlist-control {
width: 20%;
height: 100%;
display: inline-block;
position: absolute;
right: 0;
background-color:#dedede;
overflow:auto;
}

.vertical-scroll-bar 
{
position: absolute;
background: rgb(128, 128, 128) transparent;
background: rgba(128, 128, 128, 0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80808080, endColorstr=#80808080);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80808080, endColorstr=#80808080)";
border-radius: 6px;
width: 4px;
right: 0px;
margin-right: 3px;
z-index: 5;

}

.horizontal-scroll-bar 
{
position: absolute;
background: rgb(128, 128, 128) transparent;
background: rgba(128, 128, 128, 0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80808080, endColorstr=#80808080);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80808080, endColorstr=#80808080)";
border-radius: 6px;
height: 4px;
top: 0px;
margin-top: 3px;
z-index: 5;
}

.match-presenter  * 
{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: default;
/*-ms-touch-action: none;  prevent ie to interpret gesture and let us do the work*/
}

.highlight-on-click:active 
{
border:1px solid #2aadd2;
}

.match-presenter 
{
height: 100%;
width: 100%;
text-align: center;
background: #eee;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
font-size: 10px;
    
}

.video-player-root 
{
height: 100%;
width: 100%;
text-align: center;
background: #eee;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: inline-block;
left: 0px;
bottom: 0px;
position: absolute;
z-index : 0;
-ms-touch-action: pan-y; /* allow only default ms touch default action in the y direction - x direction is used to swipe thru kp*/
}

.match-navigator-and-filter-panel {
display: inline-block;
width: 320px;
position: absolute;
height: 100%;
left: 100%;
z-index: 1;
bottom: 0px;
overflow: visible !important; /*jQuery might switch it to hidden and hide the expand handle*/
}

.expand-navigator-handle-pane {
width: 47px;
height: 49px;
display: inline-block;
position: absolute;
left: -47px;
}

.expand-navigator-handle {
width:47px;
height:49px;
background-image: url(../../img/player/playerico.svg?v6);
background-position: -171px -45px;
background-size: 640px 96px;
background-repeat: no-repeat;
cursor: pointer;
color: #fff;
}

.expand-navigator-handle[data-show="false"] 
{
display: none;
}

.nb-events-sticker {
width: auto;
height: 18px;
min-width: 18px;
line-height: 10px;
display: inline-block;
padding: 3px 4px 4px 4px;
position: absolute;
top: 6px;
right: 6px;
border-radius: 9px;
font-size: 11px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #FF000F;
color: white;
}
.transport-overlay
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
-webkit-background-position: center center;
-moz-background-position: center center;
-o-background-position: center center;
background-position: center center;
}
.transport-overlay[data-bgd-fill="true"]
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-background-position: center center;
-moz-background-position: center center;
-o-background-position: center center;
background-position: center center;
}

/*******************************************************************************/
/*    Match keyword filtering panel                                                  */
/*******************************************************************************/


.filter-panel {
display: inline-block;
height: 100%;
width: 320px;
background-color: #eee;
position: absolute;
left: 0px;
border: 1px solid #ccc;
}

.keyword-filter-cell {
width: 100%;
display: block;
overflow: hidden;
top: 128px;
bottom: 0px;
position: absolute;
left: 0px;
padding-left: 5px;
-ms-touch-action: none; /* prevent default ms touch action since handled by ourself*/
}


.keyword-filter-cell .category-value-cell 
{
width: 100%;
display: inline-block;
text-align: left;
margin-top: 8px;
margin-bottom: 4px;
}

.keyword-filter-cell .category-value-cell-header 
{
width: 100%;
display: inline-block;
text-align: left;
cursor: pointer;
min-height: 20px;
}

.keyword-filter-cell .category-value-cell-header  .toggle-value-cells
{
width: 27px;
height: 15px;
background-image: url(../../img/player/icoCollapseCategory.png?v2);
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
margin-left: 1px;
}

.keyword-filter-cell .category-value-cell-header:hover .toggle-value-cells 
{
background-image: url(../../img/player/icoCollapseCategoryOver.png?v2);
}

.keyword-filter-cell .category-value-cell-header  .toggle-value-cells[data-expanded="false"]
{
background-image: url('../../img/player/icoExpandCategory.png?v2');
}

.keyword-filter-cell .category-value-cell-header:hover  .toggle-value-cells[data-expanded="false"]
{
background-image: url('../../img/player/icoExpandCategoryOver.png?v2');
}

.keyword-filter-cell .category-value-cell-header .category-title 
{
width:135px;
display: inline-block;
font-size: 1.2em; 
font-weight: bold;
margin-left: 5px;
margin-bottom: 1px;
vertical-align: top;
cursor: inherit;
/*text-overflow: ellipsis;*/
/*white-space: nowrap;*/
overflow: hidden;
line-height: 14px;
word-wrap: break-word;
padding:1px 0 0;
}

.keyword-filter-cell  .category-value-cell-header .category-nbof-events 
{
display: inline-block;
font-size: 1.2em;
font-weight: bold;
width: 28px;
text-align: right;
vertical-align: top;
cursor: inherit;
}

.keyword-filter-cell .category-value-cell .value-cells-container
{
display: block;
width: 100%;
}

.category-value-cell .value-cell * 
{
cursor: pointer;
}
.category-value-cell  .value-cell 
{
position: relative;
/*height: 20px;*/
width: 100%;
line-height:20px;
color: #2aadd2;
cursor: pointer;
}

.category-value-cell  .value-cell:hover {
color: #000000;
}

.keyword-filter-cell  .value-cell .value-checkbox
{
width: 20px;
height: 20px;
display: inline-block;
background-image: url(../../img/player/icoTagFilters.png?v2);
background-repeat: no-repeat;
background-position: center center;
vertical-align: top;
margin-left: 8px;
margin-right: 6px;
}
.keyword-filter-cell  .value-cell:hover .value-checkbox
{
background-image: url(../../img/player/icoTagFiltersOver.png?v2);
}

.keyword-filter-cell  .value-cell .value-checkbox[data-checked="true"]
{
background-image: url(../../img/player/icoTagFilters.png?v2);
}
.keyword-filter-cell  .value-cell .value-label
{
width: 135px;
display: inline-block;
/*height: 100%;*/
vertical-align: top;
text-overflow: ellipsis;
overflow: hidden;
/*white-space: nowrap;*/
line-height: 14px;
font-size: 1.2em;
word-wrap: break-word;
padding: 3px 0 1px;
}
.keyword-filter-cell  .value-cell .value-nbof-events
{
display: inline-block;
height: 100%;
width: 28px;
vertical-align: top;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 20px;
text-align: right;
font-size: 1.2em;
color: #333;
}
.keyword-filter-cell  .value-cell .percentage-bar 
{
display: inline-block;
height: 100%;
vertical-align: top;
position: absolute;
right: 0px;
left: 203px;
line-height: 16px;
font-size: 1.1em;
color: #333;

}

.percentage-bar .percentage-color-bar
{
display: inline-block;
height: 4px;
position: relative;
margin-bottom:-1px;
min-width:1px;
}

.percentage-bar .percentage-label
{
display: inline-block;
height: 16px;
margin-left:5px;
vertical-align: top;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 35px;
text-align: left;
margin-top:3px;
}

.no-keyword-hint 
{
width: 100%;
top: 50%;
position: absolute;
text-align: center;
display: none;
left: 0;
}
/*******************************************************************************/
/*    MATCH NAVIGATOR PANEL                                                   */
/*******************************************************************************/

.match-navigator-panel {
display: inline-block;
width: 320px;
height: 100%;
background-color: #fff;
position: absolute;
right: 0px;
z-index: 1;
border: 1px solid #ccc;
border-right: 1px solid #ccc;
}

/* Match navigator panel > Match title header */
.match-title-header {
height: 48px;
width: 100%;
position: relative;
background-color: #eee;
border-bottom: 1px solid #ccc;
}

.cell-horizontal-separator 
{
width: 100%;
height: 1px;
background-color: #eee;
position: absolute;
bottom: 0px;
}

.cell-vertical-separator 
{
height: 100%;
width: 1px;
background-color: #ccc;
position: absolute;
left: 0px;
}

.toggle-keyword-filter {
float: left;
height: 49px;
width: 35px;
background-image: url(../../img/player/playerico.svg?v6);
background-position: -304px -45px;
background-size: 640px 96px;
background-repeat: no-repeat;
margin-left: 5px;
cursor: pointer;
}


.toggle-keyword-filter[data-expanded="true"] {
background-position: -261px -45px;
}


.close-match-navigator-and-filter {
float: right;
height: 49px;
width: 35px;
background-image: url(../../img/player/playerico.svg?v6);
background-position: -216px -45px;
background-size: 640px 96px;
margin-right: 7px;
cursor: pointer;
}


.match-title-cell 
{
overflow: hidden;
height: 100%;
position: relative;
}

.match-title-title-container 
{
position: absolute;
left: 0px;
right: 0px;
bottom: 42%;
height: 20px;
text-align: center;
color: #333;
font-size: 1.1em;
}

.match-title-cell  .match-title
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
max-width: 180px;
display: inline-block;
}

.match-duration::before 
{
content: ", ";
}

.match-title-cell .match-duration
{
display: inline-block;
vertical-align: top;
}

.match-title-statistics-container 
{
position: absolute;
left: 0px;
right: 0px;
top: 42%;
height: 20px;
text-align: center;
font-size: 1.3em;
color: #222;
}

.match-title-cell .match-statistics
{
padding-top: 2px;
width: auto;
display: inline-block;
padding-left:5px;
}

.match-title-cell .match-statistics.match-statistics-filtered{
color: #333;  /* rgb(139, 0, 0);*/
/*font-weight:bold;*/
}

.match-title-cell .match-statistics.match-statistics-hidden {
display:none;
}

.match-title-cell .clear-filter
{
color: #5ec0d9;
text-align: left;
cursor: pointer;
margin-left: 5px;
display: inline-block;
}

.match-title-cell .clear-filter[data-enabled="false"] {
display: none;
}


/* Match navigator panel > option cell */
.option-cell {
height: 42px;
width: 100%;
position: relative;
color: #2aadd2;
border-bottom: 1px solid #ccc;
text-align: center;
background-color: #eee;
vertical-align: middle;
}

.option-cell:before 
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}

.option-play-events {
height: 24px;
width: auto;
background-color: #2aadd2;
background-image: url(../../img/player/icoPlayAll.png?v2);
background-size: 23px 13px;
background-repeat: no-repeat;
background-position: 10px center;
padding-left: 43px;
padding-right: 10px ;
color: #ffffff;
font-family: Humanist521BT-Roman,Helvetica neue,Helvetica,Arial,Verdana,sans-serif;
font-size: 1.4em;
margin-top: 9px;
cursor: pointer;
display: inline-block;
text-align: left;
border-radius:2px;
display: inline-block;
cursor: pointer;
line-height: 24px;
}

.option-play-events[data-enabled="false"] {
background-color: #a8d4e0;
}

.option-play-events[data-selected="true"] {
background-image: url(../../img/player/icoPlayOne.png?v2);
background-size: 23px 13px;
background-color: #2184a0;
}

.option-presentation-mode {
height: 22px;
width: auto;
background-image: url(../../img/player/icoAutoPauseOff.png?v2);
background-repeat: no-repeat;
font-family: Humanist521BT-Roman,Helvetica neue,Helvetica,Arial,Verdana,sans-serif;
font-size: 1.4em;
margin-top: 9px;
padding-top: 3px;
padding-left: 30px;
cursor: pointer;
display: inline-block;
text-align: left;
margin-right: 35px;
}

.option-presentation-mode[data-selected="true"] 
{
background-image: url(../../img/player/icoAutoPauseOn.png?v2);
}

.color-filter-string-search-cell {
display: inline-block;
height: 42px;
line-height: 42px;
font-size: 1.3em;
background-color: white;
width: 100%;
border-bottom: 1px solid #ccc;
padding-left: 6px;
}

.color-filter-cell {
display:flex;
height: 42px;
line-height: 42px;
float: left;
padding-top: 11px;
}

.color-filter-button {
width: 20px;
height: 20px;
float: left;
padding: 2px;
background-color: #ffffff;
}

.color-filter-button.selected {
background-color: #d7d7d7;
border-radius:0px;
}

.color-filter-button-inner-round {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #ececec;
}

.color-filter-button-inner-round.small {
width: 10px;
height: 10px;
border-radius: 5px;
margin: 3px;
}

.color-filter-button-inner-round:hover {
cursor: pointer;
}

.string-search-cell {
display:flex;
padding-right:11px;
}

.string-search-cell .search-cell-search-form {
display: inline-block;
line-height: 42px;
height: 100%;
width: 100%;
float: left;
}

.string-search-cell .search-cell-search-box {
display: inline-block;
width: 96%;
max-width:182px;
height: 25px;
min-height: 25px;
margin: 0px;
padding: 0px;
float: none;
color: black;
padding-right: 25px; /*width of following ".search-cell-search-button "*/
padding-left: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid #ccc;
cursor: auto;
-webkit-appearance: none;
-moz-appearance: none;
  }

.fr .string-search-cell .search-cell-search-box {
max-width: 206px;
}

.string-search-cell .search-cell-search-box:-ms-input-placeholder 
{
color: #757575;
} 

.string-search-cell .search-cell-search-box:focus 
{
outline: none;
border: 1px solid #90b2e9;
}

.string-search-cell .search-cell-search-box::-webkit-clear-button
{
cursor: pointer;
}

.string-search-cell .search-cell-search-button {
background-image: url(../../img/player/icoSearch.png?v2);
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
display: inline-block;
width: 21px;
height: 23px;
min-height: 23px;
border: none;
vertical-align: middle;
margin-left: -22px;
cursor: pointer;
background-color: #eee;
border-left: 1px solid #ccc;
margin-top: -2px;
}

.match-navigator-panel .nomarker-hint-cell 
{
height: 41px;
width: 100%;
position: relative;
color: #707070;
background-color: #ffffff;
border-bottom: 1px solid #ccc;
text-align: center;
background-color: #eee;

}

.match-navigator-panel .nomarker-hint-cell .nomarker-hint
{
position: absolute;
height: 20px;
line-height: 20px;
width: auto;
left: 50%;
padding-left: 15px;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: Humanist521BT-Roman,Helvetica neue,Helvetica,Arial,Verdana,sans-serif;
background-size: 17px 17px;
background-position: left center;
background-repeat: no-repeat;
padding-left: 25px;
text-align: center;
white-space: nowrap;
font-size: 1.2em;
}

/* Match navigator panel > match navigator cell*/
.match-navigator-cell {
position: absolute;
bottom: 0px;
top: 98px; /* will fill up remaining space*/
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
-ms-touch-action: none; /* prevent default ms touch action since handled by ourself*/
}


/* Match navigator panel > match navigator cell > scene cell */
.scene-cell 
{
position: relative;
}

.scene-cell  .scene-cell-separator
{
display: inline-block;
position: absolute;
height: 1px;
background-color: #ccc;
left: 0px;
right: 0px;
bottom: 0px;
}

.scene-title-cell 
{
position: relative;
width: 100%;
height: 56px;
border-bottom: 1px solid #ccc;
background-color: #e8f1f3;
}


.scene-title-cell .toggle-scene-navigator
{
position: absolute;
bottom: 0%;
left: 0px;
width: 34px;
height: 100%;
background-image: url('../../img/player/icoCollapse.png?v2');
background-position: center 30%;
background-repeat: no-repeat;
display: inline-block;
margin-left: 6px;
}


.scene-title-cell .toggle-scene-navigator[data-expanded="false"]
{
background-image: url(../../img/player/icoExpand.png?v2);
}

.scene-title-cell .scene-title
{
position: absolute;
left: 45px;
bottom: 50%;
font-size: 1.6em;
font-weight: bold;
padding-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}

.scene-title-cell .scene-statistics
{
position: absolute;
left: 45px;
top: 50%;
font-size: 1.1em; 
padding-top: 2px;
color: #666666;
}
.scene-title-cell .scene-duration
{
position: absolute;
right: 0px;
top: 50%;
font-size: 1.1em; 
margin-right: 15px;
padding-top: 2px;
color: #666666;
}

.scene-navigator-cell 
{
}

/* Match navigator panel > match navigator cell > scene cell > segment cell*/

.segments-page-cell 
{
display: block;
width: 100%;
}

.segment-cells-container 
{
display: block;
width: 100%;
}

.segment-cell-menu {
width: 150px;
border: 1px solid #ccc;
position: absolute;
z-index: 1;
background: white;
top: 0px;
right: 35px;
margin-top: 2px;
font-size: 14px;
text-align: left;
color: #2caed3;
}

.segment-cell-menu:focus {
outline: none;
}

.segment-cell-menu div{
padding: 2px 4px;
border-bottom: 1px solid #ccc;
}

.segment-cell-menu div:last-of-type {
border-bottom:none;
}
.segment-cell-menu div:hover {
background-color: #ECECEC;
cursor: pointer;
}

.segment-cell * {
cursor: pointer;
}

.segment-cell 
{
position: relative;
width: 100%;
height:36px;
background-color: #ffffff;
text-align: left;
}

.segment-cell[data-selected="true"] {
background-color: #c8c8c8;
background-image: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 51px, #d7d7d7 52px);
background-image: -moz-linear-gradient(left, #ffffff 0%, #ffffff 51px, #d7d7d7 52px);
background-image: -o-linear-gradient(left, #ffffff 0%, #ffffff 51px, #d7d7d7 52px);
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 51px, #d7d7d7 52px);
}
.segment-cell[data-highlighted="true"] {
background-color: #c8c8c8;
background-image: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 51px, #ececec 52px);
background-image: -moz-linear-gradient(left, #ffffff 0%, #ffffff 51px, #ececec 52px);
background-image: -o-linear-gradient(left, #ffffff 0%, #ffffff 51px, #ececec 52px);
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 51px, #ececec 52px);
}
.segment-cell[data-selected-and-highlighted="true"] {
background-color: #c8c8c8;
background-image: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 51px, #c7c7c7 52px);
background-image: -moz-linear-gradient(left, #ffffff 0%, #ffffff 51px, #c7c7c7 52px);
background-image: -o-linear-gradient(left, #ffffff 0%, #ffffff 51px, #c7c7c7 52px);
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 51px, #c7c7c7 52px);
}

.segment-cell-title 
{
font-size: 1.4em;
position: relative;
height: 100%;
line-height: 36px;
display: inline-block;
width: auto;
padding-left:10px;
max-width:186px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.segment-cell-titlecontainer-playlist {
display: inline-block;
width: auto;
max-width:200px;
}

.segment-cell-title-playlist {
font-size: 1.2em;
position: relative;
line-height: 20px;
margin-top: 2px;
display: block;
width: auto;
padding-left: 15px;
max-width: 186px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.segment-cell-parentmatchinfo-playlist {
font-size: 1.0em;
position: relative;
line-height: 16px;
margin-top: -3px;
display: block;
width: auto;
padding-left: 15px;
max-width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.segment-cell-position
{
font-size: 1.2em;
padding-right: 5px;
position: relative;
text-align: center;
height: 100%;
line-height: 36px;
width:50px;
display: inline-block;
vertical-align: top;
}

.segment-cell-color 
{
height: 100%;
width: 2px;
position: relative;
background-color: #d6d6d6;
display: inline-block;
vertical-align: top;
border-top: 3px solid #ffffff;
border-bottom: 3px solid #ffffff;
}

.segment-cell-duration
{
font-size: 1.1em;
position: relative;
margin-right:5px;
height: 100%;
line-height: 36px;
display: inline-block;
float: right;
}

.segment-cell-stillshot
{
font-size: 1.1em;
position: relative;
margin-right: 15px;
height: 100%;
line-height: 36px;
display: inline-block;
float: right;
}

.segment-cell-symbol 
{
font-size: 1.1em;
position: relative;
margin-right: 15px;
height: 100%;
display: inline-block;
float: right;
background-image: url(../../img/player/icoStillShot.png?v2); 
background-position: center;
background-repeat: no-repeat;
width: 12px;
}

.segment-cell-menu-entry {
font-size: 1.1em;
position: relative;
margin: 4px 15px 0 0;
height: calc(100% - 8px);
float: right;
background-position: center;
background-repeat: no-repeat;
width: 20px;
font-size: 22px;
border-radius: 10px;
padding:5px;
line-height:15px;
}

.segment-cell-menu-entry:hover {
font-weight: bolder;
color: #000;
}

.segment-cell-menu-entry:after {
content: "\22EE";
}

.segment-cell-separator {
display: inline-block;
position: absolute;
height: 1px;
background-color: #ccc;
left: 59px;
right: 0px;
bottom: 0px;
}

/*******************************************************************************/
/*    FILTERING PANEL                                                         */
/*******************************************************************************/

/* Filering panel > search cell */
.search-header {
position: relative;
display: block;
width: 100%;
height: 48px;
border-bottom: 1px solid #ccc;
line-height: 48px;
}

.toggle-expand-all-categories 
{
float: left;
height: 18px;
width: 18px;
display: inline-block;
background-image: url(../../img/player/icoCollapseExpandAll.png?v2);
background-position: left top;
margin-top: 15px;
margin-left: 11px;
cursor: pointer;
}

.toggle-expand-all-categories:hover 
{
background-position: right top;
}

.toggle-expand-all-categories[data-expanded="false"] 
{
background-position: left bottom;
}

.toggle-expand-all-categories[data-expanded="false"]:hover 
{
background-position: right bottom;
}

.filter-settings {
float: left;
height: 18px;
width: 18px;
display: inline-block;
background-image: url(../../img/player/icoSettings.png);
background-position: left top;
margin-top: 15px;
margin-left: 4px;
cursor: pointer;
}

.filter-settings:hover{
background-position: right top;
}

.search-header .close-keyword-filter {
float: right;
height: 49px;
width: 35px;
background-image: url(../../img/player/playerico.svg?v6);
background-position: -261px -45px;
background-size: 640px 96px;
background-repeat: no-repeat;
display: none;
margin-right: 5px;
}

.search-header .close-match-navigator-and-filter 
{
display: none;
}

.keyword-search-cell 
{
position: absolute;
display: inline-block;
height: 48px;
line-height: 48px;
left: 51px;
right: 0px;
font-size: 1.3em;
}


.keyword-search-cell .search-cell-search-form 
{
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
position: relative;
}



.keyword-search-cell .search-cell-search-box {
display: inline-block;
width: 90%;
height: 25px;
min-height: 25px;
margin: 0px;
padding: 0px;
float: none;
color: black;
padding-right: 3px;
padding-left: 3px;
border-radius:2px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid #ccc;
cursor: auto;
-webkit-appearance: none;
-moz-appearance: none;
}

.keyword-search-cell .search-cell-search-box:-ms-input-placeholder 
{
color: #757575;
} 

.keyword-search-cell .search-cell-search-box:focus 
{
outline: none;
border: 1px solid #90b2e9;
}

.keyword-search-cell .search-cell-search-box::-webkit-clear-button
{
cursor: pointer;
display: none;
}

.keyword-search-cell .search-cell-search-button 
{
background-image: url(../../img/player/icoSearch.png?v2); 
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
display: inline-block;
width: 21px;
height:21px;
border: none;
vertical-align: middle;
margin-left: -21px; /*-width*/
cursor: pointer;
background-color: transparent;
display: none;
}

.keyword-search-cell .search-result-cell
{
display: none;
width: 90%;
top: -14px;
left: 5%;
position: relative;
height: auto;
background-color: #ffffff;
max-height: 400px;
overflow: hidden;
z-index: 15;
border: 1px solid #999999;
-ms-touch-action: none; /* prevent default ms touch action since handled by ourself*/
}

.search-result-cell .search-result-item{
display: block;
width: 100%;
border-bottom:1px solid #dedede;
padding:3px 5px 3px 3px;
overflow:hidden;
text-overflow: ellipsis;
white-space:nowrap;
color: #2aadd2;
line-height: 20px;
text-align: left;
z-index: 5;
}

.search-result-cell div:hover {
cursor: pointer;
color: #000;
}

.search-result-cell div[data-selected="true"] 
{
background: #cccccc;
color: #000000;
}
.filter-selection-cell {
position: relative;
width: 100%;
height: auto;
min-height: 42px;
text-align: left;
vertical-align: top;
line-height: 23px;
padding-left: 11px;
padding-right: 11px;
font-size: 1.1em;
border-bottom: 1px solid #ccc;
padding-top: 8px;
}

.search-string-selection 
{
display: none;
width: auto;
height: 23px;
position: relative;
vertical-align: top;
padding-right: 5px;
}

.filter-selection-hint 
{
position: relative;
font-family: Humanist521BT-Roman,Helvetica neue,Helvetica,Arial,Verdana,sans-serif;
text-align: center;
white-space: normal;
vertical-align: middle;
height: auto;
padding-top: 1px;
display: block;
}

.filter-selection-hint[data-mode="signin"] 
{
background-color: #bbecc9;
margin-bottom: 5px;
}

.filter-selection-hint .filter-selection-hint-msg {
color: #707070;
font-size: 1.1em;
display: inline-block;
white-space: normal;
width: auto;
vertical-align: middle;
max-width: 100%;
text-align: center;
line-height: 13px;
min-height: 17px;
}

.filter-selection-hint .filter-selection-hint-msg:before,
.filter-selection-hint[data-mode="signin"] .filter-selection-hint-msg:before {
content: "\2139";
display: inline-block;
height: 100%;
vertical-align: middle;
font-size: 18px;
border: 1px solid #aaa;
border-radius: 9px;
width: 18px;
height: 18px;
line-height: 18px;
margin-right: 6px;
margin-top: -4px;
}

.filter-selection-hint[data-mode="signin"] .filter-selection-hint-msg {
color: #056839;
}

.filter-selection-hint .filter-selection-signin
{
height: 22px;
width: auto;
padding-left: 13px;
padding-right: 13px ;
color: #ffffff;
background-color: #2aadd2;
border-radius: 3px;
margin-left: 20px;
display: inline-block;
cursor: pointer;
line-height: 22px;
vertical-align: middle;
}

.filter-selection-hint[data-mode="info"] .filter-selection-signin 
{
display: none;
}

.filter-value-selection{
border-image: url(../../img/player/icoKeywordLabel.png?v2) 1 1 1 12;
border-width: 1px 1px 1px 12px;
border-style: solid;
background-repeat: no-repeat;
display: inline-block;
width: auto;
height: 23px;
width: auto;
position: relative;
margin-left: 2px;
margin-right: 2px;
background-color: #F0E5CE;
cursor: pointer;
border-color:white;
}

.filter-value-selection::after {
content: "\2716";
font-size: 11px;
font-weight: bolder;
line-height: 9px;
color: #2caed3;
vertical-align: middle;
float: right;
margin: -16px 3px 0 0;
}

.filter-value-selection:hover:after {
color: #333;
}

.filter-value-selection .value-selection-label 
{
height: 23px;
line-height: 20px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 17px;
margin-left: 5px;
}

.filter-selection-cell  .clear-filter
{
display: inline-block;
width: auto;
height: 23px;
position: relative;
vertical-align: top;
padding-left: 5px;
padding-right: 5px;
color: #5ec0d9;
text-align: left;
cursor: pointer;
}

.video-control-bar {
position: absolute;
width: 100%;
height: 80px;
bottom: 0px;
z-index: 3;
display: table;
}

.video-control-bar[data-monitor-mode="true"] 
{
bottom: 0px;
}

.video-control-bar-content {
display: table-cell;
vertical-align: bottom;
width: 100%;
height: 100%;
}
/*******************************************************************************/
/*    VIDEOCONTROLBAR > TIMELINE                                               */
/*******************************************************************************/

.timeline {
position: relative;
width: 100%;
height: 30px;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#72ffffff, endColorstr=#72ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#72ffffff, endColorstr=#72ffffff)";
}

.timeline[data-minimized="true"]
{
height: 5px;
}

.video-control-bar[data-monitor-mode="true"] .timeline
{
height: 5px;
}

.timeline .timeline-header
{
position: absolute;
width: 100%;
height: 24px;
top: 0px;
display: inline-block;
left: 0px;
}

.video-control-bar[data-monitor-mode="true"]  .timeline-header
{
display: none;
}

.timeline[data-minimized="true"] .timeline-header
{
display: none;
} 

/* Timeline > marker */

.timeline .event-marker-container 
{
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 16px;
margin-left: -10px;   /*so that setting the left to segment cue in will center the marker at cue in*/
display: inline-block;
z-index: 0;
cursor: pointer;
}

.timeline .event-marker-container  .event-marker 
{
height: 100%;
width: 100%;
}

.timeline[data-minimized="true"] .event-marker-container 
{
display: none;
}

.video-control-bar[data-monitor-mode="true"]  .event-marker-container
{
display: none;
}

.timeline[data-minimized="false"] .event-marker-container[data-expanded="false"]  
{
display: none;
}
.timeline[data-minimized="false"][data-overcrowded="true"] .event-marker-container[data-highlighted="false"][data-selected="false"]  .event-marker
{
display: none; /* but container still receives pointer events */
}

.timeline .event-marker-container[data-highlighted="true"]
{
z-index: 1;
}
.timeline .event-marker-container[data-selected="true"]
{
z-index: 2;
}



.event-marker-body /* default - event - no state*/
{
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 34px;
display: inline-block;
background-image: url(../../img/player/icoMarkersTagOff.png?v3);
background-repeat: no-repeat;
pointer-events: none;
}


.event-marker-container[data-highlighted = "true"] .event-marker-body[data-still="false"] /* event highlighted*/
{
background-image: url(../../img/player/icoMarkersTagOn.png?v3);
}
.event-marker-container[data-selected = "true"] .event-marker-body[data-still="false"] /* event selected */
{
background-image: url(../../img/player/icoMarkersTagOn.png?v3);
}

.event-marker .event-marker-body[data-still="true"] /* still shot - no state*/
{
background-image: url(../../img/player/icoMarkersStillOff.png?v3);
}

.event-marker-container[data-selected = "true"] .event-marker-body[data-still="true"] /* still shot - selected */
{
background-image: url(../../img/player/icoMarkersStillOn.png?v3);
}
.event-marker-container[data-highlighted = "true"] .event-marker-body[data-still="true"] /* still shot - highlighted */
{
background-image: url(../../img/player/icoMarkersStillOn.png?v3);
}

.event-marker-color
{
display: inline-block;
position: absolute;
left: 2px;
top: 2px;
width: 16px;
height: 16px;
border-radius: 4px;
background-color: #c8c8c8;
}

.event-duration-highlight 
{
background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff, endColorstr=#80ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff, endColorstr=#80ffffff)";
display: inline-block;
position: absolute;
left: 50%;
top: 0px;
width: 16px;
height: 24px;
border-bottom: 1px solid #ffffff;
z-index: -1;
display: none;
}
.timeline .event-duration-highlight[data-selected="true"] 
{
display: inline-block;
}

.timeline[data-minimized="true"] .event-duration-highlight[data-selected="true"] 
{
display: none;
}
.video-control-bar[data-monitor-mode="true"] .event-duration-highlight[data-selected="true"] 
{
display: none;
}

/* timeline > timeline body */
.timeline-body {
background: rgba(255, 255, 255, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#40ffffff, endColorstr=#40ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#40ffffff, endColorstr=#40ffffff)";
width: inherit;
height: 10px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
bottom: 0px;
}

.timeline[data-minimized="true"] .timeline-body
{
height: 5px;
}

.video-control-bar[data-monitor-mode="true"] .timeline-body
{
height: 4px;
}

.timeline-body .timeline-body-scene
{
height:inherit;
width: 50%;
position: relative;
left: 30%;
border-top: solid rgb(82, 80, 77) 1px;
border-top: solid rgba(82, 80, 77, 0.9) 1px;
border-left: solid rgb(82, 80, 77) 1px;
border-left: solid rgba(82, 80, 77, 0.9) 1px;
border-bottom: solid solid rgb(82, 80, 77) 1px;
border-bottom: solid rgba(82, 80, 77, 0.9) 1px;
border-right: solid rgb(82, 80, 77) 1px;
border-right: solid rgba(82, 80, 77, 0.9) 1px;
}

.timeline-body .timeline-body-scene .timeline-body-scene-past {
height: 100%;
width: 50%;
background: #FDB72A;
position: absolute;
left: 0px;
background-size: 19px 9px;
}
    
.timeline-body[data-minimize="true"] .timeline-body-scene .timeline-body-scene-past 
{
margin-top: 0px;
}

.timeline-body .timeline-body-scene .timeline-body-scene-buffered
{
background: rgba(77, 75, 65, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#5b4d4b41, endColorstr=#5b4d4b41);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5b4d4b41, endColorstr=#5b4d4b41)";
height:100%;
width: 70%;
position: absolute;
top: 0px;
left: 0px;
}

.timeline-body .timeline-body-scene .timeline-body-handle
{
position:relative;
background-image: url(../../img/player/icoPlayheadBig.png?v2);
background-repeat: no-repeat;
height:23px;
width: 36px;
float: right;
left: 17px;
vertical-align: central;
margin: -1px 0px -1px 0px;
cursor: pointer;
bottom: 13px;

}
.timeline[data-minimized="true"] .timeline-body-handle
{
display: none;
}

.video-control-bar[data-monitor-mode="true"]  .timeline-body-handle
{
display: none;
}

.player-playlist-presenter .match-presenter
{
position: absolute;
width: 80%;
}

.modal-dialog-container 
{
position: fixed;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background-color: transparent;
z-index: 5;
}

.modal-dialog-box 
{
position: absolute;
width: 400px;
height: auto;
background-color: #ffffff;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.modal-dialog-box .message 
{
height: auto;
width: auto;
text-align: center;
color: #666666;
margin: 30px;
}

.modal-dialog-box .cancel-button 
{
background-color: #eee;
width: 80px;
margin: 30px;
text-align: center;
margin-top: 30px;
float: left;
cursor: pointer;
padding: 4px;
pointer-events: all;
}

.modal-dialog-box .ok-button 
{
background-color: #eee;
width: 80px;
margin: 30px;
text-align: center;
float: right;
cursor: pointer;
padding: 4px;
pointer-events: all;
}

.video-layers-container 
{
position: absolute;
width: 100%;
height: 100%;
}

.video-player-root[data-metadata-video="vsplit"] .video-layers-container 
{
height: auto;
bottom: 50%;
top: 49px; /*height of metadata-title*/
}

.video-player-root[data-metadata-video="hsplit"] .video-layers-container 
{
width: 50%;
left: 0;
}

#composition-container
{
background: #000000;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
/*transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);*/
}

#composition-container  div 
{
-webkit-transform-style: preserve-3d;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.drawing-device-group-element 
{
z-index: 1;
pointer-events: none;
}

#composition-container img 
{
pointer-events: none;
}

#composition-container video 
{
-webkit-transform-style: preserve-3d;
height: 100%;
width: 100%;
z-index: 0;
}

#composition-container #drawing-device-rootcanvas
{
z-index: 1;
}

.medialess-video-container 
{
pointer-events: all;
}

.medialess-video-content 
{
background-color: #2b2b2b;
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
-webkit-background-position: center center;
-moz-background-position: center center;
-o-background-position: center center;
background-position: center center;
overflow: hidden;
}

#composition-container .medialess-video-content .medialess-video-diaglr 
{
width: 100%;
height: 2px;
background-color: #000000;
transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: rotate(0deg) scaleX(4);
-ms-transform: rotate(0deg) scaleX(4);
-moz-transform: rotate(0deg) scaleX(4);
-o-transform: rotate(0deg) scaleX(4);
-webkit-transform: rotate(0deg) scaleX(4);
}

#composition-container .medialess-video-content .medialess-video-diagrl
{
width: 100%;
height: 2px;
background-color: #000000;
transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
transform: rotate(0deg) scaleX(4);
-ms-transform: rotate(0deg) scaleX(4);
-moz-transform: rotate(0deg) scaleX(4);
-o-transform: rotate(0deg) scaleX(4);
-webkit-transform: rotate(0deg) scaleX(4);
}

.medialess-video-message 
{
color: black;
position: absolute;
width: 85%;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #909090;
font-size: 1.3em
}

.medialess-video-message span 
{
font-size: 1.23em;
}

.medialess-video-message  a 
{
color: #ceb94c;
cursor: pointer;
}

.video-status 
{
width: 100%;
height: 100%;
display: inline-block;
z-index: 1;
}

@keyframes spinnerRotate{
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@-webkit-keyframes spinnerRotate{
from {
-webkit-transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
}
}
@-moz-keyframes spinnerRotate{
from {
-moz-transform:rotate(0deg);
}
to {
-moz-transform:rotate(360deg);
}
}

@-o-keyframes spinnerRotate{
from {
-o-transform:rotate(0deg);
}
to {
-o-transform:rotate(360deg);
}
}

.video-status #loading-cursor,
.drawing-image-container #loading-cursor,
.scene-slide #loading-cursor  
{
background-image: url(../../img/player/loading.png?v2);
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
width: 110px;
height: 110px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -55px;
margin-top: -55px;
animation-name: spinnerRotate;
-webkit-animation-name: spinnerRotate;
-moz-animation-name: spinnerRotate;
-o-animation-name: spinnerRotate;
animation-duration:2s;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-o-animation-duration:2s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-timing-function:linear;
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
-o-animation-timing-function:linear;
}

.video-status #error-message 
{
font-size: 1.6em;
color: #c0c0c0;
width: 60%;
height: 30%;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -30%;
margin-top: -15%;
text-align: center;
visibility: hidden; /* replace by popup error*/
}

.drawing-image-container 
{
width: 100%;
height: 100%;
display: inline-block;
}

.drawing-image 
{
position: absolute;
}
.error-popup 
{
width: 40%;
display: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 4;
}

.video-player-root[data-metadata-video="vsplit"] .error-popup 
{
width: 80%;
}

.video-player-root[data-metadata-video="hsplit"] .error-popup 
{
width: 80%;
}

.error-popup .error-popup-inner 
{
font-size: 1.5em;
color: #000000;
padding: 24px;
border: solid 1px rgb(99, 92, 82);
text-align: center;
background: rgba(180, 180, 180, 0.7);
}

.error-popup .close-button:after {
position: absolute;
top: 0px;
right: 0px;
width: 24px;
height: 24px;
cursor: pointer;
content: "\2716";
font-size: 20px;
background-image: none;
text-indent: 0;
text-align: center;
line-height: 20px;
font-family: ClearSans-Bold,Arial,Verdana,sans-serif;
cursor: pointer;
margin: 2px;
float: right;
z-index: 3;
}

#canvas-container 
{
z-index: 1;
}

.slide-container 
{
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 2;
pointer-events: none;
}

.video-player-root[data-metadata-video="hsplit"]  .slide-container
{
width: 50%;
right: 0;
}
.scene-info-container
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
}

.navigation-bar-container
{
position: absolute;
width: 100%;
bottom: 0px;
left: 0px;
z-index: 3;
}

.video-player-root[data-metadata-video="hsplit"] .navigation-bar-container 
{
width: 50%;
}

.loading-display 
{
width: 40px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}

.no-data-hint 
{
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
}

.no-data-hint[data-retrieving="true"] 
{
background-image: url(../../img/player/icoLoading.gif);
background-repeat: no-repeat;
background-position: center top;
display: inline-block;
min-height: 32px;
min-width: 32px;
padding-top: 40px;
}

.no-data-hint[data-nodata="true"] 
{
display: inline-block;
}

/**********************************************************************************************/
/*                          presentation slide                                                */
/**********************************************************************************************/

.prevslide-button {
background-image: url(../../img/player/playerico.svg?v6);
background-size: 1920px 240px;
background-position: -1063px -153px;
background-size: 1920px 240px;
background-repeat: no-repeat;
display: inline-block;
height: 60px;
width: 30px;
position: absolute;
top: 50%;
margin-top: -30px; /*half height*/
left: 0px;
z-index: 3;
cursor: pointer;
pointer-events: all;
opacity: 0.5;
}

.prevslide-button[data-enabled="false"] 
{
display: none;
background: transparent;          /* might seem overkill but jQuery might toggle display to inline-block*/
height: 0;                        /*prevent cursor pointer and tooltip display over hidden control*/
}

.transport-overlay[data-monitor-mode="true"] .prevslide-button
{
display: none;
background: transparent;          /* might seem overkill but jQuery might toggle display to inline-block*/
height: 0;                        /*prevent cursor pointer and tooltip display over hidden control*/
}

.nextslide-button {
background-image: url(../../img/player/playerico.svg?v6);
background-size: 1920px 240px;
background-position: -1189px -153px;
background-repeat: no-repeat;
display: inline-block;
height: 60px;
width: 30px;
position: absolute;
top: 50%;
margin-top: -30px; /*half height*/
right: 0px;
z-index: 3;
cursor: pointer;
pointer-events: all;
opacity:0.5;
}

.nextslide-button[data-enabled="false"] 
{
display: none;
background: transparent;          /* might seem overkill but jQuery might toggle display to inline-block*/
height: 0;                        /*prevent cursor pointer and tooltip display over hidden control*/
}

.transport-overlay[data-monitor-mode="true"] .nextslide-button 
{
display: none;
background: transparent;          /* might seem overkill but jQuery might toggle display to inline-block*/
height: 0;                        /*prevent cursor pointer and tooltip display over hidden control*/
}

.slide-play-button {
background-image: url(../../img/player/icoPlayBig.png?v2);
background-repeat: no-repeat;
display: inline-block;
height: 110px;
width: 110px;
position: absolute;
top: 50%;
margin-top: -55px; /*half height*/
margin-left: -55px; /*half width*/
left: 50%;
z-index: 3;
cursor: pointer;
pointer-events: all;
}

.slide-play-button[data-canplay="false"] 
{
background: no-repeat;
pointer-events: none;
}

.transport-overlay[data-monitor-mode="true"] .slide-play-button
{
background: no-repeat;
pointer-events: none;
}

.play-options {
color:#FFF;
position: absolute;
left: 50%;
top: 50%;
display: inline-block;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.5);
display: none;
width: 312px;
height: 103px;
padding-left: 1px;
border-radius: 3px;
color: black;
font-size: 1.4em;
pointer-events: none;
padding-top: 10px;
}

.transport-overlay[data-monitor-mode="true"] .play-options
{
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -73%);
-moz-transform: translate(-50%, -73%);
-o-transform: translate(-50%, -73%);
-ms-transform: translate(-50%, -73%);
transform: translate(-50%, -73%);
}

.replay-button {
color: #fff;
width: 60px;
height: 50px;
background-image: url(../../img/player/playerico.svg?v6);
background-position: -275px -8px;
background-size: 960px 120px;
background-repeat: no-repeat;
display: inline-block;
text-align: center;
vertical-align: bottom;
pointer-events: all;
cursor: pointer;
padding-top: 60px;
margin: 0 15px;
white-space: nowrap;
}

.continue-play-button {
color: #fff;
width: 60px;
height: 50px;
background-image: url(../../img/player/playerico.svg?v6);
background-position: -95px -8px;
background-size: 960px 120px;
background-repeat: no-repeat;
display: inline-block;
text-align: center;
vertical-align: bottom;
pointer-events: all;
cursor: pointer;
padding-top: 60px;
margin: 0 15px;
white-space: nowrap;
}

.play-next-button {
color: #fff;
width: 60px;
height: 50px;
background-image: url(../../img/player/playerico.svg?v6);
background-position: -34px -8px;
background-size: 960px 120px;
background-repeat: no-repeat;
display: inline-block;
text-align: center;
vertical-align: bottom;
pointer-events: all;
cursor: pointer;
padding-top: 60px;
margin: 0 15px;
white-space: nowrap;
}

.play-next-button[data-enabled="false"] {
opacity: 0.5;
cursor: default;
}


/**********************************************************************************************/
/*                          segment slide                                                     */
/**********************************************************************************************/

.pi-metadata-container 
{
display: inline-block;
z-index: 2;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none; /* allow events pass-thru transparent layer*/
text-align: left;
}

.pi-metadata-info {
position: absolute;
width: 100%;
height: 49px;
top: 0px;
left: 0px;
z-index: 2;
pointer-events: all;
text-align: left;
background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5));
border-bottom: 1px solid rgba(75,75,75,0.5);
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-info  
{
width: 100%;
height: 100%;
background: transparent;
pointer-events: none; /* since it overlays video and other layers*/
border-bottom:none;
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-info
{
width: 100%;
height: 100%;
background: #ffffff;
}

.pi-metadata-title 
{
width: auto;
height: 100%;
color: #ffffff;
display: inline-block;
text-align: left;
padding-right: 10px;
}

.pi-metadata-title[data-no-keyword-band="true"] 
{
width: 100%;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-title {
background: #000;
border: 0px;
height: 49px;
width: 100%;
pointer-events:all;
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-title {
background: #333;
opacity: 0.9;
border: 0px;
height: 49px;
width: 100%;
}

.pi-metadata-title:before 
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}

.pi-metadata-title .minmax-description-button
{
width: 32px;
background-image: url(../../img/player/icoDescription.png?v2);
background-position: center;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
height: 100%;
cursor: pointer;
height: 100%;
cursor: pointer;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-title .minmax-description-button
{
visibility: hidden;
}
.video-player-root[data-metadata-video="hsplit"] .pi-metadata-title .minmax-description-button
{
visibility: hidden;
}
.pi-metadata-title .minmax-description-button[data-minimize="true"][data-enabled="true"]
{
background-image: url(../../img/player/icoDescription.png?v2);
background-repeat: no-repeat;
background-position:center;
}
.pi-metadata-title .minmax-description-button[data-enabled="false"] 
{
display: none;
}

.pi-metadata-title .playpause-audio-button 
{
width: 46px;
background-image: url(../../img/player/icoAudioPlay.png?v2);
background-repeat: no-repeat;
background-position:center;
vertical-align: middle;
display: inline-block;
height: 100%;
cursor: pointer;
}

.pi-metadata-title .playpause-audio-button[data-error="true"] 
{
background-image: url(../../img/player/icoAudioBadFormat.png?v2);
}
.pi-metadata-title .playpause-audio-button[data-pause="false"][data-enabled="true"][data-error="false"] 
{
background-image: url(../../img/player/icoAudioStop.png?v2);
}

.pi-metadata-title .playpause-audio-button[data-enabled="false"] 
{
background-image: url(../../img/player/icoAudioPlay.png?v2);
display: none;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-title .playpause-audio-button 
{
background-image: url(../../img/player/icoAudioPlay.png?v2);
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-title .playpause-audio-button[data-error="true"] 
{
background-image: url(../../img/player/icoAudioBadFormat.png?v2);
}
.video-player-root[data-metadata-video="vsplit"] .pi-metadata-title .playpause-audio-button[data-pause="false"][data-enabled="true"][data-error="false"] 
{
background-image: url(../../img/player/icoAudioStop.png?v2);
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-title .playpause-audio-button[data-enabled="false"] 
{
visibility: hidden;
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-title .playpause-audio-button 
{
background-image: url(../../img/player/icoAudioPlay.png?v2);
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-title .playpause-audio-button[data-error="true"] 
{
background-image: url(../../img/player/icoAudioBadFormat.png?v2);
}
.video-player-root[data-metadata-video="hsplit"] .pi-metadata-title .playpause-audio-button[data-pause="false"][data-enabled="true"][data-error="false"] 
{
background-image: url(../../img/player/icoAudioStop.png?v2);
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-title .playpause-audio-button[data-enabled="false"] 
{
visibility: hidden;
}

.pi-metadata-title .title-label {
margin-top: 18px;
margin-left: 21px;
font-size: 1.8em;
line-height: 20px;
vertical-align: top;
display: inline-block;
width: auto;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: left;
overflow: hidden;
color: #fff;
opacity: 0.9;
max-width: 320px;
}

.pi-metadata-title[data-no-keyword-band="true"] .title-label
{
max-width: 80%;
} 
.video-player-root[data-metadata-video="vsplit"] .pi-metadata-title .title-label 
{
max-width: 80%;
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-title .title-label 
{
max-width: 80%;
}


.pi-metadata-title .phase-label {
color: #fff;
opacity: 0.9;
font-size: 1em;
text-align: center;
vertical-align: middle;
display: inline-block;
position: relative;
margin-top: -18px;
margin-left: 4px;
}

.pi-metadata-title .color-separator {
background-color: #d6d6d6;
opacity: 0.6;
height: 33px;
width: 4px;
position: absolute;
display: inline-block;
vertical-align: middle;
position: absolute;
left: 5px;
top: 11px;
}

.pi-metadata-keyword-description {
background: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
white-space: normal;
width: 312px;
max-height: 180px;
color:white;
font-size: 1.4em;
margin-top: -1px;
padding-left: 5px;
padding-right: 5px;
display: none;
cursor: pointer;
line-height: 125%;
min-height: 0px;
position: relative;
border-radius: 3px;
margin: 4px;
}
.video-player-root[data-metadata-video="vsplit"] .pi-metadata-keyword-description {
position: absolute;
top: 50%; /* will be adjusted in javascript*/
bottom: 0px;
left: 0px;
right: 0px;
width: auto;
max-height: 100%;
border: 0px;
border-radius: 2px;
margin: 0px;
pointer-events: all;
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-keyword-description
{
position: absolute;
top: 49px;
bottom: 0px;
left: 0px;
right: 0px;
width: auto;
max-height: 100%;
border: 0px;
border-radius: 2px;
margin: 0px;
}

.pi-metadata-keyword-description .pi-metadata-keyword-description-content 
{
position: relative;
width: 100%;
height: auto;
max-height: 139px; /* max-height pi-metadata-keyword-description - 25 */
overflow-y: hidden;
white-space: normal;
-ms-touch-action: none; /* prevent default ms touch action since handled by ourself*/
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-keyword-description-content 
{
max-height: 100%;
padding-bottom: 40px;
margin-top: 0px;
}
.video-player-root[data-metadata-video="vsplit"] .pi-metadata-keyword-description-content 
{
max-height: 100%;
padding-bottom: 40px;
margin-top: 0px;
}
.pi-metadata-keyword-description .pi-metadata-close-description:after {
content: "\2716";
font-size: 20px;
background-image: none;
text-indent: 0;
text-align: center;
line-height:20px;
font-family: ClearSans-Bold,Arial,Verdana,sans-serif;
cursor: pointer;
margin: 2px;
float: right;
z-index: 3;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-close-description 
{
display: none;
}
.video-player-root[data-metadata-video="hsplit"] .pi-metadata-close-description 
{
display: none;
}
.pi-metadata-keyword-description .no-data-hint 
{
font-size: 0.8em;
top: auto;
margin-top: 0px;
height: 20px;
line-height: 20px;
position: relative;
}

.pi-metadata-keyword-description .no-data-hint[data-retrieving="true"] 
{
height: 50px;
line-height: 80px;
background-image: url(../../img/player/icoLoadingSmall.gif);
}

.pi-metadata-keyword-description .pi-metadata-description
{
cursor: inherit;
text-align: left;
color:white;
margin-bottom: 6px;
position: relative;
width: 100%;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-description {
margin-top: 20px;
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-description {
margin-top: 20px;
}

.pi-metadata-description a{
color:#2caed3;
}

.pi-metadata-keyword-description .pi-metadata-description a:hover {
color:#666;
cursor:pointer;
}

.pi-metadata-keyword-description .pi-metadata-keywords
{
margin-top: 20px;
cursor: inherit;
text-align: left;
display: none;
position: relative;
width: 100%;
display: none;   /* in overlay mode, keywords are displayed in the banner*/
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-keywords {
display: inline-block;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-keywords {
display: inline-block;
}

.pi-metadata-keywords .pi-no-keyword-hint
{
height: 80px;
width: 100%;
background-image: url(../../img/player/icoTagBig.png?v2);
background-position: center top;
background-repeat: no-repeat;
background-size: 50px 50px;
color: #dadada;
font-size: 1.25em;
text-align: center;
padding-top: 60px;
margin-top: 20px;
}

.pi-metadata-keyword-description .pi-metadata-keywords > table
{
width: 100%;
cursor: inherit;
}

.pi-metadata-keyword-description .pi-metadata-keywords .category-cell 
{
opacity: 0.7;
text-align: right;
cursor: inherit;
width: 48%;
vertical-align: top;
padding-bottom: 4px;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-keywords .category-cell {
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-keywords .category-cell {
}

.pi-metadata-keyword-description .pi-metadata-keywords .value-cell 
{
text-align: left;
cursor: inherit;
vertical-align: top;
padding-bottom: 4px;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-keywords .value-cell {
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-keywords .value-cell {
}
.pi-metadata-keyword-description .pi-metadata-keywords .separator-cell {
text-align: center;
opacity: 0.7;
cursor: inherit;
padding-left: 3px;
padding-right: 3px;
vertical-align: top;
padding-bottom: 4px;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-keywords .separator-cell {
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-keywords .separator-cell {
}

.pi-metadata-keywords-band 
{
position: absolute;
top: 0px;
right: 50px; /*size of expand navigator*/
left: 320px;
height: 100%;
overflow: hidden;
pointer-events: all;
-ms-touch-action: none; /* prevent default ms touch action since handled by ourself*/
}

.pi-metadata-keywords-band-content 
{
padding-top: 8px;
} 

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-keywords-band  
{
display: none;
visibility: hidden;
}

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-keywords-band 
{
display: none;
visibility: hidden;
}

.pi-metadata-keywords-band  > table
{
width: auto;
cursor: inherit;
}


.pi-metadata-keywords-band .category-cell {
color: #fff;
opacity: 0.7;
font-size: 1.1em;
cursor: inherit;
text-align: left;
vertical-align: top;
padding-left: 6px;
padding-right: 6px;
width: auto;
white-space: nowrap;
}

.pi-metadata-keywords-band .value-cell {
color: #fff;
opacity: 0.9;
font-size: 1.3em;
cursor: inherit;
vertical-align: top;
text-align: left;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
white-space: nowrap;
}

.pi-metadata-keywords-band .separator-cell 
{
text-align: center;
color: #5c5c5c;
cursor: inherit;
padding-left: 3px;
padding-right: 3px;
vertical-align: top;
padding-bottom: 4px;
white-space: nowrap;
}

.presentation-mode-control 
{
background-image: url(../../img/player/icoPresentationMode.png?v2);
background-repeat: no-repeat;
background-size: 100% 100%;
display: none;
height: 44px;
width: 44px;
position: absolute;
top: 50%;
left: 50%;
opacity: 0.0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition:width 0ms ease-in-out, height 0ms ease-in-out, opacity 0ms ease-in-out;
-moz-transition:width 0ms ease-in-out, height 0ms ease-in-out, opacity 0ms ease-in-out;
-o-transition:width 0ms ease-in-out, height 0ms ease-in-out, opacity 0ms ease-in-out;
transition:width 0ms ease-in-out, height 0ms ease-in-out, opacity 0ms ease-in-out;
z-index: 4;
pointer-events: none;
}

.presentation-mode-control[data-show="true"] 
{
height: 88px;
width: 88px;
opacity: 0.0;
display: inline-block;
pointer-events: none;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out, opacity 1000ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out, opacity 1000ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out, opacity 1000ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out, opacity 1000ms ease-in-out;
}

.presentation-mode-control .phase-label
{
display: inline-block;
height: 110px;
line-height: 110px;
width: 80px;
position: absolute;
right: -0px;
z-index: 3;
font-size: 2em;
text-shadow: 1px 1px #000000;
text-align: center;
vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/**********************************************************************************************/
/*                          navigation bar                                                   */
/**********************************************************************************************/

.navigation-bar 
{
height: inherit;
width: inherit;
}


/**********************************************************************************************/
/*                         audio control                                                      */
/**********************************************************************************************/


.volume-control 
{
width: auto;
height: 40px;
display: inline-block;
}

.volume-control[data-mobile="true"] /* no volume control on mobile*/
{
display: none;
}

.video-control-bar[data-monitor-mode="true"] .volume-control 
{
display: none;
}

.volume-scrubber 
{
width: 140px;
left: 0;
height: 100%;
position: relative;
display: inline-block; 
overflow: hidden;
margin-bottom:2px;
}

.audio-slider 
{
background: rgba(99, 92, 82, 0.3);
border: solid rgba(99, 92, 82, 0.7) 1px;
width: 100px;
height:4px;
left: 50%;
margin-left: -50px;  /* half width */
top: 50%;
margin-top:4px; 
position: relative;
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}

.audio-slider-handle {
background-color: #ddd;
border: solid rgba(99, 92, 82, 0.7) 1px;
width: 7px;
height: 20px;
position: relative;
left: 100%;
top: 50%;
margin-left: -3.5px; /* half width */
margin-top: -10px; /* half height */
cursor: pointer;
}
.audio-slider-left {
background: #FDB72A;
height: inherit;
width: 70%;
position: absolute;
bottom: 0;
left: 0;
}


/**********************************************************************************************/
/*                          TRANSPORTBAR                                                     */
/**********************************************************************************************/

.transport-bar {
height: 44px;
position: relative;
width: 100%;
background: linear-gradient(180deg,hsla(0,0%,0%,0) 0%,rgba(0,0,0,.7));
}

.transport-bar .transport-bar-left 
{
position: absolute;
left: 0px;
height: 100%;
}

.transport-bar .transport-bar-right 
{
position: absolute;
right: 0px;
height: 100%;
}

.transport-bar .playpause-button {
background-image: url(../../img/player/playerico.svg?v6);
background-position: -46px -2px;
background-size: 640px 96px;
background-repeat: no-repeat;
display: inline-block;
float: left;
height: 40px;
width: 40px;
cursor: pointer;
margin-left:6px;
margin-bottom: 2px;
}

.transport-bar .playpause-button[data-enabled="false"] {
opacity: 0.5;
cursor:default;
}

.transport-bar .playpause-button[data-pause="true"] {
background-image: url(../../img/player/playerico.svg?v6);
background-position: -90px -2px;
background-size: 640px 96px;
}

.transport-bar .playpause-button[data-pause="true"][data-enabled="false"] {
opacity: 0.5;
cursor: default;
}

.transport-bar .stepprev-button {
background-image: url(../../img/player/playerico.svg?v6);
background-position: -129px -45px;
background-size: 640px 96px;
background-repeat: no-repeat;
display: inline-block;
float: left;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 4px;
margin-bottom: 2px;
}
.transport-bar .stepprev-button[data-enabled="false"] {
opacity: 0.5;
cursor: default;
}

.transport-bar .stepnext-button {
background-image: url(../../img/player/playerico.svg?v6);
background-position: -130px -2px;
background-size: 640px 96px;
background-repeat: no-repeat;
display: inline-block;
float: left;
height: 40px;
width: 40px;
cursor: pointer;
margin-right: 4px;
margin-bottom: 2px;
}

.transport-bar .stepnext-button[data-enabled="false"] {
opacity: 0.5;
cursor: default;
}

.transport-bar .playbackrate-button{
display: inline;
float:left;
height: 40px;
width: 40px;
cursor: pointer;
background-repeat: no-repeat;
cursor: pointer;
margin-bottom: 4px;
margin-left:9px;
}

.transport-bar .playbackrate-button:hover{
cursor: pointer;
}

.playbackrate-button .fraction {
width: 40px;
height: 40px;
float: left;
display: block;
cursor: pointer;
background-image: url(../../img/player/playerico.svg?v6);
background-size:480px 64px;
margin-bottom: 2px;
}

.playbackrate-button .fraction.fraction--normal {
background-position: -799px 9px;
}

.playbackrate-button .fraction.fraction--quarter {
background-position:-863px 9px;
}

.playbackrate-button .fraction.fraction--half {
background-position:-831px 9px;
}

.playbackrate-button .fraction.fraction--double{
background-position:-9221px 9px;
}

.transport-bar .position-duration-display 
{
display: inline-block;
height: auto;
width: 120px;
position: absolute;
text-align: left;
bottom: 0px;
margin-left:12px;
font-size: 1.2em;
margin-bottom:10px;
}

.transport-bar .position-duration-display span
{
height: 100%;
width: 49%;
font-size: 1.1em;
color: #ffffff;
text-shadow: 1px 1px #000000;
text-align: right;
}

.duration-display 
{
display: none; /* not displayed anymore*/
}

.position-of-duration-display
{
width: 2%;
display: none; /* duration not displayed anymore*/
}

.transport-bar .volume-button {
background-image: url(../../img/player/playerico.svg?v6);
background-position: -352px -1px;
background-size: 640px 96px;
background-repeat: no-repeat;
display: inline-block;
position: relative;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 4px;
margin-bottom: 2px;
}

.transport-bar .volume-button[data-enabled="false"] {
opacity: 0.5;
cursor: default;
}

.transport-bar .volume-button[data-volume="mute"] {
background-image: url(../../img/player/playerico.svg?v6);
background-position: -393px -1px;
background-size: 640px 96px;
}

.transport-bar .volume-button[data-volume="mute"][data-enabled="false"] {
opacity: 0.5;
cursor: default;
}

.transport-bar .volume-button[data-volume="high"] {
background-image: url(../../img/player/playerico.svg?v6);
background-position: -307px -1px;
background-size: 640px 96px;
}
.transport-bar .volume-button[data-volume="high"][data-enabled="false"] {
opacity: 0.5;
cursor: default;
}

.transport-bar .fullscreen-button {
background-image: url(../../img/player/playerico.svg?v6);
background-position: -216px -2px;
background-size: 640px 96px;
background-repeat: no-repeat;
display: inline-block;
position: relative;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 4px;
margin-bottom: 2px;
}

.transport-bar .fullscreen-button[data-enabled="false"] {
opacity: 0.5;
cursor: default;
}

.transport-bar .fullscreen-button[data-exitfullscreen="true"] {
background-image: url(../../img/player/playerico.svg?v6);
background-position: -258px -2px;
background-size: 640px 96px;
}
.transport-bar .fullscreen-button[data-exitfullscreen="true"][data-enabled="false"] {
opacity: 0.5;
cursor: default;
}