/* Copyright (C) Microsoft Corporation. All rights reserved. */
.seekBarControl
{
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    outline: none
}
.musicOverlay .seekBarControl
{
    width: 340px;
    margin-left: 30px;
    margin-right: 0;
    margin-bottom: 6px
}
html[dir=rtl] .musicOverlay .seekBarControl
{
    margin-right: 30px;
    margin-left: 0
}
.seekBarContainer
{
    width: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 120px auto;
    -ms-touch-action: none;
    outline: none;
    direction: ltr
}
.musicOverlay .seekBarContainer
{
    -ms-grid-rows: 70px auto
}
.seekBarContainer .textContainer
{
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    margin-top: 5px;
    margin-left: 50px;
    margin-right: 50px
}
.musicOverlay .seekBarContainer .textContainer
{
    display: none
}
.nowPlayingText
{
    -ms-grid-column: 1;
    -ms-grid-column-align: start
}
.videoProgressText
{
    -ms-grid-column-align: end;
    -ms-grid-column: 2;
    display: -ms-flexbox
}
.seekBarTrack
{
    height: 2px;
    margin-right: 50px;
    margin-left: 50px;
    transform: translate(0,117px);
    outline: none;
    direction: ltr
}
.musicOverlay .seekBarTrack
{
    margin-left: 30px;
    margin-right: 30px;
    transform: translate(0,54px)
}
.seekBarTrackEngaged
{
    -ms-transform: translate(0,30px)
}
.seekBarFill
{
    height: 2px;
    width: 100%;
    transform-origin: left;
    outline: none
}
.seekBarThumb
{
    position: absolute;
    right: 0;
    width: 52px;
    height: 53px;
    transform: translate(-52px,112px) rotate(105deg);
    transform-origin: 100% 0;
    background-repeat: no-repeat
}
.musicOverlay .seekBarThumb
{
    width: 10px;
    height: 10px;
    bottom: 10px;
    border-radius: 50%;
    transform-origin: center center;
    transform: translate(-24px,0);
    background-image: none
}
.musicOverlay .seekBarThumb:hover
{
    transform: scale(1.4) translate(-17px,0)
}
.musicOverlay .seekBarThumb::after
{
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    top: -10px;
    left: -10px;
    border-radius: 50%
}
.seekBarThumbEngaged
{
    -ms-transform: translate(-52px,35px) rotate(-15deg)
}
.seekBarThumbText
{
    width: 104px;
    text-align: center;
    position: absolute;
    right: 0;
    opacity: 0;
    -ms-transform: translate(0,80px)
}
.musicOverlay .seekBarThumbText
{
    display: none;
    -ms-transform: translate(24px,80px)
}
.seekBarThumbTextEngaged
{
    opacity: 1;
    -ms-transform: translate(0,0)
}
.musicOverlay .seekBarThumbTextEngaged
{
    display: -ms-grid;
    -ms-transform: translate(48px,7px)
}
.seekBarAnimation
{
    transition-property: transform,opacity;
    transition-duration: .33s;
    transition-timing-function: cubic-bezier(.25,.1,.25,1)
}
.seekBarScroller
{
    position: relative;
    direction: ltr;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: transparent;
    -ms-grid-column-align: stretch;
    -ms-overflow-style: none;
    -ms-scroll-translation: none;
    -ms-scroll-snap-type: mandatory;
    -ms-scroll-snap-points-x: snapInterval(.5%,.5%);
    -ms-scroll-chaining: none
}
.videoScrubControl
{
    position: absolute;
    bottom: 5px;
    margin-left: 0;
    width: 0;
    height: 0;
    left: 0
}
.videoScrubAnimation
{
    transition-property: transform;
    transition-duration: .33s
}
.videoScrubOffsetUp
{
    transform: translate(0,-20px)
}
.videoScrubContainer
{
    position: absolute;
    width: 100%;
    height: 100%
}
.videoScrubThumbnail
{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 2px
}
.scrubPositionText
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    text-align: center
}