Skip to content

Instantly share code, notes, and snippets.

@frankcaron

frankcaron/sfdc-dxp-pathOverrideStyles.css

Last active November 6, 2023 06:48
Show Gist options
  • Save frankcaron/ff92848b8e54c2bdee780e7f6567894c to your computer and use it in GitHub Desktop.
Save frankcaron/ff92848b8e54c2bdee780e7f6567894c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. frankcaron revised this gist Mar 16, 2021. 1 changed file with 0 additions and 225 deletions.
    225 changes: 0 additions & 225 deletions sfdc-dxp-pathOverrideStyles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,228 +1,3 @@
    /*======================== Login Page ==================== */

    .salesforceIdentityLoginBody2 {
    background-repeat: no-repeat !important;
    background-position-x: right !important;
    background-position-y: 300px !important;
    background-size: 250px !important;
    }

    .salesforceIdentityLoginForm2 .inputIcon {
    margin-top: 5px !important;
    }

    /* ===================== Embedded Channels =================== */

    .embedded-service .fab {
    background-color: #4f5fc4 !important;
    }


    /*======================== Nav ==================== */

    .comm-user-profile-menu__login-button {
    color: #000 !important;
    font-weight: bold !important;
    }

    .comm-page-home > .comm-user-profile-menu__login-button {
    color: #fff !important;
    font-weight: bold !important;
    }

    .horizontalMenuItem[community_navigation-multiLevelNavigation_multiLevelNavigation] {
    font-weight: bold !important;
    }

    /*======================= Home ==================== */
    body.comm-page-home div.body {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    }
    body.comm-page-home div.body .forceCommunitySection .cb-section_column {
    padding: 0 !important;
    margin: 0 !important;
    }

    /* =================== List Page Header ============== */

    .df2u-bank-header-block {
    width: 100%;
    text-align: left;
    }
    .df2u-bank-header-block-left {
    margin-left: 51px;
    }
    .df2u-bank-header {
    width: 100%;
    margin-bottom: 0px;
    text-align: left;
    }
    .df2u-header-title {
    font-weight: bolder;
    font-size: 25pt;
    color: rgb(153, 102, 255);
    text-align: left;
    margin-bottom: 0px;
    }
    .df2u-header-hr {
    border-color: rgb(153, 102, 255);
    border-top-width: 7px;
    margin-bottom: 30px;
    margin-top: 10px;
    width: 50px;
    text-align: left;
    }
    .df2u-bank-header-text {
    font-size: 12pt;
    margin-top: -10px;
    padding: 0px;
    }

    /*======================== Hero ==================== */

    .forceCommunityThemeHeroBase .contentTitle {
    font-size: 5.5rem !important;
    letter-spacing: -4px;
    font-weight: bold;
    }

    .comm-page-home .logoImage:after {
    content: '';
    background-image: url(https://striperfp2021.livepreview.salesforce-communities.com/sfsites/c/file-asset/StripeWhiteLogo1?v=1);
    width: 60px;
    height: 32px;
    position: relative;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    }

    .themeLayoutStarterWrapper.isHeroUnderHeader-false.isHeaderPinned-false.siteforceThemeLayoutStarter {
    background-image: url(https://striperfp2021.livepreview.salesforce-communities.com/sfsites/c/file-asset/Screen_Shot_20210315_at_122543_PM?v=1);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 300px;
    background-size: 250px;
    }

    /*======================== Right Pane ==================== */

    .slds-col.slds-medium-size--4-of-12.slds-large-size--4-of-12 > .slds-grid--vertical {
    background-color: #f7fafc;
    border-radius: 4px;
    padding: 20px;
    margin-left: 20px !important;
    }

    .slds-col.slds-medium-size--4-of-12.slds-large-size--4-of-12 a {
    color: #5469d4;
    }

    .slds-col.slds-medium-size--4-of-12.slds-large-size--4-of-12 a span {
    font-size: 1.1em;
    white-space: no-wrap;
    }

    .slds-col.slds-medium-size--4-of-12.slds-large-size--4-of-12 .forceCommunityTopicsOnRecordWrapper .topicsOnRecord {
    background: none !important;
    border: 0px !important;
    box-shadow: none !important;
    padding: 0px;
    margin: 0px;
    }

    /*======================== Topics ==================== */

    .topicLabel {
    font-size: 16px !important;
    font-weight: bold !important;
    }

    .forceTopicFeaturedTopics .topicList {
    margin-right: 20px !important;
    }

    .forceCommunityTopArticleListForTopic .article-title {
    font-size: 16px !important;
    }

    .forceCommunityTopArticleListForTopic .topicHeaderLink {
    font-size: 16px !important;
    }

    /*======================== Case Create ==================== */

    .stripe-create-case {
    text-transform: var(--lwc-textTransform,none);
    font-size: var(--lwc-fcFontSizeMedium,0.8125rem);
    color: var(--lwc-colorTextBrandPrimary,rgb(255, 253, 253));
    background-color: var(--lwc-colorBackgroundButtonBrand,rgb(153, 102, 255));
    border-color: var(--lwc-buttonColorBorderBrandPrimary,rgb(153, 102, 255));
    border-width: 2px;
    border-style: solid;
    padding: 5px;
    text-align: center;
    transition: all .2s;
    position: relative;
    align-items: center;
    box-shadow: var(--sds-c-button-shadow);
    line-height: var(--sds-c-button-line-height, var(--lwc-lineHeightButton,1.875rem));
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    width: 100%;
    }
    .stripe-create-case:hover {
    color: var(--lwc-colorBackgroundButtonBrand,rgb(153, 102, 255));
    background-color: var(--lwc-colorTextBrandPrimary,rgb(255, 253, 253));
    }

    /* =================== List Page Table ============== */

    .forceCommunityRecordListStandard .listTitle {
    display: none !important;
    }

    .forceBaseListView thead th {
    color: #BBB !important;
    border-bottom: 0px solid #fff !important;
    font-size: 16px !important;
    }

    .forceBaseListView tbody td, .forceBaseListView tbody th {
    border-top: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    font-size: 16px !important;
    }

    /*======================== Support ==================== */

    .selfServiceBaseCaseCreation .mdp-container {
    padding: 0px !important;
    margin: 0 !important;
    width: 100% !important;
    }

    .selfServiceBaseCaseCreation .caseHeader {
    display: none;
    }

    .forceCommunityCaseDeflection {
    background-color: #f7fafc !important;
    border-radius: 4px !important;
    padding: 20px !important;
    }

    /*======================== Footer ==================== */

    .footer {
    background-color: #f6f9fc;
    }

    /* ============= Tweak the Path bar ============ */

    /* Change the text of each step in the path */
  2. frankcaron revised this gist Mar 16, 2021. 1 changed file with 248 additions and 44 deletions.
    292 changes: 248 additions & 44 deletions sfdc-dxp-pathOverrideStyles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,26 +1,230 @@
    /* ========= Frank's Front-End Fun Fridays =============
    /* =============== Sept 11, 2020 Edition ================
    /*
    This snippet of CSS can be added to a Salesforce Experience theme to
    override and restyle an embedded Flow. Keep in mind that this CSS may not work
    indefinitely if specific class names in the core product are changed in the future.
    Be sure to use the out-of-the-box config tools that make
    Experience Cloud so great whenever you can!
    If you have any feature requests or ideas to make this better, hit me up
    at [email protected]!
    Cheers!
    */

    /* ============= Tweak the Path bar in the Flow ============ */

    /* Give the path some breathing room */
    .progress-wrap {
    margin: 30px;
    /*======================== Login Page ==================== */

    .salesforceIdentityLoginBody2 {
    background-repeat: no-repeat !important;
    background-position-x: right !important;
    background-position-y: 300px !important;
    background-size: 250px !important;
    }

    .salesforceIdentityLoginForm2 .inputIcon {
    margin-top: 5px !important;
    }

    /* ===================== Embedded Channels =================== */

    .embedded-service .fab {
    background-color: #4f5fc4 !important;
    }


    /*======================== Nav ==================== */

    .comm-user-profile-menu__login-button {
    color: #000 !important;
    font-weight: bold !important;
    }

    .comm-page-home > .comm-user-profile-menu__login-button {
    color: #fff !important;
    font-weight: bold !important;
    }

    .horizontalMenuItem[community_navigation-multiLevelNavigation_multiLevelNavigation] {
    font-weight: bold !important;
    }

    /*======================= Home ==================== */
    body.comm-page-home div.body {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    }
    body.comm-page-home div.body .forceCommunitySection .cb-section_column {
    padding: 0 !important;
    margin: 0 !important;
    }

    /* =================== List Page Header ============== */

    .df2u-bank-header-block {
    width: 100%;
    text-align: left;
    }
    .df2u-bank-header-block-left {
    margin-left: 51px;
    }
    .df2u-bank-header {
    width: 100%;
    margin-bottom: 0px;
    text-align: left;
    }
    .df2u-header-title {
    font-weight: bolder;
    font-size: 25pt;
    color: rgb(153, 102, 255);
    text-align: left;
    margin-bottom: 0px;
    }
    .df2u-header-hr {
    border-color: rgb(153, 102, 255);
    border-top-width: 7px;
    margin-bottom: 30px;
    margin-top: 10px;
    width: 50px;
    text-align: left;
    }
    .df2u-bank-header-text {
    font-size: 12pt;
    margin-top: -10px;
    padding: 0px;
    }

    /*======================== Hero ==================== */

    .forceCommunityThemeHeroBase .contentTitle {
    font-size: 5.5rem !important;
    letter-spacing: -4px;
    font-weight: bold;
    }

    .comm-page-home .logoImage:after {
    content: '';
    background-image: url(https://striperfp2021.livepreview.salesforce-communities.com/sfsites/c/file-asset/StripeWhiteLogo1?v=1);
    width: 60px;
    height: 32px;
    position: relative;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    }

    .themeLayoutStarterWrapper.isHeroUnderHeader-false.isHeaderPinned-false.siteforceThemeLayoutStarter {
    background-image: url(https://striperfp2021.livepreview.salesforce-communities.com/sfsites/c/file-asset/Screen_Shot_20210315_at_122543_PM?v=1);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 300px;
    background-size: 250px;
    }

    /*======================== Right Pane ==================== */

    .slds-col.slds-medium-size--4-of-12.slds-large-size--4-of-12 > .slds-grid--vertical {
    background-color: #f7fafc;
    border-radius: 4px;
    padding: 20px;
    margin-left: 20px !important;
    }

    .slds-col.slds-medium-size--4-of-12.slds-large-size--4-of-12 a {
    color: #5469d4;
    }

    .slds-col.slds-medium-size--4-of-12.slds-large-size--4-of-12 a span {
    font-size: 1.1em;
    white-space: no-wrap;
    }

    .slds-col.slds-medium-size--4-of-12.slds-large-size--4-of-12 .forceCommunityTopicsOnRecordWrapper .topicsOnRecord {
    background: none !important;
    border: 0px !important;
    box-shadow: none !important;
    padding: 0px;
    margin: 0px;
    }

    /*======================== Topics ==================== */

    .topicLabel {
    font-size: 16px !important;
    font-weight: bold !important;
    }

    .forceTopicFeaturedTopics .topicList {
    margin-right: 20px !important;
    }

    .forceCommunityTopArticleListForTopic .article-title {
    font-size: 16px !important;
    }

    .forceCommunityTopArticleListForTopic .topicHeaderLink {
    font-size: 16px !important;
    }

    /*======================== Case Create ==================== */

    .stripe-create-case {
    text-transform: var(--lwc-textTransform,none);
    font-size: var(--lwc-fcFontSizeMedium,0.8125rem);
    color: var(--lwc-colorTextBrandPrimary,rgb(255, 253, 253));
    background-color: var(--lwc-colorBackgroundButtonBrand,rgb(153, 102, 255));
    border-color: var(--lwc-buttonColorBorderBrandPrimary,rgb(153, 102, 255));
    border-width: 2px;
    border-style: solid;
    padding: 5px;
    text-align: center;
    transition: all .2s;
    position: relative;
    align-items: center;
    box-shadow: var(--sds-c-button-shadow);
    line-height: var(--sds-c-button-line-height, var(--lwc-lineHeightButton,1.875rem));
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    width: 100%;
    }
    .stripe-create-case:hover {
    color: var(--lwc-colorBackgroundButtonBrand,rgb(153, 102, 255));
    background-color: var(--lwc-colorTextBrandPrimary,rgb(255, 253, 253));
    }

    /* =================== List Page Table ============== */

    .forceCommunityRecordListStandard .listTitle {
    display: none !important;
    }

    .forceBaseListView thead th {
    color: #BBB !important;
    border-bottom: 0px solid #fff !important;
    font-size: 16px !important;
    }

    .forceBaseListView tbody td, .forceBaseListView tbody th {
    border-top: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    font-size: 16px !important;
    }

    /*======================== Support ==================== */

    .selfServiceBaseCaseCreation .mdp-container {
    padding: 0px !important;
    margin: 0 !important;
    width: 100% !important;
    }

    .selfServiceBaseCaseCreation .caseHeader {
    display: none;
    }

    .forceCommunityCaseDeflection {
    background-color: #f7fafc !important;
    border-radius: 4px !important;
    padding: 20px !important;
    }

    /*======================== Footer ==================== */

    .footer {
    background-color: #f6f9fc;
    }

    /* ============= Tweak the Path bar ============ */

    /* Change the text of each step in the path */
    .slds-path__title {
    font-family: Open Sans;
    @@ -31,7 +235,7 @@
    .slds-path__nav .slds-path-__item {
    border-width: 2px 2px 2px 2px;
    border-style: solid;
    border-color: #ff0000;
    border-color: #6772e5;
    border-image: initial;
    }

    @@ -41,68 +245,68 @@

    /* Change the color and style of an incomplete chunk */
    .slds-path__nav .slds-is-incomplete {
    background: #EEE;
    background: #dad8e5;
    color: #FEF;
    }
    .slds-path__nav .slds-is-incomplete::before {
    background: #EEE;
    background: #dad8e5;
    color: #FEF;
    }
    .slds-path__nav .slds-is-incomplete::after {
    background: #EEE;
    background: #dad8e5;
    color: #FEF;
    }

    /* Change the color of a complete chunk */
    .slds-path__nav .slds-is-complete {
    background: rgb(185, 190, 152);
    color: #000;
    background: #6772e5;
    color: #fff;
    }
    .slds-path__nav .slds-is-complete::before {
    background: rgb(185, 190, 152);
    color: #000;
    background: #6772e5;
    color: #fff;
    }
    .slds-path__nav .slds-is-complete::after {
    background: rgb(185, 190, 152);
    color: #000;
    background: #6772e5;
    color: #fff;
    }

    /* Change the color of an current chunk */
    .slds-path__nav .slds-is-current {
    background: rgb(185, 190, 152);
    color: #000;
    background: #6772e5;
    color: #fff;
    }
    .slds-path__nav .slds-is-current::before {
    background: rgb(185, 190, 152) !important;
    background: #6772e5 !important;
    border: 0px;
    color: #000;
    color: #fff;
    }
    .slds-path__nav .slds-is-current::after {
    background: rgb(185, 190, 152) !important;
    color: #000;
    background: #6772e5 !important;
    color: #fff;
    }
    .slds-path__nav .slds-is-current .slds-path__link {
    color: #000;
    color: #fff;
    }

    /* Change the color of an active chunk */
    .slds-path__nav .slds-is-active {
    background: rgb(207, 209, 194) !important;
    background: #6772e5 !important;
    color: #fff;
    }
    .slds-path__nav .slds-is-active::before {
    background: rgb(207, 209, 194) !important;
    background: #6772e5 !important;
    color: #fff;
    }
    .slds-path__nav .slds-is-active::after {
    background: rgb(207, 209, 194) !important;
    background: #6772e5 !important;
    color: #fff;
    }

    /* Tweak the first special chunk of the path */
    .slds-path__nav .slds-is-current:first-child {
    border-top-color: rgb(185, 190, 152);
    border-bottom-color: rgb(185, 190, 152);
    border-left-color: rgb(185, 190, 152);
    border-top-color: #6772e5;
    border-bottom-color: #6772e5;
    border-left-color: #6772e5;
    border-left: 0px;
    }
  3. frankcaron revised this gist Sep 25, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions sfdc-dxp-pathOverrideStyles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,12 @@
    /* ========= Frank's Front-End Fun Fridays =============
    /* =============== Sept 11, 2020 Edition ================
    /*
    This snippet of CSS can be added to a Salesforce Community theme to
    This snippet of CSS can be added to a Salesforce Experience theme to
    override and restyle an embedded Flow. Keep in mind that this CSS may not work
    indefinitely if specific class names in the core product are changed in the future.
    Be sure to use the out-of-the-box config tools that make
    Community Cloud so great whenever you can!
    Experience Cloud so great whenever you can!
    If you have any feature requests or ideas to make this better, hit me up
    at [email protected]!
  4. frankcaron revised this gist Sep 11, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion sfdc-dxp-pathOverrideStyles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    /* ========= Frank's Front-End Fun Fridays =============
    /* =============== Sept 18, 2020 Edition ================
    /* =============== Sept 11, 2020 Edition ================
    /*
    This snippet of CSS can be added to a Salesforce Community theme to
    override and restyle an embedded Flow. Keep in mind that this CSS may not work
  5. frankcaron revised this gist Sep 9, 2020. 1 changed file with 18 additions and 18 deletions.
    36 changes: 18 additions & 18 deletions sfdc-dxp-pathOverrideStyles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -17,90 +17,90 @@
    /* ============= Tweak the Path bar in the Flow ============ */

    /* Give the path some breathing room */
    .flowRuntimeV2 .progress-wrap {
    .progress-wrap {
    margin: 30px;
    }

    /* Change the text of each step in the path */
    .flowRuntimeV2 .slds-path__title {
    .slds-path__title {
    font-family: Open Sans;
    font-size: 1em;
    }

    /* Tweak the borders of every path item */
    .flowRuntimeV2 .slds-path__nav .slds-path-__item {
    .slds-path__nav .slds-path-__item {
    border-width: 2px 2px 2px 2px;
    border-style: solid;
    border-color: #ff0000;
    border-image: initial;
    }

    /* Change the arrow styling of a chunk */
    .flowRuntimeV2 .slds-path__item::before, .flowRuntimeV2 .slds-path__item::after {
    .slds-path__item::before, .slds-path__item::after {
    }

    /* Change the color and style of an incomplete chunk */
    .flowRuntimeV2 .slds-path__nav .slds-is-incomplete {
    .slds-path__nav .slds-is-incomplete {
    background: #EEE;
    color: #FEF;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-incomplete::before {
    .slds-path__nav .slds-is-incomplete::before {
    background: #EEE;
    color: #FEF;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-incomplete::after {
    .slds-path__nav .slds-is-incomplete::after {
    background: #EEE;
    color: #FEF;
    }

    /* Change the color of a complete chunk */
    .flowRuntimeV2 .slds-path__nav .slds-is-complete {
    .slds-path__nav .slds-is-complete {
    background: rgb(185, 190, 152);
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-complete::before {
    .slds-path__nav .slds-is-complete::before {
    background: rgb(185, 190, 152);
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-complete::after {
    .slds-path__nav .slds-is-complete::after {
    background: rgb(185, 190, 152);
    color: #000;
    }

    /* Change the color of an current chunk */
    .flowRuntimeV2 .slds-path__nav .slds-is-current {
    .slds-path__nav .slds-is-current {
    background: rgb(185, 190, 152);
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-current::before {
    .slds-path__nav .slds-is-current::before {
    background: rgb(185, 190, 152) !important;
    border: 0px;
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-current::after {
    .slds-path__nav .slds-is-current::after {
    background: rgb(185, 190, 152) !important;
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-current .slds-path__link {
    .slds-path__nav .slds-is-current .slds-path__link {
    color: #000;
    }

    /* Change the color of an active chunk */
    .flowRuntimeV2 .slds-path__nav .slds-is-active {
    .slds-path__nav .slds-is-active {
    background: rgb(207, 209, 194) !important;
    color: #fff;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-active::before {
    .slds-path__nav .slds-is-active::before {
    background: rgb(207, 209, 194) !important;
    color: #fff;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-active::after {
    .slds-path__nav .slds-is-active::after {
    background: rgb(207, 209, 194) !important;
    color: #fff;
    }

    /* Tweak the first special chunk of the path */
    .flowRuntimeV2 .slds-path__nav .slds-is-current:first-child {
    .slds-path__nav .slds-is-current:first-child {
    border-top-color: rgb(185, 190, 152);
    border-bottom-color: rgb(185, 190, 152);
    border-left-color: rgb(185, 190, 152);
  6. frankcaron created this gist Sep 9, 2020.
    108 changes: 108 additions & 0 deletions sfdc-dxp-pathOverrideStyles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    /* ========= Frank's Front-End Fun Fridays =============
    /* =============== Sept 18, 2020 Edition ================
    /*
    This snippet of CSS can be added to a Salesforce Community theme to
    override and restyle an embedded Flow. Keep in mind that this CSS may not work
    indefinitely if specific class names in the core product are changed in the future.
    Be sure to use the out-of-the-box config tools that make
    Community Cloud so great whenever you can!
    If you have any feature requests or ideas to make this better, hit me up
    at [email protected]!
    Cheers!
    */

    /* ============= Tweak the Path bar in the Flow ============ */

    /* Give the path some breathing room */
    .flowRuntimeV2 .progress-wrap {
    margin: 30px;
    }

    /* Change the text of each step in the path */
    .flowRuntimeV2 .slds-path__title {
    font-family: Open Sans;
    font-size: 1em;
    }

    /* Tweak the borders of every path item */
    .flowRuntimeV2 .slds-path__nav .slds-path-__item {
    border-width: 2px 2px 2px 2px;
    border-style: solid;
    border-color: #ff0000;
    border-image: initial;
    }

    /* Change the arrow styling of a chunk */
    .flowRuntimeV2 .slds-path__item::before, .flowRuntimeV2 .slds-path__item::after {
    }

    /* Change the color and style of an incomplete chunk */
    .flowRuntimeV2 .slds-path__nav .slds-is-incomplete {
    background: #EEE;
    color: #FEF;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-incomplete::before {
    background: #EEE;
    color: #FEF;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-incomplete::after {
    background: #EEE;
    color: #FEF;
    }

    /* Change the color of a complete chunk */
    .flowRuntimeV2 .slds-path__nav .slds-is-complete {
    background: rgb(185, 190, 152);
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-complete::before {
    background: rgb(185, 190, 152);
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-complete::after {
    background: rgb(185, 190, 152);
    color: #000;
    }

    /* Change the color of an current chunk */
    .flowRuntimeV2 .slds-path__nav .slds-is-current {
    background: rgb(185, 190, 152);
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-current::before {
    background: rgb(185, 190, 152) !important;
    border: 0px;
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-current::after {
    background: rgb(185, 190, 152) !important;
    color: #000;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-current .slds-path__link {
    color: #000;
    }

    /* Change the color of an active chunk */
    .flowRuntimeV2 .slds-path__nav .slds-is-active {
    background: rgb(207, 209, 194) !important;
    color: #fff;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-active::before {
    background: rgb(207, 209, 194) !important;
    color: #fff;
    }
    .flowRuntimeV2 .slds-path__nav .slds-is-active::after {
    background: rgb(207, 209, 194) !important;
    color: #fff;
    }

    /* Tweak the first special chunk of the path */
    .flowRuntimeV2 .slds-path__nav .slds-is-current:first-child {
    border-top-color: rgb(185, 190, 152);
    border-bottom-color: rgb(185, 190, 152);
    border-left-color: rgb(185, 190, 152);
    border-left: 0px;
    }