
:root {
    /* || Hulu Hooks Start */
    --hds-body-container-max-width: 1280px;
    --hds-body-container-half-gutter: 16px;
    --hds-body-container-margin: 48px;
    --hds-body-container-full-column-width: 83.3333%;
    --hds-color-white: #FFFFFF;
    --hds-color-black: #040405;
    --hds-color-primary-green: #26D997;
    --hds-color-primary-blue: #176EE1;
    --hds-color-primary-red: #DA1B4B;
    --hds-color-primary-yellow: #FAAC11;
    --hds-color-primary-purple: #7F25B2;
    --hds-color-hulu-gradient: linear-gradient(135deg, #01212C 0%, #025864 100%);
    --hds-color-lightui-1: #F7F7F9;
    --hds-color-lightui-2: #F0F1F5;
    --hds-color-lightui-3: #DDE0E6;
    --hds-color-lightui-4: #B9BFCB;
    --hds-color-lightui-5: #636E85;
    --hds-color-lightui-6: #272C35;
    --hds-color-lightui-5-transparent-10: rgba(99, 110, 133, 0.1);
    --hds-color-lightui-5-transparent-30: rgba(99, 110, 133, 0.3);
    --hds-color-darkui-1: #15171A;
    --hds-color-darkui-2: #212329;
    --hds-color-darkui-3: #31353D;
    --hds-color-darkui-4: #424752;
    --hds-color-darkui-5: #525966;
    --hds-color-darkui-6: #6F788A;
    --hds-color-blue-transparent-20: rgba(162, 197, 243, 0.2);
    --hds-color-black-transparent-90: rgba(4, 4, 5, 0.9);
    --hds-color-black-transparent-70: rgba(4, 4, 5, 0.7);
    --hds-color-black-transparent-50: rgba(4, 4, 5, 0.5);
    --hds-color-black-transparent-30: rgba(4, 4, 5, 0.3);
    --hds-color-black-transparent-10: rgba(4, 4, 5, 0.1);
    --hds-color-white-transparent-90: rgba(255, 255, 255, 0.9);
    --hds-color-white-transparent-70: rgba(255, 255, 255, 0.7);
    --hds-color-white-transparent-50: rgba(255, 255, 255, 0.5);
    --hds-color-white-transparent-30: rgba(255, 255, 255, 0.3);
    --hds-color-white-transparent-10: rgba(255, 255, 255, 0.1);
    --hds-color-red-1: #FBE8ED;
    --hds-color-red-2: #F0A4B7;
    --hds-color-red-3: #E55F81;
    --hds-color-red-4: var(--hds-color-primary-red);
    --hds-color-red-5: #991335;
    --hds-color-blue-1: #E8F0FC;
    --hds-color-blue-2: #A2C5F3;
    --hds-color-blue-3: #5D99EA;
    --hds-color-blue-4: var(--hds-color-primary-blue);
    --hds-color-blue-5: #104C9D;
    --hds-color-yellow-1: #FFF7E7;
    --hds-color-yellow-2: #FDDD9F;
    --hds-color-yellow-3: #FBC558;
    --hds-color-yellow-4: var(--hds-color-primary-yellow);
    --hds-color-yellow-5: #AE780B;
    --hds-color-purple-1: #F2E9F7;
    --hds-color-purple-2: #CBA7E0;
    --hds-color-purple-3: #A566C9;
    --hds-color-purple-4: var(--hds-color-primary-purple);
    --hds-color-purple-5: #58197C;
    --hds-color-green-1: #E7FBF4;
    --hds-color-green-2: #A1EFD2;
    --hds-color-green-3: #5AE3B1;
    --hds-color-green-4: var(--hds-color-primary-green);
    --hds-color-green-5: #0D9764;
    --hds-shadow-small: 0px 4px 8px var(--hds-color-black-transparent-10);
    --hds-shadow-large: 0px 10px 20px -10px var(--hds-color-black-transparent-30);
    --hds-shadow-elevation-5: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 5px 8px rgba(0, 0, 0, 0.14), 0px 1px 14px rgba(0, 0, 0, 0.12);
    /* || Hulu Hooks End */

    /* || Plus Community Hooks Start */
    --plus-brand-primary: #056D84;
    --plus-brand-secondary: #4BBAC6;
    --plus-accent-light-100: #0B7AAD;
    --plus-accent-light-200: #27B0D3;
    --plus-accent-light-300: #E55800;
    --plus-accent-dark-100: #054553;
    --plus-accent-dark-200: #02172A;
    --plus-accent-dark-300: #17171B;
    --plus-chat-accent-light-100: #F2FAFE;
    --plus-chat-accent-light-200: ##D3E6EA;
    --plus-light-grey-1-color: #E7EAF0;
    --plus-dark-grey-color: #2E3139;
    --plus-dark-grey-1-color: #636E85;
    --plus-dark-grey-2-color: #C5CAD3;
    --plus-dark-grey-3-color: #DDE0E6;
    --plus-neutral-grey-100: #F6F7F8;
    --plus-neutral-grey-200: #E7EAF0;
    --plus-neutral-grey-300: #C5CAD3;
    --plus-neutral-grey-400: #8592AF;
    --plus-neutral-grey-500: #636E85;
    --plus-neutral-grey-600: #444C5C;
    --plus-neutral-grey-700: #2E3139;
    --plus-neutral-grey-800: #16181D;
    --plus-neutral-grey-900: #0B0C0F;
    --plus-text-color: #000000;
    --plus-text-color-contrast: #FFFFFF;
    --plus-cta-color: #16181D;
    --plus-cta-color-hover: #054553;
    --plus-cta-color-contrast: #FFFFFF;
    --plus-page-background-color: #056D84;
    --plus-white-color: #FFFFFF;
    --plus-hyperlink-color: #0B7AAD;
    --plus-hyperlink-color-hover: #054553;
    --plus-line-separator-color: #DDE0E6;
    --plus-focus-state-dark: #636E85;
    --plus-focus-state-light: #9C9C9C;
    --plus-focus-state-black: #000000;
    --plus-brand-button-background: transparent;
    --plus-brand-button-border: 1px solid #16181D;
    --plus-brand-button-background-hover: #16181D;
    --plus-brand-button-label: #16181D;
    --plus-hollow-button-background: #056D84;
    --plus-hollow-button-background-hover: #054553;

    --plus-button-label: #FFFFFF;
    --plus-button-dark-accent: #054553;
    --plus-button-disabled-text: #054553;
    --plus-button-active: #054553;
    --plus-button-padding: 14px 16px;
    --plus-button-font-weight: 400;
    --plus-button-radius: 4px;
    --plus-button-transition: all .3s ease-out;

    --plus-primary-button-label: #FFFFFF;
    --plus-primary-button-background: #056D84;
    --plus-primary-button-background-hover: #054553;
    --plus-primary-button-background-active: #02172A;
    --plus-primary-button-disabled: #C5CAD3;

    --plus-secondary-button-label: #FFFFFF;
    --plus-secondary-button-label-hover: #FFFFFF;
    --plus-secondary-button-background: #16181D;
    --plus-secondary-button-background-hover: #2E3139;
    --plus-secondary-button-background-active: #2E3139;
    --plus-secondary-button-disabled: #C5CAD3;  

    --plus-tertiary-button-label: #16181D;
    --plus-tertiary-button-label-hover: #FFFFFF;
    --plus-tertiary-button-background: transparent;
    --plus-tertiary-button-border: #16181D;
    --plus-tertiary-button-background-hover: #16181D;
    --plus-tertiary-button-background-active: #000000;
    --plus-tertiary-button-disabled: #C5CAD3;  

    --plus-hollow-button-label: #FFFFFF;
    --plus-header-background-inner: #16181D;
    --plus-hero-background-gradient: radial-gradient(88.5% 100% at 50% 100%, #264582 0%, #0A0A2E 100%);
    --plus-hero-background-image: url(/sfsites/c/resource/dtcvx_supportAssets/images/disneyPlus_hero_gradient.png);
    --plus-hero-background-image-desktop: url(/sfsites/c/resource/dtcvx_support_heroAssets/desktop/plus-hero-background-image.png);
    --plus-hero-background-image-tablet: url(/sfsites/c/resource/dtcvx_support_heroAssets/tablet/plus-hero-background-image.png);
    --plus-hero-background-image-mobile: url(/sfsites/c/resource/dtcvx_support_heroAssets/mobile/plus-hero-background-image.png);
    --plus-hero-eybrow-color: #4BBAC6;
    
    --plus-searchbar-placeholder-color: #000000;
    --plus-hero-searchbar-border-color: 2px solid #7AE4FF;
    --plus-articlelink-color: #0B7AAD;
    --plus-articlelink-font-size: 1rem;
    --plus-h3-section-title-font-weight: 400;
    --plus-hero-title-font-weight: 400;
    --plus-topic-card-box-shadow-hover: inset 0 0 0 1px #0B7AAD;
    --plus-articlelink-font-weight: 400;
    --plus-articlelink-background: #FFFFFF;
    --plus-articlelink-background-hover: #F3F8FB;
    --plus-articlelink-background-hover-blue: #F3F8FB;
    --plus-articlelink-border: 2px solid #D9DCE2;
    --plus-icon-chevron-right-dark: url(/sfsites/c/resource/dtcvx_supportAssets/icons/icon_chevron_right_dark.svg);
    --plus-icon-breadcrumb-divider: url(/sfsites/c/resource/dtcvx_supportAssets/icons/breadcrumb-icon-light.svg);
    --plus-breadcrumb-active-color: #C1C1C1;
    --plus-regular-font-family: "Inspire", "Inspire-Regular", "InspireSC-Regular", "InspireTC-Regular", "InspireKR-Regular", "InspireJP-Regular", Arial, sans-serif;
    --plus-medium-font-family: "Inspire-Bold", "Inspire-Medium", "InspireSC-Bold", "InspireTC-Bold", "InspireKR-Bold", "InspireJP-Bold", Arial, sans-serif;
    --plus-heavy-font-family: "Inspire-Black", "InspireSC-Black", "InspireTC-Black", "InspireKR-Black", "InspireJP-Black", Arial, sans-serif;
}

/*-- Singapore --*/
:root:lang(zh-SG) {
    --plus-regular-font-family: "InspireSC-Regular", Arial, sans-serif;
    --plus-medium-font-family: "InspireSC-Bold", Arial, sans-serif;
    --plus-heavy-font-family: "InspireSC-Black", Arial, sans-serif;
}

/*-- Hong Kong and Taiwan --*/
:root:lang(zh-HK), :root:lang(zh-TW)  {
    --plus-regular-font-family: "InspireTC-Regular", Arial, sans-serif;
    --plus-medium-font-family: "InspireTC-Bold", Arial, sans-serif;
    --plus-heavy-font-family: "InspireTC-Black", Arial, sans-serif;
}

/*-- South Korea --*/
:root:lang(ko) {
    --plus-regular-font-family: "InspireKR-Regular", Arial, sans-serif;
    --plus-medium-font-family: "InspireKR-Bold", Arial, sans-serif;
    --plus-heavy-font-family: "InspireKR-Black", Arial, sans-serif;
}

/*-- Japan --*/
:root:lang(ja) {
    --plus-regular-font-family: "InspireJP-Regular", Arial, sans-serif;
    --plus-medium-font-family: "InspireJP-Bold", Arial, sans-serif;
    --plus-heavy-font-family: "InspireJP-Black", Arial, sans-serif;
}

    /* || Plus Community Hooks End */

    /* focus state */

    *:focus-visible {
        outline-color: #16181D !important;
        outline-offset: 3px !important;
    }


    /*-- New Button Styles --*/

    /*-- Disney+ | Primary Button | actual button --*/

    button.plus-brands-button-primary,  a.plus-brands-button-primary {
        color: var(--plus-primary-button-label) !important;
        border: 1px solid var(--plus-primary-button-background) !important;
        background-color: var(--plus-primary-button-background) !important;
        border-radius: var(--plus-button-radius) !important;
        text-decoration: none !important;
        padding: var(--plus-button-padding)!important;
        transition: var(--plus-button-transition);
        text-decoration: none !important;
    }

    button.plus-brands-button-primary:hover, a.plus-brands-button-primary:hover {
        color: var(--plus-primary-button-label) !important;
        border: 1px solid var(--plus-primary-button-background-hover) !important;
        background-color: var(--plus-primary-button-background-hover) !important;
        text-decoration: none !important;
        transition: var(--plus-button-transition);
    }

    button.plus-brands-button-primary:active, a.plus-brands-button-primary:focus-visible {
        color: var(--plus-primary-button-label) !important;
        border: 1px solid var(--plus-primary-button-background-hover) !important;
        background-color: var(--plus-primary-button-background-hover) !important;
        outline-color: #16181D !important;
        outline-offset: 5px !important;
    }

    button.plus-brands-button-primary:active, a.plus-brands-button-primary:active  {
        color: var(--plus-primary-button-label) !important;
        border: 1px solid var(--plus-primary-button-background-active) !important;
        background-color: var(--plus-primary-button-background-active) !important;
        transition: var(--plus-button-transition);
        text-decoration: none !important;
    }

    button.plus-brands-button-primary[disabled], a.plus-brands-button-primary[disabled] {
        color: var(--plus-button-disabled-text) !important;
        border: 1px solid var(--plus-primary-button-background-disabled) !important;
        background-color: var(--plus-primary-button-background-disable) !important;
    }


/*-- Disney+ | Secondary Button --*/

.plus-brands-button-secondary button {
    color: var(--plus-secondary-button-label);
    border: 1px solid var(--plus-secondary-button-background);
    background-color: var(--plus-secondary-button-background);
    text-decoration: none !important;

}

.plus-brands-button-secondary button:hover {
    color: var(--plus-secondary-button-label-hover);
    border: 1px solid var(--plus-secondary-button-background-hover);
    background-color: var(--plus-secondary-button-background-hover);
}

.plus-brands-button-secondary button:focus-visible {
    color: var(--plus-secondary-button-label-hover);
    border: 1px solid var(--plus-secondary-button-background-hover);
    background-color: var(--plus-secondary-button-background-hover);
    outline-color: #16181D !important;
    outline-offset: 5px !important;
}

.plus-brands-button-secondary button:active {
    color: var(--plus-secondary-button-label-hover);
    border: 1px solid var(--plus-secondary-button-background-active);
    background-color: var(--plus-secondary-button-background-active);
}

.plus-brands-button-secondary button[disabled] {
    color: var(--plus-button-disabled-text);
    border: 1px solid var(--plus-secondary-button-background-disabled);
    background-color: var(--plus-secondary-button-background-disable);
}


/*-- Disney+ | Tertiary Button --*/

.plus-brands-button-tertiary button {
    color: var(--plus-tertiary-button-label);
    border: 2px solid var(--plus-tertiary-button-border);
    background-color: var(--plus-tertiary-button-background);
    font-weight: var(--plus-button-font-weight);
    text-decoration: none !important;

}

.plus-brands-button-tertiary button:hover {
    color: var(--plus-secondary-button-label-hover);
    border: 2px solid var(--plus-tertiary-button-background-hover);
    background-color: var(--plus-tertiary-button-background-hover);
    font-weight: var(--plus-button-font-weight);
    transition: all .3s ease-out;
}

.plus-brands-button-tertiary button:active {
    color: var(--plus-tertiary-button-label-hover);
    border: 2px solid var(--plus-tertiary-button-background-active);
    background-color: var(--plus-tertiary-button-background-active);
    font-weight: var(--plus-button-font-weight);
    transition: all .3s ease-out;
}

.plus-brands-button-tertiary button:focus-visible {
    color: var(--plus-tertiary-button-label-hover);
    border: 2px solid var(--plus-tertiary-button-background-active);
    background-color: var(--plus-tertiary-button-background-active);
    font-weight: var(--plus-button-font-weight);
    outline-color: #16181D !important;
    outline-offset: 5px !important;
}

.plus-brands-button-tertiary button[disabled] {
    color: var(--plus-button-disabled-text);
    border: 2px solid var(--plus-tertiary-button-background-disabled);
    background-color: var(--plus-tertiary-button-background-disable);
    font-weight: var(--plus-button-font-weight);
    transition: all .3s ease-out;
}


/*-- Feedback Modal Overrides --*/

.plus-brands-feedback-outer .plus-brands-feedback-content .plus-brands-feedback-footer button.slds-button {
    background: #0072d2 !important;
}

.plus-brands-feedback-outer .plus-brands-feedback-content .plus-brands-feedback-footer button.slds-button:hover {
    background: #068DFF !important;
}

/*-- Branding Updates 2024 -----------------------------------------*/

/*-- Hero Banners -----------------------------------------*/

/* Hero Home-- 
.plusBrands-header .plus-brands-hero-home {
    background:  var(--plus-hero-background-image) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
}
*/
/* Hero Contact-- 
.plusBrands-header .plus-brands-hero-contact-background  {
    background:  var(--plus-hero-background-image) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
}
*/

/*-- Font Updates 2024 -----------------------------------------*/


/*-- Page Body Section Title | Popular Topics--*/
.plusBrands-popular-article-outer h3.plus-brands-section-title {
    font-size: 32px !important;
}

/*-- All topics Title --*/
h3.plus-brands-section-title {
    /*   font-weight: 900 !important; */
       font-family: var(--plus-heavy-font-family) !important;
   }

   /*--Contact Tray Title --*/
.contact-tray-inner .contact-tray-main-title {
    /*   font-weight: 900 !important; */
    font-family: var(--plus-heavy-font-family) !important;
}

/*-- Category Select --*/

.plus-brands-articleCat-results .plus-brands-articleCat-items .plus-brands-articleCat-title {
    font-family: var(--plus-medium-font-family) !important;
}

/*-- Article Detail Font Updates --*/

.plus-brands-suggested-article-item .plus-brands-suggested-article-link {
    font-weight: var(--plus-articlelink-font-weight, 700);
}

.plus-brands-article-summary h1.article-head {
    font-family: var(--plus-heavy-font-family) !important;
}


/*-- Mobile Responsive Font and Branding Updates 2024 -----------------------------------------*/

/* Tablet */
@media only screen and (max-width: 64em) {

        /* Hero Home-- 
    .plusBrands-header .plus-brands-hero-home {
        background:  var(--plus-hero-background-image-tablet) !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
    }
        */

    /*-- Page Body Section Title | Popular Topics--*/
    .plusBrands-popular-article-outer h3.plus-brands-section-title {
        font-size: 24px !important;
    }

    /*-- All topics Title --*/
    h3.plus-brands-section-title {
        font-family: var(--plus-medium-font-family) !important;
        font-size: 20px !important;
    }

    /*--Contact Tray Title --*/
    .contact-tray-inner .contact-tray-main-title {
        font-family: var(--plus-heavy-font-family) !important;
        font-size: 24px !important;
    }

}

/* Mobile */
@media only screen and (max-width: 47.9375em) {

        /* Hero Home-- 

    .plusBrands-header .plus-brands-hero-home {
        background:  var(--plus-hero-background-image-mobile) !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
    }
        */

        .plus-brands-colang-selector .slds-combobox_container .slds-input-has-icon .slds-input__icon {
            z-index: 0 !important;
        }

}

/* Mobile - Portrait */
@media only screen and (max-width: 29.9375em) {

}

/*-- Accessibility Feedback Form Style 2024 -----------------------------------------*/


/* hides the field label 
.hds-acc-feedback-container .slds-form-element .slds-form-element__label {
    display: none !important;
}
    */

/* hides the field placeholder */
.hds-acc-feedback-container .slds-form-element .slds-form-element__control .slds-input::placeholder {
    color: #8592AF !important;
}

/* hides the text placeholder */
.hds-acc-feedback-container .slds-form-element .slds-form-element__control .slds-textarea::placeholder {
    color: #8592AF !important;
}

/* input styles */
.hds-acc-feedback-container .slds-form-element .slds-form-element__control .slds-input {
    background: #FFFFFF !important;
    border-color: #8B94A7 !important;
    margin-bottom: 1rem;
}

/* text area styles */
.hds-acc-feedback-container .slds-form-element .slds-form-element__control .slds-textarea {
    background: #FFFFFF !important;
    border-color: #8B94A7 !important;
}

/* button styles */
.hds-acc-feedback-container .hds-acc-feedback-button button.slds-button.slds-button_brand {
    width: 100%;
    display: block;
    padding: .5rem;
    margin-top: 2rem;
}

/*-- article body ordered-list marker --*/

.plus-brands-article-wrap .plus-brands-article-content ol ::marker {
    font-variant-numeric: normal !important;
}

.plus-brands-article-wrap .plus-brands-article-content ol li  {
    padding-left: 5px !important;
    margin-left: -5px !important;
}

.plus-brands-article-wrap .plus-brands-article-content ul li {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/*-- Search Styles Overwrite --*/

.plus-brands-search-results-wrap .plus-brands-search-wrap .plus-brands-search-item:hover {
    text-decoration: none !important;
    outline: 1px solid #1476A7 !important;
    background-color: #F3F8FB !important;
}

/*-- Announcement Banner Override - Disney -*/

/*-- DESKTOP --*/

.plus-brands-hero-banner-inner .Home .plus-brands-notification-wrap.plus-brands-notification-brand-Disney {
    margin: 36px 32px -8px !important;
}

.plus-brands-hero-banner-inner .Home .plus-brands-notification-wrap.plus-brands-notification-brand-Disney .plus-brands-notification-outer {
    max-width: 1330px !important;
}

/*-- TABLET --*/

@media only screen and (max-width: 47.9375em) {

    .plus-brands-hero-banner-inner .Home .plus-brands-notification-wrap.plus-brands-notification-brand-Disney {
        margin: 33px 24px -10px !important;
    }
    
}

/*-- MOBILE --*/

@media only screen and (max-width: 29.9375em) {

    .plus-brands-hero-banner-inner .Home .plus-brands-notification-wrap.plus-brands-notification-brand-Disney {
        margin: 4px 0 -14px !important;
    }
    
    .plus-brands-hero-banner-inner.plus-brands-hero-banner-search .Home .plus-brands-notification-wrap.plus-brands-notification-brand-Disney {
        margin: 8px 0 -14px !important;
    }

}
