@import url("https://www.xbox.com/en-US/global-shares/templates/CSS/Snow-Bird-Custom-modules-2021.css");
@import url("https://www.xbox.com/en-US/global-shares/templates/CSS/SegoePro-Black-2021.css");
@import url("https://www.xbox.com/en-US/global-shares/templates/CSS/MWFMDL2-Xbox-2021.css");
@import url("https://www.xbox.com/en-US/global-shares/templates/CSS/sno-byrd-2021.css");

.SegoeProBlack {
    font-family: 'SegoeProBlack';
}

.MWFMDL2-Xbox {
    font-family: 'MWFMDL2-Xbox';
}

a {
    color: inherit;
}

.theme-dark .c-mosaic-placement picture::after,
.theme-light .theme-dark .c-mosaic-placement picture::after {
    background: none;
}

.clear {
    display: none;
}


/* temporarily removing all catalog quick looks 4/13/2022 */

.qlButton.popupShow {
    display: none !important;
}

a.gameDivLink.eappgame {
    pointer-events: none !important;
    cursor: auto !important;
}


/* end of quick look removal */


/* CSS fix for sup/sub */

sup,
sub {
    font-size: 75%;
}


/* REACT overrides */

body hr {
    width: auto;
    background-color: transparent;
}


/* UHF overrides */

.c-uhf-menu button:after {
    padding-top: 5px;
}

div[data-module-id] {
    min-height: 0px;
}

.c-uhff {
    margin-top: 0px;
}

.c-uhfh-actions a.c-call-to-action,
.c-uhfh-actions button.c-call-to-action,
.c-uhfh-actions .c-action-trigger,
.c-button {
    font-family: Segoe UI, SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a.c-hyperlink:link,
a.c-hyperlink:focus,
a.c-hyperlink:hover,
a.c-hyperlink:active,
a.c-hyperlink:visited {
    text-decoration: underline !important;
}

.c-feature picture img,
.m-feature picture img {
    min-height: 0 !important;
}

@media only screen and (min-width:540px) {
    .c-feature.f-align-left,
    .m-feature.f-align-left,
    .c-feature.f-align-right,
    .m-feature.f-align-right {
        min-height: initial;
    }
}

@media only screen and (min-width:768px) {
    .c-feature.f-align-left,
    .m-feature.f-align-left,
    .c-feature.f-align-right,
    .m-feature.f-align-right {
        min-height: initial;
    }
}

@media only screen and (min-width:1084px) {
    .c-feature.f-align-center>div,
    .m-feature.f-align-center>div {
        max-width: 100%;
    }
}

@media only screen and (min-width:1921px) {
    section.m-hero-item,
    div.m-hero,
    .legal {
        max-width: 1920px;
        margin: 0 auto;
    }
}

.m-product-placement-item .c-paragraph {
    white-space: normal;
}


/* 1.50.2 overrides start */

.m-hero-item .c-paragraph,
.c-hero .c-paragraph,
.m-multi-feature [role="tabpanel"] .c-paragraph,
.c-feature>div .c-paragraph,
.m-feature>div .c-paragraph,
.c-paragraph {
    font-size: 15px;
    line-height: 23px;
    max-height: 100%;
}

@media screen and (min-width:1084px) {
    .m-content-placement {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
    .m-content-placement-item .c-call-to-action:focus,
    .c-content-placement .c-call-to-action:focus,
    button.c-action-trigger:focus,
    a.c-action-trigger:focus,
    a.c-hyperlink:focus,
    a.c-call-to-action.f-lightweight:focus,
    button.c-call-to-action.f-lightweight:focus {
        border: 2px dashed #fff !important;
        outline: 2px dashed #000 !important;
    }
}

@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
    [class^="m-"] a:not(.c-action-trigger):focus:not(.x-hidden-focus),
    [class*=" m-"] a:not(.c-action-trigger):focus:not(.x-hidden-focus),
    [class^="c-"] a:not(.c-action-trigger):focus:not(.x-hidden-focus),
    [class*=" c-"] a:not(.c-action-trigger):focus:not(.x-hidden-focus) {
        outline: 2px dashed #000 !important;
        border: 2px dashed #FFF !important;
    }
}

.m-page-bar {
    display: block;
}

@media screen and (max-width: 768px) {
    .m-page-bar>div>div {
        top: 0px;
        position: absolute;
    }
    .m-highlight-feature {
        display: block;
    }
    .onePointFive .m-highlight-feature {
        display: flex;
    }
}


/* 1.50.2 overrides end */


/* v23.1 overrides */

.m-multi-feature>section .c-carousel {
    height: 100%;
    /* set height to 100% to fix flex bug in IE11 height: initial;
    // reset height for all non-IE browsers*/
}


/* end v23.1 overrides */


/* v26.1 overrides */

.c-age-rating .c-content-toggle .c-list {
    overflow: visible;
}

fieldset.c-checkbox label.c-label {
    float: none;
}

@media (min-width: 1400px) and (max-width: 1600px) {
    .triptych [data-grid~=container] {
        padding: 0 !important;
    }
}


/* end v26.1 overrides */

@media screen and (max-width: 1084px) {
    .v-hidden.h-divider {
        border-right: 0px solid rgba(0, 0, 0, .2);
    }
}

@media only screen and (min-width:768px) {
    a.m-back-to-top,
    a.c-back-to-top {
        background: #9bf00b !important;
    }
    a.m-back-to-top:hover,
    a.m-back-to-top:focus,
    a.c-back-to-top:hover,
    a.c-back-to-top:focus {
        background: #107c10 !important;
    }
}


/* MWF Overrides below this line */

a[data-app-retailer]:focus {
    border: 2px dashed #000;
    outline: 2px dashed #fff;
}

@media screen and (min-width: 1921px) {
    .hero-center {
        max-width: 1920px;
        margin: 0 auto;
    }
}


/* hero sequence indicators */

.theme-dark button.c-action-toggle:hover,
.theme-light .theme-dark button.c-action-toggle:hover {
    color: #ccc;
}

button[aria-label].c-action-toggle.c-glyph {
    font-weight: 700;
    font-size: 18px;
}


/* button.c-action-toggle {
    outline: none !important;
    border: solid 0px transparent;
} */

@media screen and (min-width: 1084px) {
    /* c-group squeezed to make play/pause clickable -EL 10/2020 */
    .c-carousel>.c-group {
        width: 86%;
        margin-left: 7%;
        margin-right: 7%;
    }
}

.c-sequence-indicator,
.c-action-toggle {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.c-sequence-indicator button::before,
.c-sequence-indicator a::before {
    border: 1px solid rgb(0, 0, 0);
}

.c-sequence-indicator button:focus,
.c-sequence-indicator a:focus,
.high-contrast-mode .c-sequence-indicator button[aria-selected="true"] {
    outline: 2px dashed #fff !important;
    border: 2px dashed #000 !important;
}

.c-sequence-indicator button,
.c-sequence-indicator a {
    width: 22px;
    height: 20px;
}

@media only screen and (max-width:539px) {
    .box-shots .c-content-placement>a:first-child>picture img,
    .box-shots .m-content-placement-item>a:first-child>picture img {
        padding: 0 60px 0 30px;
    }
    .c-hero .c-paragraph,
    .c-hero .c-price,
    .c-hero .c-rating,
    .m-hero-item .c-paragraph,
    .m-hero-item .c-price,
    .m-hero-item .c-rating {
        display: block
    }
    .c-pivot>header>a {
        display: table-caption;
    }
    .c-pivot>header>a:first-child,
    .c-pivot>header>a {
        padding-left: 16vw;
    }
    .c-pivot>header {
        display: table-header-group !important;
    }
}

.c-pivot>[role="tablist"]>[role="tab"] {
    font-weight: 600;
}

.theme-black .c-pivot>header>[role='tab'],
.theme-black .c-pivot>header a,
.theme-black .c-pivot>div>[role='tab'],
.theme-black .c-pivot>div a,
.theme-black .c-pivot>[role='tablist']>[role='tab'],
.theme-black .c-pivot>[role='tablist'] a,
.theme-dark .c-pivot>header>[role='tab'],
.theme-dark .c-pivot>header a,
.theme-dark .c-pivot>div>[role='tab'],
.theme-dark .c-pivot>div a,
.theme-dark .c-pivot>[role='tablist']>[role='tab'],
.theme-dark .c-pivot>[role='tablist'] a {
    color: #e6e6e6;
}

.theme-black :not(.f-disabled).c-pivot>header>[role='tab'].f-active,
.theme-black :not(.f-disabled).c-pivot>header a.f-active,
.theme-black :not(.f-disabled).c-pivot>div>[role='tab'].f-active,
.theme-black :not(.f-disabled).c-pivot>div a.f-active,
.theme-black :not(.f-disabled).c-pivot>[role='tablist']>[role='tab'].f-active,
.theme-black :not(.f-disabled).c-pivot>[role='tablist'] a.f-active,
.theme-dark :not(.f-disabled).c-pivot>header>[role='tab'].f-active,
.theme-dark :not(.f-disabled).c-pivot>header a.f-active,
.theme-dark :not(.f-disabled).c-pivot>div>[role='tab'].f-active,
.theme-dark :not(.f-disabled).c-pivot>div a.f-active,
.theme-dark :not(.f-disabled).c-pivot>[role='tablist']>[role='tab'].f-active,
.theme-dark :not(.f-disabled).c-pivot>[role='tablist'] a.f-active {
    color: #fff;
    font-weight: 600;
}

.theme-black .m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action,
.theme-dark .m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action {
    color: #9bf00b;
}

.theme-black .m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action:hover,
.theme-dark .m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action:hover {
    color: #75b308;
    background: none;
}

.theme-black .m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action:focus,
.theme-dark .m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action:focus {
    border-color: #fff;
    outline-color: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action,
.theme-light .m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action {
    color: #107c10;
}

.m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action:hover,
.theme-light .m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action:hover {
    color: #094709;
    background: none;
}

.m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action:focus,
.theme-light .m-multi-feature:not(.f-console) [role="tabpanel"] .c-call-to-action:focus {
    border-color: #000;
    outline-color: rgba(0, 0, 0, 0.6);
}

@media only screen and (max-width:767px) {
    nav.c-link-navigation li a.c-hyperlink {
        text-decoration: underline;
    }
    .accessories-blade .c-heading {
        text-align: left;
    }
    .acc-small img {
        margin: 0 auto !important;
    }
    .m-rich-heading>picture.c-image+div .c-heading {
        bottom: 120px !important;
    }
    .m-rich-heading>picture.c-image+div>div {
        position: absolute;
        bottom: 30px;
        z-index: 1;
    }
    .h-divider {
        border-right: none !important;
    }
    [class*=f-x][class*=f-y].c-hero>div>div,
    [class*=f-x][class*=f-y].m-hero-item>div>div {
        top: calc(35%);
    }
}

.m-rich-heading .c-heading {
    max-height: 95px;
}

.m-product-placement-item>a:hover .c-heading,
.m-product-placement-item>a:hover .c-subheading,
.c-product-placement>a:hover .c-heading,
.c-product-placement>a:hover .c-subheading,
.m-product-placement-item>a:hover .c-paragraph,
.m-product-placement-item>a:focus .c-heading,
.m-product-placement-item>a:focus .c-subheading,
.c-product-placement>a:focus .c-heading,
.c-product-placement>a:focus .c-subheading,
.m-product-placement-item>a:focus .c-paragraph {
    text-decoration: underline;
}

.m-content-placement-item .xpa {
    margin-top: 20px;
}

.m-content-placement-item .c-paragraph {
    line-height: 1.35;
}

.c-badge.f-small {
    line-height: normal;
}
.c-badge.f-highlight {font-weight: 700;}

.link-marg-left {
    margin-left: 15px !important;
}

.zmt {
    margin-top: 0px !important;
}

.zpt {
    padding-top: 0px !important;
}

.zpl {
    padding-left: 0px !important;
}

.zpb {
    padding-bottom: 0px !important;
}

.btn-def-marg {
    margin-left: -24px !important;
}

.bottom-def-margin {
    margin-bottom: 48px !important;
}

.context-control-appearance>[class^='m-'] {
    margin-top: 0px;
    padding: 0;
}

@media screen and (max-width: 540px) {
    .zpl {
        padding-left: 24px !important;
    }
}

.pad48 {
    padding-top: 48px !important;
}

.pad96 {
    padding-top: 96px !important;
}

@media screen and (max-width: 768px) {
    .pad48,
    .pad96 {
        padding-top: 0px !important;
    }
}

.static48 {
    padding-top: 48px !important;
}

.static96 {
    padding-top: 96px !important;
}


/* Link and CTA colors */

.white-c {
    color: #fff !important;
}

a.white-c:hover {
    color: #9bf00b !important;
}

.darkGrey-c {
    color: #505050 !important;
}

.black-c {
    color: #000 !important;
}

.green-c {
    color: #107c10 !important;
}

.lime-green-c {
    color: #9bf00b !important;
}

.dark-green-c {
    color: #054b16 !important;
}

.noClick {
    cursor: default;
    text-decoration: none;
}

.noClick img {
    opacity: 1 !important;
}

.noClick:hover {
    text-decoration: none;
}

.c-content-placement.noClick:hover>div .c-heading,
.c-content-placement.noClick:hover>div>.c-call-to-action span,
.c-content-placement.noClick:hover>div>.c-group> :first-child.c-call-to-action span,
.c-content-placement.noClick:hover>div>.c-group> :first-child.c-hyperlink,
.c-content-placement.noClick:hover>div>.c-hyperlink,
.c-content-placement.noClick>a:first-child :not(.x-hidden-focus).c-call-to-action:focus span,
.c-content-placement.noClick>a:first-child .c-call-to-action:hover span,
.m-content-placement-item.noClick:hover>div .c-heading,
.m-content-placement-item.noClick:hover>div>.c-call-to-action span,
.m-content-placement-item.noClick:hover>div>.c-group> :first-child.c-call-to-action span,
.m-content-placement-item.noClick:hover>div>.c-group> :first-child.c-hyperlink,
.m-content-placement-item.noClick:hover>div>.c-hyperlink,
.m-content-placement-item.noClick>a:first-child :not(.x-hidden-focus).c-call-to-action:focus span,
.m-content-placement-item.noClick>a:first-child .c-call-to-action:hover span {
    cursor: default;
}

.c-age-rating .c-content-toggle button {
    display: none !important;
}


/* Accessories blade */

@media (min-width: 541px) and (max-width: 767px) {
    .accessories-blade .acc-small {
        float: left;
        padding: 0 25px;
    }
    .c-feature.f-align-left>div,
    .c-feature.f-align-right>div {
        width: auto !important;
    }
}

a.c-call-to-action.customize-button {
    color: #fff !important;
}

.m-panes-product-placement-item a.c-call-to-action.customize-button,
a.c-call-to-action.customize-button {
    padding: 5px 10px 5px 45px !important
}

a.customize-button::before,
button.customize-button::before,
div.customize-button::before {
    content: "";
    background-image: url("https://assets.xboxservices.com/assets/e0/0d/e00dab0b-2727-449d-8b9f-f563bb3491fa.png?n=xdl-icon.png");
    position: absolute;
    top: 2px;
    left: 2px;
    width: 25px;
    height: 25px;
    background-size: 100% 100%;
}

a.customize-button,
button.customize-button,
div.customize-button {
    padding-left: 50px !important;
    padding-right: 25px !important;
    box-sizing: border-box;
    display: inline-block;
    white-space: nowrap;
    width: auto;
    min-width: 110px;
    text-decoration: none;
    position: relative;
}

a.customize-button:hover {
    color: #ccc !important;
}

a:not(.x-hidden-focus).c-call-to-action.customize-button:focus {
    border: 2px dashed #fff !important;
    outline: 2px dashed #000 !important;
    color: #ccc !important;
}

.accessories-blade .c-price {
    margin-top: 1vw;
}

.c-call-to-action.cta-btn-dark:active,
.c-call-to-action.cta-btn-dark:focus {
    background: #000 !important;
}

a.c-call-to-action.cta-btn-dark {
    background: #000;
    color: #fff;
    margin-left: 0px;
}

a.c-call-to-action.cta-btn-dark:hover {
    background: #464646;
}


/* End  Accessories blade */


/* Panes */

@media only screen and (max-width: 1399px) {
    .m-panes-product-placement-item {
        width: 100%
    }
}

a.c-call-to-action.cta-btn {
    background: #107c10;
    color: #fff;
    margin-left: 0px;
    padding-left: 10px;
    padding-right: 25px;
}

.c-call-to-action.cta-btn:focus,
.c-call-to-action.cta-btn:hover {
    background: #0e6c0e !important;
    border-color: rgba(0, 0, 0, .4) !important;
    color: #fff;
    text-decoration: none !important;
}

.c-call-to-action.cta-btn:focus span,
.c-call-to-action.cta-btn:hover span {
    text-decoration: none !important;
    color: #fff;
}

.cta-btn.c-glyph:hover::after,
.cta-btn.c-glyph:hover::before {
    color: #fff;
}

a.c-call-to-action.cta-btn-dark {
    margin-top: 10px;
}


/*.c-call-to-action.cta-txt:focus span, .c-call-to-action.cta-txt:hover span {
    text-decoration: underline;
}*/


/* Banners and Area Headings */

@media only screen and (min-width: 1084px) {
    .m-banner {
        max-width: 1000px !important;
    }
}

.m-area-heading .c-call-to-action {
    margin-top: 14px;
}

.m-area-heading {
    padding-top: 48px !important;
}

.m-banner .c-caption-1 {
    line-height: 1.3
}


/* tighter m-banner */

.m-banner.banner-leaner {
    padding-top: 20px;
}


/* Intro bar */

.greenBar {
    padding-bottom: 48px;
}

.greenBar .m- {
    text-align: center;
}

.greenBar p {
    padding: 24px 0;
}

.greenBar .c-image.winLogos {
    max-width: 446px;
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
}

.greenBar h3,
.greenBar a {
    display: inline-table !important;
    margin: 0 10px;
}


/* Themes and Colors */

.theme-white {
    color: #000;
    background-color: rgba(255, 255, 255, 1);
}

.theme-lighter {
    color: #000;
    background-color: rgba(238, 238, 238, 1);
}

.theme-f2 {
    color: #000;
    background-color: #f2f2f2 !important;
}

.theme-e3 {
    color: #000;
    background-color: #e3e3e3 !important;
}

.theme-2f {
    color: #fff;
    background-color: #2f2f2f !important;
}

.theme-black {
    color: #fff;
    background-color: #000 !important;
}

.theme-dkgray {
    background-color: #201f24;
    color: #fff;
}

.theme-green {
    color: #fff;
    background-color: #107c10 !important;
}

.theme-madden-blue {
    color: #fff;
    background-color: #091937 !important;
}

body .theme-transparent {
    background-color: transparent !important;
}

.badge-silver {
    background-color: #C8C8C8 !important;
}

.theme-dark .m-panes section {
    border-left: 1px solid #fff;
}

.theme-dark .m-panes section:first-child {
    border-left: 0px;
}

@media only screen and (max-width:1399px) {
    .theme-dark .m-panes section {
        border-bottom: 1px solid #fff;
        border-left: 0;
    }
}

@media screen and (min-width: 1400px) {
    .dark-gray-bg .m-panes section.f-stacked {
        border-left: 1px solid #FFFFFF;
    }
    .dark-gray-bg .m-panes section.f-stacked>div+div:last-of-type {
        border-top: 1px solid #FFFFFF;
    }
}

@media screen and (max-width: 1399px) and (min-width: 768px) {
    .dark-gray-bg .m-panes section.f-align-middle {
        border-bottom: 1px solid #FFFFFF;
    }
    .dark-gray-bg .m-panes section.f-stacked>div+div:last-of-type {
        border-left: 1px solid #FFFFFF;
    }
}

@media screen and (max-width: 767px) and (min-width: 540px) {
    .dark-gray-bg .m-panes section.f-align-middle {
        border-bottom: 1px solid #FFFFFF;
    }
    .dark-gray-bg .m-panes section.f-stacked>div+div:last-of-type {
        border-left: 1px solid #FFFFFF;
    }
}

@media screen and (max-width: 539px) {
    .dark-gray-bg .m-panes section.f-align-middle {
        border-bottom: 1px solid #FFFFFF;
    }
    .m-panes section.f-stacked>div+div:last-of-type {
        border-top: 1px solid #FFFFFF;
    }
}


/*  Infinite box shots */

.infinite .m-product-placement-item {
    display: inline-block;
}

.infinite .c-product-placement picture,
.infinite .c-product-placement picture .c-image,
.infinite .c-product-placement picture img,
.infinite .m-product-placement-item picture,
.infinite .m-product-placement-item picture .c-image,
.infinite .m-product-placement-item picture img {
    display: block !important;
}

.infinite.boxShots-gallery {
    padding: 84px 0;
    text-align: center;
}

.infinite .gameDiv {
    text-align: left;
}

.infinite .m-product-placement-item {
    margin-top: 0px !important;
    padding-top: 14px;
}

.gameDivsWrapper {
    overflow: hidden;
}


/* Legal */

.legal {
    background-color: #000;
    padding: 42px 0;
    color: #fff;
}

.legal img {
    padding-bottom: 25px;
    max-width: 10%;
}

.legal p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.legal a {
    color: #fff;
    text-decoration: underline;
}

.legal a:hover {
    color: #9bf00b;
}

@media screen and (max-width: 1084px) {
    .legal {
        padding: 20px;
    }
}

.legal a.c-hyperlink:not(.f-image):focus,
.legal a.c-hyperlink:not(.f-image):hover {
    color: #9bf00b;
}

.magenta {
    background-color: #ff00ff;
}


/* Hero */

.c-carousel.f-multi-slide.theme-light .c-flipper {
    background: #000;
    color: #fff;
}

.c-hero .c-subheading,
.m-hero-item .c-subheading,
.m-hero-item .c-heading,
.c-hero .c-heading {
    max-height: 100%;
}

@media only screen and (max-width:767px) {
    .c-hero>div,
    .m-hero-item>div {
        height: 400px;
        overflow: visible
    }
}

.c-hero.f-transparent:before,
.m-hero-item.f-transparent:before {
    padding-bottom: 60.2% !important;
    padding-top: 0px;
}

.c-hero>picture,
.m-hero-item>picture {
    -ms-transform: none !important;
    transform: none !important;
}

@media only screen and (min-width:768px) {
    .nineTeenTwenty.m-image {
        padding-top: 0px;
    }
}


/* END Hero */

.h-divider {
    border-right: 1px solid rgba(0, 0, 0, .2)
}


/* Sub hero thin slider */

.m-global-promotion {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    padding: 12px;
    text-align: center;
    min-height: 120px;
}

.m-global-promotion>.c-image img {
    margin: 0 auto;
    height: 100%;
    width: auto;
    max-width: none;
}

.m-global-promotion .c-call-to-action {
    background: transparent;
    color: #0078D7;
    border-color: transparent;
    border-width: 2px;
    padding: 10px 44px 7px 24px;
    margin-left: 0px;
    margin-right: 0px;
}

.m-global-promotion .c-call-to-action:focus,
.m-global-promotion .c-call-to-action:hover {
    background: transparent;
    border-color: transparent;
}

.m-global-promotion .c-call-to-action:active {
    background: transparent;
    text-decoration: none;
}

.theme-light .m-global-promotion .c-call-to-action,
.theme-dark .theme-light .m-global-promotion .c-call-to-action {
    color: #000;
    background: transparent;
    border-color: transparent;
}

.theme-light .m-global-promotion .c-call-to-action:active,
.theme-dark .theme-light .m-global-promotion .c-call-to-action:active {
    color: rgba(0, 0, 0, 0.6);
}

.theme-light .m-global-promotion .c-call-to-action:focus,
.theme-dark .theme-light .m-global-promotion .c-call-to-action:focus {
    outline-color: #000;
}

.theme-dark .m-global-promotion .c-call-to-action,
.theme-light .theme-dark .m-global-promotion .c-call-to-action {
    color: #FFF;
    background: transparent;
    border-color: transparent;
}

.theme-dark .m-global-promotion .c-call-to-action:active,
.theme-light .theme-dark .m-global-promotion .c-call-to-action:active {
    color: rgba(255, 255, 255, 0.6);
}

.theme-dark .m-global-promotion .c-call-to-action:focus,
.theme-light .theme-dark .m-global-promotion .c-call-to-action:focus {
    outline-color: #FFF;
}

.m-global-promotion>div {
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
}

@media only screen and (min-width: 540px) {
    .m-global-promotion>div {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media only screen and (min-width: 768px) {
    .m-global-promotion>div {
        padding-left: 0;
        padding-right: 0;
    }
}

.m-global-promotion>div>div .c-heading {
    font-size: 20px;
    line-height: 24px;
    padding: 35px 0 5px;
    font-weight: 200;
    padding-top: 8px;
}

.m-global-promotion>div>div .c-paragraph {
    font-size: 15px;
    line-height: 20px;
    padding: 24px 0 0;
    font-weight: 400;
    padding-top: 8px;
}

@media only screen and (min-width: 768px) {
    .m-global-promotion>div>div {
        max-width: 70%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1084px) {
    .m-global-promotion>div>div {
        max-width: 50%;
    }
}

.m-global-promotion>div>.c-group {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media only screen and (min-width: 540px) {
    .m-global-promotion>div>.c-group {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .m-global-promotion>div>.c-group .c-call-to-action {
        margin: 0;
    }
}

@media only screen and (min-width: 768px) {
    .m-global-promotion.f-image {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        text-align: left;
        padding: 0;
    }
    .m-global-promotion.f-image>div {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        min-width: calc(100% - 320px);
        padding: 12px 35px 12px 12px;
        width: auto;
    }
    .m-global-promotion.f-image>div>div {
        margin: 0;
    }
}

@media only screen and (min-width: 768px) and (min-width: 768px) {
    .m-global-promotion.f-image>div>div {
        max-width: none;
    }
    .m-global-promotion.f-image>div>div .c-heading {
        padding-top: 0;
    }
}

@media only screen and (min-width: 768px) and (min-width: 1084px) {
    .m-global-promotion.f-image>div>div {
        max-width: none;
    }
}

@media only screen and (min-width: 768px) {
    .m-global-promotion.f-image>div>div+div {
        text-align: right;
        min-width: 250px;
    }
}

@media only screen and (min-width: 768px) and (min-width: 1084px) {
    .m-global-promotion.f-image>div {
        min-width: calc(100% - 440px);
    }
}

@media only screen and (max-width: 539px) {
    .m-global-promotion>div {
        padding-bottom: 22px;
    }
    .m-global-promotion .c-call-to-action {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media only screen and (min-width: 767px) {
    .hero-preorder-banner.ie10 .text-container {
        width: 60%;
        display: table;
    }
    .hero-preorder-banner.ie10 .header-container {
        width: 80%;
        display: table-cell;
        vertical-align: middle;
    }
    .hero-preorder-banner.ie10 .cta-container {
        width: 20%;
        display: table-cell;
        vertical-align: middle;
    }
}

.promos .theme-dark {
    background: none;
}

.c-carousel li.f-animate-next picture img,
.c-carousel li.f-animate-next picture img,
.c-carousel li.f-animate-next .text-container {
    -webkit-animation: hero-content-next 0.667s cubic-bezier(0.16, 1, 0.29, 0.99) both;
    animation: hero-content-next 0.667s cubic-bezier(0.16, 1, 0.29, 0.99) both;
}

.c-carousel li.f-animate-previous .text-container,
.c-carousel li.f-animate-previous picture img {
    -webkit-animation: hero-content-previous cubic-bezier(0.16, 1, 0.29, 0.99) 0.667s both;
    animation: hero-content-previous cubic-bezier(0.16, 1, 0.29, 0.99) 0.667s both;
}

.theme-dark .m-global-promotion a.c-call-to-action:hover,
.theme-dark .m-global-promotion a.c-call-to-action:active,
.theme-dark .m-global-promotion a.c-call-to-action:visited,
.theme-dark .m-global-promotion a.c-call-to-action:focus {
    background: none;
}

.promos {
    overflow: hidden;
}

.promos .c-carousel .c-sequence-indicator {
    bottom: 10px;
}

.promos .c-group {
    position: static;
}


/* Show Hide */

.svg-container svg {
    width: 23px;
    height: 23px;
    fill: #fff;
    vertical-align: sub;
    margin-bottom: -4px;
    padding-left: 5px;
}

svg:not(:root) {
    overflow: hidden;
}

.hide {
    display: none !important;
}


/************ Xbox Live pages **************/


/* fix for hero text under logo in desktop sizes*/

.m-hero-item h1.c-heading {
    max-height: 212px;
}


/* GWG 3-across infinite boxshots */

[data-grid*="col-12"].three-across {
    padding: 24px 15%;
}

@media screen and (min-width: 1084px) {
    .xbox-live-table p.c-paragraph-1 {
        width: 80%;
        margin-top: 29px;
    }
}

@media (min-width: 1489px) {
    [data-grid*="col-12"].three-across .three-across-item {
        height: 36vw;
    }
}

@media (min-width: 1080px) and (max-width: 1488px) {
    [data-grid*="col-12"].three-across .three-across-item {
        height: 46vw;
    }
}

@media (min-width: 768px) and (max-width: 1079px) {
    [data-grid*="col-12"].three-across {
        padding: 24px 6%;
    }
    [data-grid*="col-12"].three-across .three-across-item {
        height: 66vw;
    }
}


/* 6x2 boxshot-only layout */

.gameDivsWrapper.gameList-6-2 {
    width: 922px;
    padding: 24px 6px;
}

@media (min-width: 640px) and (max-width: 941px) {
    .gameDivsWrapper.gameList-6-2 {
        width: 618px;
    }
}

@media (max-width: 639px) {
    .gameDivsWrapper.gameList-6-2 {
        width: 302px;
        padding: 0px 0px;
    }
}

.gameList-6-2 .m-product-placement-item {
    margin-right: 12px !important;
    margin-left: 12px !important;
    width: 124px !important;
}


/* Xbox Live Gold table */

.xbox-live-table {
    padding: 0 2% 4vw;
}

.xbox-live-table.c-table td {
    padding: 20px 12px;
}

.xbox-live-table h3.c-heading-3,
.xbox-live-table h4.c-heading-4 {
    padding: 0;
}

@media (min-width: 1080px) {
    .xbox-live-table p.c-paragraph-1 {
        width: 80%;
    }
}

@media (max-width: 508px) {
    .xbox-live-table h4.c-heading-4 {
        font-size: 14px;
    }
    .xbox-live-table p.c-paragraph-1 {
        font-size: 12px;
    }
    .xbox-live-table td.f-numerical.f-sub-categorical {
        width: 26%;
    }
    .xbox-live-table img {
        width: 100%;
    }
}


/* End  Xbox Live Pages */


/* Console and Accessory hubs */

.consoleList .consoleItem {
    float: none !important;
    display: inline-block;
    margin-bottom: 24px;
    vertical-align: top;
}

.itemCat .item {
    display: inline-block;
    float: none;
    vertical-align: top;
    margin-top: 24px;
}

.itemCat.catHidden {
    display: none;
}

.hiLo.priceSelected,
.loHi.priceSelected {
    text-decoration: underline;
}

.c-feature a:focus picture {
    outline: 1px dashed !important;
}

.c-dialog.f-lightbox>[role=presentation]+.c-glyph,
.c-dialog.f-lightbox:hover>[role=presentation]+.c-glyph {
    color: #9bf00b;
    z-index: 1001;
}


/* End Console and Accessory hubs */


/* Mosaic over rides */

.c-mosaic-placement>div {
    justify-content: flex-end;
    padding-bottom: 50px;
}

.c-mosaic-placement .firstItem {
    justify-content: center;
}

.c-mosaic-placement .c-subheading {
    padding-top: 5px !important;
}


/***** Scaling Mosaic *************/

.mosaic-container {
    margin: 0 auto;
}

.mosaic-container a:focus img {
    outline: dashed !important;
}

.m-scale-mosaic {
    padding-left: 0px;
    padding-right: 0px;
}

.m-scale-mosaic .square div img {
    width: 100%;
}

.m-scale-mosaic .rect img {
    width: 100%;
}

.m-scale-mosaic .c-group span {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.m-scale-mosaic .c-group {
    position: relative;
    display: block;
    max-height: 60px;
}

.m-scale-mosaic .c-group.first span {
    color: #fff;
    font-size: 44px;
    font-weight: 100;
}

@media screen and (min-width: 0px) {
    .mosaic-container .dsk {
        display: none;
    }
    .mosaic-container .mob {
        display: block;
    }
    .mosaic-container {
        width: 100%;
    }
    .m-scale-mosaic .square div,
    .m-scale-mosaic .rect {
        width: 320px;
        text-align: center;
    }
    .m-scale-mosaic .btmTouts .square {
        position: relative;
        top: -150px;
    }
    .m-scale-mosaic .btmTouts .rect {
        position: relative;
        bottom: -640px;
        height: 150px;
    }
    .m-scale-mosaic .square div {
        height: 320px;
    }
    .m-scale-mosaic .tpTouts,
    .m-scale-mosaic .btmTouts {
        height: 960px;
    }
    .m-scale-mosaic .c-group {
        padding: 0 10px;
        bottom: 75px;
    }
    .m-scale-mosaic .c-group.first {
        bottom: 200px;
    }
}

@media screen and (min-width: 320px) {
    .mosaic-container {
        width: 320px;
    }
}

@media screen and (min-width: 540px) {
    .mosaic-container .dsk {
        display: block;
    }
    .mosaic-container .mob {
        display: none;
    }
    .mosaic-container {
        width: 496px;
    }
    .m-scale-mosaic .square div {
        display: inline-block;
        float: left;
        width: 248px;
    }
    .m-scale-mosaic .rect {
        width: 496px;
    }
    .m-scale-mosaic .btmTouts .square {
        top: -248px;
    }
    .m-scale-mosaic .btmTouts .rect {
        bottom: -248px;
        height: 248px;
    }
    .m-scale-mosaic .square div {
        height: 248px;
    }
    .m-scale-mosaic .tpTouts {
        height: 496px;
    }
    .m-scale-mosaic .btmTouts {
        height: auto;
    }
    .m-scale-mosaic .c-group {
        bottom: 80px;
    }
    .m-scale-mosaic .c-group.first {
        bottom: 180px;
    }
}

@media screen and (min-width: 768px) {
    .mosaic-container {
        width: 688px;
    }
    .m-scale-mosaic .square div {
        display: inline-block;
        float: left;
        width: 344px;
    }
    .m-scale-mosaic .rect {
        width: 688px;
    }
    .m-scale-mosaic .btmTouts .square {
        top: -344px;
    }
    .m-scale-mosaic .btmTouts .rect {
        bottom: -344px;
        height: 344px;
    }
    .m-scale-mosaic .square div {
        height: 344px;
    }
    .m-scale-mosaic .tpTouts {
        height: 688px;
    }
    .m-scale-mosaic .c-group.first {
        bottom: 230px;
    }
}

@media screen and (min-width: 1084px) {
    .mosaic-container {
        width: 960px;
    }
    .m-scale-mosaic .square div {
        display: inline-block;
        float: left;
        width: 240px;
        height: 240px;
    }
    .m-scale-mosaic .tpTouts {
        height: 240px;
    }
    .m-scale-mosaic .tpTouts .rect {
        display: inline-block;
        width: 480px;
    }
    .m-scale-mosaic .btmTouts .square {
        top: 0px;
    }
    .m-scale-mosaic .btmTouts .rect {
        display: inline-block;
        float: left;
        width: 480px;
    }
    .m-scale-mosaic .c-group span {
        font-size: 14px;
    }
    .m-scale-mosaic .btmTouts .rect {
        bottom: 0px;
        height: 240px;
    }
    .m-scale-mosaic .c-group {
        bottom: 80px;
    }
    .m-scale-mosaic .c-group.first {
        bottom: 170px;
    }
}

@media screen and (min-width: 1400px) {
    .mosaic-container {
        width: 1260px;
    }
    .m-scale-mosaic .tpTouts {
        height: 315px;
    }
    .m-scale-mosaic .square div {
        width: 315px;
        height: 315px;
    }
    .m-scale-mosaic .btmTouts .rect,
    .m-scale-mosaic .tpTouts .rect {
        width: 630px;
    }
    .m-scale-mosaic .c-group span {
        font-size: 18px;
    }
    .m-scale-mosaic .c-group.first {
        bottom: 200px;
    }
}

@media screen and (min-width: 1600px) {
    .mosaic-container {
        width: 1420px;
    }
    .m-scale-mosaic .tpTouts {
        height: 355px;
    }
    .m-scale-mosaic .square div {
        width: 355px;
        height: 355px;
    }
    .m-scale-mosaic .btmTouts .rect,
    .m-scale-mosaic .tpTouts .rect {
        width: 710px;
    }
    .m-scale-mosaic .c-group.first {
        bottom: 230px;
    }
}

@media screen and (min-width: 1800px) {
    .mosaic-container {
        width: 1600px;
    }
    .m-scale-mosaic .tpTouts {
        height: 400px;
    }
    .m-scale-mosaic .square div {
        width: 400px;
        height: 400px;
    }
    .m-scale-mosaic .btmTouts .rect,
    .m-scale-mosaic .tpTouts .rect {
        width: 800px;
    }
    .m-scale-mosaic .c-group.first {
        bottom: 230px;
    }
}


/* FAQ */

@media only screen and (max-width: 1084px) {
    .faq-mwf {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
}

.faq-mwf .c-drawer button:focus {
    outline: 2x dashed #fff;
    border: 2px dashed #000;
}

.faq-mwf hr.c-divider.f-pad-top-3x {
    margin-top: 36px;
}

.faq-mwf hr {
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent;
}

.faq-mwf button p,
.faq-mwf button h3,
.faq-mwf button h4 {
    padding: 10px 0;
    color: #107c10;
}

.faq-mwf .c-paragraph-2 {
    padding: 32px;
}

.faq-mwf .m-banner {
    max-width: 1600px;
    padding: 8px 0;
    text-align: right;
}


/* AQA 12/2021 */

.faq-mwf .c-drawer {
    background-color: #fbfbfb;
}

.faq-mwf .c-drawer>button {
    background-color: #f4f4f4;
}

.faq-mwf .c-drawer>button>p,
.faq-mwf .c-drawer>button>h3,
.faq-mwf .c-drawer>button>h4 {
    font-size: 16px;
    color: #0a4f0a;
}

.faq-mwf a.c-hyperlink {
    color: #0a4f0a;
}


/* Price Spider */

.priceFrom {
    margin: 12px 20px 0 0;
    float: none;
    font-weight: 700;
}


/****************************/

.eaAccess {
    padding: 10px 0;
}

.eaAccess img {
    max-width: 100%;
}

.eaAccess p {
    padding: 38px 0px 2px 20px;
}

@media screen and (max-width: 539px) {
    .eaAccess img {
        padding-left: 25vw;
    }
}

@media screen and (min-width: 540px) {
    .eaAccess .tall {
        height: 225px;
        line-height: 225px;
    }
    .eaAccess .short {
        height: 150px;
        line-height: 150px;
    }
}

@media screen and (min-width: 768px) {
    .eaAccess .tall {
        height: 205px;
        line-height: 205px;
    }
    .eaAccess .short {
        height: 150px;
        line-height: 150px;
    }
}

@media screen and (min-width: 1084px) {
    .eaAccess .tall {
        height: 200px;
        line-height: 200px;
    }
    .eaAccess .short {
        height: 150px;
        line-height: 150px;
    }
}

@media screen and (min-width: 1400px) {
    .eaAccess .tall {
        height: 150px;
        line-height: 150px;
    }
    .eaAccess .short {
        height: 100px;
        line-height: 100px;
    }
}


/* infinite game/box lists */


/* windows 10 games page */

.win10games .gameDivCTA {
    text-align: center;
}

.win10games .gameDivsWrapper {
    text-align: center;
    width: 100%;
}

.win10games .gameDivsWrapper .gameDiv {
    text-align: left;
    display: inline-block;
    margin: 24px 10px 16px;
    vertical-align: top;
    min-width: 220px;
    max-width: 497px;
    width: 30% !important;
}

.win10games .m-heading-4+[class*=m-] {
    padding-top: 0;
}

.win10games .containerIMG {
    position: relative;
}

.win10games .containerIMG .c-image {
    width: 100%;
    max-width: 497px;
}


/* Shell work arounds */

.cookieBannerWrapper {
    background-color: #646464;
    display: none;
    height: 26px;
    min-width: 960px;
}

.cookieBanner {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

.cookieBanner .learnMore {
    height: 26px;
    float: right;
}

.cookieBanner .alertDescription {
    float: left;
    color: #fff;
    text-align: left;
    font: 12px/26px "Segoe UI", Arial, Sans-Serif;
    max-width: 810px;
}

.cookieBanner .learnMore a,
.cookieBanner .learnMore a:visited {
    display: block;
    float: left;
    color: #fff;
    font: 12px/26px "Segoe UI Semibold", Arial, Sans-Serif;
}

.cookieBanner .learnMore img {
    margin-top: 5px;
    margin-left: 20px;
    cursor: pointer;
}

.price-spider {
    max-width: 400px;
}


/* -- Shared Blades -- */

.newXGPshared .spLogo {
    width: 345px;
    height: 48px;
}

@media only screen and (max-width: 767px) {
    .tallMob .spLogo {
        width: 172px;
        height: 24px;
    }
    .tallMob .m-hero-item>div {
        height: 89vw;
    }
    .tallMob [class*=f-x][class*=f-y].m-hero-item>div>div {
        top: calc(45%);
    }
    .tallMob .m-hero-item>div picture {
        display: block;
        padding-bottom: 24px;
    }
    .tallMob .m-hero-item>div picture+h2.c-heading-2 {
        padding-top: 0;
    }
}

.dark-gray-bg {
    background-color: #171717;
}

.appStoreBadges {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}


/* Footer Icons */

.xboxSocial span {
    color: black;
}

.xboxSocial ul {
    margin-bottom: 4px;
}

@media screen and (max-width: 1083px) {
    .sharedIcons .twoIcons {
        float: none !important;
        display: inline-block !important;
    }
    .sharedIcons .emptyColumns {
        display: none !important;
    }
}

.sharedIcons .m-content-placement-item>picture {
    padding-bottom: 0 !important;
}

.sharedIcons .m-content-placement-item>picture img {
    position: relative !important;
}


/* For Legal Icon */

@media (min-width: 768px) and (max-width: 1400px) {
    .legal img {
        padding-bottom: 60px;
    }
}

@media only screen and (max-width:767px) {
    .legal img {
        max-width: 25%;
        padding-bottom: 10px;
    }
}


/* Xbox Game Pass Shared Blade */

@media screen and (min-width: 1500px) {
    .newXGPshared .m-hero-item.f-x-center>div>div {
        min-width: 60%;
    }
}


/* XGP Win 10  Shared Hero */

@media screen and (min-width: 767px) and (max-width: 900px) {
    .xpgHeroPC .m-hero-item.f-x-center>div>div {
        min-width: 60% !important;
    }
}

@media screen and (min-width: 767px) and (max-width: 1084px) {
    .xpgHeroPC .svgLogo {
        height: 40px;
    }
}

.xpgHeroPC .svgLogo {
    width: 345px;
    height: 48px;
}


/* XGP Touch Control Shared Hero */

.xgpTouchControl .svgLogo {
    max-width: 279px;
}

@media screen and (max-width: 340px) {
    .xgpTouchControl p.c-subheading:has(~div .appStoreBadges) {
        font-size: 16px;
        line-height: 22px;
    }
}


/* X1 Hero CrossSell start */

@media screen and (max-width: 767px) {
    .heroCrossSell .m-hero-item>div {
        height: 250px !important;
    }
    .heroCrossSell [class*=f-x][class*=f-y].m-hero-item>div>div {
        top: calc(43%) !important;
    }
}

@media screen and (min-width: 1084px) {
    .heroCrossSell .m-hero-item {
        max-height: 600px;
        height: 30.7vw;
    }
}

.heroCrossSell a.c-call-to-action {
    color: #9bf00b !important;
}

@media only screen and (max-width:1921px) {
    .heroCrossSell {
        background-color: #171717;
    }
}


/* X1 Hero CrossSell end */


/* Family Cross-sell start */

@media screen and (min-width: 1084px) {
    .familyCrossSell .m-hero-item {
        max-height: 600px !important;
        height: 30.7vw !important;
    }
}

@media only screen and (max-width: 767px) {
    .familyCrossSell .m-hero-item>div {
        height: 200px !important;
    }
    .familyCrossSell [class*=f-x][class*=f-y].m-hero-item>div>div {
        top: calc(35%) !important;
    }
    .familyCrossSell .m-hero-item .c-subheading,
    .familyCrossSell .m-hero-item>div picture,
    .familyCrossSell .m-hero-item[class*=f-x][class*=f-y]>picture:after {
        display: block !important;
    }
    .familyCrossSell .m-hero-item>div>div picture img {
        max-width: 255px;
    }
    .familyCrossSell .c-heading-3 {
        padding-top: 10px !important;
    }
}


/* Family Cross-sell Start end */


/* Page Bar */

.m-page-bar {
    max-width: 100%;
}

@media screen and (max-width: 767px) {
    .m-page-bar span {
        font-size: 10px !important;
    }
}


/* SVG Images */

@media screen and (max-width: 540px) {
    .tg-svgHeroLogos {
        width: 100%;
    }
}

.tg-svgHeroLogos {
    height: 34px !important;
}

.tg-svgPurchaseLogos {
    height: 23px !important;
}

.tg-svgXPALogo {
    height: 60px !important;
}

.tg-svgEAAccessLogo {
    height: 57px !important;
}

.winPC .spLogo {
    height: 5vw;
    width: 5vw;
}


/* SVG Images END */


/* High Color Contrast */

@-moz-document url-prefix() {
    .high-contrast-mode .high-contrast {
        background-color: #000;
        color: #fff !important;
    }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-hight-contrast:white-on-black), 
screen and (forced-colors: active) and (prefers-color-scheme: dark) {
    .faq-mwf button:not(.c-select-button):not(.c-sequence-indicator):hover:not(:disabled),
    .faq-mwf button:not(.c-select-button):not(.c-sequence-indicator):focus:not(:disabled),
    .faq-mwf button:not(.c-select-button):not(.c-sequence-indicator):active:not(:disabled) {
        color: #000 !important;
        background-color: transparent !important;
        -ms-high-contrast-adjust: auto !important;
    }
}

@media screen and (-ms-high-contrast:white-on-black), 
screen and (forced-colors: active) and (prefers-color-scheme: dark) {
    .high-contrast {
        background-color: #000;
        color: #fff !important;
    }
    .high-contrast-svg-white {
        background-color: #fff;
    }
    .faq-mwf p {
        color: #fff;
    }
}

@media screen and (-ms-high-contrast:black-on-white), 
screen and (forced-colors: active) and (prefers-color-scheme: light) {
    .high-contrast {
        background-color: #fff;
        color: #000 !important;
    }
    .high-contrast-svg-black {
        background-color: #000;
    }
}


/* End High Color Contrast */


/* Media Gallery -new- -start- */


/* v1.57.0 override -start- */

.m-product-placement-item.context-video picture,
.m-product-placement-item.context-video img,
.c-product-placement.context-video picture,
.c-product-placement.context-video img {
    width: 330px !important;
}

.m-product-placement-item.f-size-large.context-video picture,
.c-product-placement.f-size-large.context-video picture {
    width: 330px !important;
}

.m-product-placement-item.f-size-large.context-video,
.c-product-placement.f-size-large.context-video {
    width: 336px !important;
    margin-right: 12px !important;
}

.m-product-placement-item.context-video .c-action-trigger,
.c-product-placement.context-video .c-action-trigger {
    top: calc(94.5px - 24px) !important;
    left: calc(168px - 24px) !important;
}


/* v1.57.0 override -end- */

.m-product-placement-item.f-size-large.context-video img:hover {
    opacity: .7 !important;
}

.media-gallery-black {
    background-color: #000 !important;
}


/* Not sure why this was added...
  .c-dialog.f-lightbox [role=dialog] {
  max-width: 1350px !important;
  } */

.media-gallery-black .c-flipper.x-hidden-focus {
    background-color: #ccc;
}

.c-video-player .f-core-player video,
.c-video-player .f-core-player object {
    background-color: none !important;
}

@media screen and (min-width: 0px) {
    .oneFrame {
        width: 91%;
        height: 49.5vw;
        margin: 0 auto;
    }
    .oneFrame iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
}

@media screen and (min-width: 540px) {
    .oneFrame {
        height: 49.5vw;
        width: 90%;
    }
}

@media screen and (min-width: 768px) {
    .oneFrame {
        width: 63.9vw;
        height: 36vw;
    }
}

.BGtransplay button.c-action-trigger.x-hidden-focus {
    background: rgba(0, 0, 0, .6) !important;
}

.m-media-gallery {
    padding-top: 52px;
}


/* Media Gallery -new- -end-*/


/* 1.52.0 fixes for infinite boxshot section */

.m-product-placement-item.f-size-medium.gameDiv a picture {
    width: auto !important;
    height: 100% !important;
}

.m-product-placement-item.f-size-medium.gameDiv a picture img {
    position: static;
    transform: none;
}

.m-product-placement-item.gameDiv>a {
    position: static;
    border: 0 !important;
    outline: 0;
    display: block;
    overflow: visible;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    white-space: normal;
}

.m-product-placement-item.gameDiv>a:focus {
    outline: 2px dashed #000;
}

.m-product-placement-item.gameDiv>a>picture {
    border: none;
}


/* END 1.52.0 fixes for infinite boxshot */


/* 1.52.0 fixes for "Quick look" catalog page popups */

.poprotator div.c-group {
    bottom: 80px !important;
}

.m-product-placement-item.f-size-medium .poprotator picture {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
}

.m-product-placement-item.f-size-medium .gameMoreInfo .c-carousel.carfullimage picture {
    width: 58% !important;
    margin-left: 20.9%;
    margin-top: -2%;
}

.gameDiv .ratingstars,
.popinfo .ratingstars,
.popinfo .reviewtotal {
    display: none;
}

.gameMoreInfo {
    height: 76%;
    max-height: 685px;
    overflow-y: auto;
}


/* END 1.52.0 fixes for quick looks */


/* Quick Look iOS carousel image fix 01/2025 */

@media screen and (max-width: 1499px) {
    .gameList .popupShow .poprotator,
    .gameList .popupShow .poprotator .m-hero-item {
        height: auto !important;
    }
}

.gameList .popupShow .c-carousel>div:last-of-type {
    position: relative;
}

.gameList .popupShow .c-carousel>div:last-of-type:before {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56%; /* defines aspect ratio */
    top: 0;
    z-index: -2;
}

.gameList .popupShow .c-carousel>div:last-of-type>ul {
    position: absolute;
    top: 0;
    height: auto;
    width: 100%;
}

.gameList .popupShow .c-carousel .m-hero-item:before {
    padding-bottom: 56% !important; /* defines aspect ratio */
}


.gameList .gameMoreInfo.popupShow {
    overflow: auto;
}

.gameList .popupShow .c-carousel .popinfo .popprice {
    margin-right: 0px;
}

/* end Quick Look iOS carousel image fix */

/* search button alignment problem found on catalog pages fixed here */
html[dir="ltr"] .c-search button {
    left: auto;
}

/* Filters on Games Catalog and Sale */

.c-refine-menu .c-drawer>button {
    font-size: 15px !important;
}


/* Help me choose */

.x1Help .m-banner {
    padding-bottom: 48px !important;
}

.xboxSocial .m-social {
    margin: 18px 0;
}

.m-social>a:focus,
.m-social>ul>li>a:focus,
.c-social>a:focus,
.c-social>ul>li>a:focus {
    border: 2px dashed #000;
    outline: 2px dashed #fff;
}

@media screen and (max-width: 1083px) {
    .xboxSocial .m-social {
        margin: 18px 20px;
        flex-wrap: wrap;
    }
}


/* Shared Blades cont. XAA */


/*
.xaaEquation .m-banner>a {
    border: 2px #000 dotted;
    outline: 2px #FFF dotted;
}
*/

.buybox {
    position: relative;
    margin-top: 20px;
    /* compensates for the tranlateY buttons, allows page spacing to be set on individual pages */
}

.buybox__main {
    border: 6px solid #000;
    padding: 5.25% 1.25% 5% 1.25%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.buybox__glyph img {
    max-width: 40px;
}

.buybox__main img {
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 254px;
}

.buybox__content {
    position: relative;
    width: 22.5%;
    text-align: center;
    justify-content: center;
    padding-bottom: 16px;
}

.buybox.three-up .buybox__content {
    width: 30%;
}

.buybox__glyph {
    position: relative;
    width: 3.5%;
    text-align: center;
}

.buybox.three-up .buybox__glyph {
    width: 4.66%;
}

@media screen and (min-width: 540px) {
    .buybox .buybox__content [class^=c-heading] {
        font-size: 26px;
        line-height: 1.15em;
    }
}

@media screen and (min-width: 1084px) {
    .buybox .buybox__content [class^=c-heading] {
        font-size: 34px;
        line-height: 1.15em;
    }
}

.buybox .buybox__content [class^=c-heading] strong {
    font-weight: 600 !important;
}

@media screen and (max-width: 1083px) {
    .buybox {
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media screen and (max-width: 767px) {
    .buybox__main {
        flex-wrap: wrap;
        padding-top: 60px;
        padding-bottom: 50px;
    }
    .buybox.three-up .buybox__content,
    .buybox__content {
        width: 45.5%;
    }
    .buybox__glyph {
        position: relative;
        width: 7%;
        text-align: center;
    }
    .buybox.three-up .buybox__glyph,
    .buybox__glyph.stack {
        display: none;
    }
}

@media screen and (max-width: 539px) {
    .buybox__content {
        width: 50%;
    }
    .buybox__glyph {
        display: none;
    }
}


/*****Ambient video play/pause button****/


/* Narrator is arrowing twice pause/play */

.c-glyph.glyph-pause:before {
    content: "" / "" !important;
}

.c-glyph.glyph-play:before {
    content: "" / "" !important;
}

.c-select-menu>button:after {
    content: "" / "" !important;
}

.m-ambient-video {
    position: relative;
}

.m-ambient-video div button:focus {
    outline: 2px dashed #000 !important;
    border: 2px dashed #fff !important;
}

@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
    .m-ambient-video div button:focus {
        outline: 2px dashed #000 !important;
        border: 2px dashed #fff !important;
    }
}
/* 9/17/2024 */
@media screen and (-ms-high-contrast:white-on-black), 
screen and (forced-colors: active) and (prefers-color-scheme: dark) {
    .m-ambient-video.pp-button > div button {
        background-color: black;
    }
    .m-ambient-video.pp-button > div button:focus {
        color: ButtonText;
    }
}
.high-contrast-mode.white-on-black  .m-ambient-video.pp-button > div button.vidPlayPause {
    background-color: black;
}
.high-contrast-mode.white-on-black  .m-ambient-video.pp-button > div button.vidPlayPause {
    color: ButtonText !important;
}

@media screen and (-ms-high-contrast:black-on-white), 
screen and (forced-colors: active) and (prefers-color-scheme: light) {
    .m-ambient-video.pp-button > div button.vidPlayPause {
        background-color: white;
    }
}
.high-contrast-mode.black-on-white .m-ambient-video.pp-button > div button.vidPlayPause  {
    background-color: white;
}
/* END 9/17/2024 */

.m-ambient-video div button {
    height: 36px !important;
    width: 36px;
    position: absolute;
    color: white;
    background-color: rgba(0, 0, 0, 0.60);
    border: 1px solid white !important;
    bottom: 24px;
    display: block;
    padding: 2px 0px 0px 0px;
    margin-left: 24px;
}


/*****END Ambient video play/pause button****/


/*************Modded multifeature ************/

.mod-feature .m-multi-feature img.c-image {
    max-width: 200px;
}

.mod-feature .m-multi-feature [role='tablist'] li {
    background: #000;
}

.mod-feature .m-multi-feature [role='tablist'] li>a {
    display: block;
    opacity: .6;
}

.mod-feature .m-multi-feature [role='tablist'] li>a.f-active {
    outline: 2px solid #9bf00b !important;
    border: none !important;
    opacity: 1;
}

@media screen and (min-width: 1018px) {
    .mod-feature .copyList {
        width: 1000px;
    }
}

@media only screen and (min-width:1084px) {
    .m-multi-feature [role='tabpanel']>.c-heading,
    .m-multi-feature [role='tabpanel']>div>.c-heading {
        font-size: 34px;
        line-height: 40px;
        padding: 38px 0 2px;
        font-weight: 600;
        padding-top: 24px;
    }
}

@media screen and (max-width: 1017px) {
    .mod-feature .copyList {
        max-width: 1000px;
    }
}

@media screen and (min-width: 768px) {
    .mod-feature .m-multi-feature.f-align-center>section>[role='tablist'],
    .mod-feature .m-multi-feature.f-align-center>section>.c-pivot {
        margin-top: -50px;
        z-index: 100;
    }
}

.mod-feature .m-multi-feature section ul li>a {
    overflow: hidden;
}

@media screen and (max-width: 900px) {
    .mod-feature .availability div p span.available-text {
        display: none;
    }
}

@media screen and (max-width: 475px) {
    .mod-feature .availability div {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .mod-feature .availability div p span.available-text {
        display: none;
    }
}

.mod-feature .availability {
    position: absolute;
    bottom: 0;
    left: 0;
    /*right: 0;*/
}

.mod-feature .availability>div {
    bottom: 0;
    right: 0;
    background-color: #fff;
    display: inline-block;
    transform: translateX(-15px) skewX(32deg);
}

.mod-feature .availability p {
    height: 32px;
    line-height: 30px;
    padding: 0 16px 0 22px;
    color: #000;
    display: inline-block;
    text-align: top;
    transform: skewX(-32deg);
}

.mod-feature .availability p span.c-glyph {
    font-family: "MWF-MDL2";
    display: inline-block;
    font-weight: 400;
    font-size: 1.2em;
    vertical-align: middle;
    margin-left: 5px;
}


/* aqa fixes */

.m-hero-item .c-group>.c-call-to-action+.c-call-to-action:focus {
    border: 2px dotted #000 !important;
    outline: 2px dotted #FFF !important;
}

.m-multi-feature ul>li:focus,
.m-multi-feature a.c-call-to-action:focus {
    border: 2px dotted #000 !important;
    outline: 2px dotted #FFF !important;
}

[class^=c-heading-]:after,
[class^=c-heading-]:before {
    content: "" / "";
}

.mod-feature .m-multi-feature .c-pivot>ul li {
    padding: 0px !important;
    margin: 0 10px 0 0 !important;
    border: none;
    outline: none;
    overflow: hidden;
}

.mod-feature .m-multi-feature .c-pivot>ul li {
    background: #000;
}

.mod-feature .c-pivot:not(.f-disabled)>ul>li.f-active:after {
    border-bottom: none !important;
}

.mod-feature .c-pivot:not(.f-disabled)>ul>li.f-active {
    border: 2px solid #000;
    outline: 2px solid #9bf00b !important;
}

.mod-feature .m-multi-feature .c-pivot>ul li img {
    margin: 0px !important;
    opacity: 0.6;
}

.mod-feature .m-multi-feature .c-pivot>ul li.f-active img {
    opacity: 1;
}


/************* end Modded multifeature ************/


/* Xbox Game Pass White background */

.backgroundWhite {
    background-color: #fff !important;
}

@media screen and (min-width:768px) {
    .backgroundWhite {
        color: #fff !Important;
    }
}

@media screen and (max-width:768px) {
    .backgroundWhite a {
        color: #0a4f0a !Important;
    }
}


/* color contrast pagination update */

.paginateprevious.pag-disabled,
.paginatenext.pag-disabled {
    display: none !important;
}


/* tune in */

.tune-in .m-banner {
    max-width: 100% !important;
    padding-bottom: 25px;
}

.tune-in .m-banner {
    border: 2px solid #107c10;
}

.tune-in.theme-dkgray .m-banner {
    border: 2px solid #9bf00b;
}

@media screen and (max-width: 1084px) {
    .tune-in {
        padding-left: 36px;
        padding-right: 36px;
    }
}

.upgradeToUltimate .gamePassLogo,
.newFavoriteGame .gamePassLogo {
    max-width: 278px !important;
}

@media only screen and (max-width:767px) {
    .upgradeToUltimate .gamePassLogo,
    .newFavoriteGame .gamePassLogo {
        margin: 0 auto;
    }
}

@media screen and (min-width:1400px) {
    .newFavoriteGame p {
        width: 600px !important;
    }
}


/****** Icon List Superhero ********/

div.icon-list-hero section.m-hero-item h3.c-subheading-3 {
    font-weight: 700;
}

@media only screen and (min-width: 1400px) {
    /* was 1084*/
    div.icon-list-hero section.m-hero-item {
        height: 63vw;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1083px) {
    div.icon-list-hero section.m-hero-item {
        height: 80vw;
    }
}


/*.icon-list-hero .content-copy{padding-top:24px;}*/

div.icon-list-hero .c-paragraph-4 {
    padding-bottom: 2px;
}

div.icon-list-hero section.m-hero-item div.pwd-copy-section {
    top: 0px;
}

@media only screen and (min-width: 1084px) and (max-width: 1399px) {
    /*div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 50px;
    }*/
}

@media only screen and (min-width: 540px) and (max-width: 626px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 5vw;
    }
}

@media only screen and (min-width: 520px) and (max-width: 539px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 167vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 344vw;
    }
}

@media only screen and (min-width: 500px) and (max-width: 519px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 173vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 354vw;
    }
}

@media only screen and (min-width: 480px) and (max-width: 499px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 179vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 368vw;
    }
}

@media only screen and (min-width: 460px) and (max-width: 479px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 183vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 377vw;
    }
}

@media only screen and (min-width: 440px) and (max-width: 459px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 192vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 392vw;
    }
}

@media only screen and (min-width: 420px) and (max-width: 439px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 203vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 412vw;
    }
}

@media only screen and (min-width: 414px) and (max-width: 419px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 206vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 418vw;
    }
}

@media only screen and (min-width: 375px) and (max-width: 413px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 229vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 467vw;
    }
}

@media only screen and (min-width: 340px) and (max-width: 374px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 252vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 515vw;
    }
}

@media only screen and (min-width: 320px) and (max-width: 339px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 266vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 561vw;
    }
}

@media only screen and (max-width: 319px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        top: 276vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 494vw;
    }
}

div.icon-list-hero section.m-hero-item div.pwd-copy-section .icons>div {
    margin-top: 24px;
}

@media only screen and (max-width: 539px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section .icons>div[data-grid*="col-4"] {
        margin-top: 50px;
    }
}

@media only screen and (min-width: 1400px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        max-width: 625px;
    }
    div.icon-list-hero .c-heading-1a {
        padding-bottom: 48px
    }
}

@media only screen and (min-width: 1800px) {
    div.icon-list-hero .m-hero-item>div {
        max-width: 1600px;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1799px) {
    div.icon-list-hero .m-hero-item>div {
        max-width: 1600px;
        margin-left: 5%;
    }
}

@media only screen and (max-width: 1599px) {
    div.icon-list-hero .m-hero-item>div {
        max-width: calc(1600px + 10%);
        margin-left: 5%;
    }
}

@media only screen and (min-width: 1084px) and (max-width: 1399px) {
    div.icon-list-hero section.m-hero-item>picture {
        height: 109%;
        width: 109%;
        top: -1vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 83vw;
    }
    div.icon-list-hero section.m-hero-item div.pwd-copy-section {
        max-width: 525px;
    }
}

@media only screen and (min-width: 950px) and (max-width: 1083px) {
    div.icon-list-hero section.m-hero-item>picture {
        top: -23vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 103vw;
    }
    div.icon-list-hero section.m-hero-item .pwd-copy-section {
        max-width: 520px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 949px) {
    div.icon-list-hero section.m-hero-item>picture {
        top: -21vw;
    }
    div.icon-list-hero section.m-hero-item {
        height: 105vw;
    }
    div.icon-list-hero section.m-hero-item .pwd-copy-section {
        max-width: 430px;
    }
}

@media only screen and (min-width: 540px) and (max-width: 767px) {
    .icon-list-hero .m-hero-item.f-transparent:before {
        padding-bottom: 124.2% !important;
    }
}

@media only screen and (max-width: 539px) {
    .icon-list-hero [data-grid*="col-1"] {
        margin-top: 0px !important;
    }
}

@media only screen and (min-width: 1921px) {
    div.icon-list-hero section.m-hero-item {
        height: 1210px;
    }
}


/******* Icon List Superhero SVGs ************/

.icon-list-svg-1 {
    width: 82px;
    margin-left: auto;
    margin-right: auto;
}

.icon-list-svg-1 img {
    width: 82px;
}

.icon-list-svg-2 {
    width: 119px;
    margin-left: auto;
    margin-right: auto;
}

.icon-list-svg-2 img {
    width: 119px;
}

.icon-list-svg-3 {
    width: 172px;
    margin-left: auto;
    margin-right: auto;
}

.icon-list-svg-3 img {
    width: 172px;
}

@media only screen and (min-width: 768px) and (max-width: 1083px) {
    .icon-list-svg-3 {
        width: 142px;
    }
    .icon-list-svg-3 img {
        width: 142px;
    }
    .m-hero-item .c-group>.c-call-to-action+.c-call-to-action {
        padding: 10px 43px 7px 20px;
    }
}

.icon-list-svg-4 {
    width: 84px;
    margin-left: auto;
    margin-right: auto;
}

.icon-list-svg-4 img {
    width: 84px;
}


/* EA Play Blade */

.eaPlay .eaPlayLogo {
    max-width: 392px !important;
}

@media screen and (min-width: 1100px) {
    .eaPlay .eaPlayLogo {
        width: 62% !important;
    }
}

@media screen and (min-width: 1084px) {
    .eaPlay .eaPlayLogo {
        width: 50% !important;
    }
}

@media screen and (max-width: 1083px) {
    .eaPlay .eaPlayLogo {
        width: 68% !important;
    }
}

@media screen and (min-width: 850px) and (max-width: 1300px) {
    .eaPlayHeading {
        font-size: 28px;
        line-height: 32px;
    }
}

@media screen and (min-width: 768px) and (max-width: 849px) {
    .eaPlayHeading {
        font-size: 24px;
        line-height: 28px;
    }
}

@media screen and (max-width:1399px) and (min-width:768px) {
    .eaPlay .m-hero-item .c-paragraph-1 {
        font-size: 15px !important;
    }
}

@media screen and (min-width: 1084px) {
    .eaPlayWidth {
        width: 70%;
    }
}

@media screen and (min-width: 940px) {
    .eaPlayWidth {
        width: 100%;
    }
}

@media screen and (max-width: 939px) and (min-width: 768px) {
    .eaPlayWidth {
        width: 85%;
    }
}

@media screen and (max-width: 440px){
    .eaPlay .m-hero-item > div {
        height: 280px;
    }
    .eaPlay .m-hero-item .eaPlayWidth {
        margin-top: 18px;
    }
    .eaPlay .m-hero-item .eaPlayWidth .eaPlayHeading {
        font-size: 24px;
        line-height: 30px;
    }
    .eaPlay .m-hero-item .eaPlayWidth .c-paragraph-1 {
        font-size: 16px;
        line-height: 20px;
    }
}

@media screen and (max-width: 400px){
    .eaPlay .m-hero-item .eaPlayWidth {
        margin-top: 20px;
    }
    .eaPlay .m-hero-item .eaPlayWidth .eaPlayHeading {
        font-size: 22px;
        line-height: 28px;
    }
    .eaPlay .m-hero-item .eaPlayWidth .c-paragraph-1 {
        font-size: 14px;
        line-height: 18px;
    }
}


/****** End Icon List Superhero ********/


/* Lightbox close button AQA high contrast fix: border getting cut off. Works in non-hc also */

.lightboxcontent .c-glyph.glyph-cancel:before {
    z-index: -1;
}


/* high-contrast-test now used for text spacing detection also */

.high-contrast-test {
    font-size: 10px;
    line-height: 1em;
}