/* Copyright (C) Microsoft Corporation. All rights reserved. */
#htmlUnsnapped, #htmlSnapped
{
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}
.mainHeader {
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr auto 40px;
    -ms-grid-rows: 40px 80px
}
@media screen and (min-height: 1080px)
{
    .mainHeader
    {
        -ms-grid-rows: 50px 80px
    }
}
@media screen and (min-height: 1200px)
{
    .mainHeader
    {
        -ms-grid-rows: 70px 80px
    }
}
@media screen and (min-height: 1440px)
{
    .mainHeader
    {
        -ms-grid-rows: 130px 80px
    }
}
.mainParentGrid
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: auto 1fr;
    width: 100vw;
    height: 100vh
}
.mainContentGrid
{
    -ms-grid-column: 1;
    -ms-grid-row: 2
}
.navigationWrapper
{
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    height: 80px;
    width: 100%;
    display: -ms-grid;
    -ms-grid-columns: .5fr 80px .5fr;
    -ms-grid-rows: 80px;
    z-index: 1
}
.navigationWrapper .navigationContainer
{
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    white-space: nowrap
}
.mainHubStrip, .dashboardHost
{
    height: 100vh;
    width: 100vw;
    display: -ms-grid;
    -ms-grid-rows: 110px 10px 1fr
}
.mainHubStrip
{
    -ms-grid-columns: 120px 1fr
}
.dashboardHost
{
    -ms-grid-columns: 60px 1fr
}
@media screen and (min-height: 1080px)
{
    .mainHubStrip, .dashboardHost
    {
        -ms-grid-rows: 120px 25px 1fr
    }
}
@media screen and (min-height: 1200px)
{
    .mainHubStrip, .dashboardHost
    {
        -ms-grid-rows: 140px 85px 1fr
    }
}
@media screen and (min-height: 1440px)
{
    .mainHubStrip, .dashboardHost
    {
        -ms-grid-rows: 200px 125px 1fr
    }
}
.hubNavigationClippingContainer
{
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    display: -ms-grid;
    -ms-grid-columns: 1fr 40px;
    -ms-grid-rows: 1fr auto auto;
    padding-bottom: 15px;
    margin-bottom: -15px
}
html[dir=ltr] .hubNavigationClippingContainer
{
    padding-left: 12px;
    margin-left: -12px
}
html[dir=rtl] .hubNavigationClippingContainer
{
    padding-right: 12px;
    margin-right: -12px
}
@media screen and (max-width: 1365px)
{
    .hubNavigationClippingContainer
    {
        overflow-x: auto
    }
    .mainHeader
    {
        height: 40px
    }
}
.mainHubStrip .hubStripScroller, .searchHubStrip .hubStripScroller
{
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-column-span: 2
}
.hubNavigationClippingContainer
{
    opacity: 0
}
.galleryPageHost .hubNavigationClippingContainer
{
    opacity: 1
}
.hubNavigationContainer
{
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    height: auto;
    display: inline-block;
    white-space: nowrap;
    padding: 2px;
    margin: -19px -12px 1px -12px
}
.pivotDashboard .dashboardPivots
{
    margin-left: -12px
}
html[dir=rtl] .pivotDashboard .dashboardPivots
{
    margin-right: -12px;
    margin-left: 0
}
.hubNavigationTitle
{
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    height: auto;
    margin-bottom: 11px
}
.hubNavigationSubTitle
{
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    height: auto;
    display: inline-block;
    white-space: nowrap;
    padding-bottom: 5px;
    margin-top: -15px
}
.hubStripTitleContainer
{
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    margin-bottom: 5px;
    height: auto;
    width: auto
}
.mainHubStripHub
{
    display: inline-block;
    white-space: nowrap
}
.dashboard .panelFragmentLoading, .dashboard .panelFragmentFailed
{
    height: 435px
}
.dashboard .panelFragmentWrapper
{
    top: 0
}
.dashboard .panelFragmentLoading
{
    display: -ms-grid;
    -ms-grid-columns: 1fr
}
.dashboard .panelFragmentLoadingProgress {
    left: 0;
    width: auto;
    -ms-grid-column-align: center
}
.dashboard .panelContentContainer
{
    top: 0
}
.shellLoadingControl
{
    position: relative;
    z-index: 1;
    -ms-grid-column-align: stretch;
    -ms-grid-row-align: start;
    -ms-grid-column-span: 4
}
.pageTitle
{
    position: absolute;
    top: -10px;
    left: 100px
}
.pageContainer
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    overflow: visible
}
.pageFooter
{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 50px
}
.appSignIn
{
    -ms-grid-column: 3;
    -ms-grid-row: 2
}
.PrimaryNavigationButton
{
    border: 0 solid;
    outline: none
}
.fadedNavigationContainer
{
    opacity: .4
}
.win-backbutton.homeIcon::before
{
    content: ""
}
.CreateAccountButton
{
    position: absolute;
    margin: 5px 10px 0 0;
    border: 0 solid;
    outline: none;
    top: 0;
    right: 0;
    text-align: right
}
.SearchEditBox
{
    width: 140px;
    height: 20px;
    top: 15px;
    margin-top: 13px;
    border: 0 solid;
    -ms-grid-column: 2;
    -ms-grid-row: 2
}
.SearchButton
{
    position: absolute;
    width: 48px;
    height: 48px;
    right: 10px;
    border: 0 solid;
    outline: none;
    top: 30px
}
@media(min-width: 320px) and (max-width: 480px)
{
    body:not(.app-newmusic) .appBarActionList, .appBarNowPlaying
    {
        display: none
    }
}
.bottomProgressBar
{
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 100vw;
    z-index: 50
}
.imageButton
{
    border: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    outline: none
}
.fullScreen
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh
}
.dashboard
{
    width: 100%
}
.games .dashboard .hubNavigationClippingContainer
{
    left: 240px;
    width: calc(100% - 240px)
}
.dashboard .hub
{
    height: 100%
}
.galleryHubStrip .win-surface
{
    margin-left: 116px
}
html[dir=rtl] .galleryHubStrip .win-surface
{
    margin-left: 0;
    margin-right: 116px
}
.galleryHubStrip .panelFragmentLoading, .galleryHubStrip .panelModifierContainer, .galleryHubStrip .panelFragmentFailed
{
    margin-left: 120px
}
html[dir=rtl] .galleryHubStrip .panelFragmentLoading, html[dir=rtl] .galleryHubStrip .panelModifierContainer, html[dir=rtl] .galleryHubStrip .panelFragmentFailed
{
    margin-left: 0;
    margin-right: 120px
}
.galleryHubStrip .panelFragmentLoading, .galleryHubStrip .panelFragmentFailed
{
    width: calc(100vw - 200px)
}
.galleryHubStrip .win-surface
{
    padding-right: 75px
}
.galleryHubStrip .hubStripScroller
{
    overflow: hidden
}
#homePageContent
{
    top: 0;
    width: auto;
    display: -ms-grid;
    -ms-grid-columns: 2278px;
    -ms-grid-rows: 1fr
}
#musicPageContent, #videoPageContent
{
    top: 0;
    width: auto;
    display: -ms-grid;
    -ms-grid-columns: 2103px;
    -ms-grid-rows: 1fr
}
.panelContainer
{
    display: inline-block;
    width: 100%;
    height: 100%;
    min-width: 300px
}
.panelContainer.noWidth
{
    min-width: 0
}
.panelActionWrapper
{
    position: absolute;
    left: -120px;
    display: inline-block;
    vertical-align: top;
    padding-top: 47px;
    width: 115px
}
.panelActionContainer
{
    position: relative;
    margin-right: -5px
}
.panelFragmentContainer
{
    display: inline-block
}
.panelActionLink
{
    margin-bottom: 5px;
    height: 115px;
    width: 115px
}
.panelContentContainer
{
    display: -ms-grid;
    -ms-grid-columns: 100%;
    -ms-grid-rows: 40px 11px 1fr;
    height: 100%;
    width: 100%
}
.panelContentContainer .panelTitle
{
    height: auto
}
.panelContainer.noWidth .panelTitle
{
    height: 36px
}
.adControl
{
    width: 100%;
    height: 100%
}
.disabledAdControl
{
    width: 0;
    height: 0
}
.videoAdContainer .overlayContent
{
    height: 100%;
    width: 100%
}
.videoAdOverlay
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 208px;
    background-position: 0 0;
    background-size: cover
}
.videoAd
{
    height: 100%;
    width: 100%
}
.videoAdOverlayContentContainer
{
    display: -ms-grid;
    -ms-grid-columns: 60px 1fr auto auto 40px;
    -ms-grid-rows: 1fr
}
.videoAdCloseButton
{
    -ms-grid-column-align: end;
    -ms-grid-row-align: start;
    width: 30px;
    height: 30px;
    margin-top: 40px;
    margin-left: 50px;
    margin-right: 50px
}
.videoAdCloseButton .win-commandicon.win-commandring
{
    border: none
}
.videoAdText
{
    display: -ms-grid;
    -ms-grid-columns: auto;
    -ms-grid-rows: auto auto auto auto;
    margin-top: 30px
}
a.videoAdReasonLink, a.videoAdLearnMoreLink
{
    margin-top: 30px;
    -ms-grid-column-align: start
}
a.videoAdReasonLink .inlineCaretButtonIcon, a.videoAdLearnMoreLink .inlineCaretButtonIcon
{
    margin-top: 1px
}
a.nowPlayingMoreInfoLink
{
    margin-top: 10px
}
.welcomeDialog .welcomeDialogContent
{
    display: -ms-grid;
    -ms-grid-rows: 480px 60px auto 57px auto;
    -ms-grid-columns: 424px 1072px 424px
}
.welcomeDialog .welcomeDialogTitle
{
    -ms-grid-row: 2;
    -ms-grid-column: 2
}
.welcomeDialog .welcomeDialogSubText
{
    -ms-grid-row: 3;
    -ms-grid-column: 2
}
.welcomeDialog.win-ui-dark progress:indeterminate
{
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    -ms-grid-column-align: center
}
.welcomeDialog .welcomeNextButton
{
    width: 475px;
    height: 84px;
    -ms-grid-row: 5;
    -ms-grid-column: 2
}
.welcomeDialog button.win-command, .welcomeDialog button.win-command.iconButton, .welcomeDialog button.win-command.iconButton:hover:focus, .welcomeDialog button.win-command.iconButton:active, .welcomeDialog button.win-command.iconButton:focus
{
    height: 100%
}
.welcomeDialog .welcomeNextButton .win-commandicon
{
    margin-left: 13px;
    margin-bottom: 10px
}
.welcomeDialog .welcomeNextButton button.win-command .win-label
{
    margin-left: 15px;
    margin-bottom: 4px
}