/* Position Bar */

@keyframes animateStripes {
    0% { background-position: 0 0; }
    100% { background-position: -100px 0; }
}
    
.position-bar-root {
    position: absolute;
    top: 50%;
    transform: translateY(-13px);
    left: 0; /*6px; /* Half of slider thumb width. */
    width: 100%; /*calc(100% - 12px); /* Container width less the slider thumb width. */
    height: 26px;
}

.position-bar-root .main-portion {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.position-bar-root .after-portion {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 100%;
}

.position-bar-root.show-after-live-portion .main-portion {
    width: calc(100% - 15px);
}
.position-bar-root.show-after-live-portion .after-portion {
    display: block;
}
.position-bar-root.show-seek-to-live button.seek-to-live-button {
    display: block;
}

.position-bar-root button.seek-to-live-button {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(100% + 7px);
    height: 100%;
    transform: translateY(-50%);
    
    /* Just for DEBUG */
    opacity: 1.0;
    color: pink;
    
    border-width: 0;
    margin: 0;
    padding: 0;
    
    white-space: nowrap;
    text-indent: 999px;
    overflow: hidden;
    
    background-color: transparent;
}
.position-bar-root button.seek-to-live-button::after {
    content: ' ';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    
    height: 8px;
    width: 100%;
    
    background-color: #425f3a;
    background-image: url(images/track_striped_green.svg);
    background-size: 6px 18px;
    background-repeat: repeat-x;
    
    animation: animateStripes 20s linear infinite;
}

.position-bar-root .slider {
    display: none;
}
.position-bar-root.seekable .slider {
    display: block;
}

.position-bar-root .track {
    position: absolute;
    z-index: 0;
    top: calc(50% - 4px);
    left: 0;
    right: 0;
    height: 8px;
}

.position-bar-root::after { /* base track */
    content: ' ';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    
    height: 4px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #1c1c1c;
    left: -7px; /* Half of slider thumb width. */
    right: -7px;  /* Half of slider thumb width. */
    /*background-color: #435040;*/
    background-color: #495048;
    background-image: url(images/track_striped.svg);
    background-size: 3px 9px;
}

.position-bar-root .track .playable-base,
.position-bar-root .track .playable-progress {
    position: absolute;
    z-index: 0;
    top: 0;
    height: 8px;
}
.position-bar-root .track .base333 {
    height: 4px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #1c1c1c;
    left: -7px; /* Half of slider thumb width. */
    right: -7px;  /* Half of slider thumb width. */
    /*background-color: #435040;*/
    background-color: #495048;
    background-image: url(images/track_striped.svg);
    background-size: 3px 9px;
}
.position-bar-root .track .playable-base {
    background-color: #253d50; /* Traditional Blue */
    /*background-color: #425f3a;*/ /* Green for DVR */
}
.allow-dvr .position-bar-root .track .playable-base {
    /* THIS background-color: #425f3a; */ /* Green for DVR */
    background-color: #50943d;
}
.position-bar-root .track .playable-progress {
    background-color: #37658a; /* Traditional Blue */
    /*background-color: #539a3f;*/ /* Green for DVR */
    /*background-color: #50943d;*/ /* Less Bright Green? */
}
.allow-dvr .position-bar-root .track .playable-progress {
    /*background-color: #539a3f;*/ /* Green for DVR */
    /* THIS background-color: #50943d;*/ /* Less Bright Green for DVR? */
    background-color: #425f3a;
}

.position-bar-root .track .track-hover-indicator {
    position: absolute;
    z-index: 9;

    top: 0;
    left: 50%; /* Set by script. This is just for dev. */

    height: 100%;
    width: 2px;
    transform: translateX(-50%);

    background: white;

    opacity: 0.0;
    transition: opacity 0.15s;
}

.position-bar-root:hover .track .track-hover-indicator {
    opacity: 0.75;
}

.position-bar-root .slider {
    position: absolute;
    z-index: 10;
    top: -4px;
    left: 0;
    right: 0;
    -webkit-appearance: none;
    margin: 0;
    padding: 10px 0;
    height: 14px;
    cursor: pointer;
    background-color: transparent;
    overflow: visible;
}
.position-bar-root .slider:focus {
  outline: none;
}
.position-bar-root .slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
}
.position-bar-root .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #407aa9; /* Traditional Blue */
    /*background: #57a93f;*/ /* Green for DVR */

    margin-top: -4px;
    border-width: 0;
    outline-width: 0;
}
.allow-dvr .position-bar-root .slider::-webkit-slider-thumb {
    background: #57a93f; /* Green for DVR */
}
.position-bar-root .slider::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
}
.position-bar-root .slider::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #407aa9; /* Traditional Blue */
    /*background: #57a93f;*/ /* Green for DVR */
    margin-top: -4px;
    border-width: 0;
    outline-width: 0;
}
.allow-dvr .position-bar-root .slider::-moz-range-thumb {
    background: #57a93f; /* Green for DVR */
}
.position-bar-root .slider::-ms-track {
  width: 100%;
  height: 100px;
  background: transparent;
  border-color: transparent;
  color: transparent;
  overflow: visible;
}
.position-bar-root .slider::-ms-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #407aa9; /* Traditional Blue */
    /*background: #57a93f;*/ /* Green for DVR */

    margin-top: 0;
    border-width: 0;
    outline-width: 0;
}
.allow-dvr .position-bar-root .slider::-ms-thumb {
    background: #57a93f; /* Green for DVR */
}
.position-bar-root .slider::-ms-fill-upper, 
.position-bar-root .slider::-ms-fill-lower {
    background: transparent;
}
.position-bar-root .slider::-ms-tooltip {
    display: none;
}



/* Timeline Markers */

.timeline-marker-root {
	width: 0;
	height: 6px;
	position: absolute;
	top: 0;
	left: 50%;
	background-color: black;
}
.timeline-marker-root .mark {
	position: absolute;
    z-index: 5;
	width: 6px;
	height: 6px;
	top: -3px;
	left: -3px;
	background-color: transparent;
	opacity: 1.0;
	/* transition: height 0.05s, top 0.05s, box-shadow 0.05s; */
}
.timeline-marker-root .target {
	position: absolute;
    z-index: 10;
	top: -8px;
	left: -15px;
	width: 30px;
	height: 16px;
	opacity: 0.0;
	background-color: white;
    cursor: pointer;
}

.timeline-marker-root:hover .mark {
    transform: scale(1.33333, 1.33333);
}

.marker-preview {
    font-size: 12px;
    background: white;
    color: black;

    display: block;
    position: absolute;
    z-index: 10;
    bottom: 20px;
    left: -12px;
    /* left set in script */
    border-radius: 3px;
    
    min-width: 14px;
    max-width: calc(100vw - 14px);
    
    /* The following rules serve to hide the marker preview by default. 
    When the marker root is hovered, the values are changed to reveal the preview. 
    We can't accomplish this with display:none because we must interrogate the 
    preview element width while it's hidden. */
    
    padding: 0 5px;
    height: 0;
    overflow: hidden;
}
.marker-preview svg.callout {
    width: 8px;
    height: 16px;
    position: absolute;
    z-index: 5;
    bottom: -9px;
    left: 50%;
    margin-left: -4px;
}
.marker-preview .text {
    position: relative;
    z-index: 20;

    display: inline-block;

    line-height: 1.2;
    height: auto;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    max-width: calc(100vw - 14px); 
    font-weight: bold;
}
.marker-preview .text .time {

    font-weight: normal;
    font-size: 0.9em;
    opacity: 0.8;
}
.marker-preview .text .time::after {
    content: "\2013";
    margin-left: 0.4em;
    margin-right: 0.4em;
}


.timeline-marker-root:hover .marker-preview {
    padding: 4px 5px;
    height: 1.2em;
    overflow: visible;
    box-shadow: 0px 0px 3px 1px rgba(50,50,50,0.65);
}



/* Timeline Preview */

.timeline-preview-root {
	position: absolute;
	bottom: 0;
	padding: 0;
}
.slides-preview-container {
	position: absolute;
	bottom: 0;
}
.time-only-preview-container {
	position: absolute;
	bottom: 0;
}

.slides-preview {
    position: relative;
	bottom: 0;

	opacity: 0.0;
    height: 0;

    transition-property: opacity, height;
    transition-duration: 0.2s, 0s;
    transition-delay: 0s, 0.2s;
}
.slides-preview.hidden {
    opacity: 0.0;
    height: auto;
    transition-delay: 0s, 0.2s;
}
.slides-preview.visible {
	opacity: 1.0;
    height: auto;
    transition-delay: 0s, 0s;
}

.slides-preview .images-container {
	position: relative;
	bottom: 0;
	
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	
	border: solid white;
	border-width: 2px 10px;
	border-radius: 3px;
	background: white;
	padding: 0;
}
.slides-preview[data-img-count="0"] .images-container { border-width: 0; }

.slides-preview .time-text {
	position: absolute;
	z-index: 10;
	
	bottom: 3px; /* Why 3px and not 2px? */
	right: 50%;
	transform: translateX(50%);
	line-height: 12px;
	text-align: center;
	
	padding: 5px 7px;
	border-radius: 3px 3px 0 0;
	background: rgba(0,0,0,0.7);
	color: white;
}
.slides-preview[data-img-count="2"] .time-text,
.slides-preview[data-img-count="4"] .time-text {
	transform: translateX(-1px);
	border-radius: 3px 0 0 0;
}

.image-wrapper {
	position: relative;
	width: 144px;
	height: 81px;
	background: black;
}
.image-wrapper+.image-wrapper {
	border-left: 2px solid white;
}

.image-wrapper img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	
	height: 100%;
}

.time-only-preview {
	position: relative;
	bottom: 0;

    opacity: 0.0;
    height: 0;

    transition-property: opacity, height;
    transition-duration: 0.2s, 0s;
    transition-delay: 0s, 0.2s;
}
.time-only-preview.hidden {
	opacity: 0.0;
    height: auto;
    transition-delay: 0s, 0.2s;
}
.time-only-preview.visible {
	opacity: 1.0;
    height: auto;
    transition-delay: 0s, 0s;
}

.time-only-preview .time-text {
	position: relative;
	z-index: 10;
	
	bottom: 2px;
	line-height: 12px;
	text-align: center;
	
	padding: 5px 7px;
	border-radius: 5px;
	background: rgba(0,0,0,0.3);
	color: white;
	
	font-size: 18px;
}