/* Copyright (C) Microsoft Corporation. All rights reserved. */
.bottomAppBarContainer
{
    direction: ltr;
    width: 100%;
    min-height: 98px;
    max-height: 122px;
    display: -ms-grid;
    -ms-grid-columns: 1fr 836px 30px;
    -ms-grid-rows: 2px 4px 2px 1fr
}
@media screen and (max-width: 1366px)
{
    .bottomAppBarContainer
    {
        -ms-grid-columns: 1fr 706px 30px
    }
    .bottomAppBarContainer.videoVisible
    {
        -ms-grid-columns: 1fr 836px 30px
    }
}
.games .win-appbar, .games .win-appbar .win-template, .games .win-appbar .win-template .bottomAppBarContainer
{
    min-height: 106px
}
.appBarUpsellContainer
{
    display: -ms-grid;
    -ms-grid-columns: 1fr auto auto
}
.appBarUpsellAction
{
    -ms-grid-column: 3
}
.appBarUpsellPlayPauseAction
{
    -ms-grid-column: 2
}
.appBarButtonContainer
{
    width: 100px;
    min-height: 95px;
    margin: 0 2px;
    padding: 0;
    display: -ms-grid;
    -ms-grid-rows: 46px 1fr;
    -ms-grid-columns: 1fr;
    opacity: 1
}
.appBarTransportControlsXboxContainer .appBarButtonContainer
{
    width: 100px;
    -ms-grid-rows: 50px 1fr
}
.appBarButtonContainer:disabled
{
    opacity: .15
}
.bottomAppBarContainer .focusedItem
{
    background-color: rgba(100,100,100,.2)
}
.appBarButton
{
    width: 42px;
    height: 42px;
    -ms-grid-column-align: center;
    -ms-grid-row-align: start
}
.bottomAppBar .actionButton
{
    margin-top: 0;
    margin-bottom: 4px
}
.appBarActionList
{
    position: relative;
    width: 100%;
    height: 100%;
    max-height: inherit;
    min-height: 82px;
    -ms-grid-column-align: start
}
.appBarTransportControls
{
    position: relative;
    text-align: right;
    -ms-grid-column-align: end
}
.appBarNowPlayingMetadata
{
    display: -ms-grid;
    -ms-grid-rows: auto auto auto auto auto;
    -ms-grid-columns: 100%;
    -ms-grid-row-align: center;
    text-align: left;
    margin-bottom: 20px
}
html[dir=rtl] .appBarNowPlayingMetadata
{
    text-align: right
}
.snapped .bottomAppBar .appBarIconButton .win-commandimage.iconSpan
{
    margin-top: 8px
}
@media screen and (max-width: 1279px)
{
    .bottomAppBarContainer
    {
        -ms-grid-columns: 1fr auto 30px
    }
    .appBarNowPlaying
    {
        -ms-grid-columns: auto 20px
    }
    .appBarNowPlayingMetadata
    {
        display: none
    }
}
@media(min-width: 481px) and (max-width: 835px)
{
    .appBarPlayPauseButton, .appBarTransportControlsXboxContainer, .appBarNowPlayingMetadataContainer {
        display: none
    }
}
@media(min-width: 320px) and (max-width: 480px)
{
    .appBarTransportControlsContainer
    {
        -ms-grid-columns: 1fr auto 1fr
    }
    .appBarTransportControls
    {
        margin-right: 0;
        -ms-grid-column-align: center
    }
    .bottomAppBarContainer
    {
        -ms-grid-columns: auto auto 1fr
    }
    .bottomAppBar .appBarNowPlaying, .appBarNowPlayingMetadata
    {
        display: none
    }
    .appBarActionList
    {
        max-height: none
    }
}
.appBarNowPlaying
{
    position: relative;
    height: 100%;
    -ms-grid-layer: 0;
    cursor: pointer;
    display: -ms-grid;
    -ms-grid-columns: auto 15px 1fr;
    -ms-grid-rows: 100%;
    outline: none
}
.appBarNowPlayingThumbnail
{
    width: auto;
    padding: 0
}
.appBarNowPlayingThumbnail.removeFromDisplay
{
    display: none
}
.appBarNowPlayingThumbnail .playbackPipeline
{
    position: relative;
    height: 90px
}
@media screen and (max-height: 1079px)
{
    .appBarNowPlayingThumbnail .playbackPipeline
    {
        max-width: 160px
    }
}
.appBarNowPlayingArt
{
    height: 100%
}
.appBarNowPlayingArt
{
    height: 90px;
    width: auto
}
.positionDurationContainer
{
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    -ms-grid-column-align: start
}
html[dir=rtl] .positionDurationContainer
{
    -ms-grid-column-align: end
}
.appBarNowPlayingProgressContainer
{
    -ms-grid-column-span: 1
}
@media(min-width: 320px) and (max-width: 480px)
{
    .appBarNowPlayingProgressContainer
    {
        -ms-grid-column-span: 2
    }
}
.appBarNowPlayingProgress
{
    margin-bottom: 12px;
    width: 100%;
    height: 5px
}
.bottomProgressContainer
{
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    background-color: rgba(100,100,100,.2)
}
.bottomProgress
{
    position: absolute;
    width: calc(100% - 4px);
    height: 3px;
    bottom: 2px;
    left: 2px;
    border: none;
    direction: ltr
}
.appBarNowPlayingProgress
{
    width: 100%;
    height: 5px
}
.appBarNowPlayingProgressFill
{
    height: 100%
}
.opacity0
{
    opacity: 0
}
@media screen and (-ms-high-contrast)
{
    .bottomAppBarContainer
    {
        outline-style: none
    }
}