@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --Spacing-6: 24px;
    --Spacing-System-spacing-xxxxxxlg: 48px;
    --Spacing-10: 40px;
    --Spacing-2: 8px;
    --Spacing-4: 16px;
    --Radius-4: 4px;

    --Color-text-blue: #1A76C5;
    --Color-text-grey: #4F4F4F;
    --Color-divider-yellow: #FED141;
    --Primary-White: #FFF;
    --Color-text-black: #000;
    --Color-surface-transparent: rgba(0, 0, 0, 0.00);
    --Color-divider-primary: #A5B7BA;

    --Colors-Accent-5: #6DC9C9;
    --Accent-Accent-11: #1A76C5;

    /* Button */
    --color-button-default: #fed141;
    --gradiants-button-1: #fec711;
    --gradiants-button-2: #fed143;
    --gradiants-button-3: #fad665;
    --color-text-black: #000000;
    --color-button-disabled: #f5f5f5;
    --color-button-hover: #fbb04c;
    --color-button-animating: #f0b323;
    --color-button-secondary: #ffffff;
    --text-link: #1A76C5;


    --Typeface-Line-Height-lg: 26px;
    --Typeface-Size-H5: 22px;

    --Typeface-Size-Text-Regular: 16px;
    --Typeface-Line-Height-x-sm: 20px;
    --Typeface-Size-Text-Tiny: 12px;
    --Typeface-Line-Height-xxx-sm: 14px;
    --Typeface-Line-Height-xxx-lg: 26px;
    --Typeface-Size-H3: 23px;
    --Typeface-Size-Mobile-H5: 18px;
    font-family: 'Open Sans', sans-serif;
    --Fonts-Size-Text-Large: 20px;
    --Fonts-Line-Height-sm: 24px;
    --Fonts-Line-Height-x-sm: 20px;
    --Fonts-Line-Height-x-sm: 18px;
}

.accent-5 {
    background-color: var(--Colors-Accent-5);
}

.accent-11 {
    background-color: var(--Accent-Accent-11);
}

.self-service-menu .copy-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    color: var(--Color-text-grey, #4F4F4F);

    font-family: 'Open Sans', sans-serif;
    font-size: var(--Fonts-Size-Text-Medium, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

body {
    margin: 0;
}

.self-service-menu {
    /* display: block; */
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    display: flex;
    padding: var(--Spacing-System-spacing-xxxxxxlg, 48px) var(--Spacing-10, 40px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-6);
    background: var(--Color-surface-white);
    box-shadow: 2px 3px 10px 2px rgba(0, 0, 0, 0.15), 2px 3px 5px -2px rgba(0, 0, 0, 0.06);
    z-index: -1;
    overflow: auto;
    max-height: calc(100vh - 72px);
}

.self-service-menu-body {
    display: flex;
    align-items: flex-start;
    gap: 70px;
    width: 100%;
}

.self-service-menu-body>.logged-out {
    display: flex;
    width: 53%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.self-service-menu-body>.logged-out>.s-s-menu-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    align-content: flex-start;
    align-self: stretch;
    color: var(--Color-text-grey);
}

.self-service-menu-body>.logged-out>.s-s-menu-header>.logged-out-headline {
    color: var(--text-secondary, #000);
    font-family: 'Open Sans', sans-serif;
    font-size: var(--Fonts-Size-H5, 23px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Fonts-Line-Height-lg, 26px);
}

.self-service-menu-body>.logged-out>.action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.self-service-menu-body>.logged-out>.action>.action-register {
    color: var(--text-primary, #4F4F4F);
    font-family: 'Open Sans', sans-serif;
    font-size: var(--Fonts-Size-Text-Large, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.self-service-menu-body>.logged-out>.action>.action-register a {
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    color: var(--text-link, #1A76C5);
    font-size: var(--Fonts-Size-Text-Large, 20px);
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.self-service-menu-body>.logged-out>.action>.action-register a:hover {
    border-bottom: 2px solid var(--text-link, #1A76C5);
}

.self-service-menu-body>.logged-in {
    display: flex;
    width: 53%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.self-service-menu-body>.logged-in>.s-s-menu-header {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 24px;
}

.self-service-menu-body>.logged-in>.s-s-menu-header>.logged-in-headline {
    flex: 1 0 0;
    margin: 0px;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-secondary, #000);
    font-size: var(--Fonts-Size-H5, 18px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Fonts-Line-Height-lg, 20px);
}

.self-service-menu-body>.logged-in>.s-s-menu-header>a {
    color: var(--Color-text-grey, #4F4F4F);
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-link, #1A76C5);

    /* Text/Medium/Semi Bold */
    font-size: var(--Fonts-Size-Text-Medium, 18px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Fonts-Line-Height-sm, 24px);
    /* 133.333% */
}

.self-service-menu-body>.logged-in>.s-s-menu-header>a:hover{
  text-decoration: underline !important;
  color: var(--text-link, #1A76C5);
}

.self-service-menu-body>.logged-in>.content-chart {
    display: flex;
    width: 100%;
    gap: 24px;
    margin-bottom: 32px;
}

.self-service-menu-body>.logged-in>.content-chart>.amount {
    display: flex;
    /* flex: 1; */
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.self-service-menu-body>.logged-in>.content-chart>.amount>div {
    border-left: 4px solid var(--Color-divider-yellow);
    padding-left: 8px;
    margin-bottom: 24px;
    height: fit-content;
}

.self-service-menu-body>.logged-in>.content-chart>.amount>div>span {
    color: var(--text-secondary, #000);

    /* Text/Medium/Normal */
    font-family: 'Open Sans', sans-serif;
    font-size: var(--Fonts-Size-Text-Medium, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Fonts-Line-Height-x-sm, 20px);
    /* 111.111% */
}

.self-service-menu-body>.logged-in>.content-chart>.amount>div>.headline-amount {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    color: var(--text-secondary, #000);
    font-family: "Open Sans";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    /* 44px */
}

.self-service-menu-body>.logged-in>.content-chart>.usage-comparison {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
    gap: 4px;
    padding-right: 8px;
}

.self-service-menu-body>.logged-in>.content-chart>.usage-comparison>span {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-secondary, #000);
    /* Text/Small/Normal */
    font-family: 'Open Sans', sans-serif;
    font-size: var(--Fonts-Size-Text-Small, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Fonts-Line-Height-x-sm, 20px);
    /* 125% */
}

.self-service-menu-body>.logged-in>.content-chart>.usage-comparison>.chart-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 37px;
    padding-right: 10.5px;
}



.chart-wrapper>.bar {
    width: 32px;
    display: inline-block;
    vertical-align: bottom;
    height: calc(var(--value) * 120px);
    position: relative;
}

.chart-wrapper>.bar::before {
    content: attr(data-label);
    position: absolute;
    top: -20px;
    /* Adjust as needed */
    left: 50%;
    width: 60px;
    transform: translateX(-50%);

    color: var(--Color-text-grey, #4F4F4F);
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}


.self-service-menu-body>.logged-in>.desktop-menu-accordion-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-top: 1px solid var(--surface-graphic-minimal, #A5B7BA);
    background: var(--surface-card-secondary, #F5F5F5);
}

.desktop-menu-accordion-wrapper>.desktop-menu-accordion-item {
    text-decoration: none;
    border-bottom: 1px solid var(--surface-graphic-minimal, #A5B7BA);
    background: var(--Color-surface-transparent, rgba(0, 0, 0, 0.00));
    display: inline-block;
    min-height: 56px;
    /* height: var(--Spacing-10, 40px); */
    padding: var(--Spacing-2, 8px) var(--Spacing-4, 16px);
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;

    color: var(--Color-text-black, #000);
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    padding-top: 16px;
}


.desktop-menu-accordion-wrapper>.desktop-menu-accordion-item>img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.desktop-menu-accordion-wrapper>.desktop-menu-accordion-item>.desktop-menu-accordion-item-new-badge {
    color: var(--text-secondary, #000);
    font-family: 'Open Sans', sans-serif;
    font-size: var(--Fonts-Size-Captions-Large, 12px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Fonts-Line-Height-xxxx-sm, 14px);
    margin: 0;
}

.self-service-menu .s-s-menu-btn {
    border: 1px;
    border-radius: var(--Radius-4);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    text-align: center;
    padding: 8px 24px;
    font-size: 16px;
    height: 43.2px;
    text-align: center;
    line-height: 150%;
    letter-spacing: 1.28px;
    background: linear-gradient(270deg, #F0B323 0%, #FED141 49.46%, #FED141 99.92%);
    color: var(--Color-text-black);
    border: 1px solid var(--Color-button-default, #fed141);
    -webkit-tap-highlight-color: #FBB04C;
}

.self-service-menu .s-s-menu-btn:focus {
    color: #000;
}

.self-service-menu .s-s-menu-btn:active {
    outline: none;
    background: #FBB04C;
    border: 1px solid #FBB04C;
    color: #000;
}

.self-service-menu .mobile-visibility {
    display: none
}

@media screen and (min-width:1024px) {
    .self-service-menu {
        box-shadow: inset 0 7px 7px -5px rgba(13, 48, 91, 0.20), 0 7px 7px -5px rgba(13, 48, 91, 0.20);
    }

    .self-service-menu .self-service-mega-menu .s-s-menu-group {
        display: flex;
        flex-wrap: wrap;
        gap: 56px 0px;
    }

    .self-service-menu .self-service-mega-menu .s-s-menu-accordion {
        flex: 1 1 calc(33.33%);
        max-width: 33.33%;
    }



    /* added this class for over writting width of desktop view */
    .self-service-menu-body>.logged-in,
    .self-service-menu-body>.logged-out {
        display: flex;
        width: 50%;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .desktop-visibility {
        display: block;
    }

    .self-service-menu .accordion-body>.accordion>.accordion-item .accordion-button {
        color: var(--text-link, #1A76C5);
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Fonts-Size-Text-Large, 20px);
        font-style: normal;
        font-weight: 600;
        line-height: var(--Fonts-Line-Height-sm, 24px);
    }

    .self-service-menu .s-s-menu-group .menu-item-btn {
        padding-right: 32px !important;
    }

    .self-service-menu #subCollapseOne ul>li,
    .self-service-menu #subCollapseTwo ul>li,
    .self-service-menu #subCollapseThree ul>li,
    .self-service-menu #subCollapseFour ul>li,
    .self-service-menu #subCollapseFive ul>li {
        margin-bottom: 8px;
        height: fit-content;
    }


    .self-service-menu .accordion-body>.accordion>.accordion-item .accordion-sub-item>a,
    .self-service-menu #subCollapseOne ul>li a,
    .self-service-menu #subCollapseTwo ul>li a,
    .self-service-menu #subCollapseThree ul>li a,
    .self-service-menu #subCollapseFour ul>li a,
    .self-service-menu #subCollapseFive ul>li a {
        color: #505D68 !important;
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Fonts-Size-Text-Medium, 18px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--Fonts-Line-Height-x-sm, 20px) !important;
    }
    /* CXR-8817-Underline on hover code start*/
    .menu-item-btn a:hover{
        text-decoration: underline;
    }
    /* code end */
}



@media screen and (max-width:1023.9px) {
    .self-service-menu {
        top: 40px;
    }

    .desktop-visibility {
        display: none;
    }

    .self-service-menu-body {
        flex-direction: column;
        /* width: 100%; */
        gap: 0;
    }

    .self-service-menu-body>.logged-out {
        display: flex;
        padding: 24px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: fit-content;
        padding-right: 16px;
    }

    .self-service-menu .logged-in {
        width: 100%;
    }

    .self-service-menu-body>.logged-out>.s-s-menu-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: none;
        gap: 0;
    }

    .self-service-menu-body>.logged-out>.s-s-menu-header>.logged-out-headline {
        color: var(--text-secondary, #000);
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Typeface-Size-Mobile-H4, 20px);
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        /* 28px */
    }

    .self-service-menu {
        display: flex;
        padding: 0px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Spacing-6);

        box-shadow: none;
    }

    .self-service-menu .copy-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;

        color: var(--text-primary, #4F4F4F);

        /* Text/Medium/Normal */
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Fonts-Size-Text-Medium, 16px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--Fonts-Line-Height-x-sm, 18px);
        /* 112.5% */
    }



    .self-service-menu-body>.logged-out>.action>.action-register {
        color: var(--text-primary, #4F4F4F);
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Fonts-Size-Text-Small, 14px);
        font-style: normal;
        font-weight: 600;
        line-height: 16px;
        /* 128.571% */
    }

    .self-service-menu-body>.logged-out>.action>.action-register a {
        font-family: 'Open Sans', sans-serif;
        color: var(--text-link, #1A76C5);
        font-size: var(--Fonts-Size-Text-Small, 14px);
        font-style: normal;
        font-weight: 600;
        line-height: 16px;
    }

    .self-service-menu-body>.logged-out>.action>.action-register a:hover {
        border-bottom: 2px solid var(--text-link, #1A76C5);
    }

    .self-service-menu-body,
    .self-service-menu-body>.logged-in,
    .self-service-menu-body>.logged-in>.s-s-menu-header {
        width: -webkit-fill-available;
    }

    .self-service-menu-body>.logged-in>.s-s-menu-header {
        padding-inline: 16px;
        padding-top: 24px;
    }

    .desktop-menu-accordion-wrapper>.desktop-menu-accordion-item {
        /* height: fit-content; */
        min-height: 24px;
        background: var(--Color-surface-heather, #F5F5F5);
        padding: var(--spacing-2, 8px) var(--spacing-4, 16px);


        color: var(--text-secondary, #000);

        /* Text/Medium/Bold */
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Fonts-Size-Text-Medium, 16px);
        font-style: normal;
        font-weight: 700;
        line-height: var(--Fonts-Line-Height-x-sm, 18px);
        /* 112.5% */
    }

    .desktop-menu-accordion-wrapper>.desktop-menu-accordion-item>.desktop-menu-accordion-item-new-badge {
        color: var(--text-secondary, #000);

        /* Text/Captions Large/Semi Bold */
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Fonts-Size-Captions-Large, 11px);
        font-style: normal;
        font-weight: 600;
        line-height: var(--Fonts-Line-Height-xxxx-sm, 12px);
    }

    .self-service-menu-body>.logged-in {
        gap: 16px;
    }

    .self-service-menu-body>.logged-in>.content-chart {
        padding-inline: 16px;
        justify-content: space-between;
        width: -webkit-fill-available;
        margin-bottom: 10px;
    }

    .self-service-menu-body>.logged-in>.content-chart>.usage-comparison>span {
        color: var(--text-secondary, #000);

        /* Text/XSmall/Normal */
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Fonts-Size-Text-Tiny, 12px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--Fonts-Line-Height-xxx-sm, 14px);
        /* 116.667% */
    }

    .self-service-menu-body>.logged-in>.content-chart>.amount>div {
        margin-bottom: 16px;
    }

    .self-service-menu-body>.logged-in>.content-chart>.amount>div>span {
        color: var(--text-secondary, #000);

        /* Text/XSmall/Normal */
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Fonts-Size-Text-Tiny, 12px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--Fonts-Line-Height-xxx-sm, 14px);
        /* 116.667% */
    }

    .self-service-menu-body>.logged-in>.content-chart>.amount>div>.headline-amount {
        color: var(--text-secondary, #000);

        /* Heading/H3 */
        font-family: var(--Fonts-Family-Heading, "Open Sans");
        font-size: var(--Fonts-Size-H3, 22px);
        font-style: normal;
        font-weight: 700;
        line-height: var(--Fonts-Line-Height-xxx-lg, 26px);
        /* 118.182% */
    }

    .self-service-menu-body>.logged-in>.s-s-menu-header>.logged-in-headline {
        font-family: 'Open Sans', sans-serif;
        color: var(--text-secondary, #000);
        font-size: var(--Typeface-Size-Mobile-H5, 18px);
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        /* 25.2px */
    }

    .self-service-menu-body>.logged-in>.s-s-menu-header>a {
        color: var(--text-link, #1A76C5);

        /* Text/XSmall/Normal */
        font-family: 'Open Sans', sans-serif;
        font-size: var(--Fonts-Size-Text-Tiny, 12px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--Fonts-Line-Height-xxx-sm, 14px);
        /* 116.667% */
    }

    .self-service-menu .mobile-visibility {
        display: block;
    }

    .self-service-mega-menu {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .self-service-menu .s-s-menu-btn {
        padding: 4px 24px;
        font-size: 14px;
        height: 32px;
        text-align: center;
        line-height: 150%;
        letter-spacing: 1.12px;
    }

    .self-service-menu-body>.logged-in>.content-chart>.usage-comparison>.chart-wrapper {
        padding-right: 8px;
    }

    .self-service-menu-body>.logged-in>.content-chart>.usage-comparison {
        padding-right: 0px;
    }

    .chart-wrapper>.bar::before {
        font-size: 12px;
    }

    .chart-wrapper>.bar {
        width: 26px;
    }
}