﻿/* Copyright (C) Microsoft Corporation. All rights reserved. */
.compareActivitiesPanel
{
    width: 100%;
    height: 100%;
    position: relative
}
.compareActivitiesGalleryContainer
{
    width: 100%;
    height: 100%
}
.compareActivitiesGallery .emptyGalleryContainer
{
    margin: 4px 50px 0 5px;
    height: 505px
}
html[dir=rtl] .compareActivitiesGallery .emptyGalleryContainer
{
    margin: 4px 5px 0 50px;
    height: 505px
}
.compareGamesColumn
{
    display: -ms-grid;
    -ms-grid-columns: 15px 157px 15px;
    -ms-grid-rows: 270px 115px 2px 2px 1px 115px
}
.compareHeaderContainer.compareGamesColumn
{
    -ms-grid-columns: 25px 328px 25px
}
@media screen and (min-height: 1080px)
{
    .compareGamesColumn
    {
        -ms-grid-columns: 15px 278px 15px;
        -ms-grid-rows: 440px 115px 2px 2px 1px 115px
    }
    .compareHeaderContainer.compareGamesColumn
    {
        -ms-grid-columns: 25px 258px 25px
    }
}
.compareGamesColumn hr
{
    margin: 0
}
.compareHeaderTextContainer
{
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 25px 1fr 25px;
    -ms-grid-rows: 20px 1fr auto 20px
}
.compareHeaderText
{
    -ms-grid-row-align: end
}
.compareGameThumbnailContainer
{
    display: -ms-grid;
    -ms-grid-rows: 15px 1fr;
    overflow: hidden
}
.compareGameThumbnail .primaryText
{
    margin-top: 8px
}
.compareGameThumbnail, .compareGameThumbnail .imageContainer
{
    width: 154px;
    height: 211px
}
@media screen and (min-height: 1080px)
{
    .compareGameThumbnail, .compareGameThumbnail .imageContainer
    {
        width: 278px;
        height: 381px
    }
}
.compareGameThumbnail .imageContainer img
{
    width: 100%;
    height: auto
}
.gamerGameTileContainer
{
    padding-top: 26px
}
.gamerHeaderTile
{
    display: -ms-grid;
    -ms-grid-columns: auto 10px 1fr
}
.gamerHeaderTileImage, .socialCompareActivitiesPage .gamerHeaderTileImage img
{
    width: 64px;
    height: 64px
}
.gamerGameTile
{
    overflow: hidden
}
.gamerGameTile.compareGalleryTile.compareGalleryDefaultText
{
    margin-top: 26px
}
.gamerGameTile .compareGalleryNotPlayedMetaDataContainer:not(.removeFromDisplay)
{
    display: -ms-grid;
    -ms-grid-columns: auto 1fr;
    -ms-grid-rows: 1fr
}
.compareGamesColumn .icon, .compareGameMetaDataText, .compareGallerySecondaryMetaDataContainer .label, .gamerHeaderMetaData
{
    display: inline-block
}
.compareGamesColumn .compareGalleryTile:not(.gamerHeaderTile) .icon
{
    margin-left: -1px
}
.compareGameMetaDataText
{
    max-width: 134px;
    -ms-grid-column: 2
}
@media screen and (min-height: 1080px)
{
    .compareGameMetaDataText
    {
        max-width: 258px
    }
}
.fractionProgressText
{
    direction: ltr
}
.gamerGameTile>.label, .gamerHeaderMetaData>.label
{
    margin-left: 4px
}
html[dir=rtl] .gamerGameTile>.label, html[dir=rtl] .gamerHeaderMetaData>.label
{
    margin-left: 0;
    margin-right: 4px
}
.compareGallerySecondaryMetaDataContainer
{
    margin-top: -3px
}
.gamerGameTile.compareGalleryTile.compareGalleryDefaultText>div>div>.label:first-of-type, .gamerGameTile>.label, .gamerHeaderMetaData>.label
{
    margin-bottom: 6px
}
html[dir=ltr] .findFriendIconButton
{
    float: right
}
html[dir=rtl] .findFriendIconButton
{
    float: right
}
html[dir=ltr] .findFriendLabel
{
    text-align: left
}
html[dir=rtl] .findFriendLabel, html[dir=rtl] .findFriendSearchBox
{
    text-align: right
}
.findFriendSearchProgressContainer
{
    position: relative;
    display: -ms-grid;
    -ms-grid-columns: auto auto auto;
    float: right;
    margin: 5% 0
}
.findFriendWaitCursor
{
    position: relative;
    top: 0;
    left: 0;
    margin: 0 7px 0 0
}
.findFriendSearchingLabel
{
    margin: 10% 0
}
.socialFriendsPanel .panelContainer
{
    overflow: hidden
}
.friendsPanelSignedIn
{
    height: 100%
}
@media screen and (max-height: 1080px)
{
    .miniProfileHubStrip .panelFragmentWrapper
    {
        top: 0
    }
}
.emptyFriendsListContainer.removeFromDisplay
{
    display: none
}
.emptyFriendsListContainer .miniProfilePanelControlsSignedOut
{
    display: -ms-grid;
    -ms-grid-columns: 30px 1fr 30px;
    -ms-grid-rows: 30px auto 46px 1fr 30px;
    width: 600px
}
.emptyFriendsListContainer .miniProfilePanelControlsSignedOut .failedPanelTitle
{
    white-space: pre-wrap
}
.emptyFriendsListContainer .miniProfilePanelControlsSignedOut .win-template
{
    -ms-grid-column: 2;
    -ms-grid-row: 4
}
.emptyFriendsListContainer .miniProfilePanelControlsSignedOut .imageSignOutSocialHubFriendsWithShadow
{
    -ms-grid-column: 1;
    -ms-grid-column-align: start;
    -ms-grid-row-align: end
}
.emptyFriendsListContainer .miniProfilePanelControlsSignedOut .emptyFriendsListTitle
{
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-column-align: start
}
.failedPanelContainerWithBottomButtons
{
    display: -ms-grid;
    -ms-grid-rows: 1fr 30px auto
}
.emptyFriendsListContainer .failedPanelTextContainer
{
    margin: 0;
    position: static;
    display: -ms-grid;
    -ms-grid-rows: auto 20px auto;
    -ms-grid-row: 1
}
.emptyFriendsListContainer .failedPanelContainerWithBottomButtons .failedPanelTitle
{
    margin: 0;
    padding: 0;
    -ms-grid-row: 1
}
.emptyFriendsListContainer .failedPanelMessage
{
    margin: 0;
    padding: 0;
    -ms-grid-row: 3
}
.emptyFriendsListContainer .failedPanelDetails
{
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-row: 3;
    padding-top: 18px;
    padding-bottom: 8px;
    border-top: 1px solid rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,.2);
    -ms-grid-row-align: end
}
.emptyFriendsListContainer .failedPanelDetails .win-template:first-of-type
{
    -ms-grid-column: 1
}
.emptyFriendsListContainer .failedPanelDetails .win-template:last-of-type
{
    -ms-grid-column: 2
}
.emptyFriendsListContainer button .textContainer .win-label.label, .noContentPane button .textContainer .win-label.label
{
    margin-bottom: 0
}
.emptyFriendsListContainer .iconButtonTwoLine .iconButton.win-command, .noContentPane .iconButtonTwoLine .iconButton.win-command
{
    -ms-grid-columns: 35px 1fr
}
.emptyFriendsListContainer .failedPanelDetails .iconButtonTwoLine .iconButton .win-commandicon, .noContentPane .iconButtonTwoLine .iconButton .win-commandicon
{
    width: 30px;
    height: 30px
}
.noGamesContentPane .noContentTextContainer
{
    margin: 0;
    display: -ms-grid;
    -ms-grid-columns: 30px 1fr 30px;
    -ms-grid-rows: 30px auto 46px auto 30px auto 30px
}
.noGamesContentPane .noContentPaneTitle
{
    -ms-grid-row: 2;
    -ms-grid-column: 2
}
.noGamesContentPane .noContentPaneDescription
{
    margin: 0;
    -ms-grid-column: 2;
    -ms-grid-row: 4
}
.noGamesContentPane .noContentPaneDetails
{
    -ms-grid-column: 2;
    -ms-grid-row: 6;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    padding-top: 18px;
    padding-bottom: 8px;
    border-top: 1px solid rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,.2);
    -ms-grid-row-align: end
}
.friendInlineDetailsGamerTag
{
    width: 100%
}
.friendInlineGamerScoreText
{
    margin-bottom: 10px
}
.popOver.friend .friendInlineGamerScoreText
{
    margin-bottom: 0
}
.popOver.friend .friendInlineGamerScoreText .icon.inlineGlyph
{
    margin-top: -6px
}
.friendInlineGamerScore
{
    float: left;
    position: relative
}
.gamerScoreContainer>div, .template-gamerScore>div
{
    -ms-grid-row-align: start
}
.gamerScoreContainer>div, .template-gamerScore
{
    display: -ms-inline-flexbox
}
.gamerScoreContainer .gamerScoreLabel, .template-gamerScore .gamerScore-label
{
    padding-top: 1px
}
.gamerScoreContainer>div.removeFromDisplay, .template-gamerScore>div.removeFromDisplay
{
    display: none
}
.template-gamerScore .gamerScore-imageSmall
{
    margin-top: 2px;
    margin-bottom: -2px
}
.gamerScoreContainer .inlineGlyphSmall, .template-gamerScore .inlineGlyphSmall, .actionTile .inlineGlyphSmall
{
    opacity: 1
}
.template-gamerScore
{
    display: -ms-grid;
    -ms-grid-columns: 15px 5px 100px
}
.template-gamerScore .inlineGlyphSmall
{
    -ms-grid-column: 1
}
.template-gamerScore .gamerScore-label
{
    -ms-grid-column: 3
}
.dashboardHost .chatBubbleContainer
{
    top: 260px
}
@media screen and (max-height: 1079px)
{
    .dashboardHost .chatBubbleContainer, .socialProfile .chatBubbleContainer
    {
        top: 0
    }
}
.editProfileErrorContainer, .sendMessageErrorContainer
{
    display: -ms-grid;
    -ms-grid-columns: auto 6px 1fr
}
.editProfileErrorContainer .label, .sendMessageErrorContainer .label
{
    white-space: normal
}
.editProfileEditBoxLabel
{
    padding-top: 20px
}
.editProfileEditBox .editInput
{
    width: calc(100% - 20px)
}
.editProfileEditBox .editMultiline
{
    width: calc(100% - 30px);
    padding-left: 5px;
    padding-right: 5px
}
.beaconControlContainer
{
    display: -ms-grid;
    -ms-grid-columns: auto 6px 1fr 2px auto;
    -ms-grid-rows: auto auto auto 10px 1fr
}
.beaconControlContainer button, .popOver.game .bodyContainer .bodyContent.beaconLink
{
    padding: 2px;
    margin: 0
}
.beaconControlContainer .icon, .beaconControlContainer .errorMessage
{
    margin-top: 14px
}
.beaconButtonContainer
{
    margin-bottom: 4px
}
.beaconButton
{
    -ms-flex-preferred-size: 50%
}
.beaconComment
{
    text-align: left;
    padding: 4px
}
html[dir=rtl] .beaconComment
{
    text-align: right
}
.popOver.game .bodyContainer .bodyContent.beaconComment
{
    margin-top: 0;
    outline: none
}
.beaconCommentText
{
    display: block;
    -ms-grid-row: 2;
    margin-top: 3px
}
.beaconCommentEditTitle
{
    display: -ms-grid;
    -ms-grid-columns: 1fr 10px auto
}
.beaconCommentEditTitle.removeFromDisplay
{
    display: none
}
.beaconTitle
{
    -ms-grid-row-align: end;
    padding: 4px
}
.notificationContainer .beaconTitle
{
    padding: 2px
}
.beaconComment, .beaconCommentEditBox .editInput
{
    width: 100%
}
.beaconCommentEditBox
{
    margin-top: 13px
}
.beaconLink
{
    text-align: left
}
html[dir=rtl] .beaconLink
{
    text-align: right
}
button.imageActionLink, button:hover.imageActionLink, button:hover:active.imageActionLink, button:hover:focus.imageActionLink, button:hover:focus:active.imageActionLink, button:focus:active.imageActionLink .beaconControlContainer button, .beaconControlContainer button:hover, .beaconControlContainer button:active, .beaconControlContainer button:active:hover, .notificationContainer .beaconControlContainer .label, .notificationContainer .beaconControlContainer .label:hover, .notificationContainer .beaconControlContainer .label:active, .notificationContainer .beaconControlContainer .label:active:hover, .notificationContainer .beaconControlContainer .beaconCommentEditTitle .label, .notificationContainer .beaconControlContainer .beaconCommentEditTitle .label:hover, .notificationContainer .beaconControlContainer .beaconCommentEditTitle .label:active, .notificationContainer .beaconControlContainer .beaconCommentEditTitle .label:active:hover, .notificationContainer .beaconControlContainer .beaconLink.label, .notificationContainer .beaconControlContainer .beaconLink.label:hover, .notificationContainer .beaconControlContainer .beaconLink.label:active, .notificationContainer .beaconControlContainer .beaconLink.label:active:hover, .beaconControlContainer button.win-command.iconButton, .beaconControlContainer button.win-command.iconButton:hover, .beaconControlContainer button.win-command.iconButton:active, .beaconControlContainer button.win-command.iconButton:active:hover
{
    box-sizing: border-box;
    border-style: solid;
    border-width: 2px;
    border-color: transparent;
    outline-color: transparent
}
.notificationContainer .beaconControlContainer .label, .notificationContainer .beaconControlContainer .label:hover, .notificationContainer .beaconControlContainer .label:active, .notificationContainer .beaconControlContainer .label:active:hover
{
    border-style: none
}
.showKeyboardFocus button:focus.imageActionLink, .showKeyboardFocus .beaconControlContainer button:focus, .showKeyboardFocus .beaconControlContainer button:hover:focus, .showKeyboardFocus .beaconControlContainer button:active:hover:focus, .showKeyboardFocus .beaconControlContainer button:-ms-keyboard-active, .showKeyboardFocus .beaconControlContainer button.bodyContent.beaconComment.label:focus, .showKeyboardFocus .beaconControlContainer button.bodyContent.beaconComment.label:hover:focus, .showKeyboardFocus .beaconControlContainer button.bodyContent.beaconComment.label:active:hover:focus, .showKeyboardFocus .beaconControlContainer button.bodyContent.beaconComment.label:-ms-keyboard-active, .showKeyboardFocus .beaconControlContainer button.win-command.iconButton:focus, .showKeyboardFocus .beaconControlContainer button.win-command.iconButton:hover:focus, .showKeyboardFocus .beaconControlContainer button.win-command.iconButton:active:hover:focus, .showKeyboardFocus .beaconControlContainer button.win-command.iconButton:-ms-keyboard-active
{
    border-style: solid;
    border-width: 2px;
    outline-color: transparent
}
.miniProfileHubStrip .hubStripScroller
{
    overflow-x: visible
}
.miniProfileHubStrip .hubStripScroller .hub:nth-child(2)
{
    display: none
}
.miniProfileHubStrip .panelFragmentLoading, .miniProfileHubStrip .panelFragmentFailed
{
    width: 400px
}
.miniProfileHubStrip.galleryHubStrip .panelModifierContainer
{
    height: 0
}
.profileFriendsPanelContainer
{
    float: left;
    margin-left: 200px
}
.miniFriendsPanelContainer
{
    height: 100%;
    width: auto;
    overflow-x: hidden
}
.miniFriendsPanelContainer .gamercardGallery .win-listview>.win-horizontal .win-container
{
    margin-bottom: 2px;
    margin-right: 2px;
    margin-top: 3px;
    margin-left: 3px
}
html[dir=rtl] .miniFriendsPanelContainer .gamercardGallery .win-listview>.win-horizontal .win-container
{
    margin-right: 3px;
    margin-left: 2px
}
.socialProfileFriendsPanel .panelTitle
{
    margin-top: 60px;
    margin-left: 120px
}
html[dir=rtl] .socialProfileFriendsPanel .panelTitle
{
    margin-left: 0;
    margin-right: 120px
}
.friendsPanel
{
    width: 340px;
    height: 100%
}
.dashboardHost .friendsPanel
{
    width: auto;
    height: 100%
}
.galleryHubStrip .friendsPanel
{
    width: 1000px
}
.friendsPanelFriendsSignedOut
{
    position: absolute;
    top: 60px;
    margin: 0
}
@media screen and (min-height: 1080px)
{
    .friendsPanelFriendsSignedOut
    {
        position: absolute;
        top: 220px
    }
}
.socialMiniProfile .panelContainer
{
    width: 730px
}
.avatarsDisabled .socialMiniProfile .panelContainer
{
    width: 475px
}
.socialProfileCard .panelContentContainer
{
    margin-left: 120px
}
html[dir=rtl] .socialProfileCard .panelContentContainer
{
    margin-left: 0;
    margin-right: 120px
}
.galleryHubStrip .win-surface .miniFriendsPanelContainer .profileFriendsPanelContainer
{
    margin-left: 0
}
html[dir=rtl] .galleryHubStrip .win-surface .miniFriendsPanelContainer .profileFriendsPanelContainer
{
    margin-left: 0;
    margin-right: 0
}
.miniProfilePanelContainer .popOver.friend
{
    height: 505px;
    padding-top: 3px
}
.popOver.friend .bodyContainer
{
    margin-top: -12px
}
.miniProfilePanelContainer
{
    display: -ms-grid
}
@media screen and (min-height: 1080px)
{
    .dashboard .miniProfilePanelContainer
    {
        position: relative
    }
    .dashboard .miniProfilePanelContainer .popOver.friend
    {
        height: 675px
    }
}
.miniProfilePanelControlsSignedOut
{
    position: absolute;
    width: 730px;
    height: 505px
}
@media screen and (min-height: 900px)
{
    .miniProfilePanelControlsSignedOut
    {
        height: 675px
    }
}
.socialFriendsGallery .miniProfilePanelControlsSignedOut, .socialPendingFriendsGallery .miniProfilePanelControlsSignedOut
{
    position: relative;
    margin-left: 120px
}
html[dir=rtl] .socialFriendsGallery .miniProfilePanelControlsSignedOut, html[dir=rtl] .socialPendingFriendsGallery .miniProfilePanelControlsSignedOut
{
    margin-left: 0;
    margin-right: 120px
}
.chatBubble
{
    width: auto;
    min-width: 240px;
    height: 80px;
    -ms-grid-column-align: center;
    display: -ms-grid;
    -ms-grid-columns: 10px auto 10px auto 20px;
    -ms-grid-rows: 10px 1fr 1px 34px 10px
}
.chatBubblePointer
{
    -ms-grid-column-align: center;
    border-style: solid;
    border-width: 6px;
    border-right-color: transparent;
    border-bottom-color: transparent
}
html[dir=rtl] .chatBubblePointer
{
    border-left-color: transparent
}
.chatBubbleLabel
{
    max-height: 40px;
    overflow: hidden
}
.chatBubbleLabel
{
    min-width: 200px;
    max-width: 268px
}
.chatBubbleSecondaryLabel
{
    white-space: normal
}
.achievementPageContainer
{
    position: relative;
    height: calc(100% - 100px)
}
.achievementsGallery
{
    position: relative;
    width: 100vw;
    height: 100%
}
.template-gamercard .gamerScoreLabel, .achievementThumbnail .gamerScoreLabel
{
    float: left;
    margin-right: 1px
}
.achievementThumbnail .gamerScoreLabel
{
    padding-left: 5px;
    padding-right: 5px
}
.achievementsGallery .achievementByDate
{
    width: 165px;
    height: 165px;
    padding: 0
}
.achievementsGallery .win-listview .win-groupheader, .gamercardGallery .win-listview .win-groupheader
{
    padding: 0;
    margin-right: 4px;
    margin-top: 4px
}
html[dir=rtl] .achievementsGallery .win-listview .win-groupheader
{
    margin-right: 70px;
    margin-left: 4px
}
.achievementsGallery .win-listview.win-groups>.win-horizontal .win-surface, .gamercardGallery .win-listview.win-groups>.win-horizontal .win-surface
{
    margin-left: 50px
}
html[dir=rtl] .achievementsGallery .win-listview.win-groups>.win-horizontal .win-surface, html[dir=rtl] .gamercardGallery .win-listview.win-groups>.win-horizontal .win-surface
{
    margin-left: 0;
    margin-right: 50px
}
.achievementsGallery .achievementByDate .achievementDateAbbreviationControl
{
    width: 100%;
    height: 100%
}
.achievementsGallery .achievementByDate .dateAbbreviationGroupHeader
{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    display: -ms-grid;
    -ms-grid-columns: 15px 1fr 15px;
    -ms-grid-rows: 15px 1fr 15px
}
.dateAbbreviationGroupHeader .groupHeaderMonth, .dateAbbreviationGroupHeader .groupHeaderMonthDate, .dateAbbreviationGroupHeader .groupHeaderOfflineAchievement
{
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-row-align: end;
    position: relative;
    width: auto;
    bottom: 0;
    left: 0;
    max-height: 125px
}
html:-ms-lang(ta,ml) .dateAbbreviationGroupHeader .groupHeaderMonth
{
    word-wrap: break-word
}
.achievementsGallery .dateAbbreviationGroupHeader
{
    white-space: normal
}
.games .achievementPageContainer .achievementGameDetailsThumbnail .imageContainer
{
    height: 274px
}
.achievementGameDetailsThumbnail .primaryText
{
    margin-top: 10px;
    white-space: normal
}
.gamerScoreAchievementMetaDataContainer
{
    display: -ms-grid;
    -ms-grid-columns: auto 20px auto
}
.achievementGameDetailsProgressContainer
{
    margin-bottom: -9px
}
.gamerScoreAchievementMetaDataContainer
{
    margin-bottom: -2px
}
.achievementGameDetailsMetaDataText
{
    display: inline-block;
    max-width: 75px
}
.achievementThumbnail
{
    display: -ms-grid;
    -ms-grid-columns: 15px 65px 15px 185px 15px;
    -ms-grid-rows: 15px 65px 70px 15px
}
.gamercardGallery .win-listview>.win-horizontal .win-container:hover
{
    outline-width: 2px
}
.gamercardGallery .win-listview>.win-horizontal .win-container:focus
{
    outline-width: 2px
}
.template-gamercard
{
    display: -ms-grid;
    -ms-grid-columns: 15px 65px 8px 1fr 15px;
    -ms-grid-rows: 15px 65px 70px 15px
}
.template-gamercard .gamercard-imageContainer, .achievementThumbnail .imageContainer
{
    position: relative;
    margin-top: 0;
    -ms-grid-column: 2;
    -ms-grid-row: 2
}
.template-gamercard .imageHolder, .achievementThumbnail .imageHolder
{
    -ms-grid-columns: 65px
}
.template-gamercard .gamercard-textContainer
{
    -ms-grid-column: 4;
    -ms-grid-row: 2;
    margin-top: 0;
    padding-top: 0
}
.achievementThumbnail .textContainer
{
    margin-top: 0;
    padding-top: 0
}
.achievementThumbnail .primaryText .label.specificLineCount
{
    padding-bottom: 2px
}
.achievementThumbnail .secondaryText, .template-gamercard .gamercard-textContainer .primaryText, .template-gamercard .gamercard-textContainer .secondaryText, .template-gamercard .gamercard-textContainer .tertiaryText, .template-gamercard .gamercard-textContainer .quaternaryText
{
    margin-top: 0
}
.achievementThumbnail .primaryText, .achievementThumbnail .tertiaryText
{
    margin-top: 2px
}
.achievementThumbnail .tertiaryText
{
    -ms-grid-row: 2
}
.achievementThumbnail .quaternaryText
{
    -ms-grid-row: 1;
    margin-top: 6px;
    margin-bottom: 0
}
.template-gamercard .gamercard-textContainer .secondaryText
{
    margin-bottom: 2px
}
.template-gamercard .gamercard-statusContainer
{
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    -ms-grid-column-span: 3;
    -ms-grid-row-align: end;
    display: -ms-grid;
    -ms-grid-columns: 219px 8px 38px;
    -ms-grid-rows: 48px;
    overflow: hidden
}
.template-gamercard .gamercard-statusContainer .tertiaryText
{
    -ms-grid-row-align: end
}
.template-gamercard .gamercard-statusContainer img
{
    -ms-grid-column: 3;
    width: 37px;
    height: 47px
}
.template-gamercard.addFriend
{
    display: -ms-grid;
    -ms-grid-columns: 10px 275px 10px;
    -ms-grid-rows: 10px 145px 10px
}
.template-gamercard.addFriend .addFriendButton
{
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    display: -ms-grid;
    -ms-grid-rows: 145px;
    -ms-grid-columns: 1fr
}
.template-gamercard.addFriend .findFriendsButton
{
    display: -ms-grid;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 95px 45px
}
.template-gamercard.addFriend .findFriendsButton .win-commandicon.win-commandring
{
    -ms-grid-column: 1;
    -ms-grid-column-align: center;
    -ms-grid-row: 1;
    margin: 16px 0;
    border-width: 4px;
    height: 60px;
    width: 60px
}
.template-gamercard.addFriend .findFriendsButton .win-label.label
{
    -ms-grid-column-align: center;
    min-width: 165px;
    -ms-grid-column: 1;
    -ms-grid-row: 2
}
.template-gamercard.addFriend .findFriendsButton .iconSpan
{
    background-image: none
}
.findFriendFlyout
{
    height: 121px;
    width: 251px
}
.findFriendFlyout input.editInput
{
    width: 251px;
    margin: 10px 0 10px 0
}
.findFriendFlyout.win-flyout
{
    padding: 20px
}
.achievementThumbnail .quaternaryText .label.specificLineCount
{
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal
}
.achievementThumbnail.cardThumbnailButton .primaryText
{
    max-height: 32.4pt
}
.achievementThumbnail.cardThumbnailButton .tertiaryText
{
    max-height: 38.6pt
}
.gamercardGroupHeader
{
    display: -ms-grid;
    -ms-grid-columns: 10px 1fr 10px;
    -ms-grid-rows: 10px 1fr 10px;
    position: relative;
    width: 165px;
    height: 165px
}
.gamercardGroupHeaderText
{
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-row-align: end;
    max-height: 165px;
    white-space: normal;
    word-wrap: break-word
}
.profilePopOverOverlay .overlayContainer
{
    width: 730px;
    height: 530px;
    position: absolute;
    top: 110px
}
@media screen and (min-height: 1080px)
{
    .profilePopOverOverlay .overlayContainer
    {
        top: 130px
    }
}
@media screen and (min-height: 1200px)
{
    .profilePopOverOverlay .overlayContainer
    {
        top: 210px
    }
}
@media screen and (min-height: 1440px)
{
    .profilePopOverOverlay .overlayContainer
    {
        top: 310px
    }
}
.profilePopOverDashboardOverlay .overlayContainer
{
    width: 730px;
    height: 530px;
    position: absolute;
    top: 170px
}
@media screen and (min-height: 1080px)
{
    .profilePopOverDashboardOverlay .overlayContainer
    {
        top: 345px
    }
    .socialProfile~.profilePopOverDashboardOverlay .overlayContainer
    {
        top: 200px
    }
}
@media screen and (min-height: 1200px)
{
    .profilePopOverDashboardOverlay .overlayContainer
    {
        top: 425px
    }
    .socialProfile~.profilePopOverDashboardOverlay .overlayContainer
    {
        top: 278px
    }
}
@media screen and (min-height: 1201px)
{
    .socialProfile~.profilePopOverDashboardOverlay .overlayContainer
    {
        top: 378px
    }
}
@media screen and (min-height: 1440px)
{
    .profilePopOverDashboardOverlay .overlayContainer
    {
        top: 525px
    }
}
.gamerPic
{
    -ms-grid-row-span: 2
}
.gamerInfo
{
    display: -ms-grid;
    -ms-grid-columns: 64px 15px 1fr 15px;
    -ms-grid-rows: auto 1fr
}
.gamerInfoText
{
    -ms-grid-column: 3;
    margin-top: -9px
}
.gamerInfoSubText
{
    display: -ms-grid;
    -ms-grid-rows: auto auto
}
.gamerInfoSubText .friendInlineDisplayNameText
{
    margin-top: 1px;
    margin-right: 14px;
    margin-left: 2px;
    -ms-grid-column: 1;
    max-width: 300px;
    white-space: normal;
    overflow: hidden
}
html[dir=rtl] .gamerInfoSubText .friendInlineDisplayNameText
{
    margin-right: 0;
    margin-left: 14px;
    margin-left: 2px
}
.gamerInfoSubText .friendInlineGamerScore
{
    margin: 1px -2px 0 -2px;
    padding: 1px 2px 0 2px
}
.gamerInfoSubText .inlineGamerScoreContainer
{
    float: none;
    vertical-align: top
}
.profileButtons .itemList
{
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
    padding: 2px
}
.profileButtons>.itemList>.win-template
{
    -ms-flex: 0;
    -ms-flex-preferred-size: 50%
}
.profileButtons>.itemList>.win-template.addFriendButton, .profileButtons>.itemList>.win-template.cancelFriendButton
{
    -ms-flex: 2;
    -ms-flex-preferred-size: 100%
}
.profileButtons button.iconButton:nth-of-type(odd)
{
    padding-right: 5px
}
html[dir=rtl] .profileButtons button.iconButton:nth-of-type(odd)
{
    padding-right: 0;
    padding-left: 5px
}
.profileButtons .listDivider:first-of-type
{
    margin-top: 9px
}
.socialProfileFriendsPanel .panelTitle
{
    margin-top: 0
}
.socialProfileFriendsPanel .profileFriendsPanelContainer
{
    margin-left: 0
}
html[dir=rtl] .socialProfileFriendsPanel .profileFriendsPanelContainer
{
    margin-left: 0;
    margin-right: 60px
}
.hiddenNarratorText
{
    position: absolute;
    overflow: hidden;
    width: 0
}
@media screen and (-ms-high-contrast)
{
    .messageBubblePointer
    {
        visibility: hidden
    }
}
.inlineLockIcon:after
{
    content: '';
    font-family: 'Segoe Xbox Symbol'
}
.inlineGamerScoreIcon:after
{
    content: '';
    font-family: 'Segoe Xbox Symbol'
}
.inlineGameIcon:after
{
    content: '';
    font-family: 'Segoe Xbox Symbol'
}
.inlineAchievementsIcon:after
{
    content: '';
    font-family: 'Segoe Xbox Symbol'
}
.messageBubble
{
    margin-bottom: 15px;
    margin-top: 15px
}
.textMessage .messageBubble
{
    height: 150px;
    padding: 15px;
    margin: 0 0 15px 0
}
.textMessage .messageBubble .text-metadata:not(.mediaAttachment), .friend .gameDetailsInviteMeta .text-metadata:last-of-type
{
    text-align: right
}
.messageBubblePointer
{
    position: relative;
    display: inline-block;
    border-style: solid;
    border-width: 10px;
    border-color: #ebebeb;
    border-top-color: transparent;
    width: 0;
    height: 0;
    top: 125px
}
html[dir=ltr] .messageBubblePointer
{
    left: 7px;
    border-left-color: transparent
}
html[dir=rtl] .messageBubblePointer
{
    right: 7px;
    border-right-color: transparent
}
.friend .userMessageDetails .gameThumbnail .cardThumbnailButton
{
    -ms-grid-columns: 0 99px 15px 1fr 15px
}
.friend .userMessageDetails .gameThumbnail
{
    width: 100%
}
.friend .userMessageDetails .cardThumbnailButton .imageContainer
{
    -ms-grid-row: 1;
    -ms-grid-column: 2
}
.friend .userMessageDetails .cardThumbnailButton .quaternaryText
{
    text-align: right
}
.friend .userMessageDetails .bodyContainer
{
    margin-top: 0
}
.friend .titleContainer
{
    padding-top: 5px
}
.friend .userMessageDetails .messageBubble
{
    padding: 20px;
    height: auto;
    box-sizing: border-box;
    width: 100%;
    background-color: #ebebeb
}
.friend .gameInviteMessage
{
    display: -ms-grid;
    margin: 0 0 15px 0;
    -ms-grid-rows: auto 15px auto
}
.friend .gameInviteDetailsContainer
{
    display: -ms-grid;
    -ms-grid-columns: 60px 20px 355px;
    -ms-grid-row: 3
}
.friend .gameDetailsInviteMeta
{
    display: -ms-grid;
    -ms-grid-column: 3;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 5px auto auto 1fr
}
html[dir=rtl] .friend .userMessageDetails .cardThumbnailButton .quaternaryText
{
    text-align: left
}
.control-sendMessage
{
    display: -ms-grid;
    -ms-grid-rows: auto 1fr;
    -ms-grid-columns: auto 26px 1fr
}
.control-sendMessage .part-editBox
{
    margin-top: 40px;
    -ms-grid-column: 3
}
.control-sendMessage .senderImage
{
    height: 64px;
    padding-top: 45px
}
.control-sendMessage .messageBubblePointer
{
    top: 55px;
    -ms-grid-column: 2
}
.control-sendMessage .editBox textArea
{
    max-width: calc(100% - 20px);
    width: calc(100% - 20px);
    padding: 10px;
    border: none
}
@media screen and (-ms-high-contrast)
{
    .control-sendMessage .editBox textarea
    {
        padding: 8px;
        border-width: 2px;
        border-style: solid;
        outline-style: none
    }
    .showKeyboardFocus .control-sendMessage .editBox textarea:focus
    {
        padding: 6px;
        border-width: 4px
    }
}
.control-sendMessage .dialogContent
{
    overflow-y: hidden
}
