@font-face {
        font-display: block;
        font-family: H1Font;
        font-style: normal;
        font-weight: 100;
        src: local("HerbalifeNatural-Thin"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Thin.woff2) format("woff2"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Thin.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1Font;
        font-style: normal;
        font-weight: 300;
        src: local("HerbalifeNatural-Light"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Light.woff2) format("woff2"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Light.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1Font;
        font-style: normal;
        font-weight: 400;
        src: local("HerbalifeNatural-Regular"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Regular.woff2) format("woff2"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Regular.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1Font;
        font-style: normal;
        font-weight: 500;
        src: local("HerbalifeNatural-Medium"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Medium.woff2) format("woff2"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Medium.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1Font;
        font-style: normal;
        font-weight: 600;
        src: local("HerbalifeNatural-Bold"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Bold.woff2) format("woff2"), url(https://www.herbalife.com/fonts/HerbalifeNatural-Bold.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1WalsheimFont;
        font-style: normal;
        font-weight: 100;
        src: local("Herbalife-Walsheim-GT-Thin"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Thin.woff2) format("woff2"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Thin.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1WalsheimFont;
        font-style: normal;
        font-weight: 200;
        src: local("Herbalife-Walsheim-GT-Light"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Light.woff2) format("woff2"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Light.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1WalsheimFont;
        font-style: "italic";
        font-weight: 300;
        src: local("Herbalife-Walsheim-GT-Regular-Oblique"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Regular-Oblique.woff2) format("woff2"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Regular-Oblique.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1WalsheimFont;
        font-style: normal;
        font-weight: 500;
        src: local("Herbalife-Walsheim-GT-Medium"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Medium.woff2) format("woff2"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Medium.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1WalsheimFont;
        font-style: normal;
        font-weight: 400;
        src: local("Herbalife-Walsheim-GT-Regular"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Regular.woff2) format("woff2"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Regular.woff) format("woff")
    }

    @font-face {
        font-display: block;
        font-family: H1WalsheimFont;
        font-style: normal;
        font-weight: 600;
        src: local("Herbalife-Walsheim-GT-Bold"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Bold.woff2) format("woff2"), url(https://www.herbalife.com/fonts/Herbalife-Walsheim-GT-Bold.woff) format("woff")
    }
    /* Locales list */
    .splash #locales .locales-wrap .locales-drop h4 {
        font-family: 'H1Font', sans-serif;
        font-weight: 900 !important;
        color: #0d1320 !important;
    }
    .splash .k-list>.k-state-focused.k-state-selected, .k-listview>.k-state-focused.k-state-selected, .k-state-focused.k-state-selected, td.k-state-focused.k-state-selected {
        background-color: #266431 !important;
    }
    .splash .k-state-hover:hover, .splash .k-state-hover  {
        background-color: rgb(38 100 49 / 60%) !important;
    }
    .splash .k-list .k-state-hover:hover > span, .splash .k-state-hover > span{
        color: black !important;
    }
    .k-state-hover {
        background-color: rgb(38 100 49 / 60%) !important;
    }
    .k-list.k-reset > li:first-child {
        display: none;
    }
    .splash .k-dropdown-wrap .k-input {
        line-height: 22px !important;
        height: auto !important;
        font-size: 15px !important;
        transition: all 0.2s ease-in-out;
    }
    .splash .k-dropdown-wrap.k-state-default {
        height: 35px;
        border-radius: 10px;
        background-color: #ffffff !important;
        border: 0.1rem solid #d9d9d9;
        transition: all 0.2s ease-in-out;
    }
    .splash #locales .locales-wrap .locales-drop .k-select {
        line-height: 210% !important;
    }
    .k-popup.k-list-container {
        padding: 1rem 0rem 1rem 1rem !important;
        border-radius: 10px;
        border: 0.1rem solid #d9d9d9 !important;
        background-color: rgb(249, 248, 244) !important;
        font-size: 15px !important;
    }
    .k-popup.k-list-container .k-item {
        border-radius: 10px;
    }
    .k-popup .k-list .k-item {
    line-height: 18px;
    padding: 10px 5px 10px 15px !important;
    margin-right: 10px;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    }

    .locales-toggle-link {
        
    color: #266431 !important;
    }

    .splash h1,
    .splash h2,
    .splash h3 {
        font-family: 'H1Font', sans-serif;
        font-weight: 700;

    }
    .splash a {
        font-family: 'H1Font', sans-serif;
    }

    .splash h3 {
        font-family: 'H1Font', sans-serif;
        color: #266431 !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        margin-bottom: 20px !important;
        line-height: 30px;
    }
    .splash form.myhl-login h3::before {
        content: "";
        display: inline-block;
        width: 26px; 
        height: 26px; 
        margin-right: 10px;
        vertical-align: middle;
                background-image: url('https://assets.herbalifenutrition.com/content/dam/herbalife/sites/myherbalife/web_graphic/icons/2025/12-dec/MyHL-splash-login-icon.png');

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }   
    .splash .header-main aside h3::before {
        content: "";
        display: inline-block;
        width: 26px; 
        height: 26px; 
        margin-right: 10px;
        vertical-align: middle;
                background-image: url('https://assets.herbalifenutrition.com/content/dam/herbalife/sites/myherbalife/web_graphic/icons/2025/12-dec/MyHL-splash-login-signup.png');

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }   


    .splash span {
        font-family: 'H1Font', sans-serif;
        font-weight: 400 !important;
    }

    .splash .small-text {
        font-family: 'H1Font', sans-serif;
        font-weight: 300;
    }

    .splash span:not(#_Stamp, .k-icon) {
        color: #666;
        font-size: 1rem;
        line-height: 150%;
        text-shadow: none !important;
    }



    #blackbg::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
        z-index: 1;
        pointer-events: none;
    }
    .splash .header-fulll-width {
        border-bottom: 0px !important;
    }
    .splash section#locales {
        border-bottom: 1px solid #266431 !important;
    }

    .splash #blackbg img {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .splash .header-main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
        width: 80%;
        min-height: calc(100vh - 200px);
        gap: 30px;
        padding: 20px 0px;
    }
    .splash .header-main::after {
        content: none !important;
    }

    .splash .myhl-login,
    .splash .myhl-login+aside {
        background-color: #fff;
        border-radius: 8px;
        -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
        grid-column: 2;
        justify-self: end;
        margin: 0px;
        height: fit-content;
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
    .splash form.myhl-login  {
        align-self: end;
    }
    .splash .header-main > aside  {
        align-self: start;
    }

    .splash .myhl-login+aside {
        clear: both;
    }

    .splash .myhl-login+aside+div {
        clear: none !important;
        grid-column: 1;
        align-self: start;
        grid-row: 2;
        margin-top: -60px;
    }

    .splash .header-main .header-links {
        color: #fff !important;
        display: table-cell !important;
        vertical-align: baseline !important;
        text-align: left;
        line-height: 85px;
        pointer-events: none;
    }

    form.myhl-login {
        margin-top: 9% !important;
    }

    .splash .myhl-login div,
    .splash .myhl-login+aside div {
        background-color: initial;
        display: block;
        padding: 2rem;
    }

    .splash .myhl-login h3,
    .splash .myhl-login+aside h3 {
        margin: 0 0 10px 0;
        text-align: left;
        font-weight: 700;
        font-size: 28px;
        color: #515151;
    }

    .splash .myhl-login div>span,
    .splash .myhl-login+aside div>span {
        margin: 0 0 14px 0;
        width: 100%;
        text-align: left;
        display: inline-block;
    }

    .splash .btnForward.full-width {
        font-family: 'H1Font', sans-serif;
        font-weight: 400 !important;
        font-size: 1pc !important;
        background-color: #266431;
        border: none;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
        padding: .75rem 1.5rem;
        text-align: center;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
    }

    .splash .btnForward.full-width:hover {
        background-color: #1d4e26;
    }

    .splash aside>div>a.btnForward.full-width {
        background-color: #fff;
        border: 2px solid #266431;
        color: #266431;

    }

    .splash aside>div>a.btnForward.full-width:hover {
        background-color: #f0f0f0;

    }




    #hrblSiteWrapper footer {
        margin-top: 0px !important;
        padding-top: 0px !important;
    }

    a.header-links {
        font-size: 88px !important;
        font-weight: bold !important;
        color: white;
        background: initial !important;
        cursor: auto;
    }

    .splash .header-fulll-width+div {
        background: none !important;
        padding-bottom: 0px !important;
    }

    .content-main {
        display: none;
    }




    @media (min-width: 890px) and (max-width: 1263px) {
        .splash .header-links {
            font-size: 45px;
            line-height: 40px;
        }
        .splash .myhl-login+aside+div {
            width: 100%;
            margin-top: -110px;
        }
        .splash #blackbg img {
            width: auto;
            height: 100%;
        }

    }
    @media (max-width: 889px) {

        .splash .myhl-login,
        .splash .myhl-login+aside {
            width: 100%;
            max-width: 100%;
            margin-left: 0px;
        }

        .splash .header-main .header-links {
            font-size: 3pc !important;
            width: 100% !important;
            line-height: normal;
        }


        .splash .myhl-login+aside+div {
            width: 100%;
            display: block;
            height: auto;
            margin: 50px 0px;
        }

        .splash #blackbg img {
            width: auto;
            height: 100%;
            left: -10%;
        }
         .splash .header-main {
            display: flex;
            flex-direction: column;
        }
        .splash form.myhl-login {
            order: 1;
            margin-top: 0px !important;
        }
        .splash aside {
            order: 2;
        }
        .splash div {
            order: 0;
        }

    }
    @media (max-width: 659px) {
        .splash #blackbg img {
            left: -40%;
        }
    }



    footer.H1FMyHL {
        background-color: #f9f8f4 !important;
        position: relative !important;
    }
    .H1FMyHL-Container {
        background-color: #f9f8f4 !important;
        padding: 70px 0px 50px 0px;
        width: 80%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .H1FMyHL-Logo {
        margin-bottom: 2pc;
    }
    .H1FMyHL-Links-list {
        margin-bottom: 20px;
    }
    .h1-footer-link {
        font-family: "H1WalsheimFont" !important;
            color: #266431 !important;
            border-right: 1px solid #757575;
        font-size: 14px;
        margin-right: 4px;
        padding-right: 8px;
        text-decoration: underline;
    }
     .h1-footer-link:last-child {
        border-right: none;
    }
    .H1FMyHL-disclaimer p {
        font-family: "H1WalsheimFont";
        color: #0d1320 !important;
        font-size: 1pc;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 150%;
        text-align: center;
        text-transform: none;
    }
    .H1FMyHL-OtherLogos {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
    }
    .H1FMyHL-footerLogos {
        max-height: 45px;
    }
    .serverSig {
    background-color: #f9f8f4;
    color: #878787;
    font-size: 9px;
    letter-spacing: 0.2px;
    text-align: center;
}

        


/* Styles for logout page */
    .no-user .loggedout div:has(.icon-switch-ln-2) {
    display: none;
}
    .logout.no-user > header > nav#main-nav {
        display: none;
    }
    .no-user footer, .no-user+.serverSig {
        background-color: #f9f8f4 !important;
    }
  .no-user .loggedout .icon-container {
    display: none;
  }
  .no-user .loggedout>section {
    position: relative;
    min-height: calc(100vh - 230px);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }
  .no-user .loggedout>section>:first-child {
    margin-top: 50px;
  }
  .no-user .loggedout>section > aside {
    margin-bottom: 50px;
  }

  .no-user .loggedout {
    background-color: white;
    min-height: calc(100vh - 230px);
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .no-user .loggedout .content {
    width: 100% !important;
    text-align: left !important;
    height: fit-content !important;
    padding: 0px !important;
  }

  .no-user .loggedout .description-container {
    margin-bottom: 0px !important;
  }
  .no-user .loggedout>section>aside {
    display: inline-flex;
    flex-flow: column;
    width: 60%;
    box-shadow: none !important;
  }

  .no-user .loggedout .btnForward {
    position: relative !important;
    width: fit-content;
  }

  .no-user .loggedout>section>aside:first-child .btnForward {
    font-family: "H1WalsheimFont";
    font-weight: 400;
    font-size: 18px;
    padding: 8px 35px 8px 8px;
    border-radius: 74px;
    background-color: #266431;
    margin: 0px !important;
    transition: background-color .3s;
    text-align: center;
    display: flex;
    align-items: center;

  }
    .no-user .loggedout>section>aside:first-child .btnForward:hover {
    background-color: #1d4e26;

  }
  .no-user .loggedout>section>aside:first-child .btnForward::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    vertical-align: middle;
    background-image: url(https://assets.herbalifenutrition.com/content/dam/herbalife/sites/myherbalife/web_graphic/icons/2025/07-jul/h1-right-arrow.png/_jcr_content/renditions/original);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

  }


  .no-user .loggedout>section>aside:nth-child(2) .btnForward {
    font-family: "H1WalsheimFont";
    color: #2A6F37;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    background-color: inherit;
    margin: 0px;
    padding-left: 0px !important;

  }

  .no-user .loggedout>section>aside:first-child h1 {
    color: #224945 !important;
    font-display: block;
    font-family: H1Font;
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
  }

  .no-user .loggedout>section>aside p, .no-user .loggedout>section>aside h2 {
    font-family: "H1WalsheimFont";
    color: #0d1320 !important;
    font-size: 1pc !important;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 150%;
    text-align: left;
    text-transform: none;

  }

  .no-user .loggedout>section>aside:nth-child(2) h1 {
    font-family: H1Font;
    font-weight: 700;
    font-size: 24px;
    color: #224945 !important;
    line-height: 120%;
    border-top: 1px solid #E0DFD9;
    padding-top: 50px;

  }
  @media (max-width: 659px) {
    .no-user .loggedout > section {
        width: 80%;
    }
    .no-user .loggedout > section > aside {
        width: 100% !important;
    }
    .no-user .loggedout>section>aside:first-child .btnForward {
        margin: 0px !important;
        width: 100%;
    }
  }

  @media (min-width: 660px) and (max-width: 1039px) {
    .no-user .loggedout>section>aside {
        width: 85%;
    }
    .splash .myhl-login, .splash .myhl-login+aside {
        width: 100%;
    }
  }

  /* Logout image*/
  
   @media (min-width: 1040px) {
        .no-user .loggedout > section:last-child::after {
            content: "";
            display: inline-block;
            width: 40%;
            height: 400px;
            background-image: url(https://assets.herbalifenutrition.com/content/dam/herbalife/sites/myherbalife/web_graphic/billboards/2026/01-jan/myhl-logout-page.jpg/_jcr_content/renditions/original);
            background-size: contain;
            background-repeat: no-repeat;
            right: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    }