/* Start: Brand new fonts 
    The following are font-weight and name representation
        Light 300(Barlow-Light.woff2)
        Regular 400(Barlow-Regular.ttf)
        Regular 400 Italic(Barlow-Italic.ttf)
        SemiBold 600(Nexa-Text-Bold.woff)*/

        @font-face {
            font-family: "AkkuratLLWeb-Black";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-Black.woff") format("woff");
        }
        @font-face {
            font-family: "AkkuratLLWeb-BlackItalic";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-BlackItalic.woff") format("woff");
        }
        @font-face {
            font-family: "AkkuratLLWeb-Bold";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-Bold.woff") format("woff");
        }
        @font-face {
            font-family: "AkkuratLLWeb-BoldItalic";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-BoldItalic.woff") format("woff");
        }
        @font-face {
            font-family: "AkkuratLLWeb-Italic";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-Italic.woff") format("woff");
        }
        @font-face {
            font-family: "AkkuratLLWeb-Light";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-Light.woff") format("woff");
        }
        @font-face {
            font-family: "AkkuratLLWeb-LightItalic";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-LightItalic.woff") format("woff");
        }
        @font-face {
            font-family: "AkkuratLLWeb-Regular";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-Regular.woff") format("woff");
        }
        @font-face {
            font-family: "AkkuratLLWeb-Thin";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-Thin.woff") format("woff");
        }
        @font-face {
            font-family: "AkkuratLLWeb-ThinItalic";
            src: url("/uplink/resource/Uplink_Akkurat/akkurat/AkkuratLLWeb-ThinItalic.woff") format("woff");
        }
        
        /* End: Brand new fonts */
        
        :host {
            --sds-c-textarea-sizing-min-height: 200px;
        }

        html {
            scroll-behavior: smooth;
        }

        html:has(.upds-popup) {
            overflow: hidden !important;
        }

        /* Brand new typography and colors area added here */
        :root {
            --upds-uplink-blue: #2846F8;
            --upds-uplink-blue-tint1: #F2F4FF;
        
            --upds-purposeful-violet: #5E00E7;
            --upds-purple-tint1: #DFC9FF;
            --upds-purple-tint2: #F6F0FF;
        
            --upds-impactful-blue: #14D0FF;
            --upds-blue-tint1: #80E1FF;
            --upds-blue-tint2: #EBFAFF;
        
            --upds-positive-green: #01DE06;
            --upds-green-tint1: #61FF64;
            --upds-green-tint2: #D8FFD8;
        
            --upds-inspirational-pink: #E80261;
            --upds-pink-tint1: #FF9DC2;
            --upds-pink-tint2: #FFF5F9;
        
            --upds-accessible-orange: #FF7801;
            --upds-orange-tint1: #FFCB9E;
            --upds-orange-tint2: #FFF2E6;
        
            --upds-grey-100: #313131;
            --upds-grey-200: #757575;
            --upds-grey-300: #BDBDBD;
            --upds-grey-400: #E0E0E0;
            --upds-grey-500: #F5F5F5;
            --upds-grey-600: #FBFBFB;
        
            --upds-white-color: #FFFFFF;
            --upds-black-color: #000000;
        
            --upds-error: #AD0E02;
            --upds-error-tint1: #E61B23;
            --upds-error-tint2: #FFBCB5;
            --upds-error-tint3: #FFEDEB;
        
            --upds-warning-shade1: #884001;
            --upds-warning-tint1: #FCBD36;
            --upds-warning-tint2: #FFECC2;
            --upds-warning-tint3: #FFF7E6;
        
            --upds-success: #016204;
            --upds-success-tint1: #3DDB71;
            --upds-success-tint2: #B9F3CD;
            --upds-success-tint3: #DFFFEA;
            --upds-view-point: '1076px';

            --upds-Akkurat-L-L-Web-Black:'AkkuratLLWeb-Black';
            --upds-Akkurat-L-L-Web-Black-Italic:'AkkuratLLWeb-BlackItalic';
            --upds-Akkurat-L-L-Web-Bold:'AkkuratLLWeb-Bold';
            --upds-Akkurat-L-L-Web-BoldItalic:'AkkuratLLWeb-BoldItalic';
            --upds-Akkurat-L-L-Web-Italic:'AkkuratLLWeb-Italic';
            --upds-Akkurat-L-L-Web-Light:'AkkuratLLWeb-Light';
            --upds-Akkurat-L-L-Web-LightItalic:'AkkuratLLWeb-LightItalic';
            --upds-Akkurat-L-L-Web-Regular:'AkkuratLLWeb-Regular';
            --upds-Akkurat-L-L-Web-Thin:'AkkuratLLWeb-Thin';
            --upds-Akkurat-L-L-Web-ThinItalic:'AkkuratLLWeb-ThinItalic';
            
        }
        
        /* user defined background-colors */
        .upds-bg-uplink-blue {
            background-color: var(--upds-uplink-blue);
        }

        .upds-bg-uplink-blue-tint1 {
            background-color: var(--upds-uplink-blue-tint1);
        }
        
        .upds-bg-purposeful-violet {
            background-color: var(--upds-purposeful-violet);
        }
        
        .upds-bg-purple-tint1 {
            background-color: var(--upds-purple-tint1);
        }
        
        .upds-bg-purple-tint2 {
            background-color: var(--upds-purple-tint2);
        }
        
        .upds-bg-impactful-blue {
            background-color: var(--upds-impactful-blue);
        }
        
        .upds-bg-blue-tint1 {
            background-color: var(--upds-blue-tint1);
        }
        
        .upds-bg-blue-tint2 {
            background-color: var(--upds-blue-tint2);
        }
        
        .upds-bg-positive-green {
            background-color: var(--upds-positive-green);
        }
        
        .upds-bg-green-tint1 {
            background-color: var(--upds-green-tint1);
        }
        
        .upds-bg-green-tint2 {
            background-color: var(--upds-green-tint2);
        }
        
        .upds-bg-inspirational-pink {
            background-color: var(--upds-inspirational-pink);
        }
        
        .upds-bg-pink-tint1 {
            background-color: var(--upds-pink-tint1);
        }
        
        .upds-bg-pink-tint2 {
            background-color: var(--upds-pink-tint2);
        }
        
        .upds-bg-accessible-orange {
            background-color: var(--upds-accessible-orange);
        }
        
        .upds-bg-orange-tint1 {
            background-color: var(--upds-orange-tint1);
        }
        
        .upds-bg-orange-tint2 {
            background-color: var(--upds-orange-tint2);
        }
        
        .upds-bg-grey-100 {
            background-color: var(--upds-grey-100);
        }
        
        .upds-bg-grey-200 {
            background-color: var(--upds-grey-200);
        }
        
        .upds-bg-grey-300 {
            background-color: var(--upds-grey-300);
        }
        
        .upds-bg-grey-400 {
            background-color: var(--upds-grey-400);
        }
        
        .upds-bg-grey-500 {
            background-color: var(--upds-grey-500);
        }

        .upds-bg-grey-600 {
            background-color: var(--upds-grey-600);
        }

        .upds-bg-white-color {
            background-color: var(--upds-white-color);
        }
        
        .upds-bg-black-color {
            background-color: var(--upds-black-color);
        }
        
        .upds-bg-error {
            background-color: var(--upds-error);
        }
        
        .upds-bg-error-tint1 {
            background-color: var(--upds-error-tint1);
        }
        
        .upds-bg-error-tint2 {
            background-color: var(--upds-error-tint2);
        }
        
        .upds-bg-error-tint3 {
            background-color: var(--upds-error-tint3);
        }
        
        .upds-bg-warning-shade1 {
            background-color: var(--upds-warning-shade1);
        }
        
        .upds-bg-warning-tint1 {
            background-color: var(--upds-warning-tint1);
        }
        
        .upds-bg-warning-tint2 {
            background-color: var(--upds-warning-tint2);
        }
        
        .upds-bg-warning-tint3 {
            background-color: var(--upds-warning-tint3);
        }
        
        .upds-bg-success {
            background-color: var(--upds-success);
        }
        
        .upds-bg-success-tint1 {
            background-color: var(--upds-success-tint1);
        }
        
        .upds-bg-success-tint2 {
            background-color: var(--upds-success-tint2);
        }
        
        .upds-bg-success-tint3 {
            background-color: var(--upds-success-tint3);
        }
        
        /* used as colors */
        .upds-color-uplink-blue {
            color: var(--upds-uplink-blue);
        }

        .upds-color-uplink-blue-tint1 {
            color: var(--upds-uplink-blue-tint1);
        }
        
        .upds-color-purposeful-violet {
            color: var(--upds-purposeful-violet);
        }
        
        .upds-color-purple-tint1 {
            color: var(--upds-purple-tint1);
        }
        
        .upds-color-purple-tint2 {
            color: var(--upds-purple-tint2);
        }
        
        .upds-color-impactful-blue {
            color: var(--upds-impactful-blue);
        }
        
        .upds-color-blue-tint1 {
            color: var(--upds-blue-tint1);
        }
        
        .upds-color-blue-tint2 {
            color: var(--upds-blue-tint2);
        }
        
        .upds-color-positive-green {
            color: var(--upds-positive-green);
        }
        
        .upds-color-green-tint1 {
            color: var(--upds-green-tint1);
        }
        
        .upds-color-green-tint2 {
            color: var(--upds-green-tint2);
        }
        
        .upds-color-inspirational-pink {
            color: var(--upds-inspirational-pink);
        }
        
        .upds-color-pink-tint1 {
            color: var(--upds-pink-tint1);
        }
        
        .upds-color-pink-tint2 {
            color: var(--upds-pink-tint2);
        }
        
        .upds-color-accessible-orange {
            color: var(--upds-accessible-orange);
        }
        
        .upds-color-orange-tint1 {
            color: var(--upds-orange-tint1);
        }
        
        .upds-color-orange-tint2 {
            color: var(--upds-orange-tint2);
        }
        
        .upds-color-grey-100 {
            color: var(--upds-grey-100);
        }
        
        .upds-color-grey-200 {
            color: var(--upds-grey-200);
        }
        
        .upds-color-grey-300 {
            color: var(--upds-grey-300);
        }
        
        .upds-color-grey-400 {
            color: var(--upds-grey-400);
        }
        
        .upds-color-grey-500 {
            color: var(--upds-grey-500);
        }

        .upds-color-white-color {
            color: var(--upds-white-color);
        }
        
        .upds-color-black-color {
            color: var(--upds-black-color);
        }
        
        .upds-color-error {
            color: var(--upds-error);
        }
        
        .upds-color-error-tint1 {
            color: var(--upds-error-tint1);
        }
        
        .upds-color-error-tint2 {
            color: var(--upds-error-tint2);
        }
        
        .upds-color-error-tint3 {
            color: var(--upds-error-tint3);
        }
        
        .upds-color-warning-shade1 {
            color: var(--upds-warning-shade1);
        }
        
        .upds-color-warning-tint1 {
            color: var(--upds-warning-tint1);
        }
        
        .upds-color-warning-tint2 {
            color: var(--upds-warning-tint2);
        }
        
        .upds-color-warning-tint3 {
            color: var(--upds-warning-tint3);
        }
        
        .upds-color-success {
            color: var(--upds-success);
        }
        
        .upds-color-success-tint1 {
            color: var(--upds-success-tint1);
        }
        
        .upds-color-success-tint2 {
            color: var(--upds-success-tint2);
        }
        
        .upds-color-success-tint3 {
            color: var(--upds-success-tint3);
        }
        
        .header-title1,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h1,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h1 {
            font-family: var(--upds-Akkurat-L-L-Web-Black);
        }
        
        .header-title2,
        .header-title3,
        .header-title4,
        .header-title5,
        .upds-sub-title1,
        .upds-sub-title2,
        .upds-sub-title3,
        .upds-button-text,
        .upds-tag,
        .upds-badge,
        .upds-ti-badge,
        .upds-fi-badge,
        .upds-scm-badge,
        .upds-more-details-required-badge,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h2,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h3,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h4,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h5,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h2,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h3,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h4,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h5 {
            font-family: var(--upds-Akkurat-L-L-Web-Bold);
        }
        
        .upds-body1 {
            font-family: var(--upds-Akkurat-L-L-Web-Bold);
        }
        
        .upds-body2,
        .upds-body3,
        .upds-body4,
        .upds-link,
        .upds-error-msg,
        .formFields .field .slds-form-element__help, 
        .formFields .field .slds-form-element__helper,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-form-element__label,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-input,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-combobox__input-value,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-listbox_vertical .slds-listbox__option_plain,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-form-element__control textarea,
        .formFields ::placeholder,
        .formFields ::-webkit-input-placeholder,
        .formFields input.slds-input,
        .formFields .field-label,
        .formFields .rich-text-label,
        .formFields .form-field-value,
        .formFields button.slds-combobox__input,
        .formFields .field .slds-form-element__label,
        .formFields .field .selectClass .slds-dropdown,
        .formFields .multiselect-picklist-field .slds-dropdown,
        .impact-subtext {
            font-family: var(--upds-Akkurat-L-L-Web-Regular);
        }

        .upds-preamble{
            font-family: var(--upds-Akkurat-L-L-Web-Light);
        }
        
        .upds-text-italics {
            font-family: var(--upds-Akkurat-L-L-Web-LightItalic);
        }
        
        .header-title1,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h1,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h1 {
            font-size: 42px;
            line-height: 50.4px;
            letter-spacing: 1.2px;
        }
        
        .header-title2,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h2,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h2 {
            font-size: 32px;
            line-height: 40px;
            letter-spacing: 0.5px;
        }
        
        .header-title3,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h3,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h3 {
            font-size: 28px;
            line-height: 36px;
            letter-spacing: 0.6px;
        }
        
        .header-title4,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h4,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h4 {
            font-size: 24px;
            line-height: 32px;
            letter-spacing: 0.5px;
        }
        
        .header-title5,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h5,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h5 {
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0.5px;
        }
        
        .upds-sub-title1 {
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0.5px;
        }
        
        .upds-sub-title2 {
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 1px;
        }
        
        .upds-sub-title3 {
            font-size: 12px;
            line-height: 14px;
            letter-spacing: 1px;
        }
        
        .upds-preamble {
            font-size: 28px;
            line-height: 36px;
            letter-spacing: 0px;
        }
        
        .upds-body1 {
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0.2px;
        }
        
        .upds-body2,
        .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText,
        .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-input,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-combobox__input-value,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-listbox_vertical .slds-listbox__option_plain,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-form-element__control textarea,
        .formFields ::placeholder,
        .formFields ::-webkit-input-placeholder,
        .formFields input.slds-input,
        .formFields .field-label,
        .formFields .rich-text-label,
        .formFields .form-field-value,
        .formFields button.slds-combobox__input,
        .formFields .field .selectClass .slds-dropdown,
        .formFields .multiselect-picklist-field .slds-dropdown {
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0px;
        }
        
        .upds-body3,
        .cUplink_NavigationProfileTheme .edit-profile-area .slds-form-element__label {
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 0px;
        }
        
        .upds-body4,
        .formFields .field .slds-form-element__label {
            font-size: 12px;
            line-height: 14.4px;
            letter-spacing: 0px;
        }
        
        .upds-button-text {
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        
        .upds-link {
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0px;
            text-decoration: underline !important;
        }
        
        .upds-tag {
            font-size: 12px;
            line-height: 14.4px;
            letter-spacing: 0.6px;
        }
        
        .upds-badge {
            font-size: 10px;
            line-height: 10px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .upds-status-badge-layout {
            border-radius: 24px;
            font-size: 10px;
            line-height: 10px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            justify-content: center;
            align-items: center;
            column-gap: 4px;
            padding: 4px 8px;
        }

        .upds-ti-badge{
            background: var(--upds-uplink-blue);
            color: var(--upds-white-color);
        }

        .upds-fi-badge{
            background: var(--upds-uplink-blue-tint1);
            color: var(--upds-black-color);
        }

        .upds-scm-badge{
            background: var(--upds-grey-500);
            color: var(--upds-black-color);
            line-height: 14px;
        }

        .upds-more-details-required-badge {
            color: var(--upds-grey-100);
            background: var(--upds-grey-500);
        }
        
        .upds-co-author-badge{
            background-color: var(--upds-grey-500);
            padding: 8px 12px;
            border-radius: 40px;
        }

        .upds-impact-status-badge-layout {
            background-color: var(--upds-grey-500);
            display: flex;
            padding: 7px 12px;
            justify-content: center;
            align-items: center;
            column-gap: 4px;
            border-radius: 40px;
            max-width: max-content;
            margin: 0 auto;
        }

        .upds-impact-status-badge {
            width: 7px;
            height: 7px;
            border-radius: 50%;
        }

        .upds-impact-status-badge-text {
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            font-size: 12px;
            line-height: 12px;
            letter-spacing: 0.6px;
        }

        .upds-text-italics {
            font-size: 12px;
            line-height: 14.4px;
            letter-spacing: 0px;
        }

        .upds-error-msg,
        .formFields .field .slds-form-element__help, 
        .formFields .field .slds-form-element__helper {
            font-size: 12px;
            font-weight: 300;
            font-stretch: normal;
            font-style: normal;
            line-height: 16px;
            letter-spacing: 0.02em;
            color: var(--upds-error);
        }
        
        /* Start: Generic CSS, Please refer these classes if suitable for any design */
        
        /* Start: anchor styles */
        lightning-formatted-rich-text a {
            font-family: var(--upds-Akkurat-L-L-Web-Light);
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 0px;
            text-decoration: underline !important;
            color: var(--upds-grey-100) !important;
            /* Rich text content is having Out of the box inline css colors, so had to write !important to override it */
        }
        lightning-formatted-rich-text.upds-body2 a {
            font-size: 16px;
        }
        lightning-formatted-rich-text a:hover,
        lightning-formatted-rich-text a:active,
        lightning-formatted-rich-text a:focus {
            color: var(--upds-purposeful-violet) !important;
            /* Rich text content is having Out of the box inline css colors, so had to write !important to override it */
        }
        
        a.upds-link:active,
        a.upds-link:focus,
        .upds-no-underline-link:hover,
        .upds-no-underline-link:active,
        .upds-no-underline-link:focus {
            color: var(--upds-grey-100);
        }
        
        .upds-no-underline-link:active,
        .upds-no-underline-link:focus {
            text-decoration: none;
        }

        a:link{
            text-decoration: none;
        }

        a,
        a:hover,
        a:active,
        a:focus,
        a.upds-link:hover {
            color: var(--upds-purposeful-violet);
        }

        .anchor-1{
            color: var(--upds-grey-100) !important;
        }
        .anchor-1:hover {
            text-decoration: underline;
            cursor: pointer;
            color: var(--upds-grey-100) !important;
        }
        
        .anchor-2{
            color: var(--upds-grey-100) !important;
            text-decoration: underline !important;
        }
        .anchor-2:hover {
            color: var(--upds-purposeful-violet) !important;
        }
        
        .anchor-3{
            color: var(--upds-grey-100) !important;
            text-decoration: none;
        }
        .anchor-3:hover {
            text-decoration: underline;
            cursor: pointer;
            color: var(--upds-purposeful-violet) !important;
        }

        .anchor-4{
            color: var(--upds-grey-100) !important;
            text-decoration: underline !important;
        }
        .anchor-4:hover,
        .anchor-4:focus,
        .anchor-4:active
        {
            color: var(--upds-grey-100) !important;
        }

        .anchor-5{
            color: var(--upds-white-color) !important;
        }
        .anchor-5:hover {
            text-decoration: underline;
            cursor: pointer;
            color: var(--upds-white-color) !important;
        }


        /* End: anchor styles */


        /* Start: Combo box */
        .upds-custom__combo-box .options-list{
            height: max-content;
            max-height: 250px;
            overflow: hidden;
            overflow-y: scroll;
            display: flex;
            flex-direction: column;
            background: var(--upds-white-color);
            display: none;
            position: absolute;
            top:0;
            z-index: 3;
            background-color: var(--upds-white-color);
            width: 100%;
            box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 0;
            cursor: pointer;
            border: 1px solid var(--upds-grey-400);
            border-radius: 4px;
        }
        .upds-custom__combo-box .options-list.open{
            display: initial;
        }
        .upds-custom__combo-box .combo-box-placeholder-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 6px 0 12px;
            background: var(--upds-white-color);
            border: 1px solid var(--upds-grey-400);
            cursor: pointer;
            border-radius: 4px;
            height: 58px;
            line-height: 18px;
        }
        .upds-custom__combo-box .combo-box-placeholder-title.open {
            border: 1px solid var(--upds-purposeful-violet);
        }
        .upds-custom__combo-box .option{
            display: flex;
            align-items: center;
            column-gap: 12px;
            border-bottom: 1px solid var(--upds-grey-400);
            padding: 12px;
        }
        .upds-custom__combo-box .option:hover{
            background-color: var(--upds-grey-500);
            cursor: pointer;
        }
        /* End: Combo box */

        /* Start: Multilist */
        .upds-multi__select .options-list{
            height: max-content;
            max-height: 250px;
            overflow: hidden;
            overflow-y: scroll;
            display: flex;
            flex-direction: column;
            background: var(--upds-white-color);
            display: none;
            position: absolute;
            top:0;
            z-index: 2;
            background-color: var(--upds-white-color);
            width: 100%;
            box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 0;
            cursor: pointer;
        }
        .upds-multi__select .combo-box-placeholder-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 6px 0 12px;
            background: var(--upds-white-color);
            border: 1px solid var(--upds-grey-400);
            cursor: pointer;
            border-radius: 4px;
            line-height: 45px;
        }
        /* End: Multilist */

        
        /* Start: checkbox labels */
        .upds-checkbox .slds-checkbox__label{
            padding: 8px 0 8px 12px;
            display: block;
        }
        .upds-checkbox label.slds-checkbox__label:hover {
            background: var(--upds-grey-500);
        }
        .upds-input-label-hide .slds-form-element__label{
            display: none;
        }
        .upds-s-pill svg {
            fill: var(--upds-grey-100);
        }

        .upds-s-pill .slds-pill{
            font-family: var(--upds-Akkurat-L-L-Web-Regular);
            color: var(--upds-grey-100);
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 0.5px;
            padding: 4px 8px;
            background: var(--upds-white-color);
            border: 0.5px solid var(--upds-grey-400);
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
        }
        .upds-s-pill .slds-icon_container:hover{
            cursor: pointer;
            background: var(--upds-grey-500);
        }

        .upds-s-pill .slds-listbox-item{
            padding: 0 8px 4px 0;
            margin: 0;
        }
        .upds-s-pill .slds-pill__remove {
            margin-left: 8px;
        }

        div[data-three-columns="true"]{
            display: flex;
            align-items: center;
            column-gap: 12px;
        }
        div[data-three-columns="true"] .form-field{
            flex:1;
        }
        div[data-three-columns="true"] .slds-checkbox__label{
            display: flex;
            align-items: center;
            column-gap: 12px;
        }
        .form-field .slds-checkbox__label{
            cursor: pointer;
        }
        .form-field input:disabled + .slds-checkbox__label{
            cursor: default;
        }
        div[data-three-columns="true"] .slds-checkbox_faux{
            display: block;
            padding: 0;
            margin: 0;
            align-self: start;
            margin-right: 0 !important;
        }
        div[data-three-columns="true"] .slds-form-element__label{
            line-height: 16px;
            display: block;
        }
        div[data-three-columns="true"] .popover{
            position: initial;
            align-self: self-start;
        }
        
        /* Start: pills */
        .upds-pill {
            padding: 8px;
            background: var(--upds-grey-500);
            border-radius: 4px;
            display: inline-block;
        }
        
        .upds-filter-pill .slds-pill {
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            font-size: 12px;
            line-height: 14px;
            letter-spacing: 0.6px;
            padding: 4px 8px;
            color: var(--upds-grey-100);
            background: var(--upds-white-color);
            border: 0.5px solid var(--upds-grey-100);
            border-radius: 2px;
            text-transform: uppercase;
        }
        
        .upds-filter-pill .slds-pill .slds-pill__label {
            white-space: break-spaces;
            word-break: break-word;
        }
        
        /* End: pills */

        /*  */
        .upds__toast__container .success-icon, 
        .upds__toast__container .error-icon,
        .upds__toast__container .warning-icon,
        .upds__toast__container .info-icon{
            display: none;
        }
        @media screen and (max-width: 768px) {

            .upds__toast__container .success-icon, 
            .upds__toast__container .error-icon,
            .upds__toast__container .warning-icon,
            .upds__toast__container .info-icon{
                align-self: start;
                margin-top: 5px;
            }
        }
        .upds__toast__container .slds-notify_container{
            top:58px;
        }
        .upds__toast__container .slds-static--toast{
            display: flex;
            align-items: center;
            max-width: 850px;
            column-gap: 8px;
            padding: 16px;
            border-radius: 8px;
        }
        .upds__toast__container .slds-notify--toast{
            width: max-content;
            display: flex;
            margin: 0 auto;
            align-items: center;
            max-width: 850px;
            column-gap: 8px;
            padding: 16px;
            border-radius: 8px;
        }
        .upds__toast__container .close-icon{
            margin-left: auto;
            align-self: start;
        }
        .upds__toast__container .hide{
            transform: rotateX(90deg);
            -webkit-transform: rotateX(90deg);
            -moz-transform: rotateX(90deg);
            -ms-transform: rotateX(90deg);
            -o-transform: rotateX(90deg);
        }
        .upds__toast__container .slds-theme_success .success-icon {
            display: inline;
        }
        .upds__toast__container .slds-theme_error .error-icon {
            display: inline;
        }
        .upds__toast__container .slds-theme_warning .warning-icon {
            display: inline;
        }
        .upds__toast__container .slds-theme_info .info-icon {
            display: inline;
        }

        .upds__toast__container .slds-theme_success {
            color: var(--upds-grey-100);
            background-color: var(--upds-success-tint3);
        }
        .upds__toast__container .slds-theme_error {
            color: var(--upds-grey-100);
            background-color: var(--upds-error-tint3);
        }
        .upds__toast__container .slds-theme_warning, 
        .upds__toast__container .slds-theme_info {
            color: var(--upds-grey-100);
            background-color: var(--upds-warning-tint3);
        }

        .upds__toast__container img.close-icon {
            padding: 4px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
        }
        .upds__toast__container .slds-theme_success img.close-icon:hover {
            background-color: var(--upds-success-tint3);
            cursor: pointer;
        }
        .upds__toast__container .slds-theme_error img.close-icon:hover {
            background-color: var(--upds-error-tint3);
            cursor: pointer;
        }
        .upds__toast__container .slds-theme_error img.close-icon:hover,
        .upds__toast__container .slds-theme_warning img.close-icon:hover {
            background-color: var(--upds-warning-tint3);
            cursor: pointer;
        }

        /* people logo */
        .upds-people-logo {
            box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
            object-fit: cover;
            border-radius: 50%;
        }
        .large .upds-people-logo, .large .upds-org-logo {
            width: 120px;
            height: 120px;
            min-width: 120px;
        }
        .medium .upds-people-logo , .medium .upds-org-logo{
            width: 80px;
            height: 80px;
            min-width: 80px;
        }
        .small .upds-people-logo, .small .upds-org-logo {
            width: 40px;
            height: 40px;
            min-width: 40px;
        }
        .upds-people-initials, .upds-org-initials {
            position: absolute;
            top: 50%;
            left: 50%;
            color: var(--upds-white-color);
            transform: translate(-50%, -50%);
            text-transform: uppercase;
            font-family: var(--upds-Akkurat-L-L-Web-Black);
        }
        .upds-people-initials {
            color: var(--upds-white-color);
        }
        .upds-org-initials {
            color: var(--upds-uplink-blue);
        }
        .large .upds-people-initials, .large .upds-org-initials {
            font-size: 32px;
            line-height: 40px;
            letter-spacing: 0.5px;
        }
        .medium .upds-people-initials, .medium .upds-org-initials {
            font-size: 28px;
            line-height: 36px;
            letter-spacing: 0.6px;
        }
        .small .upds-people-initials, .small .upds-org-initials {
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0.5px;
        }
        .upds-orglogo-cover {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            transition: height 0.4s;
            background-position: center;
        }
        .upds-org-logo {
            border-radius: 50%;
            box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
            object-fit: cover;
        }

        /* challenge page styling */

        .upds-padding-top{
            padding-top: 56px;
        }
        .upds-padding-bottom{
            padding-bottom: 56px;
        }
        .upds-margin-top{
            margin-top: 56px;
        }
        .upds-margin-bottom{
            margin-bottom: 56px;
        }
        .upds-padding-top_small{
            padding-top: 44px;
        }
        .upds-padding-bottom_small{
            padding-bottom: 44px;
        }
        .upds-padding-bottom_x-small{
            padding-bottom: 36px;
        }
        .upds-margin-bottom_small{
            margin-bottom: 44px;
        }
        .upds-margin-bottom_x-small{
            margin-bottom: 34px;
        }
        /* challenge page styling */

        @media screen and (max-width: 780px) {
            .upds__toast__container .slds-notify--toast{
                max-width: 90%;
            }
        }


        .asterisk{
            color: var(--upds-error-tint1);
            margin-right: 2px;
        }

        /* inputs */
        input::placeholder {
            opacity: 0.7;
        }
        .form__container input{
            line-height: 45px;
        }
        .form__container .slds-combobox__input {
            line-height: 45px;
        }
        .form__container .impact-year .slds-combobox__input {
            height: 48px;
            line-height: 45px;
        }
        .form__container .slds-form-element__label{
            color: var(--upds-grey-100);
            padding: 0;
            margin-right: 24px;
            word-break: break-word;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: pre-line;
            -webkit-line-clamp: 1;
        }
        .form__container .char-count{
            margin-top:4px;
            color: var(--upds-grey-200);
        }
        .form__container input:active{
            border-color: var(--upds-purposeful-violet);
            box-shadow: none;
            outline: none;
        }
        .form__container .slds-rich-text-editor__toolbar{
            background-color: var(--upds-grey-500);
        }
        .form__container .slds-rich-text-area__content{
            word-break: break-word;
        }
        .form__container .popover{
            position: absolute;
            right: 0;
            top: 4px;
            line-height: 0;
        }
        .form__container div[data-hide="true"]{
            display: none;
        }
        .form__container.flex-layout{
            display: flex;
            column-gap: 16px;
            flex-wrap: wrap;
        }
        .form__container .inline-field, .form__container .block-field{
            position: relative;
            margin-bottom: 16px;
        }
        .form__container .inline-field{
            flex: 1 0 calc(50% - 8px);
        }
        .form__container .block-field{
            flex: 100%;
        }
        .form__container div.block-field:last-child,
        .form__container div.inline-field:last-child {
            margin-bottom: 0;
        }
        .form__container .field-header-title:first-child{
            padding-top: 0;
        }
        .form__container .field-header-title{
            padding-top: 16px;
        }
        .upds-visibility_hidden{
            visibility: hidden;
        }
        .form__container .slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux{
            border-color: var(--upds-uplink-blue);
        }
        .form__container .slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux:after{
            width: 0.8rem;
            height: 0.8rem;
            background-color: var(--upds-uplink-blue);
        }
        .form__container .slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux:after{
            border-bottom: var(--lwc-borderWidthThick, 2px) solid var(--upds-uplink-blue);
            border-left: var(--lwc-borderWidthThick, 2px) solid var(--upds-uplink-blue);
        }
        .form__container  .slds-form-element[data-checked="true"] .slds-checkbox [type=checkbox]+.slds-checkbox__label .slds-checkbox_faux{
            border-color: var(--upds-uplink-blue);
        }

        @media screen and (max-width: 780px) {
            .form__container .slds-form-element__label{
                -webkit-line-clamp: initial;
            }
            .form__container.flex-layout{
                display: initial;
            }
            .upds-footer-tertiary{
                display: grid;
                grid-auto-flow: row;
                row-gap: 16px;
            }
        }

        /* Start: Submission flow custom css */
        .email-body{
            pointer-events: none;
        }
        .email-customize-layout .email-body{
            background: var(--upds-grey-500);
            border: 1px solid var(--upds-grey-400);
            border-radius: 4px;
            padding: 16px;
        }
        /* End: Submission flow custom css */

        /* Start: Look up list css */
        .upds-type-ahead .slds-listbox__option_entity{
            padding: 8px 12px;
            margin: 0;
            border-bottom: 1px solid var(--upds-grey-500);
            display: flex;
            align-items: center;
            column-gap: 12px;
        }
        .upds-type-ahead .slds-dropdown{
            padding: 0;
            margin: 0;
        }
        .upds-type-ahead .org-logo{
            height: 40px;
            width: 40px;
            border-radius: 50%;
            box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--upds-uplink-blue);
            text-transform: uppercase;
        }
        /* End: Look up list css */
        
        /* Start: tags */
        .upds-tag-with-bg {
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            font-size: 12px;
            line-height: 14.4px;
            letter-spacing: 0.6px;
            padding: 8px;
            background-color: var(--upds-grey-500);
            border-radius: 4px;
        }
        
        .upds-tag-with-bg:hover {
            background-color: var(--upds-grey-400);
            cursor: pointer;
        }
        
        /* End: tags */

        /* Start: status badges */
        .upds-status-coming-soon,
        .upds-status-open,
        .upds-status-draft,
        .upds-status-under-review,
        .upds-status-closed,
        .upds-contribution-status-badge {
            width: max-content;
            height: 24px; 
        }
        .upds-status-coming-soon,
        .upds-status-open,
        .upds-status-draft,
        .upds-status-under-review,
        .upds-status-closed {
            border-radius: 40px;
            padding: 8px 12px;
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            font-size: 10px;
            line-height: 10px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .upds-status-coming-soon{
            background-color: var(--upds-warning-tint3);
            color: var(--upds-warning-shade1);
        }
        .upds-status-open{
            background-color: var(--upds-success-tint3);
            color: var(--upds-success);
        }
        .upds-status-draft{
            background-color: var(--upds-grey-500);
            color: var(--upds-grey-100);
        }
        .upds-status-under-review{
            background-color: var(--upds-white-color);
            color: var(--upds-inspirational-pink);
        }
        .upds-status-closed {
            background-color: var(--upds-error-tint3);
            color: var(--upds-error);
        }
        /* org info  */
        .upds-org-info {
            row-gap: 12px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            font-size: 12px;
            line-height: 14px;
            letter-spacing: 1px;
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            padding-top: 16px;
        }
        /* Start: flex box */
        .upds-flex-box {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .upds-flex-wrap-box {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .upds-flex-center-box {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .upds-flex-no-center-box {
            display: flex;
            align-items: center;
        }

        .upds-align-self-start {
            align-self: start;
        }

        .upds-align-self-end {
            align-self: end;
        }

        .upds-align-self-center {
            align-self: center;
        }

        .upds-align-items-center {
            align-items: center;
        }

        .upds-align-items-start {
            align-items: start;
        }

        .upds-align-items-flex-end {
            align-items: flex-end;
        }

        .upds-justify-content-center {
            justify-content: center;
        }

        .upds-justify-content-end {
            justify-content: end;
        }
        .upds-justify-content-space-between {
            justify-content: space-between;
        }
        
        .upds-flex-1 {
            flex: 1;
        }

        .upds-flex-2 {
            flex: 2;
        }

        .upds-flex-4 {
            flex: 4;
        }

        .upds-grid-view {
            display: grid;
        }

        .upds-text-underline {
            text-decoration: underline;
        }

        .upds-row-gap_x-small{
            row-gap: 4px;
        }
        .upds-row-gap-small{
            row-gap: 8px;
        }
        .upds-row-gap_medium{
            row-gap: 12px;
        }
        .upds-row-gap_large{
            row-gap: 16px;
        }

        .upds-column-gap_x-small{
            column-gap: 4px;
        }
        .upds-column-gap-small{
            column-gap: 8px;
        }
        .upds-column-gap_medium{
            column-gap: 12px;
        }
        .upds-column-gap_large{
            column-gap: 16px;
        }
        .upds-column-gap_larger{
            column-gap: 24px;
        }
        .upds-column-gap_x-large{
            column-gap: 32px;
        }

        .upds-gap_x-small{
            column-gap: 4px;
            row-gap: 4px;
        }
        .upds-gap-small{
            column-gap: 8px;
            row-gap: 8px;
        }
        .upds-gap_medium{
            column-gap: 12px;
            row-gap: 12px;
        }
        .upds-gap_large{
            column-gap: 16px;
            row-gap: 16px;
        }

        .upds-section-margin {
            margin-top: -80px;
        }

        .upds-section-top-padding {
            padding-top: 56px;
        }

        .upds-section-bottom-padding {
            padding-bottom: 56px;
        }
        
        /* End: flex box */

        /* Scrollable Content Style - START */
        .upds-scrollable-content-x {
            overflow-x: auto;
            overflow-y: hidden;
        }
        .upds-scrollable-content-y {
            overflow-y: auto;
            overflow-x: hidden;
        }
        /* Scrollable Content Style - END */

        .upds-spinner .slds-spinner_container {
            position: absolute;
        }
        /* Accordion start */
        .upds-accordion-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .upds-accordion-minus-icon, .upds-accordion-body, 
        .upds-accordion-expand .upds-accordion-plus-icon, 
        .upds-accordion-collapse .upds-accordion-minus-icon, 
        .upds-accordion-collapse .upds-accordion-body{
            display: none;
        }
        .upds-accordion-expand .upds-accordion-minus-icon, 
        .upds-accordion-expand .upds-accordion-body, 
        .upds-accordion-collapse .upds-accordion-plus-icon{
            display: inline;
        }
        .upds-accordion-page-view{
            border-top: 1px solid var(--upds-grey-400);
        }
        .upds-accordion-page-view:last-child{
            border-bottom: 1px solid var(--upds-grey-400);
        }
        /* Accordion end */

        
        /* Start: labels */
        .upds-label,
        .upds-white-label,
        .upds-disabled-label {
            font-family: var(--upds-Akkurat-L-L-Web-Bold);
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 0.5px;
        }
        
        .upds-label {
            color: var(--upds-purposeful-violet);
        }
        
        .upds-disabled-label {
            color: var(--upds-grey-300)
        }

        .upds-white-label,
        .upds-white-label:hover,
        .upds-white-label:active,
        .upds-white-label:focus {
            color: var(--upds-white-color);
        }
        
        .upds-white-label:active,
        .upds-white-label:focus {
            text-decoration: none;
        }
        
        .upds-label:hover,
        .upds-white-label:hover {
            text-decoration: underline;
            cursor: pointer;
        }
        
        /* End: labels */
        
        
        /* Start: borders */
        /* Custom borders */
        .contribution-widget .widget-title {
            border-bottom: 2px solid var(--upds-grey-400);
        }
        .contribution-widget .linksAttachment, 
        .contribution-widget .profile-page-widget {
            border-bottom: 1px solid var(--upds-grey-400);
        }
        .contribution-widget .linksAttachment:last-child,
        .contribution-widget .profile-page-widget:last-child {
            border-bottom: 0px;
        }
        /* type 1 */
        .upds-light-border-around {
            border: 1px solid var(--upds-grey-500);
        }
        
        .upds-light-border-top {
            border-top: 1px solid var(--upds-grey-500);
        }
        
        .upds-light-border-bottom {
            border-bottom: 1px solid var(--upds-grey-500);
        }
        
        /* type 2 */
        .upds-border-around {
            border: 1px solid var(--upds-grey-400);
        }
        
        .upds-border-top {
            border-top: 1px solid var(--upds-grey-400);
        }
        
        .upds-border-bottom {
            border-bottom: 1px solid var(--upds-grey-400);
        }

        .upds-border-right {
            border-right: 1px solid var(--upds-grey-400);
        }
        
        .upds-border-left {
            border-left: 1px solid var(--upds-grey-400);
        }

        /* type 3 */
        .upds-black-border-around {
            border: 1px solid var(--upds-grey-100);
        }
        /* Other borders */
        .upds-green-border-right {
            border-right: 1px solid var(--upds-success-tint1);
        }
        .upds-purple-border-around {
            border: 1px solid var(--upds-purposeful-violet);
        }
        .upds-border-top-grey-200 {
            border-top: 1px solid var(--upds-grey-200);
        }
        
        /* End: borders */

        /* Start: Tooltips */
        .upds-tooltip {
            position: relative;
            display: block;
        }

        .upds-tooltip .slds-popover {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            text-transform: uppercase;
            padding: 0px;
            background: var(--upds-grey-100);
            opacity: 1;
            border-radius: 2px;
        }

        .upds-tooltip .slds-popover {
            color: var(--upds-white-color);
        }

        .upds-tooltip .slds-popover .slds-popover__body {
            padding: 12px 16px;
            width: max-content;
        }

        .upds-issue-header {
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            font-size: 14px;
            line-height: 22px;
            letter-spacing: 1px;
            color: var(--upds-black-color);
        }

        .upds-issue-mob-navbar {
            display: block;
            background: #FAFAFA;
            width: 100%;
            height: 56px;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
            border-top: 1px solid var(--upds-grey-400);
            font-family: var(--upds-Akkurat-L-L-Web-Regular);
            font-size: 10px;
            z-index: 999;
            position: fixed;
            top: 122px;
            border-bottom: 4px solid var(--upds-purposeful-violet);;
        }

        /* CTA button  */
        .upds-primary-btn, .upds-secondary-btn, .upds-secondary-white-btn{
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 0.5px;
            padding: 16px 32px;
            text-transform: uppercase;
        }
        /* Active State */
        .upds-primary-btn {
            color: var(--upds-white-color);
            border: 1px solid var(--upds-purposeful-violet);
            background-color: var(--upds-purposeful-violet);
        }
        .upds-secondary-btn {
            color: var(--upds-purposeful-violet);
            background-color: var(--upds-white-color);
            border: 1px solid var(--upds-purposeful-violet);
        }
        .upds-secondary-white-btn {
            color: var(--upds-white-color);
            background-color: var(--upds-grey-100);
            border: 1px solid var(--upds-white-color);
        }

        .upds-primary-btn:hover {
            color: var(--upds-grey-100);
            background-color: var(--upds-purple-tint1);
            border: 1px solid var(--upds-purple-tint1);
        }
        .upds-secondary-btn:hover {
            background-color: var(--upds-purple-tint1);
        }
        .upds-secondary-white-btn:hover {
            background-color: var(--upds-grey-200);
        }

        /* Disabled State */
        .disabled .upds-primary-btn {
            color: var(--upds-white-color);
            border: 1px solid var(--upds-grey-200);
            background-color: var(--upds-grey-200);
            cursor: not-allowed;
        }
        .disabled .upds-secondary-btn {
            color: var(--upds-grey-300);
            background-color: var(--upds-white-color);
            border: 1px solid var(--upds-grey-300);
            cursor: not-allowed;
        }
        .disabled .upds-secondary-white-btn {
            color: var(--upds-grey-300);
            background-color: var(--upds-grey-100);
            border: 1px solid var(--upds-grey-300);
            cursor: not-allowed;
        }

        /* US-835 */


        .TIImpact.slds-modal__container {
            max-width: 740px;
        }

        .TIImpact .slds-modal__content {
            max-height: 572px;
        }

        .impact-subtext {
            font-size: 14px;
            font-weight: 300;
            line-height: 24px;
            color: var(--upds-black-color);
        }

        .upds-impact-indicator {
            padding: 16px;
            margin: 6px 0;
            border: 1px solid var(--upds-grey-500);
            display: flex;
            border-radius: 10px;
            width: 100%;
            cursor: pointer;
        }

        .upds-impact-indicator.selection {
            border: 1px solid var(--upds-purposeful-violet);
        }

        .upds-impact-actions {
            background-color: var(--upds-white-color);
            display: flex;
            padding: 4px 8px;
            border-radius: 16px;
            font-size: 12px;
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            line-height: 14px;
            color: var(--upds-grey-100);
            cursor: pointer;
            align-items: center;
            row-gap: 12px;
            word-break: break-word;
        }

        .upds-impact-actions img {
            min-width: 16px;
            min-height: 16px;
        }

        .impact-actions {
            column-gap: 20px;
            row-gap: 12px;
            display: flex;
            flex-wrap: wrap;
        }

        .impact-dimension-div {
            background-color: var(--upds-grey-500);
            column-gap: 20px;
            border-radius: 4px;
        }
        .upds-impact-actions.selection {
            background-color: var(--upds-purposeful-violet);
            color: var(--upds-white-color);
        }

        .upds-impact-actions .black-logo {
            display: block;
        }
        .upds-impact-actions .white-logo {
            display: none;
        }
        .upds-impact-actions.selection .black-logo {
            display: none;
        }
        .upds-impact-actions.selection.hover-effect .white-logo {
            display: none;
        }
        .upds-impact-actions.selection.hover-effect .black-logo {
            display: block;
        }
        .upds-impact-actions.selection .white-logo {
            display: block;
        }
        .upds-impact-actions.hover-effect {
            background-color: var(--upds-purple-tint1);
            color: var(--upds-grey-100);
        }

        .content-tile.selection .content-tile-disabled-img {
            display: none;
        } 

        .content-tile.selection .content-tile-enabled-img {
            display: block;
        }

        .content-tile .content-tile-disabled-img {
            display: block;
        } 

        .content-tile .content-tile-enabled-img {
            display: none;
        }
        /* US-835 */

        /* US-1228 */
        .upds-share-feedback-tag {
            padding: 7px 12px 6px;
            background-color: var(--upds-grey-500);            
            border-radius: 40px;
            height: max-content;
            width: max-content;
            align-items: center;
            display: flex
        }
        /* US-1228 */


        /* US-1237 */
        .review-widget-card {
            max-width: 252px;
            height: max-content;
            background: var(--upds-white-color);
            border-radius: 8px;
            border: 1px solid var(--upds-grey-400);
        }
         /* US-1237 */

        @media screen and (max-width: 780px) {
            .upds-tooltip {
                display: none;
            }
            .review-widget-card{
                max-width: 100%;
            }
        }
        /* End: Tooltips */

        /* Start: pop overs */
        .upds-pop-over .slds-popover__body{
            background-color: var(--upds-grey-100);
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            padding: 12px;
            gap: 10px;
            border-radius: 4px;
        }
        .upds-pop-over .slds-nubbin_bottom-right:before,        
        .upds-pop-over .slds-nubbin_right-top:before, 
        .upds-pop-over .slds-nubbin--right-top:before, 
        .upds-pop-over .slds-nubbin_right-top-corner:before {
            background-color: var(--upds-grey-100);
        }
        /* End: pop overs */

        /* Start: Sentence case */
        .upds-sentence-case{
            text-transform: lowercase;
        }
        .upds-sentence-case::first-letter{
            text-transform: capitalize;
        }
        /* End: Sentence case */

        
        /* Start: Review page timeline */
        .timeline-div,
        .timeline-iterator .content-div {
            display: grid;
            row-gap: 16px;
            width: 100%;
        }
        .timeline-iterator .timeline:not(.timeline-iterator:last-child .timeline) {
            width: 1px;
            height: 100%;
            margin: auto;
            background: var(--upds-grey-400);
        }
        /* End: Review page timeline */

        /* Start: 2D/3D */
        .upds-rotate-90 {
            transform: rotate(90deg);
        }
        
        .upds-rotate-180 {
            transform: rotate(180deg);
        }
        
        .upds-rotate-270 {
            transform: rotate(270deg);
        }
        
        .upds-rotate-360 {
            transform: rotate(360deg);
        }

        .upds-transform-center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        /* End: 2D/3D */

        /* Start: */
        .upds-transparent{
            background: var(--upds-white-color);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            mix-blend-mode: difference;
        }
        /* End */
        
        
        /* Start: One Liner CSS class names */

        .upds-border-radius_x-small{
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
        }
        .upds-border-radius_small{
            border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            -ms-border-radius: 8px;
            -o-border-radius: 8px;
        }
        .upds-border-radius_medium{
            border-radius: 16px;
            -webkit-border-radius: 16px;
            -moz-border-radius: 16px;
            -ms-border-radius: 16px;
            -o-border-radius: 16px;
        }

        .upds-full-height-width {
            height: 100%;
            width: 100%;
        }
        
        .upds-cursor-underline:hover {
            cursor: pointer;
            text-decoration: underline;
        }
        
        .upds-break-all {
            word-break: break-all;
        }

        .upds-break-word {
            word-break: break-word;
        }
        
        .upds-center {
            text-align: center;
        }
        
        .upds-align-right {
            text-align: right;
        }

        .upds-align-left {
            text-align: left;
        }
        
        .upds-inline-block {
            display: inline-block;
        }
        
        .upds-block {
            display: block !important;
        }

        .upds-uppercase {
            text-transform: uppercase;
        }
        .upds-capitalize {
            text-transform: capitalize;
        }
        
        .upds-cursor-pointer {
            cursor: pointer;
        }

        .upds-cursor-default {
            cursor: default;
        }

        .upds-cursor-not-allowed {
            cursor: not-allowed;
        }

        .upds-vertical-align-middle{
            vertical-align: middle;
        }

        .upds-margin-auto {
            margin: auto;
        }
        
        hr {
            margin: 24px 0;
        }
        .sc-hr{
            margin: 10px 0 16px 0;
        }
        .upds-white-space-nowrap{
            white-space: nowrap;
        }
        .upds-white-space-break-spaces{
            white-space: break-spaces;
        }
        
        /* End: One Liner CSS class names */
        
        
        /* Start panels */
        .upds-secondary-panel {
            background: var(--upds-white-color);
            box-shadow: 0px 0px 4px rgb(0 0 0 / 10%);
            padding: 24px;
            margin-bottom: 16px;
        }
        
        /* End panels */
        
        
        /* Start: line clamps */
        .upds-line-clamp_one,
        .upds-line-clamp_two,
        .upds-line-clamp_three,
        .upds-line-clamp_four,
        .upds-line-clamp_six {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: pre-line;
        }
        .upds-line-clamp_one {
            -webkit-line-clamp: 1;
        }
        .upds-line-clamp_two {
            -webkit-line-clamp: 2;
        }
        .upds-line-clamp_three {
            -webkit-line-clamp: 3;
        }
        .upds-line-clamp_four {
            -webkit-line-clamp: 4;
        }
        .upds-line-clamp_six {
            -webkit-line-clamp: 6;
        }
        
        /* Line clamps for richtext */
        .upds-richtext-with-line-clamp>:first-child>:not(:first-child) {
            display: none;
        }
        .upds-richtext-with-line-clamp>:first-child>:first-child {
            display: block;
        }
        .upds-richtext-with-line-clamp>:first-child>:first-child::after { 
            content: "...";
        }
        .upds-richtext-with-line-clamp.upds-richtext-with-line-clamp-no-ellipsis>:first-child>:first-child::after { 
            content: "";
        }
        /* End: line clamps */

        /*End: Generic CSS, Please refer these classes if suitable for any design */
        
        
        /* Start: The following are the CSS customization for the Ouf of the box components */
        /* TODO: When we remove FMTheme label css we can remove !important from the below css.
        This would be coming in submission flow form input VD updates. */
        
        /* form elements */
        .upds-form .slds-form-element .slds-form-element__label{
            color: var(--upds-grey-200) !important;
            font-family: var(--upds-Akkurat-L-L-Web-Light) !important;
            text-transform: lowercase;
            font-weight: 400 !important;
            font-size: 12px !important;
            padding: 0;
        }
        .upds-form .slds-form-element .slds-form-element__label::first-letter{
            text-transform: uppercase;
        }
        .upds-form .slds-form-element__control textarea{
            font-size: 16px !important;
            line-height: 24px !important;
            letter-spacing: 0px !important;
            font-family: var(--upds-Akkurat-L-L-Web-Light) !important;
            padding: 12px 16px !important;
        }
        .upds-form .slds-checkbox__label{
            cursor: pointer;
        }
        .upds-form .slds-checkbox_faux{
            border-color: var(--upds-grey-300);
            box-shadow: none;
            margin-top: 4px;
        }
        .upds-form .slds-checkbox__label{
            display: flex;
        }
        .upds-form .slds-form-element__label{
            color: var(--upds-grey-100) !important;
            cursor: pointer;
            font-family: var(--upds-Akkurat-L-L-Web-Regular) !important;
            font-size: 16px !important;
            font-weight: normal !important;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.38;
            letter-spacing: normal;
            background: white;
            text-transform: none !important;
            flex: 1;
            padding-top: 0;
        }
        .upds-form.disabled .slds-checkbox__label,
        .upds-form.disabled .slds-checkbox_faux,
        .upds-form.disabled .slds-form-element__label {
            cursor: not-allowed;
        }
        .slds-checkbox_toggle{
            align-items: center;
        }
        .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux{
            background-color: var(--upds-success);
            border-color: var(--upds-success);
        }
        .slds-checkbox_toggle .slds-checkbox_on,
        .slds-checkbox_toggle .slds-checkbox_off{
            display: none !important;
        }
        .slds-checkbox_toggle [type=checkbox]:checked+.slds-checkbox_faux_container .slds-checkbox_faux:after{
            display: none !important;
        }
        .slds-checkbox_toggle .slds-checkbox_faux::before{
            right:2px !important;
        }
        .slds-checkbox_toggle .slds-form-element__label{
            font-size: 12px;
            line-height: 14px;
            letter-spacing: 1px;
            color: var(--upds-black-color);
            font-family: var(--upds-Akkurat-L-L-Web-Regular);
        }
        /* form elements */

        /* modals */
        .upds-popup+.slds-backdrop {
            opacity: 0.8;
            background: var(--upds-grey-200);
        }
        .upds-popup.slds-modal {
            cursor: default;
        }
        .upds-popup .slds-modal__content,
        .upds-popup .slds-modal__footer {
            width: 100%;
            padding: 24px;
        }
        .upds-popup .slds-modal__header {
            width: 100%;
            padding: 0;
            border: 0;
        }
        .upds-popup .close-icon{
            padding: 24px 24px 24px 0;
            margin-left: auto;
        }
        .upds-popup .slds-modal__header .header-title5{
            padding: 24px;
            flex:1;
            text-align: left;
            margin-right: 0;
            margin-left: 0;
        }
        .upds-center-override{
            text-align: center !important;
        }
        .upds-popup .slds-modal__header .header{
            border-bottom: 1px solid var(--upds-white-color);
            display: flex;
            justify-content: space-between;
        }
        .upds-popup .slds-modal__footer{
            border-top: 1px solid var(--upds-white-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 56px;
            padding: 12px 24px;
        }
        .upds-popup .slds-modal__footer.upds-center {
            justify-content: center;
        }
        .upds-popup .slds-modal__footer.upds-end {
            justify-content: end;
        }
        .upds-popup .slds-modal__header, .upds-popup .slds-modal__footer {
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08);
        }
        .TIWelcome .slds-modal__header {
            padding: 24px 40px;
        }

        /* Start: New branding width for popups */
        .upds-popup-small{
            width: 348px;
            max-width: 348px;
        }
        .upds-popup-medium{
            width: 623px;
            max-width: 623px;
        }
        .upds-popup-large{
            width: 894px;
            max-width: 894px;
        }
        .upds-popup .slds-modal__container{
            justify-content: initial;
        }
        .upds-popup .alone-right{
            margin-left: auto;
        }
        .upds-add_overlay{
            width: 100%;
            max-width: 100% !important;
            padding: 50px 15% 80px;
        }
        @media screen and (max-width: 780px) {
            .upds-popup-small, .upds-popup-medium, .upds-popup-large {
                width: 100%;
                max-width: 100% !important;
            }
            .upds-popup .slds-modal__container{
                padding-top:80px
            }
            .upds-add_overlay{
                padding: 60px 0px;
            }
        }
        /* End: New branding width for popups */


        @media screen and (max-width: 780px) {
            .upds-popup .slds-modal__footer{
                flex-direction: column-reverse;
                row-gap: 16px;
                padding: 12px 16px;
            }
            .upds-popup .footer-button{
                width: 100%;
                text-align: center;
            }
            .upds-popup .slds-modal__content,
            .upds-popup .slds-modal__header, 
            .upds-popup .slds-modal__footer {
                width: calc(100% - 32px);
            }
            .upds-popup .slds-modal__container {
                align-content: center;
                align-items: center;
                margin: auto;
            }
            .upds-popup .slds-modal__header .header-title5{
                padding: 16px;
            }
            .upds-popup .close-icon{
                padding: 16px 16px 16px 0;
            }
        }
        /* modals */

        /* cards  */
        .upds-follow-icon {
            right: 12px;
            width: 22px;
            top: 12px;
            position: absolute;
            z-index: 1;
        }
        .upds-image-transition {
            transition: 0.7s all ease-in-out;
            position: relative;
            width: 100%;
            object-fit: cover;
            height: 120px;
        }
        .upds-image-cover {
            overflow: hidden;
            height: 120px;
        }
        .upds-card-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .upds-tag-type-div {
            flex: 1;
            display: flex;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .upds-card-tag {
            padding: 4px;
            padding-right: 8px;
            border-radius: 4px;
            height: 24px;
            overflow: hidden;
            text-overflow: ellipsis; 
        }
        .upds-card-time-line {
            border-top: 1px solid var(--upds-grey-400);
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
        .upds-card-play-btn {
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            width: 25px;
        }
        .article-card-container:has(.logo) .upds-card-play-btn {
            top: 80%;
        }
        .upds-card-cta-btn {
            bottom: -64px;
            position: absolute;
            transition: bottom 0.4s;
            width: 100%;
            z-index: 1;
        }
        .upds-parent-card-time {
            display: inline-block;
            flex:1;
        }
        .upds-card-time {
            color: var(--upds-grey-200);
            min-height: 20px;
        }
        .upds-card-comment {
            float: right;
            text-align: right;
            flex: 0 0 75px;
        }
        .upds-status-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
        }
        .upds-form-label {
            font-weight: 300;
            font-family: var(--upds-Akkurat-L-L-Web-Regular);
            font-size: 12px;
            color: #757575;
            line-height: 20px;
        }
        /* cards  */

        /* standard image font and size */
        .upds-standard-img{
            width: 48px;
            height: 48px;
            object-fit: cover;
        }

        .upds-leadership-img{
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
        }
        .small .upds-leadership-img{
            width: 40px;
            height: 40px;
        }
        .medium .upds-leadership-img{
            width: 80px;
            height: 80px;
        }

        /* Start: slds-file-selector__drop zone */
        .upds-file-upload{
            position: relative;
        }
        .upds-file-upload.disable{
            pointer-events: none;
            opacity: 0.5;
        }
            /* Start: small */
                .upds-file-upload .small{
                    height: 80px;
                }
                .upds-file-upload .small .slds-file-selector__dropzone{
                    height: 80px;
                    width: 80px;
                    border-radius: 50%;
                }
                .upds-file-upload .small .upload-box{
                    width: 80px;
                    height: 80px;
                    white-space: nowrap;
                }
            /* End: small */
            /* Start: medium */
                .upds-file-upload .medium{
                    height: 220px;
                }
                .upds-file-upload .medium .slds-file-selector__dropzone{
                    height: 220px;
                    width: 300px;
                }
                .upds-file-upload .medium .upload-box{
                    height: 220px;
                    width: 300px;
                    white-space: nowrap;
                }
            /* End: medium */
            /* Start: large */
                .upds-file-upload .large,
                .upds-file-upload .large .slds-file-selector__dropzone,
                .upds-file-upload .large .slds-file-selector,
                .upds-file-upload .large .upload-box {
                    width: 100%;
                    height: 100px;
                }
            /* End: large */
        .upds-file-upload .title-box{
            position: absolute;
            z-index: 1;
            pointer-events: none;
            transform: translate(-50%, -50%);
            left: 50%;
            top: 50%;
            text-align: center;
        }
        .upds-file-upload .edit-icon{
            display: none;
        }
        .upds-file-upload .slds-file-selector__dropzone{
            display: flex;
            border-radius: 8px;
            padding: 0;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            -ms-border-radius: 8px;
            -o-border-radius: 8px;
        }
        .upds-file-upload .slds-file-selector__button{
            font-size: 0;
            border-radius: 8px;
            border: none;
            width: 100%;
            height: 100%;
            display: block;
            background-color: var(--upds-grey-500);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            -ms-border-radius: 8px;
            -o-border-radius: 8px;
            cursor: pointer;
        }
        .upds-file-upload .small .slds-file-selector__button{
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
}
        .upds-file-upload .slds-file-selector__button:hover{
            background-color: var(--upds-grey-400);
        }
        .upds-file-upload .slds-file-selector__body{
            width: 100%;
            height: 100%;
        }
        .upds-file-upload slot{
            width: 100%;
            height: 100%;
        }
        .upds-file-upload .slds-button__icon, 
        .upds-file-upload .slds-file-selector__text{
            display: none;
        }
        .upds-file-upload .slds-form-element__label:empty {
            display: none;
        }
        .upds-file-upload .uploaded-image{
            display: none;
        }
        .upds-file-upload.uploaded .uploaded-image{
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 8px;
            display:inline;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            -ms-border-radius: 8px;
            -o-border-radius: 8px;
        }
        .upds-file-upload .small .uploaded-image{
            border-radius: 50%;
        }
        .upds-file-upload.uploaded .title-box{
            display: none;
        }
        .upds-file-upload.uploaded .slds-file-selector__dropzone{
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
        }
        .upds-file-upload.uploaded .slds-file-selector__button{
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
        }
        .upds-file-upload.uploaded .slds-file-selector__dropzone{
            height: 34px;
            width: 34px;
            border: none;
        }
        .upds-file-upload.uploaded .file-container {
            position: absolute;
            top: -20px;
            right: -20px;
            background: var(--upds-white-color);
            border-radius: 50%;
            padding: 4px;
        }
        .upds-file-upload .small .file-container {
            top: -10px;
        }
        .upds-file-upload.uploaded .edit-icon {
            display: inline;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            text-align: center;
            pointer-events: none;
            line-height: 20px;
        }
        .upds-file-upload.uploaded .slds-file-selector__button:hover{
            background-color: var(--upds-purple-tint2);
        }
        /* End: slds-file-selector__drop zone */

        /* toast */
        .upds-toast .slds-notify_container{
            width: 100%;
        }
        .upds-toast .slds-notify_container[data-type="fixed"] {
            position: fixed;
            margin-top: 52px;
            z-index: 9999;
        }
        .upds-toast .slds-notify_container[data-type="relative"] {
            position: relative;
            z-index: 0;
        }
        .upds-toast .slds-notify_toast{
            min-width: 28% !important;
            border-radius: 8px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
        }
        .upds-toast [data-type="fixed"] .slds-notify_toast{
            max-width: min-content !important;
        }
        .upds-toast [data-type="relative"] .slds-notify_toast{
            max-width: 100% !important;
            margin: 0px;
        }
        .upds-toast .slds-notify {
            margin-left: auto;
            margin-right: auto;
            line-height: 24px;
        } 
        .upds-toast .slds-notify_toast a{
            border: none;
        }
        .upds-toast .slds-notify_toast a:hover, 
        .upds-toast .slds-notify_toast a:focus, 
        .upds-toast .slds-notify--toast a:active, 
        .upds-toast .slds-notify--toast a:visited {
            text-decoration: underline;
            border: none;
        }
        .upds-toast .slds-notify__close {
            top: 16px;
        }
        @media only screen and (max-width: 768px) {
            .upds-toast [data-type="fixed"] .slds-notify_toast{
                max-width: 88% !important;
            }
        }
        /* toast */

        /* scroll bar customized css */
        ::-webkit-scrollbar {
            width: 4px;
            border-radius: 20px;
        }
        ::-webkit-scrollbar-track {
            background: var(--upds-grey-400); 
            border-radius: 20px;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--upds-grey-300); 
            border-radius: 20px;
        }
        /* scroll bar customized css */

        /* tabs */
        .upds-tabs ul.slds-tabs_default__nav {
            background: var(--upds-white-color);
            margin-right: 0 !important;
        }
        .upds-tabs .slds-tabs_default {
            padding-top: 16px;
        }
        .upds-tabs .hide-tab .slds-tabs_default {
            padding-top: 0;
        }
        .upds-tabs ul.slds-tabs_default__nav,
        .upds-tabs ul.slds-tabs_default__nav li.slds-tabs_default__item {
            height: 2.5em;
            padding-left: 0;
            padding-right: 0;
            margin-right: 2.5em;
            text-transform: uppercase;
            letter-spacing: .5px;
        }
        
        .upds-tabs ul.slds-tabs_default__nav .slds-tabs_default__item a,
        .upds-tabs ul.slds-tabs_default__nav .slds-tabs_default__item.slds-is-active a,
        .upds-tabs ul.slds-tabs_default__nav li.slds-tabs_default__item .slds-button,
        .upds-tabs ul.slds-tabs_default__nav .slds-tabs_default__item.slds-tabs_default__overflow-button a {
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 0.5px;
        }
        
        .upds-tabs ul.slds-tabs_default__nav .slds-tabs_default__item a {
            color: var(--upds-grey-200);
            padding-left: 2px;
            text-transform: uppercase;
            text-decoration: none;
        }
        
        .upds-tabs ul.slds-tabs_default__nav .slds-tabs_default__item.slds-is-active a,
        .upds-tabs ul.slds-tabs_default__nav li.slds-tabs_default__item .slds-button {
            color: var(--upds-grey-100);
            padding-left: 2px;
            vertical-align: top;
            text-transform: uppercase;
        }
        
        .upds-tabs ul.slds-tabs_default__nav .slds-tabs_default__item a:hover,
        .upds-tabs ul.slds-tabs_default__nav .slds--tabs_default__item a:hover {
            color: var(--upds-grey-100);
        }
        
        .upds-tabs ul.slds-tabs_default__nav li.slds-tabs_default__item .slds-dropdown-trigger_click svg {
            margin-left: 8px;
            fill: var(--upds-grey-100);
        }
        
        .upds-tabs .slds-tabs_default__item.slds-is-active:after,
        .upds-tabs .slds-tabs_default__item:hover:after,
        .upds-tabs .slds-tabs--default__item:hover:after {
            height: 4px;
            border-radius: 2.3px;
            transition: height 300ms;
            width: 39px;
        }
        
        .upds-tabs .slds-tabs_default__item:hover:after {
            background-color: var(--upds-grey-400);
        }
        
        .upds-tabs .slds-tabs_default__item.slds-is-active:after {
            background-color: var(--upds-purposeful-violet);
        }
        
        .upds-tabs .slds-tabs_default__item.slds-tabs_default__overflow-button:hover:after {
            background-color: transparent;
        }
        
        .upds-tabs ul.slds-tabs_default__nav .slds-tabs_default__item.slds-tabs_default__overflow-button .slds-dropdown.slds-dropdown_right {
            padding-left: 10px;
            z-index: 99;
        }
        
        .upds-tabs ul.slds-tabs_default__nav .slds-tabs_default__item.slds-tabs_default__overflow-button .slds-dropdown__item>a:active {
            background: transparent;
        }
        .upds-tabs.container ul.slds-tabs_default__nav {
            border-bottom: 1px solid var(--upds-grey-400); ;
        }
        /* tabs */
        
        /* START combo box css - combo box customization should go here */
        .picklist-container label.slds-form-element__label {
            display: inline-block !important;
            font-family: var(--upds-Akkurat-L-L-Web-Regular) !important;
            font-size: 16px !important;
            font-weight: normal !important;
            line-height: 24px !important;
            color: var(--upds-grey-200) !important;
            text-transform: none;
        }
        .picklist-container .slds-combobox__input {
            border: none;
            padding: 2px 8px 0 0;
            font-family: var(--upds-Akkurat-L-L-Web-Regular);
            font-size: 16px;
            line-height: 24px;
            color: var(--upds-grey-100)
        }
        .picklist-type2 .slds-combobox__input{
            border: none;
            color: var(--upds-grey-100);
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0.5px;
            font-family: var(--upds-Akkurat-L-L-Web-Black);
            display: flex;
            align-items: center;
        }
        
        .picklist-container .slds-input__icon-group,
        .picklist-type2 .slds-input__icon-group {
            display: none;
        }
        
        .picklist-container .slds-combobox__input:focus,
        .picklist-container .slds-combobox__input:active,
        .picklist-type2 .slds-combobox__input:focus,
        .picklist-type2 .slds-combobox__input:active {
            border-color: initial;
            box-shadow: none;
        }
        
        .picklist-container .slds-listbox {
            left: -120px;
            z-index: 1;
            font-family: var(--upds-Akkurat-L-L-Web-Regular);
            font-size: 16px !important;
        }

        .picklist-type2 .picklist-icon{
            position: absolute;
            right: 16px;
        }

        .picklist-type2{
            padding: 16px 0px 16px 0;
            background: var(--upds-white-color);
            border: 1px solid var(--upds-grey-400);
            box-shadow: inset 0px -4px 0px var(--upds-purposeful-violet);
        }
        .picklist-type2 label.slds-form-element__label {
            display: none;
        }
        .picklist-type2 .uplink-combobox{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .picklist-type2 .picklist{
            flex:1;
        }
        .picklist-type2 .chevron-down{
            transform: rotate(90deg);
            width: 15px;
        }
        .picklist-type2 .slds-listbox {
            left: 0px;
            top: 46px;
            z-index: 1;
            font-family: var(--upds-Akkurat-L-L-Web-Regular);
            font-size: 16px !important;
            border-radius: 0 0 8px 8px;
        }
        .picklist-type2 [aria-checked='true'] span.slds-truncate {
			font-weight: bold;
		}
        .picklist-container .slds-form-element__control {
            display: inline-block;
        }
        
        /* START combo box css - combo box customization should go here */

        /* End: The following are the CSS customization for the Ouf of the box components */

        /* START: Rating actions for contributions */
        .rating-actions{
            column-gap: 12px;
        }
        .action-button-medium, .action-button-small{
            border: 1px solid var(--upds-grey-400);
            cursor: pointer;
            text-transform: uppercase;
            text-align: center;
            border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            -ms-border-radius: 8px;
            -o-border-radius: 8px;
        }
        .action-button-medium{
            padding: 12px 16px;
            width: 96px;
        }
        .action-button-small{
            padding: 4px;
        }
        .action-button-width{
            width: 72px;
        }
        /* active state */
        .yes-btn.selected{
            background-color: var(--upds-green-tint2);
            border: 1px solid var(--upds-success-tint1);
        }
        .maybe-btn.selected{
            background-color: var(--upds-warning-tint3);
            border: 1px solid var(--upds-warning-tint1);
        }
        .no-btn.selected{
            background-color: var(--upds-error-tint3);
            border: 1px solid var(--upds-error-tint1);
        }
        .yes-btn:hover{
            background-color: var(--upds-success-tint2);
            border: 1px solid var(--upds-success-tint1);
        }
        .maybe-btn:hover{
            background-color: var(--upds-warning-tint2);
            border: 1px solid var(--upds-warning-tint1);
        }
        .no-btn:hover{
            background-color: var(--upds-error-tint2);
            border: 1px solid var(--upds-error-tint1);
        }
        /* End: Rating action for contributions */

        /* boxes */
        .upds-grey-box{
            border-radius: 8px;
            background-color: var(--upds-grey-500);
            padding: 16px;
        }

        /* Start: Shortlisted contributions table */
        .sc-rating-column{
            width: 100px;
        }

        /* mobile media queries  */
        @media screen and (max-width: 768px) {

            .upds-view-point{
                width: 100% !important;
                padding-left: 16px;
                padding-right: 16px;
            }
        
            /* A display text style is intended for use at large sizes for headings, rather than for extended passages of body text. Display styles should be reserved for headings (H1-H6). */
            .header-title1,
            .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h1,
            .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h1 {
                font-size: 32px;
                line-height: 38.4px;
                letter-spacing: 1px;
            }
            .thematic-header .header-title1, .sdg-header .header-title1 {
                font-size: 42px;
                line-height: 50.4px;
                letter-spacing: 1.2px;
            }
            .header-title4 {
                font-size: 18px;
                line-height: 24px;
                letter-spacing: 0.5px;
            }
            .header-title5 {
                font-size: 16px;
                line-height: 22px;
                letter-spacing: 0.5px;
            }
        
            /* header-titles 2, 3, 4, 5 are same as desktop for mobile */
        
            /* Text styles are used for the majority of informational copy (body, labels, UI elements).  */
            .upds-sub-title1 {
                font-size: 16px;
                line-height: 22px;
                letter-spacing: 0.5px;
            }
        
            .upds-sub-title2 {
                font-size: 14px;
                line-height: 18px;
                letter-spacing: 1px;
            }
        
            .upds-sub-title3 {
                font-size: 12px;
                line-height: 14px;
                letter-spacing: 1px;
            }
        
            .upds-preamble {
                font-size: 24px;
                line-height: 29px;
                letter-spacing: 0px;
            }
        
            .upds-body1 {
                font-size: 16px;
                line-height: 24px;
                letter-spacing: 0px;
            }
        
            .upds-body2,
            .cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText,
            .cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText,
            .cUplink_NavigationProfileTheme .edit-profile-area .slds-input,
            .cUplink_NavigationProfileTheme .edit-profile-area .slds-combobox__input-value,
            .cUplink_NavigationProfileTheme .edit-profile-area .slds-listbox_vertical .slds-listbox__option_plain,
            .cUplink_NavigationProfileTheme .edit-profile-area .slds-form-element__control textarea,
            .formFields ::placeholder,
            .formFields ::-webkit-input-placeholder,
            .formFields input.slds-input,
            .formFields .field-label,
            .formFields .rich-text-label,
            .formFields .form-field-value,
            .formFields button.slds-combobox__input,
            .formFields .field .selectClass .slds-dropdown,
            .formFields .multiselect-picklist-field .slds-dropdown {
                font-size: 16px;
                line-height: 24px;
                letter-spacing: 0px;
            }
            .formFields input.slds-input{
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }
        
            .upds-body3,
            .cUplink_NavigationProfileTheme .edit-profile-area .slds-form-element__label {
                font-size: 14px;
                line-height: 18px;
                letter-spacing: 0px;
            }
        
            .upds-body4,
            .formFields .field .slds-form-element__label {
                font-size: 12px;
                line-height: 14px;
                letter-spacing: 0px;
            }
        
            .upds-link {
                font-size: 14px;
                line-height: 18px;
                letter-spacing: 0px;
                text-decoration: underline !important;
            }
        
            .upds-tag {
                font-size: 10px;
                line-height: 14px;
                letter-spacing: 0.6px;
            }
        
            /* Badge has the same desktop style */
            .upds-text-italics {
                font-size: 10px;
                line-height: 12px;
                letter-spacing: 0px;
            }

            .upds-status-coming-soon,
            .upds-status-open,
            .upds-status-draft,
            .upds-status-under-review,
            .upds-status-closed {
                padding: 6px 6px;
            }
            .upds-status-coming-soon,
            .upds-status-open,
            .upds-status-draft,
            .upds-status-under-review,
            .upds-status-closed,
            .upds-contribution-status-badge {
                height: 20px;
            }
        }

        .upds-view-point{
            max-width: 1076px;
            margin: 0 auto;
        }

        .upds-video-layout iframe, .upds-video-layout video{
            /* Added !important, as iframe and video tags should be overridden 
               its own prebuilt or parents height and width css to maintain the consistent height */
            width: 100% !important;
            min-height: 480px !important;
            max-height: 480px !important;
        }

/*Branding for content pages*/
.cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h1,
.cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h2,
.cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h3,
.cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h4,
.cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h5,
.cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText h6,
.cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h1,
.cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h2,
.cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h3,
.cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h4,
.cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h5,
.cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText h6 {
    margin-bottom: 12px;
}
.cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText a,
.cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText a {
    color: var(--upds-grey-100);
    text-decoration: underline;
}
.cUplink_NavigationGenericPageTheme .forceCommunityRichText .uiOutputRichText a:hover,
.cUplink_NavigationTheme .forceCommunityRichText .uiOutputRichText a:hover {
    color: var(--upds-purposeful-violet) !important;
}

/*TKT-3636*/
/*To be optimized later*/
/* Contribution Page */
.tracker .dotContainer[data-isactive="true"] .dot {
    background-color: var(--upds-positive-green);
}
.tracker .dotContainer[data-isactive="true"] .bar {
    border-top: 1px solid var(--upds-positive-green);
}
.tracker .dotContainer[data-isactive="true"] label {
    color: var(--upds-grey-100);
}
.tracker .custom-border {
    border-top: 1px solid var(--upds-grey-400) !important;
}
/* Profile Page  */
.gray-interest-pill {
    background: var(--upds-white-color);
    border: 0.5px solid var(--upds-grey-100);
}
.purple-interest-pill {
    background: var(--upds-white-color);
    border: 0.5px solid var(--upds-purposeful-violet);
}

/* Home Header */
.video-cta{
    background-color: transparent;
    border: 1px solid var(--upds-white-color);
    color: var(--upds-white-color);
}

@media screen and (min-width: 780px) {
    .video-cta:hover {
        background-color: var(--upds-grey-100);
        opacity: .5;
    }
    .gray-interest-pill:hover {
        background: var(--upds-grey-500) !important;
    }
    .purple-interest-pill:hover {
        background: var(--upds-purple-tint2) !important;
    }
}

/* Top Innovator */
.top-innovator .user-actions img.contribution-cta,
.top-innovator .user-actions .contribution-cta .share-btn .icon-wrap img {
    width: 48px;
    height: 48px;
    cursor: pointer;
}
@media screen and (max-width: 780px) {
    .top-innovator .user-actions img.contribution-cta,
    .top-innovator .user-actions .contribution-cta .share-btn .icon-wrap img {
        width: 32px;
        height: 32px;
    }
}


/*Generic button component css - START*/
.black-btn, .default-btn, .white-btn, .grey-border-btn {
    height:48px;
}
.tertiary-btn {
    height: auto;
}
.black-btn, .default-btn {
    color: var(--upds-white-color);
    letter-spacing:1px;
}

.default-btn {
    cursor: not-allowed;
    border: 0 solid var(--upds-grey-300);
}
.black-btn,
.customWidth1.default-btn, 
.customWidth2.default-btn,
.needs-button.default-btn {
    border: initial;
}

.white-btn {
    border: 1px solid var(--upds-purposeful-violet);
    color: var(--upds-purposeful-violet);
}
.grey-border-btn {
    border: 1px solid var(--upds-grey-400);
    color: var(--upds-grey-400);
    cursor: not-allowed;
}

.pink-btn, .cta-button {
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    color: var(--upds-white-color);
}

.grey-btn {
    width: 89px;
    height: 30px;
    font-family: var(--upds-Akkurat-L-L-Web-Regular);
    font-size: 12px;
    border: none;
    border-radius: 4px;
}

.cta-button {
    padding: 24px 12px;
}

.image-spacing {
    margin-right: 6px;
}

.x-large-button, .discover-btn, .large-button {
    padding: 8px 32px;
}
.full-width-button {
    width: 100%;
}
.small-button {
    width: 148px;   
}
.medium-button {
    width: 208px;
}
.take-action-btn, .take-action-disabled {
    width: auto;
    margin-top: 16px;
    margin-bottom: 16px;
    height: 40px !important;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 11px; 
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.take-action-btn {
    padding-top: 9px;
}
.take-action-disabled {
    padding-top: 7px;
}
.review-button {
    width: 120px;
}

.refresh-button {
    width: 166px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.verify-button{
    height: 48px;
    background-color: transparent !important;
    cursor: pointer;
}

.x-small-button{
    width: 119px;
}
.modal-btn {
    margin-right: 46px;
}

.edit-offer-button{
    width: auto;
    height: auto;
    padding: 16px 32px;
}

.delete-draft{
    margin-left: 16px;
}

.profile-btn {
    width: 124px;
}
.update-btn{
    margin-left: 16px;
}
.card-cta-button {
    width: 100%;
    color: var(--upds-purposeful-violet);
    height: 32px;
    font-size: 12px;
}
.full-width {
    width: 100%;
}
.draft-btn {
    margin-right: 16px;
}
.signup-button {
    width: 258px;
}
.customWidth1, .customWidth2 {
    width: auto;
    height: auto;
}
.customWidth1 {
    padding: 16px 32px;
}
.customWidth2 {
    padding: 12px 32px;
}
.bottom-m-medium{
    margin-bottom: 1em;
}
.explore-btn {
    width: 170px;
    border: 1px solid var(--upds-white-color);
}
.filter-button {
    height: auto;
    padding: 8px 12px;
}
@media screen and (max-width: 780px) {
    .grey-btn {
        width: 95px;
    }
    .mobile-width{
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .back-btn{
        display: none;
    }
    .mob-width{
        margin-bottom: 1rem;
    }
    .next-btn {
        background-color: var(--upds-grey-100) !important;
    }
    .x-small-button{
        width: 105px;
        margin-left: 0;
    }   
    .profile-btn {
        width: 47%;
    } 
    .update-btn {
        float:left;
        margin-left: 0 !important;
        margin-right: 16px;
    }
    .review-button{
        width:100%;
        margin-right: 0 !important;
    }
    .explore-btn {
        width: 140px;
        height: 40px;
    }
    .filter-button {
        width: 94px;
        height: 32px;
        padding: 0px;
    }
    .edit-offer-button{
        width: 190px;
        padding: unset;
        height: 48px;
    }
    .upds-impact-actions.selection.hover-effect .white-logo {
        display: block;
    }
    .upds-impact-actions.selection.hover-effect .black-logo {
        display: none;
    }
    .upds-impact-actions.hover-effect {
        background-color: var(--upds-purposeful-violet);
        color: var(--upds-white-color);
    }
    .TIWelcome .slds-modal__header {
        padding: 24px;
    }
    .review-widget-card {
        max-width: 100%;
    }
    .upds-section-top-padding {
        padding-top: 40px;
    }

    .upds-section-bottom-padding {
        padding-bottom: 40px;
    }
    .upds-video-layout iframe, .upds-video-layout video{
        min-height: 175Px !important;
        max-height: 175px !important;
    }
}

@media screen and (max-width: 1080px) {
    .medium-button {
        width: 132px !important;
    }
    .full-width {
        width: 100% !important;
        float: unset;
    }
    .default-width {
        min-width: 132px;
    }
    .take-action-btn, .take-action-disabled  {
        overflow: hidden;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    } 
}
/*Generic button component css - END*/