[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: rgba(100, 116, 139, 0.5); /*#64748b*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#8064748b, endColorstr=#8064748b);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#8064748b, endColorstr=#8064748b)";
border-radius: 6px;
width: 4px;
right: 0px;
margin-right: 3px;
z-index: 5;
}

.horizontal-scroll-bar {
position: absolute;
background: rgba(148, 163, 184, 0.5); /*#94a3b8*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#8094a3b8, endColorstr=#8094a3b8);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#8094a3b8, endColorstr=#8094a3b8)";
border-radius: 6px;
height: 4px;
top: 0px;
margin-top: 3px;
z-index: 5;
}

.scroll-control {
  width: 100%;
  height: 100%;
  position: relative;
}

.swipe-recognizer {
  width: 100%;
  height: 100%;
}

.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 #0284c7;
}

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

.video-player-root 
{
height: 100%;
width: 100%;
text-align: center;
background: #f1f5f9;
-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-extension-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/playerico.svg?v25);
background-position: -171px -45px;
background-size: 640px 96px;
background-repeat: no-repeat;
cursor: pointer;
color: #fff;
}

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

/*.expand-navigator-handle-pane[data-shift-left="false"] {
left: -47px;
}*/

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

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

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

.expand-comment-handle-pane[data-shift-left="false"] {
left: -47px;
}

.count-sticker {
width: auto;
height: 18px;
min-width: 18px;
line-height: 11px;
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;
cursor: pointer;
}

.count-sticker[data-color="events"] {
background-color: #ff000f;
}

.count-sticker[data-color="comments"] {
background-color: #0284c7;
}

.count-sticker[data-color="comments0"] {
background-color: #64748b;
}

.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;
}
.transport-overlay[data-medialess="true"] {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.transport-overlay-background {
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
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;
opacity: 0.4;
}

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


.filter-panel {
display: inline-flex;
flex-direction: column;
height: 100%;
width: 320px;
background-color: #f1f5f9;
position: absolute;
left: 0px;
border: 1px solid #cbd5e1;
}

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

.keyword-filter-cell-content {
overflow: hidden;
height: 100%;
}

.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-flex;
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/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/icoCollapseCategoryOver.png?v2);
}

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

.keyword-filter-cell .category-value-cell-header:hover .toggle-value-cells[data-expanded="false"]
{
background-image: url('../img/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: #0284c7;
cursor: pointer;
display: flex;
}

.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/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/icoTagFiltersOver.png?v2);
}

.keyword-filter-cell .value-cell .value-checkbox[data-checked="true"]
{
background-image: url(../img/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: #1e293b;
}
.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: #1e293b;

}

.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;
}

/*******************************************************************************/
/*    Comment panel                                                            */
/*******************************************************************************/

.comment-panel {
display: inline-block;
height: 100%;
width: 320px;
background-color: #fff;
position: absolute;
left: 0px;
border: 1px solid #cbd5e1;
line-height: 1.5;
}

.comment-panel .comment-header {
width: 100%;
display: block;
background-color: #f1f5f9;
position: relative;
height: 48px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #cbd5e1;
/*-ms-touch-action: none; prevent default ms touch action since handled by ourself*/
}

.comment-header .comment-header-title-container {
display: inline-block;
width: auto;
margin-top: 1px;
}

.comment-header .comment-header-title {
display: block;
height: 16px;
margin-top: 6px;
text-align: center;
font-size: 1.1em;
color: #1e293b;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 220px;
}

.comment-header .comment-header-comment-count-container {
display: block;
width: auto;
height: 20px;
}

.comment-header .comment-header-comment-count {
display: inline-block;
text-align: center;
font-size: 1.3em;
color: #0f172a;
}

.comment-header .comment-header-total-segment-comment-count {
display: inline-block;
margin-left: 5px;
text-align: center;
font-size: 1.3em;
color: #0f172a;
pointer-events: none;
}

.comment-header-total-segment-comment-count[data-enabled="true"] {
color: #0284c7;
cursor: pointer;
pointer-events: all;
}

.comment-refresh-button {
position: relative;
float: left;
height: 49px;
width: 32px;
cursor: pointer;
margin-left: 0px;
margin-right: 4px;
}

.close-comment-panel {
float: right;
height: 49px;
width: 45px;
background-image: url(../img/playerico.svg?v25);
background-position: -470px -45px;
background-size: 640px 96px;
margin-right: 0px;
cursor: pointer;
}

.comment-panel .comment-edit-cell {
width: 100%;
display: block;
background-color: #f1f5f9;
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #cbd5e1;
}

.comment-edit-cell .comment-edit-cell-form {
display: block;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
width: 100%;
}

.comment-edit-cell .comment-edit-cell-box {
display: block;
width: 100%;
height: auto;
resize: none; /* disable resize handle */
color: black; /* text color */
padding: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 1.0);
border: 1px solid #cbd5e1;
cursor: auto;
font-size: 1.3em;
line-height: 1.45;
font-family: inherit;
-webkit-appearance: none;
-moz-appearance: none;
}
.comment-edit-cell .comment-edit-cell-box:focus {
  outline: none;
  border: 1px solid #94a3b8;
}

.comment-edit-cell .comment-edit-cell-toolbar {
display: block;
width: 100%;
height: 16px;
margin-top: 4px;
font-size: 1.2em;
font-weight: bold;
}

.comment-edit-cell .comment-edit-cell-save {
display: inline;
position: relative;
padding-left: 5px;
padding-right: 5px;
color: #0284c7;
text-align: left;
cursor: pointer;
}

.comment-edit-cell .comment-edit-cell-cancel {
display: inline;
position: relative;
padding-left: 5px;
padding-right: 5px;
color: #0284c7;
text-align: left;
cursor: pointer;
}

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

.comment-panel .comment-list-cell {
width: 100%;
position: absolute; /*without position:absolute and top: the scrollEngine doesn't work*/
top:90px;
margin-top: 3px;
display: block;
overflow: hidden;
bottom: 0px;
left: 0px;
padding-left: 5px;
padding-right: 5px;
/*-ms-touch-action: none; prevent default ms touch action since handled by ourself*/
}

.comment-list-scrollcontainer {
width: 100%;
height: 100%;
overflow: hidden;
}

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

.comment-panel .comment-list-trailer {
width: 100%;
display: block;
overflow: hidden;
left: 0px;
text-align: left;
padding-left: 5px;
padding-right: 5px;
margin-top: 8px;
margin-bottom: 16px;
}

.comment-list-trailer .comment-trailer-total-segment-comment-count {
display: inline-block;
font-size: 1.3em;
color: #0f172a;
pointer-events: none;
}

.comment-trailer-total-segment-comment-count[data-enabled="true"] {
color: #0284c7;
cursor: pointer;
pointer-events: all;
}

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

.comment-panel .comment-item-cell {
width: 100%;
display: block;
overflow: hidden;
left: 0px;
text-align: left;
padding-left: 5px;
padding-right: 5px;
margin-top: 4px;
margin-bottom: 4px;
}

.comment-item-cell .comment-item-cell-comment {
width: 100%;
display: block;
font-size: 1.3em;
font-weight: normal;
margin-top: 2px;
user-select: text;
line-height: 1.45;
padding-right: 10px;
}

.comment-item-cell .comment-item-cell-toolbar {
width: 100%;
display: block;
font-size: 1.0em;
font-weight: normal;
margin-top: 6px;
margin-bottom: 10px;
position: relative;
}

.comment-item-cell-toolbar .comment-item-cell-avatar {
float: left;
position: relative;
width: 30px;
height: 30px;
margin-top: 4px;
}

.comment-item-cell-toolbar .comment-item-cell-author-and-date {
font-size: 1.1em;
font-weight: normal;
display: inline-block;
margin-left: 10px;
padding-top: 2px;
}

.comment-item-cell-author-and-date .comment-item-cell-author {
display: block;
font-weight: bold;
}

.comment-item-cell-author-and-date .comment-item-cell-date {
display: block;
}

.comment-item-cell .comment-item-cell-edit {
display: inline;
position: relative;
padding-left: 5px;
padding-right: 5px;
color: #0284c7;
text-align: left;
cursor: pointer;
}

.comment-item-cell .comment-item-cell-delete {
display: inline;
position: relative;
padding-left: 5px;
color: #0284c7;
text-align: left;
cursor: pointer;
}

.comment-item-cell-toolbar .comment-item-cell-menu-button {
float: right;
font-size: 1.1em;
position: relative;
margin: 6px 15px 0 0;
height: calc(100% - 8px);
width: 20px;
font-size: 22px;
padding: 5px;
line-height: 15px;
border-radius: 10px;
cursor: pointer;
}
.comment-item-cell-menu-button:hover {
font-weight: bolder;
color: #000;
}
.comment-item-cell-menu-button:after {
content: "\22EE";
}

.comment-item-cell-menu {
position: absolute;
z-index: 1;
background: #ffffff;
top: 0px;
margin-top: 0px;
right: 35px;
text-align: left;
color: #000000;
border-radius: 5px;
padding: .25rem 0;
--tw-shadow: 0 0 10px #1e293b40;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-width: 0;
}
.comment-item-cell-menu[data-shiftup="true"] {
margin-top: -20px;
}
.comment-item-cell-menu:focus {
outline: none;
}
.comment-item-cell-menu div {
cursor: pointer;
white-space: nowrap;
padding: .375rem .75rem;
text-align: left;
font-size: .9375rem;
line-height: 1.2;
outline-width: 0;
}
.comment-item-cell-menu div:hover {
background-color: #f1f5f9;
cursor: pointer;
}

.comment-item-cell .comment-item-cell-separator {
display: block;
position: relative;
margin-top: 4px;
margin-bottom: 6px;
height: 1px;
background-color: #cbd5e1;
left: 0px;
margin-right: 4px;
}

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

.avatar-image {
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%;
background-color: #fff;
}


.avatar-circle {
display: inline-block;
width: 30px;
height: 30px;
/*-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;*/
border-radius: 50%;
background-color: #f1f5f9;
}

.avatar-initials {
display: inline-block;
font-size: 20px;
text-align: center;
width: 30px;
display: inline-block;
position: absolute;
color: #fff;
transform: translate(-30px,-2px);
}


/*******************************************************************************/
/*    MATCH NAVIGATOR PANEL                                                   */
/*******************************************************************************/
.match-navigator-panel {
display: inline-flex;
flex-direction: column;
width: 320px;
height: 100%;
background-color: #fff;
position: absolute;
right: 0px;
z-index: 1;
border: 1px solid #cbd5e1;
border-right: 1px solid #cbd5e1;
}

/* Match navigator panel > Match title header */
.match-title-header {
height: 48px;
width: 100%;
background-color: #f1f5f9;
border-bottom: 1px solid #cbd5e1;
flex-shrink: 0;
}

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

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

.toggle-keyword-filter {
float: left;
height: 49px;
width: 35px;
background-image: url(../img/playerico.svg?v25);
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-extension {
float: right;
height: 49px;
width: 35px;
background-image: url(../img/playerico.svg?v25);
background-position: -216px -45px;
background-size: 640px 96px;
margin-right: 7px;
cursor: pointer;
}


.match-title-cell {
height: 100%;
display: inline-block;
}

.match-title-title-and-statistics-container-cell {
height: 100%;
display: inline-block;
}

.match-title-title-container 
{
height: 16px;
text-align: center;
color: #1e293b;
font-size: 1.1em;
margin-top:9px;
}

.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 {
height: 20px;
text-align: center;
font-size: 1.3em;
color: #0f172a;
display: block;
}

.match-title-cell .match-statistics {
display: inline-block;
padding-left: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

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

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

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

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

.match-title-cell-comment-bubble {
height: 36px;
width: 36px;
background-image: url(../img/playerico.svg?v25);
background-position: -518px -49px;
background-size: 640px 96px;
float: right;
margin-top: 4px;
margin-left: -28px;
margin-right: 0px;
cursor: pointer;
}

.match-title-cell-comment-count {
font-size: 1.0em;
text-align: center;
height: 36px;
line-height: 36px;
width: 36px;
float: right;
margin-top: 4px;
transform: translate(8px,0px);
pointer-events: none;
}



/* Match navigator panel > option cell */
.option-cell {
flex-shrink: 0;
height: 42px;
width: 100%;
position: relative;
color: #0284c7;
border-bottom: 1px solid #cbd5e1;
text-align: center;
background-color: #f1f5f9;
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: #0284c7;
background-image: url(../img/icoPlayAll.png?v2);
background-size: 23px 13px;
background-repeat: no-repeat;
background-position: 10px center;
padding-left: 43px;
padding-right: 10px;
margin-right: 1px;
color: #ffffff;
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-fixmargin1="true"] {
margin-right: -40px; /*hack to fix TV2-564*/
}
.option-play-events[data-fixmargin2="true"] {
margin-right: -33px;
}
.option-play-events[data-fixmargin3="true"] {
margin-right: -25px;
}

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

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

.option-edit-mode {
background-image: url(../img/playerico.svg?v25);
background-position: -516px -124px;
background-size: 640px 160px;
background-repeat: no-repeat;
display: none;
position: relative;
height: 40px;
width: 43px;
cursor: pointer;
margin-left: 10px;
margin-right: 0px;
margin-top: 1px;
margin-bottom: -14px;
float:right;
}
.option-edit-mode[data-selected="true"] {
background-position: -475px -124px;
}
.option-edit-mode[data-squeezed="true"] {
margin-left: 0px;
}

.option-presentation-mode {
height: 22px;
width: auto;
background-image: url(../img/icoAutoPauseOff.png?v25);
background-repeat: no-repeat;
font-size: 1.4em;
margin-top: 9px;
padding-top: 3px;
padding-left: 30px;
cursor: pointer;
display: inline-block;
text-align: left;
margin-right: 16px;
margin-left: -40px;
}
.option-presentation-mode[data-fixmargin="true"] {
margin-right: 0px;
margin-left: 0px;
}
.option-presentation-mode[data-selected="true"] 
{
background-image: url(../img/icoAutoPauseOn.png?v25);
}
.option-presentation-mode[data-squeezed="true"] {
margin-left: -35px;
margin-right: 4px;
}

/*******************************************************************************/
/* Match navigator panel > multi-check cell */
.multicheck-cell {
flex-shrink: 0;
height: 42px;
width: 100%;
position: relative;
color: #0284c7;
border-bottom: 1px solid #cbd5e1;
text-align: center;
background-color: #fff;
vertical-align: middle;
padding-right: 3px;
}

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

.multicheck-stats-text {
font-size: 13px;
font-weight: normal;
line-height: 42px;
color: #0f172a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
margin-top: 1px;
display: inline-block;
}

.multicheck-uncheck-all-button {
position: relative;
margin-left: 18px;
margin-right: 6px;
margin-top: -1px;
cursor: pointer;
float: left;
display: inline-block;
}

.multicheck-uncheck-all-button:after {
content: "\2716";
font-size: 22px;
font-weight: normal;
line-height: 42px;
color: #0284c7;
float: right;
margin-top: 0px;
}

/*.multicheck-uncheck-all-button:hover:after {
color: #1e293b;
}*/

.multicheck-add-button {
position: relative;
float: right;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}

.multicheck-delete-button {
position: relative;
float: right;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}

.multicheck-download-button {
position: relative;
float: right;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}


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

.color-filter-cell {
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[data-background2="true"] {
  background-color: #f1f5f9;
}

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

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

.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: inline-block;
padding-left: 5px;
padding-right: 5px;
width: 100%;
}

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

.string-search-cell .search-cell-search-box {
display: inline-block;
width: 100%;
height: 25px;
min-height: 25px;
margin: 0px;
padding: 0px;
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 #cbd5e1;
cursor: auto;
font-family: inherit;
-webkit-appearance: none;
-moz-appearance: none;
}
.search-cell-search-box[data-enabled="false"] {
opacity: 0.5;
}

.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 #94a3b8;
}

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

.string-search-cell .search-cell-search-button {
background-image: url(../img/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: #f1f5f9;
border-left: 1px solid #cbd5e1;
margin-top: -2px;
}

.search-cell-comment-bubble {
height: 36px;
width: 36px;
float: right;
background-image: url(../img/playerico.svg?v25);
background-position: -595px -49px;
/* must use 635 instead of 640, because the 2 bubble icons have dx=31, where 635=480 + 5*31 */
/* when using 640, the 2 icons are offset to each other by a sub-pixel fraction which is */
/* extremely annoying and impossible to correct using fractional background-position (tried with -595.3333, didn't work)*/
background-size: 635px 96px;
margin-left: 0px;
margin-right: 4px;
margin-top: 3px;
/*transform: scale(0.9);*/
/*transform: translate(-36px,0px);*/
cursor: pointer;
}

.search-cell-comment-bubble[data-selected="true"] {
background-position: -554px -49px;
}

.search-cell-multicheck-checkbox {
background-image: url(../img/playerico.svg?v25);
background-position: -615.7px -129px;
background-size: 640px 160px;
background-repeat: no-repeat;
position: relative;
height: 36px;
width: 20px;
min-width: 20px;
cursor: pointer;
margin-left: 13px;
margin-right: 13px;
margin-top: 3px;
display: none;
float: left;
}
.search-cell-multicheck-checkbox[data-checked="true"] {
background-position: -589px -129px;
}
.search-cell-multicheck-checkbox[data-visible="true"] {
display: inline-block;
}

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


.match-navigator-panel.match-navigator-panel-full-width {
width: 100%;
}

.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%);
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 {
width: 100%;
height: 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: #cbd5e1;
left: 0px;
right: 0px;
bottom: 0px;
}

.scene-title-cell 
{
position: relative;
width: 100%;
height: 36px;
border-bottom: 1px solid #cbd5e1;
background-color: #e2e8f0;
}


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


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

.scene-title-cell .scene-title
{
position: absolute;
left: 45px;
bottom: 40%;
font-size: 1.4em;
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: 46px;
top: 54%;
font-size: 1.0em; 
padding-top: 2px;
color: #64748b;
}
.scene-title-cell .scene-duration
{
position: absolute;
right: 0px;
top: 54%;
font-size: 1.0em; 
margin-right: 15px;
padding-top: 2px;
color: #64748b;
}

.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 {
position: absolute;
z-index: 1;
background: #ffffff;
top: 0px;
right: 35px;
text-align: left;
color: #000000;
border-radius: 5px;
padding: .25rem 0;
--tw-shadow: 0 0 10px #1e293b40;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-width: 0;
}
.segment-cell-menu:focus {
outline: none;
}
.segment-cell-menu div {
cursor: pointer;
white-space: nowrap;
padding: .375rem .75rem;
text-align: left;
font-size: .9375rem;
line-height: 1.4;
outline-width: 0;
}
.segment-cell-menu div:hover {
background-color: #f1f5f9;
cursor: pointer;
}
.segment-cell-menu[data-squeezed="true"] div {
font-size: .8rem;
line-height: 0.8;
}

.segment-cell * {
cursor: pointer;
}
.segment-cell[data-playable="false"] * {
cursor: not-allowed;
}
.segment-cell[data-busy="true"] * {
cursor: not-allowed;
pointer-events: none; /*no interaction on any of the sub-items*/
}

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

.segment-cell[data-selected="true"] {
background-color: #cbd5e1;
background-image: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 57px, #cbd5e1 57px);
background-image: -moz-linear-gradient(left, #ffffff 0%, #ffffff 57px, #cbd5e1 57px);
background-image: -o-linear-gradient(left, #ffffff 0%, #ffffff 57px, #cbd5e1 57px);
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 57px, #cbd5e1 57px);
}
.segment-cell[data-highlighted="true"] {
background-color: #e2e8f0;
background-image: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 57px, #e2e8f0 57px);
background-image: -moz-linear-gradient(left, #ffffff 0%, #ffffff 57px, #e2e8f0 57px);
background-image: -o-linear-gradient(left, #ffffff 0%, #ffffff 57px, #e2e8f0 57px);
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 57px, #e2e8f0 57px);
}
.segment-cell[data-selected-and-highlighted="true"] {
background-color: #94a3b8;
background-image: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 57px, #94a3b8 57px);
background-image: -moz-linear-gradient(left, #ffffff 0%, #ffffff 57px, #94a3b8 57px);
background-image: -o-linear-gradient(left, #ffffff 0%, #ffffff 57px, #94a3b8 57px);
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 57px, #94a3b8 57px);
}
.segment-cell[data-playable="false"] {
color: #cbd5e1;
cursor: not-allowed;
}
.segment-cell[data-busy="true"] {
color: #cbd5e1;
cursor: not-allowed;
pointer-events: none; /*no interaction on the root item*/
}
.segment-cell[data-busy="true"][data-selected="true"] {
color: #94a3b8;
}
.segment-cell[data-moving="true"] {
z-index: 1;
}
.segment-cell[data-menu-displayed="true"] {
z-index: 1;
}
.segment-cell[data-hidden="true"] {
opacity: 0;
}
.segment-cell[data-movingclone="true"] {
background-color: #ffc8c8;
z-index: 2;
display: none;
}
.segment-cell[data-movingclone="true"][data-movingclone-moving="true"] {
background-color: #a8c8ff;
z-index: 2;
display: inline-block;
}

.segment-cell-title {
font-size: 1.4em;
position: relative;
height: 100%;
line-height: 36px;
display: inline-block;
width: auto;
padding-left: 10px;
max-width: 156px; /* will be overriden in code by calc(100% - ...)*/
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
}

.segment-cell-titlecontainer-playlist {
position: relative;
display: inline-block;
width: auto;
max-width:186px;
top: -2px;
}

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

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

.segment-cell-leftpart {
position: relative;
height: 100%;
width: 50px;
display: inline-block;
}

.segment-cell-position {
font-size: 1.2em;
padding-right: 0px;
position: absolute;
text-align: center;
height: 100%;
line-height: 36px;
width: 50px;
display: none;
vertical-align: top;
padding-top: 0px;
}
.segment-cell-position[data-movehandle-mode="visible"] {
width: 42px;
padding-right: 5px;
cursor: grab;
}
.segment-cell-position[data-movehandle-mode="disabled"] {
width: 42px;
padding-right: 5px;
cursor: grab;
}
.segment-cell-position[data-movehandle-mode="invisible"] {
width: 42px;
padding-right: 5px;
}
.segment-cell-position[data-position-visible="true"] {
display: inline-block;
}   

.segment-cell-checkbox {
background-image: url(../img/playerico.svg?v25);
background-position: -615.7px -129px;
background-size: 640px 160px;
background-repeat: no-repeat;
position: absolute;
height: 36px;
width: 20px;
cursor: pointer;
margin-left: 19px;
margin-right: 11px;
display: none;
}
.segment-cell-checkbox[data-checked="true"] {
background-position: -589px -129px;
}
.segment-cell-checkbox[data-movehandle-mode="visible"] {
margin-left: 11px;
}
.segment-cell-checkbox[data-movehandle-mode="disabled"] {
margin-left: 11px;
}
.segment-cell-checkbox[data-movehandle-mode="invisible"] {
margin-left: 11px;
}
.segment-cell-checkbox[data-checkbox-visible="true"] {
display: inline-block;
cursor: pointer;
}

.segment-cell-movehandle {
background-image: url(../img/playerico.svg?v25);
background-position: -570px -130px;
background-size: 640px 160px;
background-repeat: no-repeat;
display: inline-block;
position: relative;
height: 33px;
width: 8px;
cursor: pointer;
margin-left: 2px;
margin-right: -2px;
margin-top: 2px;
}
.segment-cell-movehandle[data-movehandle-mode="visible"] {
opacity: 1.0;
cursor: grab;
}
.segment-cell-movehandle[data-movehandle-mode="disabled"] {
opacity: 0.5;
cursor: grab;
}
.segment-cell-movehandle[data-movehandle-mode="invisible"] {
opacity: 0.0;
}

.segment-cell-add-button {
position: relative;
display: inline-block;
float: right;
height: 32px;
width: 32px;
cursor: pointer;
margin-left: 0px;
margin-right: 0px;
margin-top: 2px;
}

.segment-cell-delete-button {
position: relative;
display: inline-block;
float: right;
height: 32px;
width: 32px;
cursor: pointer;
margin-left: 0px;
margin-right: 0px;
margin-top: 2px;
}

.segment-cell-edit-button {
position: relative;
display: inline-block;
float: right;
height: 32px;
width: 32px;
cursor: pointer;
margin-left: 0px;
margin-right: 0px;
margin-top: 2px;
}

.segment-cell-color 
{
height: 100%;
width: 2px;
position: relative;
background-color: #cbd5e1;
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;
}

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

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


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

.segment-cell-comment-bubble {
height: 36px;
width: 36px;
float: right;
background-image: url(../img/playerico.svg?v25);
background-position: -518px -49px;
background-size: 640px 96px;
margin-left: 4px;
margin-right: 0px;
cursor: pointer;
}
.segment-cell-comment-bubble[data-annotation-segment="true"] {
background-image: url(../img/playerico.svg?v25);
background-position: -86px -126px;
background-size: 640px 160px;
}
.segment-cell-comment-bubble[data-active="true"] {
background-image: url(../img/playerico.svg?v25);
background-position: -86px -126px;
background-size: 640px 160px;
}

.segment-cell-comment-count {
font-size: 1.0em;
text-align: center;
height: 100%;
line-height: 36px;
width: 36px;
display: inline-block;
position: absolute;
transform: translate(0px,0px);
pointer-events: none;
}
.segment-cell-comment-bubble[data-active="true"] .segment-cell-comment-count {
color: #0284c7;
}

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

.segment-cell-menu-entry {
font-size: 1.1em;
position: relative;
margin: 4px 0px 0 0;
height: calc(100% - 8px);
float: right;
background-position: center;
background-repeat: no-repeat;
width: 35px;
font-size: 22px;
border-radius: 10px;
padding:5px;
line-height:15px;
opacity:0.2;
pointer-events: none;
}
.segment-cell-menu-entry[data-enabled="true"] {
cursor: pointer;
opacity:1;
pointer-events: all;
}
.segment-cell-menu-entry[data-enabled="true"]:hover {
font-weight: bolder;
}
.segment-cell-menu-entry:after {
content: "\22EE";
}

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

.segment-cell.last .segment-cell-separator {
  left: 0;
}

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

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

.toggle-expand-all-categories 
{
float: left;
height: 18px;
width: 18px;
display: inline-block;
background-image: url(../img/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/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/playerico.svg?v25);
background-position: -261px -45px;
background-size: 640px 96px;
background-repeat: no-repeat;
display: none;
margin-right: 5px;
}

.search-header .close-match-navigator-and-extension 
{
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 #cbd5e1;
cursor: auto;
font-family: inherit;
-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 #94a3b8;
}

.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/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: -12px;
left: 5%;
position: relative;
height: auto;
background-color: #ffffff;
max-height: 400px;
overflow: auto;
z-index: 15;
border: 1px solid #94a3b8;
-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: #0284c7;
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: #cbd5e1;
color: #000000;
}
.filter-selection-cell {
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 #cbd5e1;
padding-top: 8px;
flex-shrink: 0;
}

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

.filter-selection-hint 
{
position: relative;
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: "i";
display: inline-block;
height: 100%;
vertical-align: middle;
font-size: 14px;
font-weight: bold;
border: 1px solid #94a3b8;
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: #0284c7;
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/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: #0284c7;
vertical-align: middle;
float: right;
margin: -16px 3px 0 0;
}

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

.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: #0284c7;
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/icoMarkersTagOff.png?v3);
background-repeat: no-repeat;
pointer-events: none;
}


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

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

.event-marker .event-marker-body[data-markertype="comment"] /* comment marker - no state*/ {
background-image: url(../img/icoMarkersCommentOff.png?v3);
}
.event-marker-container[data-selected = "true"] .event-marker-body[data-markertype="comment"] /* comment marker - selected */ {
background-image: url(../img/icoMarkersCommentOn.png?v3);
}
.event-marker-container[data-highlighted = "true"] .event-marker-body[data-markertype="comment"] /* comment marker - highlighted */ {
background-image: url(../img/icoMarkersCommentOn.png?v3);
}

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

.event-marker-color[data-markertype="comment"] {
background-color: #99b7c4;
}

.event-duration-highlight 
{
background: rgba(255, 255, 255, 1);
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;
}
.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[data-editmode="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/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: #64748b;
margin: 30px;
}

.modal-dialog-box .cancel-button 
{
background-color: #f1f5f9;
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: #f1f5f9;
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;
}
/* @@TIM maybe remove */
/*.drawing-device-group-element,
.composition-container,
.htmlvideoelement-container
{
  height: 100%;
}*/

.htmlvideoelement-container {
width: 100%;
height: 100%;
}

.htmlvideoelement-subcontainer {
width: 100%;
height: 100%;
}

#composition-container img 
{
pointer-events: none;
height: 100%;
width: 100%;
object-fit: contain;
position: relative;
}

#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: #d0d0d0;
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/loading.png?v2);
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
opacity: 0.7;
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*/
}

.busyindicator {
background-image: url(../img/loading.png?v2);
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
opacity: 0.7;
width: 110px;
height: 110px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -55px;
margin-top: -55px;
z-index: 1;
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;
}

.busyindicator-text {
font-size: 1.4em;
position: absolute;
left: 0;
top: calc(50% + 70px);
display: inline-block;
width: 100%;
vertical-align: top;
text-align: center;
color:#eee;
}

.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;
white-space: pre-wrap;
}

.no-data-hint[data-retrieving="true"] 
{
background-image: url(../img/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/playerico.svg?v25);
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/playerico.svg?v25);
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/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/playerico.svg?v25);
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/playerico.svg?v25);
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/playerico.svg?v25);
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: #1e293b;
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/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/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/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/icoAudioBadFormat.png?v2);
}
.pi-metadata-title .playpause-audio-button[data-pause="false"][data-enabled="true"][data-error="false"] 
{
background-image: url(../img/icoAudioStop.png?v2);
}

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

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

.video-player-root[data-metadata-video="vsplit"] .pi-metadata-title .playpause-audio-button[data-error="true"] 
{
background-image: url(../img/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/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/icoAudioPlay.png?v2);
}

.video-player-root[data-metadata-video="hsplit"] .pi-metadata-title .playpause-audio-button[data-error="true"] 
{
background-image: url(../img/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/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: #cbd5e1;
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="overlay"] .pi-metadata-keyword-description {
background: rgba(0, 0, 0, 0.6);
max-width: 97%;
}

.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: hidden;
white-space: normal;
-ms-touch-action: none; /* prevent default ms touch action since handled by ourself*/
}

.pi-metadata-keyword-description-container {
width: 100%;
height: 100%;
margin-top: 0px;
}
.video-player-root[data-metadata-video="overlay"] .pi-metadata-keyword-description-container {
margin-top: 24px;
}

/* scrollbar styling for chromium browsers */
.pi-metadata-keyword-description-content::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.pi-metadata-keyword-description-content::-webkit-scrollbar-track {
background: transparent;
}
.pi-metadata-keyword-description-content::-webkit-scrollbar-thumb {
background-color: #6b6b6b;
border-radius: 3px;
border: transparent;
}

.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/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:#0284c7;
}

.pi-metadata-keyword-description .pi-metadata-description a:hover {
color:#64748b;
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/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;
overflow: hidden;
} 

.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/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;
}

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

.volume-scrubber.hidden {
  display: hidden;
  width: 0;
}


.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/playerico.svg?v25);
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/playerico.svg?v25);
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/playerico.svg?v25);
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/playerico.svg?v25);
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 .jumpbackward-button {
background-image: url(../img/playerico.svg?v25);
background-position: -86px -212px;
background-size: 640px 260px;
background-repeat: no-repeat;
display: inline-block;
float: left;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 4px;
margin-bottom: 2px;
}

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

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

.transport-bar .jumpforward-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/playerico.svg?v25);
background-size:480px 128px;
margin-bottom: 2px;
}

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

.playbackrate-button .fraction.fraction--eighth {
background-position: -895px -23px;
}

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

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

.playbackrate-button .fraction.fraction--double{
background-position: -927px -23px;
}

.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;
}

.video-control-bar[data-position-compact="true"] .position-duration-display {
margin-left: -5px;
}

.transport-bar .position-display
{
font-size: 1.1em;
color: #ffffff;
text-shadow: 1px 1px #000000;
text-align: right;
}

.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/playerico.svg?v25);
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/playerico.svg?v25);
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/playerico.svg?v25);
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/playerico.svg?v25);
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/playerico.svg?v25);
background-position: -258px -2px;
background-size: 640px 96px;
}
.transport-bar .fullscreen-button[data-exitfullscreen="true"][data-enabled="false"] {
opacity: 0.5;
cursor: default;
}

.transport-bar .addannotationsegment-button {
background-image: url(../img/playerico.svg?v25);
background-position: -4px -120px;
background-size: 640px 160px;
background-repeat: no-repeat;
display: none;
position: relative;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 4px;
margin-bottom: 2px;
}
.video-control-bar[data-show-addannotationsegment="true"] .addannotationsegment-button {
display: inline-block;
}
.video-control-bar[data-enable-addannotationsegment="false"] .addannotationsegment-button {
opacity: 0.5;
cursor: default;
}

.transport-bar .addnormalsegment-button {
display: none;
position: relative;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 4px;
margin-bottom: 0px;
}
.video-control-bar[data-show-addnormalsegment="true"] .addnormalsegment-button {
display: inline-block;
}
.video-control-bar[data-enable-addnormalsegment="false"] .addnormalsegment-button {
opacity: 0.5;
cursor: default;
}

.transport-bar .createplaylistitem-button {
display: none;
position: relative;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: 4px;
margin-bottom: 0px;
}
.video-control-bar[data-show-createplaylistitem="true"] .createplaylistitem-button {
display: inline-block;
}
.video-control-bar[data-enable-createplaylistitem="false"] .createplaylistitem-button {
opacity: 0.5;
cursor: default;
}

.transport-bar .multiview-button {
background-image: url(../img/playerico.svg?v25);
background-position: -130px -120px;
background-size: 640px 160px;
background-repeat: no-repeat;
display: none;
position: relative;
height: 40px;
width: 40px;
cursor: pointer;
margin-left: -2px;
margin-right: 0px;
margin-bottom: 2px;
}

.video-control-bar[data-monitor-mode="true"] .multiview-button {
margin-left: -4px;
margin-right: -4px;
}

.transport-bar .multiview-button[data-viewindex="0"][data-selected="false"] {
background-position: -130px -120px;
}
.transport-bar .multiview-button[data-viewindex="0"][data-selected="true"] {
background-position: -173px -120px;
}
.transport-bar .multiview-button[data-viewindex="1"][data-selected="false"] {
background-position: -217px -120px;
}
.transport-bar .multiview-button[data-viewindex="1"][data-selected="true"] {
background-position: -260px -120px;
}
.transport-bar .multiview-button[data-viewindex="2"][data-selected="false"] {
background-position: -300px -120px;
}
.transport-bar .multiview-button[data-viewindex="2"][data-selected="true"] {
background-position: -343px -120px;
}
.transport-bar .multiview-button[data-viewindex="3"][data-selected="false"] {
background-position: -388px -120px;
}
.transport-bar .multiview-button[data-viewindex="3"][data-selected="true"] {
background-position: -431px -120px;
}


.transport-bar .multiview-button[data-visible="true"] {
display: inline-block;
}
.transport-bar .multiview-button[data-visible="false"] {
display: none;
}

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

.pi-info-edit-panel {
  width: 100%;
  display: none;
  position: absolute;
  top:0px;
  left:0px;
  bottom:0px;
  z-index:100;
  background-color: #f1f5f9;
  padding-left: 6px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 32px;
}

.pi-info-edit-panel .pi-info-edit-form {
  display: block;
  background-color: #f1f5f9;
  padding-left: 2px;
  padding-right: 16px;
  padding-top: 0px;
  padding-bottom: 0px;
  width: 100%;
}

.pi-info-edit-panel .pi-info-edit-title {
  display: none;
  font-size: 1.4em;
  font-weight: bold;
  text-align: left;
  margin-bottom: 14px;
  margin-left: 1px;
  margin-top: 6px;
  color: #1e293b;
}
.pi-info-edit-panel .pi-info-edit-title[data-visible="true"] {
  display: block;
}

.pi-info-edit-panel .pi-info-edit-help {
  text-align: left;
  font-size: 1.2em;
  color: #1e293b;
  margin-left: 2px;
  margin-bottom: 4px;
}

.pi-info-edit-panel .pi-info-edit-label {
  display: block;
  margin-top: 0px;
  text-align: left;
  font-size: 1.2em;
  color: #1e293b;
}

.pi-info-edit-panel .pi-info-edit-name-box {
  display: block;
  width: 100%;
  height: 25px;
  resize: none; /* disable resize handle */
  font-size: 1.2em;
  color: #1e293b;
  margin-top: 2px;
  margin-bottom: 10px;
  padding: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 1.0);
  border: 1px solid #cbd5e1;
  cursor: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.pi-info-edit-panel .pi-info-edit-name-box:focus {
  outline: none;
  border: 1px solid #94a3b8;
}

.pi-info-edit-panel .pi-info-edit-description-box {
  display: block;
  width: 100%;
  height: 88px;
  min-height: 50px;
  resize: vertical;
  font-size: 1.2em;
  color: #1e293b;
  margin-top: 2px;
  padding: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 1.0);
  border: 1px solid #cbd5e1;
  overflow-y: scroll;
  cursor: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.pi-info-edit-panel .pi-info-edit-description-box[data-resizable="false"] {
  resize: none;
}

.pi-info-edit-panel .pi-info-edit-description-box:focus {
  outline: none;
  border: 1px solid #94a3b8;
}

.pi-info-edit-panel .pi-info-edit-color-selection-container {
  display: block;
}
.pi-info-edit-panel .pi-info-edit-color-selection-container[data-visible="false"] {
  display: none;
}

.pi-info-edit-panel .pi-info-edit-color-selection-cell {
  display: block;
  margin-top: 0px;
  margin-bottom: 6px;
  height: 30px;
  padding-top: 5px;
}

.pi-info-edit-panel .pi-info-edit-selectedplaylist-list-container {
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}
.pi-info-edit-panel .pi-info-edit-selectedplaylist-list-container[data-visible="false"] {
  display: none;
}

.pi-info-edit-panel .pi-info-edit-addtoplaylist-label {
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: left;
  font-size: 1.2em;
  color: #1e293b;
}

.pi-info-edit-panel .pi-info-edit-playlistrequired-container {
  margin-top: 8px;
  display: block;
}
.pi-info-edit-panel .pi-info-edit-playlistrequired-container[data-visible="false"] {
  display: none;
}

.pi-info-edit-panel .pi-info-edit-playlistrequired-info {
  float: left;
  margin-top: -3px;
  width: 24px;
  height: 18px;
}

.pi-info-edit-panel .pi-info-edit-playlistrequired-label {
  margin-top: 0px;
  margin-left: 28px;
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
  color: #1e293b;
}

.pi-info-edit-panel .pi-info-edit-playlistrequired-help {
  margin-top: 5px;
  margin-bottom: 2px;
  margin-left: 28px;
  text-align: left;
  font-size: 1.2em;
  font-style: italic;
  color: #1e293b;
}

.pi-info-edit-panel .pi-info-edit-selectedplaylist-list {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  font-size: 1.2em;
  color: #1e293b;
}
.pi-info-edit-panel .pi-info-edit-selectedplaylist-list[data-visible="false"] {
  display: none;
}

.pi-info-edit-panel .pi-info-edit-playlist-row {
  margin-bottom: 4px;
}

.pi-info-edit-panel .pi-info-edit-playlist-check {
  margin-top: -3px;
  margin-right: 4px;
  width: 24px;
  height: 18px;
  float: left;
}

.pi-info-edit-panel .pi-info-edit-playlist-name {
}

.pi-info-edit-panel .pi-info-edit-playlist-clear {
  clear: left;
}

.pi-info-edit-panel .pi-info-edit-open-staticplaylist-selection-button {
  display: block;
  position: relative;
  margin-top: 7px;
  margin-left: 28px;
  padding-left: 0px;
  color: #0284c7;
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
}


.pi-info-edit-panel .pi-info-edit-toolbar {
  display: block;
  width: 100%;
  height: 32px;
  padding-top: 9px;
  font-size: 1.2em;
  font-weight: bold;
  border-top: 1px solid #dedede
}

.pi-info-edit-panel .pi-info-edit-save {
  display: inline;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  color: #0284c7;
  text-align: left;
  cursor: pointer;
}
.pi-info-edit-save[data-enabled="false"] {
  opacity: 0.5;
  cursor: default;
}

.pi-info-edit-panel .pi-info-edit-cancel {
  display: inline;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  color: #0284c7;
  text-align: left;
  cursor: pointer;
}


/*--------------------------------------------------*/
/*    Keyword editing                               */
/*--------------------------------------------------*/

.pi-info-edit-panel .pi-info-edit-keywordedit-list-container {
  display: block;
}
.pi-info-edit-panel .pi-info-edit-keywordedit-list-container[data-visible="false"] {
  display: none;
}

.keywordedit-list-cell {
  display: block;
  overflow: visible;
  padding-left: 2px;
  margin-right: 16px;
}

/*.keywordedit-list-scrollcontainer {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
*/
.pi-info-edit-scrollcontainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*-------*/

.keywordedit-item-cell {
  position: relative;
  width: 100%;
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.keywordedit-item-cell .keywordedit-item-cell-category {
  position: absolute;
  left: 0px;
  width: 36%;
  display: inline-block;
  font-size: 1.2em;
  color: #1e293b;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  white-space: nowrap;
  padding-right: 4px;
}
.isnotdesktop .keywordedit-item-cell .keywordedit-item-cell-category {
  width: 32%;
}
/*.keywordedit-item-cell:hover .keywordedit-item-cell-category {
  width: 16%;
}*/

/*.keywordedit-item-cell .keywordedit-item-cell-value {
  width: 50%;
  display: inline-block;
  overflow: hidden;
  font-size: 1.4em;
  color: #1e293b;
  text-align: left;
}*/

.keywordedit-item-cell .keywordedit-item-cell-keywordsearch {
  position: absolute;
  right: 0px;
  width: 63%;
  height: 26px;
  display: inline-block;
  overflow: visible;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 0px;
}
.isnotdesktop .keywordedit-item-cell .keywordedit-item-cell-keywordsearch {
  right: 54px;
  width: 49%;
}
/*.keywordedit-item-cell:hover .keywordedit-item-cell-keywordsearch {
  width: 44%;
}*/

.keywordedit-item-cell .keywordedit-item-cell-toolbar {
  position: absolute;
  right: 64%;
  /*width: 24%;*/
  height: 32px;
  display: none;
  overflow: hidden;
  background: #f1f5f9;
}
.isdesktop .keywordedit-item-cell:hover .keywordedit-item-cell-toolbar {
  display: inline-block;
}
.isnotdesktop .keywordedit-item-cell .keywordedit-item-cell-toolbar {
  display: inline-block;
  right: 0px;
}

.keywordedit-item-cell-add-button {
  position: relative;
  display: inline-block;
  height: 32px;
  width: 24px;
  cursor: pointer;
  margin-left: 0px;
  margin-right: 0px;
}

.keywordedit-item-cell-delete-button {
  position: relative;
  display: inline-block;
  height: 32px;
  width: 24px;
  cursor: pointer;
  margin-left: 0px;
  margin-right: 0px;
}

/*-------*/

.keyword-search-cell[data-mode="wide"] {
  width: 100%;
  height: 26px;
  line-height: normal;
  position: relative;
  left: 0px;
  font-size: 1.2em;
}
.keyword-search-cell[data-mode="narrow"] {
  width: 100%;
  height: 26px;
  line-height: normal;
  position: relative;
  left: 0px;
  font-size: 1.2em;
}
.keyword-search-cell[data-mode="newkw_category"] {
  width: 40%;
  height: 26px;
  line-height: normal;
  position: relative;
  vertical-align: top;
  left: 0px;
  top: 0px;
  font-size: 1.2em;
}
.keyword-search-cell[data-mode="newkw_value"] {
  width: 56%;
  height: 26px;
  line-height: normal;
  position: relative;
  vertical-align: top;
  left: 0px;
  top: 0px;
  margin-left: 6px;
  font-size: 1.2em;
}

.keyword-search-cell-progress {
  display: block;
  background-color: #a4b3c8;
  width: 100%;
  height: 1px;
  z-index: 5;
}

.keyword-search-cell[data-mode="wide"] .search-cell-search-box {
  width: 100%;
}
.keyword-search-cell[data-mode="narrow"] .search-cell-search-box {
  width: 100%;
}
.keyword-search-cell[data-mode="newkw_category"] .search-cell-search-box {
  width: 100%;
}
.keyword-search-cell[data-mode="newkw_value"] .search-cell-search-box {
  width: 100%;
}

.keyword-search-cell[data-mode="wide"] .search-result-cell {
  width: 100%;
  max-height: 272px;
  top: -1px;
  left: 0px;
  font-size: 1.1em;
}
.keyword-search-cell[data-mode="narrow"] .search-result-cell {
  width: 100%;
  max-height: 272px;
  top: -1px;
  left: 0px;
  font-size: 1.1em;
}
.isnotdesktop .keyword-search-cell[data-mode="narrow"] .search-result-cell {
  width: 138%;
}
.keyword-search-cell[data-mode="newkw_category"] .search-result-cell {
  width: 220%;
  max-height: 272px;
  top: -1px;
  left: 0px;
  font-size: 1.1em;
}
.keyword-search-cell[data-mode="newkw_value"] .search-result-cell {
  width: 160%;
  max-height: 272px;
  top: -1px;
  left: -60%;
  font-size: 1.1em;
}

.keyword-search-cell[data-mode="newkw_category"] .search-result-item {
  direction: rtl;
}

.keywordedit-add-cell {
  width: 100%;
  height: 26px;
  display: block;
  overflow: visible;
  text-align: left;
  margin-top: 12px;
  margin-bottom: 0px;
}

.keywordedit-add-cell-toolbar {
  display: block;
  width: 100%;
  height: 24px;
  margin-bottom: 4px;
  font-size: 1.2em;
  font-weight: bold;
}

.keyword-add-cell-addnew {
  position: relative;
  float: right;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 2px;
  color: #0284c7;
  cursor: pointer;
}

.keywordedit-busycontainer {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 0px;
}
.keywordedit-progresscontainer {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 12px;
}
.keywordedit-progressfull {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  padding: 1px;
  border: solid rgba(82, 80, 77, 0.9) 1px;
  background: #cbd5e1;
}
.keywordedit-progress {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  padding: 1px;
  background: #a4b3c8;
}
.keywordedit-progresshint {
  position: relative;
  display: block;
  text-align: left;
  font-size: 1.2em;
  color: #1e293b;
  margin-bottom: 2px;
}


.keywordedit-newkeyword-modal {
  display: none;
  position: absolute;
  z-index: 10;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(0,0,0,0.7);
  -webkit-animation-name: keywordedit-newkeyword-modal-open-animation;
  -webkit-animation-duration: 0.4s;
  animation-name: keywordedit-newkeyword-modal-open-animation;
  animation-duration: 0.4s
}
.keywordedit-newkeyword-modal[data-visible="true"] {
  display: block;
 }

.newkeyword-cell {
  background-color: #f1f5f9;
  position: relative;
  width: 100%;
  height: 220px;
  padding-top: 8px;
}

.newkeyword-cell-content {
  margin: 8px;
}

.newkeyword-cell-title {
  text-align: left;
  font-size: 1.4em;
  font-weight: bold;
  color: #1e293b;
}

.newkeyword-cell-help {
  text-align: left;
  font-size: 1.2em;
  color: #1e293b;
  margin-left: 2px;
  margin-bottom: 4px;
}

.newkeyword-cell-labels {
  width: 100%;
  margin-top: 8px;
}

.newkeyword-cell-label {
  text-align: left;
  font-size: 1.2em;
  color: #1e293b;
  display: inline-block;
  position: relative;
}

.newkeyword-cell-category-label {
  width: 40%;
}

.newkeyword-cell-value-label {
  width: 56%;
  margin-left: 6px;
}

.newkeyword-cell-inputs {
  width: 100%;
  margin-top: 3px;
  margin-bottom: 8px;
}

.newkeyword-cell-toolbar {
  position: absolute;
  width: 100%;
  bottom: 0px;
}

@keyframes keywordedit-newkeyword-modal-open-animation {
from { top: -300px; opacity: 0 }
to { top: 0; opacity: 1 }
}
@-webkit-keyframes keywordedit-newkeyword-modal-open-animation {
from { top: -300px; opacity: 0 }
to { top: 0; opacity: 1 }
}


/*--------------------------------------------------*/
/*    Sector timeline                               */
/*--------------------------------------------------*/

.sectortimeline-container {
  width: 100%;
  height: 0px;
  display: none;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #cbd5e1;
}
.sectortimeline-container[data-show="hiding"] {
  display: block;
  z-index: 1;
  animation-name: sectortimeline-container-close-animation;
  animation-duration: 0.3s;
}
.sectortimeline-container[data-show="true"] {
  display: block;
  height: 32px;
  z-index: 1;
  animation-name: sectortimeline-container-open-animation;
  animation-duration: 0.3s;
}

@keyframes sectortimeline-container-open-animation {
from { height: 0px; opacity: 0 }
to { height: 32px; opacity: 1 }
}
@keyframes sectortimeline-container-close-animation {
from { height: 32px; opacity: 1 }
to { height: 0px; opacity: 0 }
}

@keyframes timeline-zoom-open-animation {
from { opacity: 0 }
to { opacity: 1 }
}

.timeline-zoom {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  right: 0px;
  background-color: rgba(0,0,0,0.6);
  pointer-events: none;
  animation-name: timeline-zoom-open-animation;
  animation-duration: 0.3s
}
.timeline-zoom[data-show="true"] {
  display: block;
}

.timeline-zoom-zoomrect {
  width: 0%;
  height: 100%;
  display: block;
  position: absolute;
  right: 0px;
  background-color: rgba(241,245,249,0.2);
}

.timeline-zoom-sectorrect {
  width: 0%;
  height: 100%;
  display: block;
  position: absolute;
  right: 0px;
  background-color: rgba(241,245,249,0.2);
}

.timeline-zoom-sectorrect-cuein {
  width: 1px;
  top: 0px;
  height: 100%;
  display: block;
  position: absolute;
  right: 0px;
  background-color: #2b8421;
}

.timeline-zoom-sectorrect-cueout {
  width: 1px;
  top: 0px;
  height: 100%;
  display: block;
  position: absolute;
  right: 0px;
  background-color: #a8311a;
}

.timeline-zoom-complement-left {
  width: 0%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0px;
  background-color: rgba(241,245,249,0.05);
}

.timeline-zoom-complement-right {
  width: 0%;
  height: 100%;
  display: block;
  position: absolute;
  right: 0px;
  background-color: rgba(241,245,249,0.05);
}

.sectortimeline {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}

.sectortimeline-zoom-toolbar {
  position: absolute;
  left: 0%;
  width: 60px;
  height: 100%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
}

.sectortimeline-zoomin {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
  display: inline-block;
  background: #a4b3c8;
}

.sectortimeline-zoomout {
  position: absolute;
  left: 0%;
  width: 50%;
  height: 100%;
  display: inline-block;
  position: absolute;
  background: #a4b3c8;
}

.sectortimeline-timeline {
  position: absolute;
  left: 60px;
  right: 80px;
  height: 100%;
  display: inline-block;
  background-color: #94a3b8;
}

.sectortimeline-timeline-sectorrect {
  position: absolute;
  left: 5%;
  width: 45%;
  height: 100%;
  display: inline-block;
  background-color: rgba(241,245,249,0.6);
}

.sectortimeline-timeline-cuein {
  position: absolute;
  top: 0px;
  width: 16px;
  height: 16px;
  display: inline-block;
  cursor: ew-resize;
}

.sectortimeline-timeline-cueout {
  position: absolute;
  top: 0px;
  width: 16px;
  height: 16px;
  display: inline-block;
  cursor: ew-resize;
}

.sectortimeline-timeline-cueinout {
  position: absolute;
  bottom: -6px;
  width: 16px;
  height: 16px;
  display: inline-block;
  cursor: grab;
}

.sectortimeline-timeline-playhead {
  position: absolute;
  width: 16px;
  top: 0px;
  height: 32px;
  display: inline-block;
  cursor: pointer;
  opacity: 0;
}

.sectortimeline-timeline-playhead-fake {
  pointer-events: none;
  opacity: 1;
}

.sectortimeline-duration {
  position: absolute;
  right: 0%;
  width: 80px;
  height: 100%;
  display: inline-block;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  background: #a4b3c8;
  color: #ffffff;
  font-size: 1.32em; /* 1.1*1.2 */
  align-content: center;
}


/*--------------------------------------------------*/
/*--------------------------------------------------*/
/* copied from videoplayermobile.css                */
/* and added .ismobile in front of each rule        */
/*--------------------------------------------------*/
/*--------------------------------------------------*/


.ismobile #composition-container {
  min-height: 1px; /* iphone not able to start playing video element if of size 0*/
  min-width: 1px;
}

.ismobile .filter-panel {
  width: 100%;
  left: 100%;
  z-index: 6;
}

.ismobile .comment-panel {
  width: 100%;
  left: 100%;
  z-index: 7;
}


.ismobile .match-navigator-panel {
  width: 100%;
  left: 0px;
  right: auto;
}

.ismobile .expand-navigator-handle-pane {
  height: 45px;
  top: 4px; /*Fix for Chrome/Safari on some IOS device*/
}

.ismobile .expand-comment-handle-pane {
  height: 45px;
  top: 4px; /*Fix for Chrome/Safari on some IOS device*/
}


@media (orientation : landscape) {

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .fullscreen-button {
    background-position: -275px -47px;
    background-size: 800px 200px;
    height: 50px;
    width: 50px;
    margin-left: 10px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .fullscreen-button[data-exitfullscreen="true"] {
    background-position: -328px -47px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .addannotationsegment-button {
    background-position: -2px -154px;
    background-size: 800px 200px;
    height: 50px;
    width: 50px;
    margin-left: 4px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .multiview-button {
    background-size: 800px 200px;
    height: 50px;
    width: 50px;
    margin-left: -6px;
    margin-right: -4px;
  }

  .ismobile .video-control-bar[data-monitor-mode="true"] .transport-bar .multiview-button {
    margin-left: -4px;
    margin-right: -8px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .multiview-button[data-viewindex="0"][data-selected="false"] {
    background-position: -162px -155px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .multiview-button[data-viewindex="0"][data-selected="true"] {
    background-position: -216px -155px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .multiview-button[data-viewindex="1"][data-selected="false"] {
    background-position: -271px -155px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .multiview-button[data-viewindex="1"][data-selected="true"] {
    background-position: -325px -155px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .multiview-button[data-viewindex="2"][data-selected="false"] {
    background-position: -375px -155px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .multiview-button[data-viewindex="2"][data-selected="true"] {
    background-position: -428px -155px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .multiview-button[data-viewindex="3"][data-selected="false"] {
    background-position: -485px -155px;
  }

  .ismobile .video-control-bar[data-monitor-mode="false"] .transport-bar .multiview-button[data-viewindex="3"][data-selected="true"] {
    background-position: -538px -155px;
  }
}

@media (orientation : landscape) {

  .ismobile .scene-title-cell .scene-title {
    max-width: 180px;
  }

  .ismobile .segment-cell-title {
    max-width: 130px;
  }
}

.ismobile .search-header .close-keyword-filter {
  display: inline-block;
}

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

.ismobile .keyword-search-cell {
  right: 40px;
}

.ismobile .keyword-search-cell .search-result-cell {
  max-height: 60px;
}
.isnotdesktop .keyword-search-cell[data-mode="wide"] .search-result-cell {
  max-height: 272px;
}
.isnotdesktop .keyword-search-cell[data-mode="narrow"] .search-result-cell {
  max-height: 272px;
}
.isnotdesktop .keyword-search-cell[data-mode="newkw_category"] .search-result-cell {
  max-height: 272px;
}
.isnotdesktop .keyword-search-cell[data-mode="newkw_value"] .search-result-cell {
  max-height: 272px;
}

.ismobile .string-search-cell .search-cell-search-box {
  padding-right: 33px; /*width of following ".search-cell-search-button "*/
}

.ismobile .string-search-cell .search-cell-search-button {
  margin-left: -33px;
}

.ismobile .modal-dialog-container {
  z-index: 55;
}

@media (orientation : portrait) {
  .ismobile .pi-metadata-info {
    width: 100%;
  }
}

.ismobile .video-player-root[data-metadata-video="vsplit"] .pi-metadata-title .title-label {
  max-width: 220px;
}

@media (orientation : landscape) {
  .ismobile .video-player-root[data-metadata-video="vsplit"] .pi-metadata-title .title-label {
    max-width: 160px;
  }
}

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

.ismobile .pi-metadata-keyword-description {
  width: calc(100% - 8px);
}

.ismobile .video-control-bar {
  bottom: 0px;
}

@media (orientation : landscape) {
  .ismobile .keyword-filter-cell .value-cell .value-label {
    width: 70px;
  }

  .ismobile .keyword-filter-cell .category-value-cell-header .category-title {
    width: 70px;
  }

  .ismobile .keyword-filter-cell .value-cell .percentage-bar {
    left: 150px;
  }
}

.ismobile .pi-metadata-keyword-description .pi-metadata-keyword-description-content {
  /*max-height: 75px;*/ /* max-height pi-metadata-keyword-description - 25 */
  padding-bottom: 5px;
}


@media (orientation : landscape) {
  .ismobile .pi-metadata-keyword-description {
    max-height: 100px;
  }

  .ismobile .video-player-root[data-metadata-video="overlay"] .pi-metadata-keyword-description {
    max-width: 50%;
  }
  
  .ismobile .pi-metadata-keyword-description-content {
    max-height: 75px;
  }
}


@media (orientation : portrait) {
  .ismobile .pi-metadata-keywords {
    display: inline-block;
  }

  .ismobile .pi-metadata-keywords-band {
    display: none;
    visibility: hidden;
  }

  .ismobile .pi-metadata-info {
    width: 100%;
  }
}