/* 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;
    background-image: url(/images/AppBar_gradient.png)
}
@media screen and (max-width: 1366px), screen and (max-width: 1366px) and (-ms-view-state: fullscreen), screen and (max-width: 1366px) and (-ms-view-state: filled)
{
    .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
}
.bottomAppBarContainer .focusedItem
{
    background-color: rgba(100,100,100,.2)
}
.appBarActionList
{
    position: relative;
    width: 100%;
    height: 100%;
    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: 320px) and (max-width: 499px)
{
    .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
    }
}
.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: 499px)
{
    .appBarNowPlayingProgressContainer
    {
        -ms-grid-column-span: 2
    }
}
.appBarNowPlayingProgress
{
    margin-bottom: 12px;
    width: 100%;
    height: 5px
}
.appBarNowPlayingProgress
{
    width: 100%;
    height: 5px
}
.appBarNowPlayingProgressFill
{
    height: 100%
}
@media screen and (-ms-high-contrast)
{
    .bottomAppBarContainer
    {
        outline-style: none
    }
}