/* ========================================================================
   SWIPER-BASED GAME SLIDER CSS - CLEAN & ORGANIZED
   ======================================================================== */

/* ========================================================================
   BASE LAYOUT & CONTAINERS
   ======================================================================== */

/* Main container */
.inlineHighlightSlider .inlineHighlightSliderContainer {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}

.inlineHighlightSlider .inlineHighlightSliderContainer.hidden {
    display: none;
}

/* Content wrapper */
.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer {
    position: absolute;
    top: 96px;
    max-width: 100%;
    z-index: 2;
}

/* ========================================================================
   BACKGROUND SLIDER
   ======================================================================== */

.inlineHighlightSlider .inlineHighlightSliderContainer .inline-background-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.inlineHighlightSlider .inlineHighlightSliderContainer .inline-background-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(16px) brightness(50%);
}

/* Background fade overlay - fades from background image to white at 2/3 down */
.inlineHighlightSlider .inlineHighlightSliderContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.8) 75%, #ffffff 100%); */
    z-index: 1;
    pointer-events: none;
}

/* ========================================================================
   HEADER & TEXT CONTENT
   ======================================================================== */

/* Header container */
.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .header {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    z-index: 1;
    text-shadow: 0px 0px calc(.08em + 13px) #000;
}

.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .header .c-group {
    margin-top: 24px;
}

.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .header .c-group a {
    margin: 0 auto;
}

/* Hero heading */
.inlineHighlightSlider .copyAndSliderContainer .header h1.c-heading-1.heroHeading {
    position: absolute;
    text-align: right;
    padding-top: 0;
}

/* Green text accent */
.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .copyAndSliderContainer .green-text {
    color: #9bf00b;
}

/* Action toggle */
.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .c-action-toggle {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
    z-index: 1;
    padding-top: 6px;
}

/* CTA list container */
.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .header .ctaListContainer {
    padding-top: 16px;
}

/* ========================================================================
   CTA GROUP (CALL-TO-ACTION LINKS)
   ======================================================================== */

.inlineHighlightSlider .header .ctaGroup {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
}

.inlineHighlightSlider .header .ctaGroup .c-hyperlink {
    color: white;
    padding-top: 16px;
    padding-bottom: 8px;
    text-decoration: none !important;
}

.inlineHighlightSlider .header .ctaGroup .border,
.inlineHighlightSlider .header .ctaGroup .borderless {
    margin-left: 20px;
    margin-right: 20px;
}

.inlineHighlightSlider .header .ctaGroup .border {
    border-left: 2px solid white;
}

.inlineHighlightSlider .header .ctaGroup .c-call-to-action {
    margin-top: 8px;
}

.inlineHighlightSlider .header .ctaGroup .ctaDiv span {
    text-shadow: none !important;
}

/* ========================================================================
   ICON STYLES (GLYPHS)
   ======================================================================== */

.inlineHighlightSlider .c-glyph::before, 
.inlineHighlightSlider .c-glyph::after,
.inlineHighlightbanner .c-glyph::before,
.inlineHighlightbanner .c-glyph::after {
    font-family: 'MWFMDL2-Xbox' !important;
}

.inlineHighlightSlider .c-glyph:before,
.inlineHighlightbanner .c-glyph:before {
    padding-inline-end: 12px;
    font-weight: 100;
    font-size: 20px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
    position: relative;
    top: 1px;
}

.inlineHighlightbanner .m-banner .ctaGroup .c-hyperlink:hover {
    text-decoration: underline !important;
}

/* ========================================================================
   MAIN SLIDER
   ======================================================================== */

/* Slider container */
.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider {
    margin: 0 auto;
    width: 100%;
    z-index: 1;
    margin-bottom: 48px;
    bottom: 0;
    padding-top: 52px;
    padding-bottom: 52px;
}

/* Initialization states */
.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider:not(.swiper-initialized) {
    opacity: 0;
}

.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider.swiper-initialized {
    opacity: 1;
    transition: opacity .8s ease-in;
}

/* Slides */
.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide {
    cursor: pointer;
    overflow: hidden;
}

.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease;
}

.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide-active {
    transform: scale(1);
}

/* ========================================================================
   NAVIGATION CONTROLS
   ======================================================================== */

.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper {
    position: absolute;
    top: 30%;
    z-index: 1;
    border: 2px solid #fff;
}

.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper:focus {
    border: 2px dashed #000;
    outline: 2px dashed #fff;
}

/* ========================================================================
   ACCESSIBILITY & FOCUS STATES
   ======================================================================== */

.inlineHighlightSlider .inline-slider .swiper-slide.swiper-slide-active a.slide-link:focus,
.inlineHighlightSlider .inline-slider .swiper-slide.swiper-slide-active:focus-within,
.inlineHighlightSlider .inline-slider .swiper-slide a.slide-link:focus,
.inlineHighlightSlider .inline-slider .swiper-slide:has(a.slide-link):focus-within {
    z-index: 100;
}

.inlineHighlightSlider .inline-slider .swiper-slide.swiper-slide-active a.slide-link:focus::before,
.inlineHighlightSlider .inline-slider .swiper-slide.swiper-slide-active:focus-within::before,
.inlineHighlightSlider .inline-slider .swiper-slide a.slide-link:focus::before,
.inlineHighlightSlider .inline-slider .swiper-slide:has(a.slide-link):focus-within::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 8px;
    pointer-events: none;
    z-index: -1;
}

.inlineHighlightSlider .inline-slider .swiper-slide.swiper-slide-active a.slide-link:focus img,
.inlineHighlightSlider .inline-slider .swiper-slide a.slide-link:focus img {
    outline: #9bf00b solid 4px;
}

@media screen and (min-width: 1500px) and (max-width: 1820px) {
.inlineHighlightSlider
  .inlineHighlightSliderContainer
  .copyAndSliderContainer
  .inline-slider
  .swiper-slide.wide-current:has(a.slide-link:focus)::after {
    border: 2px solid #9bf00b;
    border-bottom: 4px;
    border-top: 0px;
}
}

/* ========================================================================
   RESPONSIVE DESIGN - BREAKPOINTS
   ======================================================================== */

/* ========================================================================
   ULTRA WIDE DESKTOP (1920px+)
   ======================================================================== */

@media screen and (min-width: 1920px) {
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current {
        max-width: 982px !important;
    }
    
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-previous {
        left: 520px;
    }
    
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-next {
        right: 520px;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current {
    width: 829px !important;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer {
    height: 700px;
}
}

/* ========================================================================
   LARGE DESKTOP (1651px+)
   ======================================================================== */

@media screen and (min-width: 1800px) and (max-width: 1920px) {
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-next {
        right: 27vw;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-previous {
        left: 27vw;
    }
        .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current {
        width: calc(48.3vw - 70.0px) !important;
    }
            .inlineHighlightSlider .inlineHighlightSliderContainer {
        height: calc(29vw + 150px);
    }
}

   @media screen and (min-width: 1500px) and (max-width: 1799px) {
        .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-next {
        right: 23vw;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-previous {
        left: 23vw;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current {
    width: calc(55.5vw - 54.8px) !important;
    }
     .inlineHighlightSlider .inlineHighlightSliderContainer {
        height: calc(23vw + 319px);
    }
}

   @media screen and (min-width: 1400px) and (max-width: 1499px) {
        .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-next {
        right: 17.5vw;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-previous {
        left: 17.5vw;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current {
        width: calc(66.7vw - 53.3px) !important;
    }
     .inlineHighlightSlider .inlineHighlightSliderContainer {
        height: calc(30vw + 306px);
    }
}

   @media screen and (min-width: 1084px) and (max-width: 1399px) {
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current {
    width: calc(83.5vw - 52.1px) !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1399px) {
    /* Navigation positioning */
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-next {
        right: 9vw;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-previous {
        left: 9vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
   .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current {
        width: calc(83.2vw - 47.8px) !important;
    }
}

@media screen and (min-width: 540px) and (max-width: 767px) {
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper {
        top: 36%
    }
        .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-next {
        right: 9vw;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-previous {
        left: 9vw;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.swiper-slide-active {
        width: 78vw !important;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide:not(.swiper-slide-active) {
        margin-top: 24vw;
    }
    .inlineHighlightSlider .swiper-pagination {
    margin-top: 60px !important;
}
}

@media screen and (min-width: 768px) {
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current {
        position: relative;
        overflow: visible;
        z-index: 1;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper {
        top: 35%
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current {
        position: relative;
        overflow: visible;
        z-index: 1;
    }
}

@media screen and (min-width: 0) and (max-width: 539px) {
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-wrapper {
        padding-inline: 0;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide-active {
        transform: scale(1);
        opacity: 1;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide:not(.swiper-slide-active) {
        opacity: .85;
        transform: scale(0.96);
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-next {
        right: 2vw;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .c-flipper.f-previous {
        left: 2vw;
    }
.inlineHighlightSlider .swiper-pagination {
    margin-top: 0px !important;
}
}

/* ========================================================================
   DESKTOP & TABLET WIDE IMAGES (1084px+)
   ======================================================================== */


/* ========================================================================
   ALL DESKTOP & TABLET (768px+)
   ======================================================================== */

/* ========================================================================
   HIGH-CONTRAST CONTENT POSITIONING (ALL BREAKPOINTS 0-767px)
   ======================================================================== */

/* Base high-contrast positioning for all breakpoints */
.inlineHighlightSlider .inline-slider .swiper-slide .high-contrast {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    color: #fff;
    padding: 24px 32px 0 32px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
}

.inlineHighlightSlider .inline-slider .swiper-slide.high-contrast-visible .high-contrast {
    opacity: 1;
}

@media screen and (min-width: 768px) {
    /* Wide current slide image positioning */
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current img {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-40%) translateY(0);
        height: calc(var(--inline-boxshot-height, 50vw)); 
        max-width: none !important; 
        width: auto;
        object-fit: contain;
        z-index: 1;
        scale: 1.25;
    }

    /* Gradient mask for wide-current slide to improve text readability */
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide.wide-current::after {
        content: '';
        position: absolute;
        bottom: -48px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: calc(var(--inline-boxshot-height, 50vw)/2);
        background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }
    
    /* Non-active slides */
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-slide:not(.wide-current) {
        z-index: 10;
        position: relative;
    }
    
    /* Wrapper alignment */
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider .swiper-wrapper {
        align-items: flex-end;
        overflow: visible;
    }
}

/* ========================================================================
   TABLET SPECIFIC (768px to 1083px)
   ======================================================================== */

@media screen and (min-width: 768px) and (max-width: 1083px) {
    /* High-contrast positioning */
    .inlineHighlightSlider .inline-slider .swiper-slide .high-contrast {
        bottom: 8px;
    }

    .inlineHighlightSlider .inlineHighlightSliderContainer {
        height: calc(30vw + 387px);
    }
}

/* ========================================================================
   MOBILE & SMALL TABLET (up to 1083px)
   ======================================================================== */

@media screen and (min-width: 540px) and (max-width: 767px) {
    .inlineHighlightSlider .inlineHighlightSliderContainer {
        min-height: calc(84vw + 150px);
    }
}

/* ========================================================================
   MOBILE & SMALL TABLET (up to 767px)
   ======================================================================== */

@media screen and (max-width: 539px) {
    .inlineHighlightSlider .inlineHighlightSliderContainer {
        min-height: calc(100vw + 100px);
    }
}

/* ========================================================================
   SMALL MOBILE (up to 539px)
   ======================================================================== */

@media screen and (min-width: 540px) {
        /* High-contrast overlays */
    .inlineHighlightSlider .inline-slider .swiper-slide:not(.swiper-slide-active) .high-contrast {
        display: none;
    }
}
@media screen and (min-width: 1084px) and (max-width: 1399px) {
        .inlineHighlightSlider .inlineHighlightSliderContainer {
        height: calc(32vw + 371px);
    }
}


/* ========================================================================
   HEADER & BANNER STYLES FROM BENTO.CSS
   ======================================================================== */

.inlineHighlightbanner .m-banner h1.c-heading-1a {
    margin-top: 1.5rem;
}

.inlineHighlightbanner .m-banner .ctaGroup {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
}

.inlineHighlightbanner .m-banner .ctaGroup .c-hyperlink {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    text-decoration: none !important;
    font-weight: 700;
}

.inlineHighlightbanner .m-banner .ctaGroup .border,
.inlineHighlightbanner .m-banner .ctaGroup .borderless {
    margin-left: 20px;
    margin-right: 20px;
}

.inlineHighlightbanner .m-banner .ctaGroup .border {
    border-left: 2px solid lightgray;
}

.inlineHighlightbanner .m-banner .c-call-to-action {
    margin-top: 2rem;
    margin-right: 0;
    color: #054b16;
}

@media (max-width: 539px) {
    .inlineHighlightbanner .m-banner .ctaGroup {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        margin: 0 !important;
        padding-top: 48px !important;
        width: 100% !important;
    }
    .inlineHighlightbanner .m-banner .ctaGroup .c-hyperlink {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        flex: 0 0 calc(33.33% - 1px) !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .inlineHighlightbanner .m-banner .ctaGroup .c-hyperlink span {
        padding-top: 0.75rem;
    }
    .inlineHighlightbanner .m-banner .ctaGroup .c-hyperlink .c-glyph {
        display: block !important;
        margin: 0 auto 0.25rem auto !important;
        padding-inline-end: 0 !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }
    .inlineHighlightbanner .m-banner .ctaGroup .c-hyperlink .c-glyph:before {
        padding-inline-end: 0 !important;
    }
    .inlineHighlightbanner .m-banner .ctaGroup .border {
        display: block !important;
        width: 1px !important;
        height: 96px !important;
        background: lightgray !important;
        border-left: none !important;
        margin: 0 !important;
        align-self: stretch !important;
        flex: 0 0 1px !important;
    }
}

@media screen and (max-width: 767px) {
    .inlineHighlightbanner .m-banner .ctaGroup {
        max-width: 100%;
        margin-inline-start: inherit;
        text-align: inherit;
        display: block;
        margin-inline-start: auto !important;
        margin-inline-end: auto;
        padding-top: 48px;
    }
    .inlineHighlightSlider .inline-slider .swiper-slide .high-contrast {
        padding-bottom: 32px;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .inline-slider {
        padding-top: 0px;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer {
    top: 48px;
}
}

.inlineHighlightSlider .swiper-pagination {
    position: inherit;
    margin-top: 100px;
}

.inlineHighlightSlider .swiper-paginationc-sequence-indicator{
    display: inline-block;
    margin-right: 8px;
    position: static;
    vertical-align: middle;
    width: auto;
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.inlineHighlightSlider .c-sequence-indicator .swiper-pagination-bullet {
    background-color: transparent;
    border: 2px solid transparent;
    display: inline-block;
    height: 20px;
    outline: 0;
    padding: 2px 3px;
    position: relative;
    width: 22px;
    cursor: pointer;
}

.inlineHighlightSlider .c-sequence-indicator .swiper-pagination-bullet:after {
    border: 1px solid transparent;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.inlineHighlightSlider .c-sequence-indicator span.swiper-pagination-bullet:before{
    border: 1px solid rgb(0, 0, 0);
    border-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
}
.inlineHighlightSlider .c-sequence-indicator span.swiper-pagination-bullet-active:before{
    background: #fff;
    border: 1px solid rgb(0, 0, 0);
    border-color: hsla(0, 0%, 100%, .8);
    border-radius: 50%;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
}

@media (forced-colors: active) {
    .inlineHighlightSlider .c-sequence-indicator .swiper-pagination-bullet {
        forced-color-adjust: none;
        background-color: Canvas;
        border-color: CanvasText;
    }

    .inlineHighlightSlider .c-sequence-indicator .swiper-pagination-bullet:after {
        border-color: CanvasText;
    }

    .inlineHighlightSlider .c-sequence-indicator span.swiper-pagination-bullet:before {
        border-color: CanvasText;
        background: Canvas;
    }

    .inlineHighlightSlider .c-sequence-indicator span.swiper-pagination-bullet-active:before {
        border-color: Highlight;
        background: Highlight;
    }

    .inlineHighlightSlider .c-sequence-indicator .swiper-pagination-bullet:focus {
        border-color: CanvasText;
        outline-color: Highlight;
    }
}

.inlineHighlightSlider .c-sequence-indicator .swiper-pagination-bullet:focus {
    border: 2px dashed #fff;
    outline: 2px dashed #000;
    outline-offset: 2px;
    border-radius: 0 !important;
}

.inlineHighlightSlider button.c-action-toggle:after {
    border: none !important;
}

.inlineHighlightSlider .c-sequence-indicator {
    background-color: transparent !important;
    width: auto;
}

.inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .c-action-toggle, .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .c-action-toggle:after {
    background-color: rgba(0,0,0,.2) !important;
}


/* ========================================================================
   PAGINATION AND PLAY/PAUSE CONTROLS
   ======================================================================== */

.inlineHighlightSlider .pagination-controls-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 100px;
    position: relative;
    z-index: auto;
    pointer-events: none;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.inlineHighlightSlider .pagination-controls-container .c-action-toggle {
    position: static !important;
    left: auto !important;
    transform: none !important;
    bottom: auto !important;
    background: transparent;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    margin-right: 0px !important;
    pointer-events: auto;
    z-index: 1;
}

.inlineHighlightSlider .pagination-controls-container .c-action-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.inlineHighlightSlider .pagination-controls-container .c-action-toggle:focus {
    border: 2px solid #fff;
    outline: 2px dashed #000;
    outline-offset: 2px;
}

.inlineHighlightSlider .pagination-controls-container .swiper-pagination {
    position: static;
    margin: 0;
    pointer-events: auto;
}

.inlineHighlightSlider .pagination-controls-container .swiper-pagination .swiper-pagination-bullet {
    pointer-events: auto;
    opacity: 1;
}

@media screen and (max-width: 767px) {
    .inlineHighlightSlider .pagination-controls-container {
        align-items: self-end;
        margin-top: 30px;
    }

    .inlineHighlightSlider .swiper-pagination {
        padding-bottom: 5px;
    }
    
    .inlineHighlightSlider .pagination-controls-container .c-action-toggle {
        width: 32px;
        height: 32px;
    }
    .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .c-action-toggle, .inlineHighlightSlider .inlineHighlightSliderContainer .copyAndSliderContainer .c-action-toggle:after{
        background-color: transparent !important;
    }
}

.inlineHighlightSlider button.c-action-toggle.c-glyph.pp-button:before {
    width: 20px !important;
}