/*
* VIEW: DASH
* VIEW ID: ALL APP
* DESCPRIPTION: Font Barlow, Barlow Condensed, Passion One
*/

@font-face {
    font-family: "Barlow";
    src: url("fonts/Barlow/Barlow-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Barlow";
    src: url("fonts/Barlow/Barlow-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("fonts/BarlowCondensed/BarlowCondensed-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Passion One;
    src: url("fonts/PassionOne/PassionOne-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

/***************************************************/
/* [BEGIN] LOADING STYLE
/***************************************************/
#loading {
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3 !important;
    background-color: white;
}

#loading figure {
    width: 100%;
    margin: 0;
}

#loading figure img {
    margin: 10% auto 0;
    display: block;
    width: 100%;
    max-width: 328px;
    max-width: 300px;
}

.spinner {
    margin: 10px auto 0;
    width: 70px;
    text-align: center;
}

.spinner>div {
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 2s infinite ease-in-out both;
    -moz-animation: sk-bouncedelay 2s infinite ease-in-out both;
    animation: sk-bouncedelay 2s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    -moz-animation-delay: -0.32s;
    animation-delay: -0.32s;
    background: #212c64;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    -moz-animation-delay: -0.16s;
    animation-delay: -0.16s;
    background: #212c64;
}

.spinner .bounce3 {
    background: #212c64;
}

@-webkit-keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

/***************************************************/
/* [END] LOADING STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] PRINT STYLE
/***************************************************/
@media print {

    /* usage of !important hard overwrites, because UI5 uses inline style directives (style="width:990px")  */
    /* define print page default settings */
    /* scale content to fit print page */
    html,
    body {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        position: absolute !important;
    }

    /* reset body */
    body {
        margin: 0 !important;
        padding: 0 !important;
        float: none;
        color: #000;
    }
    
    #be-chat-container {
        display: none !important; 
    }

    .print-prod-category-break-inside {
        display: block !important;
    }

    .prod-finder-print-prod-container {
        display: block;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    .productCategoryWidthonPrint {
        width: 400px !important;
    }

    .prod-finder-print-prod-container {
        margin-top: 30px;
    }

    .productTilePicture {
        display: block;
        height: 200px;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    .productShortTextContainer {
        display: block;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    .productCategoryFileNameLink {
        display: block;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    .print-prod-category-use-container {
        margin-bottom: 0 !important;
        display: block;
    }

    .print-prod-category-usage-main-container {
        page-break-inside: auto;
        display: block !important;
    }

    .custom-component-selectBoxes-print {
        width: 220px !important;
    }

    .custom-component-selectBoxes-print .sapMSltArrow {
        visibility: hidden;
    }

    .print-prod-category-force-page-break-before {
        display: block !important;
    }

    .print-prod-category-force-page-break-before>div {
        display: block !important;
    }

    .productsCardContainerBorder {
        display: block !important;
    }

    .prod-finder-print-full-width {
        width: 100% !important;
    }

    .productFinderUsesList li {
        page-break-inside: avoid !important;
    }

    .print-prod-category-force-block {
        display: block !important;
        page-break-inside: auto !important;
    }

    .print-prod-category-force-block li {
        display: block !important;
        page-break-before: auto !important;
    }

    @-moz-document url-prefix() {
        .print-prod-category-force-block li {
            display: block !important;
            page-break-before: avoid !important;
        }

        .print-prod-category-force-page-break-before {
            display: block !important;
        }
    }

    .productFinderProductListonPrint>ul>li {
        width: 23%;
        border: 0;
        margin: 0 1%;
        display: block;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    .productTilePictureFrame>div {
        display: block !important;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
        text-align: -webkit-center;
    }

    .productTilePictureFrame {
        display: block !important;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    .productFinderProductListonPrint>ul>li>div> {
        display: block;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    .productFinderProductListonPrint>ul>li>div>div {
        display: block;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    .productFinderProductListonPrint>ul>li>div>div>div {
        display: block;
        page-break-inside: avoid !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
    }

    .productListonPrint {
        margin: 0% !important;
    }

    /* fix overflow scrolling */
    *:not(div),
    .sapMApp {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* auto expand collapsed panel contents */
    .sapMPanelExpandablePart {
        display: block !important;
    }

    /* disable panel content border */
    .sapMPanelContent {
        border: 0 !important;
    }

    /* reset flexed textareas height */
    .sapMTextArea>.sapMTextAreaInner {
        height: auto !important;
    }

    /* needed to enable page breaking on ff ie and edge*/
    section>div,
    section>div>div,
    section>div>div>div {
        display: block !important;
    }

    /* fix needed for safari on resolutions that insert the lateral borders */
    html.sap-desktop .sapMShellAppWidthLimited .sapMShellCentralBox {
        width: auto;
        margin-left: 0;
        left: 0;
    }

    .switchGraph>div:nth-child(2)>div:nth-child(1)>div:nth-child(1) {
        background: #ffffff !important;
        border-color: #ababab !important;
    }

    .switchGraph>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3) {
        border: 2px solid #ababab !important;
    }
}

/***************************************************/
/* [END] PRINT STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] MESSAGE CONTAINER STYLE
/***************************************************/
.messageContainer {
    height: auto;
    width: 100%;
}

.messageContainerText {
    font-family: var(--font-barlow);
    font-weight: normal;
    font-size: var(--font-size-small);
    color: white;
}

.messageContainerLink {
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    color: white;
    text-decoration: underline;
    font-weight: 500;
    vertical-align: middle;
    margin-left: 4px;
}

.minHeightMessages {
    min-height: 46px !important;
}

.messageStripIconSize {
    font-size: 1rem;
    margin-right: .5rem;
}

.message-container-no-shadow {
    box-shadow: none;
}

.messageContainerSuccessColor {
    background: var(--color-valvolineBlue);
}

.messageContainerErrorColor {
    background: var(--color-valvolineRed);
}

.sapMBtnText>.sapMBtnIcon {
    color: #fff;
}

.sapMBtnInner.sapMBtnText.sapMBtnBack {
    padding-left: 1.5rem;
}

.sapMBtnInner {
    text-shadow: none !important;
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
}

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .message-strip-error-contact-us {
        flex-wrap: wrap;
        white-space: normal;
    }

    .messageContainerLink {
        margin-left: 0 !important;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***************************************************/
/* [END] MESSAGE CONTAINER STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] GENERAL (NO SPECIFIC PAGE) STYLE
/***************************************************/
body {
    font-family: var(--font-barlow) !important;
    -epub-hyphens: auto;
    hyphens: auto;
}

.sapMCustomTile {
    background-color: white;
}

#be-chat-container {
    z-index: 999999999!important;
}

.sapMCustomTile:focus {
    /* remove outline in the tiles */
    outline: none;
}

.sapMLIBActive .welcome-card-TextContent-anchor .global-font-style-bodyCopy {
    color: #6e6e6e !important;
}

.sapMLIBActive .welcome-card-TextContent-anchor .global-font-style-pageSubTitle {
    color: #303030 !important;
}

.sapMBtn:hover>.sapMBtnHoverable {
    background: transparent;
}

html.sap-desktop .sapMBtn:focus>.sapMFocusable {
    /* remove outline in the general */
    outline: 0 !important;
    outline-offset: 0;
}

html.sap-desktop .sapMFooter-CTX .sapMBtn:focus .sapMBtnFocusDiv,
.sapMBtn:focus .sapMBtnFocusDiv {
    /*ie*/
    outline: 0 !important;
    border: 0;
}

html.sap-desktop .sapMBtn:focus>.sapMFocusable {
    outline: 0 !important;
    outline-offset: 0;
}

.navigation-menu-mobile-button.sapMBtn .sapMBtnInner,
.sapMBtn .sapMBtnContent {
    background: transparent;
    border: none;
    display: block;
}

.navigation-menu-mobile-button.sapMBtn .sapMBtnInner,
.sapMBtn .sapMBtnContent:active {
    display: block;
    background: transparent;
    border: none;
}

.main-page-size>.sapMFlexItem {
    width: 100% !important;
    height: 100% !important;
}

.main-page-zIndex {
    z-index: 1;
}

.panel-container-border {
    border-bottom: 1px solid #e5e5e5;
}

.sapMShellBrandingBar {
    visibility: hidden;
}

.scrollContainer {
    align-items: center;
    min-height: 200px;
}

.scrollContainerNoCards {
    animation: opacityanimation;
    animation-duration: .8s;
    background-color: white;
    margin: 5px;
}

.nocards-align {
    text-align: center !important;
}

.flexDiv {
    /* Gives the flex and ajustable style of the cards */
    -webkit-flex-wrap: wrap;
    /* For Edge */
    flex-wrap: wrap;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.titleDialogLimit .sapMBarChild {
    text-align: left;
    font-family: var(--font-barlow) !important;
    font-size: var(--font-size-small) !important;
    font-weight: lighter !important;
    color: #303030 !important;
    width: 100%;
    padding-left: 32px !important;
}

.sapMSelectListItemBase,
.customComboBoxList .sapMLIB,
.sapMComboBoxBaseList .sapMLIB {
    /* Filter popUp menu CSS */
    color: #e5e5e5 !important;
    background-color: var(--color-valvolineDarkBlue);
    font-size: 16px;
    font-family: var(--font-barlow);
    font-weight: lighter;
    opacity: 1 !important;
}

.sapMSelectListItemBase:hover,
.customComboBoxList .sapMLIB:hover,
.sapMComboBoxBaseList .sapMLIB:hover {
    /* Filter popUp menu CSS */
    color: white;
    background-color: var(--color-valvolineBlue);
    font-size: 16px;
    font-family: var(--font-barlow);
}

.sapMSltWithArrow>.sapMSltLabel {
    padding: 4px 3rem 0 .625rem;
}

.sapMSltWithArrow .sapMSelectListItemBase {
    padding: 1px 1rem 0 .625rem !important;
}

.sapMSelectListItemBaseSelected,
.customComboBoxList .sapMLIBSelected,
.sapMComboBoxBaseList .sapMLIBSelected {
    /* List pop over button color selected */
    outline: 0;
    outline-offset: 0;
    background-color: var(--color-valvolineBlue) !important;
}

.sapMSelectListItemBaseSelected:hover,
.customComboBoxList .sapMLIBSelected:hover,
.sapMComboBoxBaseList .sapMLIBSelected:hover {
    background-color: var(--color-valvolineBlue) !important;
}

.sapMSltHoverable:not(.sapMSltState):hover {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

.sapMSltHoverable:not(.sapMSltPressed):hover>.sapMSltArrow {
    background: transparent;
}

.sapMListTbl .sapMText,
.sapMListTbl .sapMLabel {
    font-size: 1rem;
    color: #333333;
    font-weight: bold;
}

.sapMLIB.sapMLIBActive {
    color: inherit !important;
    background: transparent !important;
}

.sapMLIB.sapMObjLItem {
    padding: .5rem;
}

.sapMText.sapMObjLTitle {
    font-family: var(--font-barlow) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #979797 !important;
    white-space: nowrap;
    overflow: hidden;
}

.sapMSelectList {
    background: var(--color-valvolineDarkBlue) !important;
}

.sapMSltPicker.sapMSltPicker-CTX {
    background: transparent;
}

.menuMobileLabel {
    text-transform: uppercase;
    width: 100%;
}

.sapContrast.sapMIBar-CTX.sapMFooter-CTX,
.sapContrast .sapMIBar-CTX.sapMFooter-CTX {
    border-top: 1px solid var(--color-valvolineBlue);
    background: var(--color-valvolineBlue);
}

:not(.sapMBtnDisabled)>.sapMBtnInner.sapMBtnActive {
    background-color: transparent;
}

.customPanelContent .sapMPanelContent {
    padding: 0;
    margin-left: 0 !important;
}

.sapMPanelContent {
    padding: 0;
}

.sapMFlexBoxFit,
.sapMFlexBoxScroll {
    /* SAFARI and IOS devices. Make Height auto so it doesnt collapse */
    height: auto !important;
}

.sapMSelectListItemBaseDisabled {
    opacity: 0.3 !important;
}

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width: 1024px) {
    .videoForStoping {
        width: 100%;
        height: 176px;
        border: hidden;
        background: transparent;
    }

}

/***** [END] DESKTOP SCREEN SIZE *****/


/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .videoForStoping {
        width: 100%;
        height: 183px;
        border: hidden;
        background: transparent;
    }

    .global-cards-container-flex-div-centering {
        justify-content: flex-start;
    }

    .sapMSltWithArrow .sapMSelectListItemBase {
        padding: 10px 3rem 0 .625rem !important;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .scrollContainerNoCards {
        margin: 5px 0 5px 0;
    }

    .marginNoCardsAvailableMobile {
        margin: 2%;
    }

    .videoForStoping {
        width: 100%;
        height: 192px;
        border: hidden;
        background: transparent;
    }

    .sapMSelectListItemBase:hover,
    .customComboBoxList .sapMLIB:hover,
    .sapMComboBoxBaseList .sapMLIB:hover {
        background-color: var(--color-valvolineDarkBlue);
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***************************************************/
/* [END] GENERAL (NO SPECIFIC PAGE) STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] REMOVING OUTLINE STYLE
/***************************************************/

*:focus,
*:active,
*:after {
    /* Remove focus on the buttons */
    outline: transparent !important;
}

.sapMCrsl:focus:before {
    /* remove outline in the carousel */
    border: 1px solid transparent !important;
}

.sapMSelectListItem:focus,
.customComboBoxList .sapMLIBSelected:focus,
.sapMComboBoxBaseList .sapMLIBSelected:focus,
.sapMSelectListItemBase:focus,
.sapMLIB:focus {
    /* remove outline in the filter items */
    outline: none;
}

.sapMLnk:focus {
    /*remove link outlines*/
    outline: none;
}

html.sap-desktop .sapMCrslHud .sapMCrslPrev:focus::after,
html.sap-desktop .sapMCrslHud .sapMCrslNext:focus::after {
    /* remove outline in the buttons navigation in carousel */
    border: 1px dotted transparent;
}

li {
    /* Remove focus on the buttons */
    outline: none !important;
    outline: 0 !important;
}

.sapMPanelExpandableIcon:focus::after {
    /* Remove focus on the buttons */
    border: none !important;
}

html.sap-desktop .sapMBtn:focus>.sapMFocusable {
    /* remove outline in the general */
    outline: 0 !important;
    outline-offset: 0;
}

html.sap-desktop .sapMFooter-CTX .sapMBtn:focus .sapMBtnFocusDiv,
.sapMBtn:focus .sapMBtnFocusDiv {
    /*ie*/
    outline: 0 !important;
    border: 0;
}

html.sap-desktop .sapMBtn:focus>.sapMFocusable {
    outline: 0 !important;
    outline-offset: 0;
}

.sapMCrslItemTable,
.sapMCrslItem>.sapMScrollCont>.sapMScrollContScroll {
    /* Height auto for Safari Carousel  */
    height: auto !important;
}


/* Removes Outline from all inputs From New update */
.sapMFocus .sapMInputDivWrapper:not(.sapMInputBaseDisabledInner)::before {
    border: 0 !important;
}

html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisabled):not(.sapMSltState) {
    outline-offset: -3px;
    outline: none !important;
}

/***************************************************/
/* [END] REMOVING OUTLINE STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] CUSTOM PANEL STYLE
/***************************************************/

.sapMPanelWrappingDivTb {
    border-bottom: 0;
}

.marginHeaderTop {
    margin-top: .75rem;
}

.marginHeaderBottom {
    margin-bottom: .75rem;
}

.faqsTitle2 {
    color: var(--color-valvolineBlue);
    font-size: var(--font-size-small);
    font-family: var(--font-barlow);
    font-weight: bold;
}

.limitAlignCases {
    width: 681px !important;
    display: inline-block !important;
    text-overflow: ellipsis !important;
}

.faqsTitle3 {
    color: #6e6e6e;
    font-size: var(--font-size-small);
    font-family: var(--font-barlow);
    font-weight: bold;
    min-height: 2rem;
    overflow: hidden;
    padding-bottom: 0 !important;
    padding-top: 0;
}
.customPannelTitle3 {
    color: #6e6e6e;
    font-size: var(--font-size-small);
    font-family: var(--font-barlow);
    font-weight: bold;
    min-height: 2rem;
    overflow: hidden;
    padding-bottom: 0 !important;
    padding-top: 0;
    padding-left: 2.7rem !important;
}

.limitAlignCases2 {
    white-space: nowrap !important;
    width: 681px !important;
    display: inline-block !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    text-transform: none !important;
    -webkit-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
    text-size-adjust: none !important;
    line-height: 1rem !important;
}

.faqsButtonPressed {
    color: #bbbbbb !important;
}

@media screen and (min-width:1024px) {
    .permissionSelectBox .sapMBarChild{
        padding-left: 10px !important;
    }
}

.permissionSelectBox .sapMBtn,
.permissionSelectBox .sapMBtn:hover,
.permissionSelectBox .sapMBtn:focus{
    margin-top: -15px;
    color: #bbbbbb !important;
    background-color: #ffffff !important;
    outline: none !important;
    border: 1px solid transparent !important;
}


.permissionSelectBox .sapMBtn .sapMBtnIcon,
.permissionSelectBox .sapMBtn:hover .sapMBtnIcon,
.permissionSelectBox .sapMBtn:focus .sapMBtnIcon,
.permissionSelectBox .sapMBtn:hover .sapMBtnInner,
.permissionSelectBox .sapMBtn:focus .sapMBtnInner{
    color: #bbbbbb !important;
    background-color: #ffffff !important;
    outline: none !important;
    border: 1px solid transparent !important;
    font-size: 15px;
}


.sapMPanelExpandableIcon,
.sapMPanelExpandableIcon:hover .sapMBtnInner,
.sapMPanelExpandableIcon:focus .sapMBtnInner,
.sapMPanelExpandableIcon .sapUiIcon{
    /* Plus color */
    color: #bbbbbb !important;
    background-color: #ffffff !important;
    outline: none !important;
    border: 1px solid transparent !important;
    font-size: 1rem;
    height: 1rem;
    line-height: 0.5rem;
}

.customExpandableIcon .sapMPanelExpandableIcon {
    visibility: hidden;
}


/**Custom Panels **/
.sapMPanelHdr {
    line-height: normal !important;
}

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width: 1024px) {

    .sideMenu .sapMPanel .sapMPanelWrappingDiv .sapMPanelHdr,
    .sapMPanel .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
        margin-top: .5rem;
        margin-left: 0 !important;
    }

    .sapMPanel .sapMPanelWrappingDiv .sapMPanelHdr,
    .sapMPanel .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
        margin-top: .5rem;
        margin-left: 1.2rem!important;
    }

    .sapMPanelHdr {
        box-sizing: border-box;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: none;
        height: auto;
        line-height: 1rem;
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
    }

    .marginBottomFaqTitle2 {
        margin-bottom: 16px !important;
    }
}

/***** [END] DESKTOP SCREEN SIZE *****/

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9999px) {

    .sideMenu .sapMPanel .sapMPanelWrappingDiv .sapMPanelHdr,
    .sapMPanel .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
        margin-top: .5rem;
        margin-left: 0 !important;
    }

    .sapMPanel .sapMPanelWrappingDiv .sapMPanelHdr,
    .sapMPanel .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
        margin-top: .5rem;
        margin-left: 2.9rem;
    }

    .sapMPanelHdr {
        box-sizing: border-box;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: none;
        height: auto;
        line-height: 1rem;
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
    }

    .marginBottomFaqTitle2 {
        margin-bottom: 16px !important;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {

    .sideMenu .sapMPanel .sapMPanelWrappingDiv .sapMPanelHdr,
    .sapMPanel .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
        margin-top: .5rem;
        margin-left: 0 !important;
    }

    .sapMPanel .sapMPanelWrappingDiv .sapMPanelHdr,
    .sapMPanel .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
        margin-top: .5rem;
        margin-left: 2.9rem;
    }

    .sapMPanelHdr {
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
        box-sizing: border-box;
        height: auto;
        line-height: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: none;
        white-space: normal;
    }

    .marginBottomFaqTitle2 {
        margin-bottom: 16px !important;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/
/***************************************************/
/* [END] CUSTOM PANEL STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] ICONS STYLE
/***************************************************/

@font-face {
    font-family: 'valvoline-icons';
    src: url('fonts/valvoline-icons/valvoline-icons.eot?v7vev2');
    src: url('fonts/valvoline-icons/valvoline-icons.eot?v7vev2#iefix') format('embedded-opentype'), url('fonts/valvoline-icons/valvoline-icons.ttf?v7vev2') format('truetype'), url('fonts/valvoline-icons/valvoline-icons.woff?v7vev2') format('woff'), url('fonts/valvoline-icons/valvoline-icons.svg?v7vev2#valvoline-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: 'valvoline-icons' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon {
    font-family: 'valvoline-icons' !important;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.icon--oil:before {
    content: "\e903";
}

.icon--back2top:before {
    content: "\e928";
}

.iconColorOther {
    color: var(--color-valvolineBlue);
}

.warningMessageDialogIcon {
    color: #efc608;
    margin-bottom: 10px;
    font-size: 25px;
}

/***************************************************/
/* [END] ICONS STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] CAROUSEL CARD STYLE
/***************************************************/
.carouselTitle {
    background-color: white;
    padding-top: 10px;
    padding-bottom: 15px;
    margin-left: 32px;
    margin-right: 32px;
    border-bottom: 1px solid #e5e5e5;
}

.carouselCardSection {
    background-color: white;
    padding-bottom: 64px;
    margin: 1rem 1rem 0 1rem;
}

.learnHeightTitle {
    height: 78px;
}

.carousel-subtitle>span {
    max-height: 78px !important;
}

.carousel-link {
    white-space: normal;
}

.blackBorder {
    border-top: 5px solid black;
}

.trends {
    color: #303030;
    font-size: 28px;
    font-weight: bold;
}

.carouselPage {
    width: 100%;
    height: 30rem;
}

.pageSubtitleInsights {
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    font-weight: lighter;
    color: #303030;
    text-align: center !important;
}

.pageSubtitleInsights>span {
    max-height: 78px !important;
}

.carouselCardSectionInsights {
    background-color: white;
    margin: 0 15px 15px;
    padding-bottom: 48px;
}

.insightsTrendPictureContainer {
    width: 100%;
    height: 180px;
}

.imageCardInsights {
    margin-bottom: 32px;
}

.carousel-link-insights {
    white-space: normal;
}

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width: 1024px) {
    .carouselPageContainer {
        background-color: white;
        margin: 5px;
        width: 1138px;
        animation: opacityanimation;
        animation-duration: .5s;
    }

    .carouselTitleInsights {
        background-color: white;
        margin: 32px 32px 48px 32px;
        text-align: -webkit-center !important;
    }

    .carouselCardSection {
        max-width: 240px;
        min-height: 250px;
    }

    .alignmentCarousel {
        margin-top: 10px;
        justify-content: flex-start;
    }

    .carousel-CardLink {
        position: absolute;
        bottom: 0;
        margin: 10px 0;
    }

    .carouselCardSectionInsights {
        max-width: 240px;
    }

    .alignmentCarouselTextInsights {
        text-align: center !important;
    }

    .alignmentCarouselInsightsTexT {
        margin-top: 20px;
        justify-content: flex-start;
    }

    .carousel-imageCardLink {
        position: absolute;
        bottom: 0;
        margin: 10px 0;
    }
}
/***** [END] DESKTOP SCREEN SIZE *****/

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
    .carouselPageContainer {
        background-color: white;
        width: 100%;
        margin: 0 5%;
    }

    .carouselPageContainerTablet {
        background-color: white;
        margin-top: 5px;
        width: 590px;
    }

    .carouselPageContainerProfileMobile {
        background-color: white;
        margin-left: 5px;
        margin-right: 5px;
    }

    .carouselTitleInsights {
        background-color: white;
        margin-top: 32px;
        margin-left: 32px;
        margin-right: 32px;
        text-align: -webkit-center !important;
    }

    .carouselCardSection {
        max-width: 166px;
    }

    .alignmentCarousel {
        margin-top: 10px;
        justify-content: flex-start;
    }

    .carousel-CardLink {
        position: absolute;
        bottom: 0;
        margin: 10px 0;
    }

    .carouselCardSectionInsights {
        max-width: 166px;
    }

    .alignmentCarouselTextInsights {
        text-align: center !important;
    }

    .alignmentCarouselInsightsTexT {
        margin-top: 20px;
        justify-content: flex-start;
    }

    .carousel-imageCardLink {
        position: absolute;
        bottom: 0;
        margin: 0 16px;
    }
}
/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .carouselPageContainerProfileMobile {
        background-color: white;
        margin-left: 5px;
        margin-right: 5px;
    }

    .carouselPageContainer {
        background-color: white;
        margin: 5px;
        width: 98% !important;
    }

    .carouselTitleInsights {
        background-color: white;
        margin: 32px 16px 32px 16px;
        text-align: -webkit-center !important;
    }

    .alignmentCarousel {
        margin-top: 10px;
        justify-content: flex-start;
    }

    .carousel-CardLink {
        position: absolute;
        bottom: 0;
        margin: 10px 0;
    }

    .alignmentCarouselInsightsTexT {
        margin-top: 20px;
        justify-content: flex-start;
    }

    .carousel-imageCardLink {
        position: absolute;
        bottom: 0;
        margin: 10px 16px;
    }
}
/***** [END] MOBILE SCREEN SIZE *****/


/***************************************************/
/* [BEGIN] CAROUSEL CARD STYLE
/***************************************************/

/***************************************************/
/* [BEGIN] DIALOG STYLE
/***************************************************/

.dialog {
    background: #fff;
    overflow: auto;
    width: 100vw !important;
    max-height: 55vh;
}

.dialog__header {
    border-bottom: 1px solid #000;
    margin: 32px 16px 8px;
}

.dialog__footer {
    border-top: 1px solid #000;
    height: 70px;
    padding-top: 16px;
    margin: 16px;
}

.valvolineButtonDialogCancel:active {
    /* Active Button Color */
    background: #e3e3e3;
}

.valvolineButtonDialogCancel .sapMBtnInner {
    background-color: transparent !important;
    border: none !important;
    border-radius: .2rem;
    color: #303030 !important;
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    text-transform: uppercase;
}

.warningMessageDialog__header {
    margin: 16px 32px 16px 32px;
    align-items: center;
    font-weight: bold;
}

.warningMessageDialog {
    margin: 16px 32px 16px 32px;
    justify-content: center !important;
    align-items: center;
    border-radius: 11px;
}

.warningMessageDialog>div {
    width: 100%;
}

.warningMessageDialog__footer {
    border-top: 1px solid #000;
    height: 70px;
    margin: 16px 32px 16px 32px;
    padding-top: 16px;
    align-items: center;
    justify-content: center;
}

.warningMessageDialogButton {
    background-color: var(--color-valvolineBlue);
    color: white;
    font-size: 14px;
    font-weight: normal;
    height: 41px;
    width: 7rem;
    padding: 0;
}

.warningMessageDialogButton .sapMBtnInner {
    background-color: transparent !important;
    border: none !important;
    border-radius: .2rem;
    color: #fff !important;
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    text-transform: uppercase;
}

.warningMessageDialogButton_Blue {
    background-color: var(--color-valvolineBlue);
    border-color: var(--color-valvolineBlue);
    color: white;
}

.warningMessageDialogButton_Red {
    background-color: var(--color-valvolineRed);
    border-color: var(--color-valvolineRed);
    color: white;
}


/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width: 1024px) {
    .dialog-sds-width {
        width: 560px !important;
    }

    .dialog-sds-width .dialog__content {
        width: 560px !important;
    }

    .dialog {
        width: 800px !important;
    }

    html[data-sap-ui-browser^="sf"] .dialog.sapMDialog.sapMDialogVerticalScrollIncluded .sapMDialogSection {
        overflow-y: hidden !important;
    }

    html[data-sap-ui-browser^="sf"] .dialog .sapMDialogSection {
        padding-right: 0 !important;
    }

    .valvolineButtonDialogCancel {
        background-color: white;
        border: 1px solid #979797;
        color: #303030;
        font-weight: bold;
        height: 48px;
        width: 10rem;
        display: block;
        text-transform: uppercase;
    }

    .warningMessagedialog {
        width: 450px !important;
        border-radius: 11px;
    }
}

/***** [END] DESKTOP SCREEN SIZE *****/

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .dialog-sds-width {
        width: 640px !important;
    }

    .dialog {
        width: 700px !important;
    }

    html[data-sap-ui-browser^="sf"] .dialog.sapMDialog.sapMDialogVerticalScrollIncluded .sapMDialogSection {
        overflow-y: hidden !important;
    }

    html[data-sap-ui-browser^="sf"] .dialog .sapMDialogSection {
        padding-right: 0 !important;
    }

    .valvolineButtonDialogCancel {
        background-color: white;
        border: 1px solid #979797;
        color: #303030;
        font-weight: bold;
        height: 48px;
        width: 10rem;
        display: block;
        text-transform: uppercase;
    }

    .warningMessagedialog {
        width: 450px !important;
        border-radius: 11px;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .valvolineButtonDialogCancel {
        background-color: #fff;
        border: 1px solid #979797;
        color: #303030;
        display: block;
        font-weight: bold;
        height: 48px;
        width: 7.05rem;
        text-transform: uppercase;
    }

    .warningMessagedialog {
        width: 100vw;
    }

    .warningMessageDialogButton {
        width: auto;
        min-width: 5rem;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***** [BEGIN] CUSTOM SCREEN SIZE *****/
@media screen and (min-width: 768px) {
    .dialog__header {
        margin: 32px 32px 16px;
    }

    .dialog__footer {
        margin: 16px 32px 32px;
    }
}

/***** [END] CUSTOM SCREEN SIZE *****/

/***************************************************/
/* [END] DIALOG STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] UNSUPPORTED BROWSER FRAGMENT STYLE
/***************************************************/
.headerDialog {
    margin: 32px 32px 16px;
    border-bottom: 1px solid #000;
}

.borderHeader {
    margin-bottom: 6px;
}

.contentStyle {
    padding: 0 32px 0 32px;
}

.removeTopPaddingCreateUser {
    padding-top: 20px !important;
}

.dialog__content-label--export {
    padding-top: 15px;
    padding-left: 20px;
    width: 100%;
}

.dialogFooter {
    border-top: 1px solid #000;
    margin: 16px 32px 32px;
    padding-top: 12px;
}

.changeBorderSelectBoxNotSupportedBrowser .sapMCbBg {
    border: solid .05rem #6e6e6e;
    background-color: #ffffff;
    border-radius: 0;
}

.changeBorderSelectBoxNotSupportedBrowser .sapMCbBg:before {
    border: solid .05rem #a0a0a0;
    border-radius: 0;
    background: #a0a0a0;
}

.changeBorderSelectBoxNotSupportedBrowser .sapMCbHoverable:hover {
    background: #aaaaaa;
}

.changeBorderSelectBoxNotSupportedBrowser .sapMCbBg.sapMCbMarkChecked:before {
    color: #ffffff;
    background: #6f6f6f;
    border: 0;
    width: 100%;
    height: 100%;
}

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width:1024px) {
    .unsupported-browser-fragment-size {
        width: 800px !important;
    }

    /* Remove scroll bar from safari */
    html[data-sap-ui-browser^="sf"] .unsupported-browser-fragment-size.sapMDialog.sapMDialogVerticalScrollIncluded .sapMDialogSection {
        overflow-y: hidden !important;
    }

    .body-copy-not-supported {
        font-family: var(--font-barlow);
        font-size: 16px;
        font-weight: lighter;
        color: #6e6e6e;
        margin-right: 5px;
    }

    .links-to-download {
        padding-bottom: 25px;
        padding-top: 20px !important;
        margin-left: 40px;
        display: block;
    }

    .cancel-not-supported {
        background-color: #fff;
        border: 1px solid #979797;
        color: #303030;
        display: block;
        font-weight: bold;
        height: 48px;
        width: 7.05rem;
        text-transform: uppercase;
    }

    .cancel-not-supported .sapMBtnInner {
        background-color: transparent !important;
        border: none !important;
        border-radius: .2rem;
        color: #303030 !important;
        font-family: var(--font-barlow);
        font-size: var(--font-size-small);
        text-transform: uppercase;
    }
}

/***** [END] DESKTOP SCREEN SIZE *****/

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
    .unsupported-browser-fragment-size {
        width: 700px !important;
    }

    html[data-sap-ui-browser^="sf"] .unsupported-browser-fragment-size.sapMDialog.sapMDialogVerticalScrollIncluded .sapMDialogSection {
        overflow-y: hidden !important;
    }

    .body-copy-not-supported {
        font-family: var(--font-barlow);
        font-size: 16px;
        font-weight: lighter;
        color: #6e6e6e;
        margin-right: 5px;
    }

    .links-to-download {
        padding-bottom: 15px;
        padding-top: 10px !important;
        margin-left: 40px;
        display: block;
    }

    .cancel-not-supported {
        background-color: #fff;
        border: 1px solid #979797;
        color: #303030;
        display: block;
        font-weight: bold;
        height: 48px;
        width: 7.05rem;
        text-transform: uppercase;
    }

    .cancel-not-supported .sapMBtnInner {
        background-color: transparent !important;
        border: none !important;
        border-radius: .2rem;
        color: #303030 !important;
        font-family: var(--font-barlow);
        font-size: var(--font-size-small);
        text-transform: uppercase;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .unsupported-browser-fragment-size {
        width: 100vw !important;
    }

    .contentStyle {
        padding-left: 32px;
        padding-right: 32px;
    }

    .body-copy-not-supported {
        font-family: var(--font-barlow);
        font-size: 16px;
        font-weight: lighter;
        color: #6e6e6e;
        margin-right: 5px;
    }

    .links-to-download {
        padding-bottom: 5px;
        padding-top: 5px !important;
        margin-left: 40px;
        display: block;
    }

    .cancel-not-supported {
        background-color: #fff;
        border: 1px solid #979797;
        color: #303030;
        display: block;
        font-weight: bold;
        height: 48px;
        width: 7.05rem;
        text-transform: uppercase;
    }

    .cancel-not-supported .sapMBtnInner {
        background-color: transparent !important;
        border: none !important;
        border-radius: .2rem;
        color: #303030 !important;
        font-family: var(--font-barlow);
        font-size: var(--font-size-small);
        text-transform: uppercase;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***** [BEGIN] CUSTOM SCREEN SIZE *****/
@media screen and (max-width: 590px) {
    .headerDialog {
        margin: 32px 16px 16px;
    }

    .contentStyle {
        padding-left: 16px;
        padding-right: 16px;
    }

    .dialogFooter {
        margin: 16px;
    }
}

@media screen and (min-width: 768px) {
    .dialog__content-label--export {
        text-align: left !important;
    }
}

/***** [END] CUSTOM SCREEN SIZE *****/

/***************************************************/
/* [END] UNSUPPORTED BROWSER FRAGMENT STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] LANGUAGE AND REGION SELECTOR STYLE
/***************************************************/
.dialog-region-lang-size {
    background: #fff;
    overflow: auto;
    width: auto !important;
    max-height: 55vh;
}

.dialog-region-lang-fragment-size {
    width: calc(100% - 55px);
    max-height: 45vh;
    min-height: 200px;
}

.dialog-region-lang-fragment-margin {
    margin-left: 32px;
    margin-right: 32px;
}

.inner-pannel-region-lang {
    padding-left: 88px !important;
}

.country-container-selection-dialog {
    flex-wrap: wrap;
}

.flag-language-container-selection-dialog {
    margin: 0 0 15px 0;
}

.flag-selection-dialog {
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 50%;
}

.country-name-selection-dialog {
    padding: 6px 0 0 6px;
}

.language-container-selection-dialog {
    padding-left: 26px;
    flex-wrap: wrap;
}

.language-link-selection-dialog {
    padding: 5px 0 5px 10px;
    min-width: 100px;
}

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .dialog-region-lang-fragment-size {
        width: 80vw;
        max-height: 65vh;
        min-width: 64vw;
        min-height: 32vw;
        margin-left: 17px;
        margin-right: 17px;
    }

    .dialog-region-lang-fragment-margin {
        margin-left: 17px;
        margin-right: 17px;
    }

    .dialog-region-lang-link {
        font-family: var(--font-barlow);
        font-size: var(--font-size-small);
        font-weight: lighter;
        color: #6e6e6e !important;
        margin-bottom: 20px !important;
    }

    .flag-language-container-selection-dialog {
        width: 100%;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .dialog-region-lang-size {
        width: 700px !important;
    }

    .dialog-region-lang-fragment-size {
        width: 100%;
        max-height: 45vh;
        margin-left: 32px;
        margin-right: 32px;
    }

    .dialog-region-lang-link {
        font-family: var(--font-barlow);
        font-size: var(--font-size-small);
        font-weight: lighter;
        color: #6e6e6e !important;
        margin-bottom: 20px !important;
    }

    .flag-language-container-selection-dialog {
        width: 50%;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width: 1024px) {
    .dialog-region-lang-size {
        width: 800px !important;
    }

    .dialog-region-lang-link {
        font-family: var(--font-barlow);
        font-size: var(--font-size-small);
        font-weight: lighter;
        color: #6e6e6e !important;
        margin-bottom: 20px !important;
    }

    .flag-language-container-selection-dialog {
        width: 33%;
    }
}

/***** [END] DESKTOP SCREEN SIZE *****/

/***************************************************/
/* [END] LANGUAGE AND REGION SELECTOR STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] FOOTER STYLE
/***************************************************/
.footer-label {
    color: #6e6e6e;
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1.8em;
}

.footer-text1-margin {
    margin-bottom: 16px;
}

.footer-link,
.footer-link:visited {
    color: var(--color-valvolineBlue);
    font-family: var(--font-barlow);
    font-size: 16px;
    line-height: 1.8em;
    width: 100%;
}

.footer-link:hover {
    color: #005c87 !important;
    text-decoration: none !important;
}

.footer-margin-top {
    margin-top: 6px;
}

.footer-trademark-margin-top {
    margin-top: 0 !important;
}

supFooter {
    vertical-align: super !important;
    font-size: 10px !important;
}

.footer-region-lang-selector {
    width: fit-content;
}

.footer-region-lang-selector>span {
    padding-left: 2.25rem !important;
    padding-right: 0 !important;
}

.footer-region-lang-selector>span>img {
    height: 1.75rem !important;
    width: 1.75rem !important;
    border-radius: 50%;
    top: 5px !important;
}

.footer-region-lang-selector>span>span {
    color: var(--color-valvolineBlue);
    font-family: var(--font-barlow);
    font-size: 16px;
}

.footer-region-lang-selector:hover>.sapMBtnHoverable {
    background-color: transparent !important;
    border-color: none !important;
}

.footer-region-lang-selector:focus>.sapMBtnInner {
    outline: none !important;
    border: none !important;
}

/***************************************************/
/* [END] FOOTER STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] HEADER (SIGN IN) STYLE
/***************************************************/
.header-signIn-container-height {
    flex-direction: row;
    height: 55px;
    justify-content: flex-end;
    align-items: center;
}

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .header-signIn-container-height {
        visibility: hidden;
    }

    .header-info-frag-container {
        height: 0;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/
/***************************************************/
/* [END] HEADER (SIGN IN) STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] MAIN PAGE (NAVIGATION) STYLE
/***************************************************/
.navigation-menu-header-position {
    height: 2.5rem;
    position: absolute;
    width: 100%;
    z-index: 3;
}

.navigation-menu-mobile-header-inner {
    width: calc(50% + 44.5px);
}

.navigation-menu-mobile-icon {
    height: 20px;
}

.navigation-menu-side-nav-content {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
}

.navigation-menu-side-nav-item {
    border-bottom: 2px solid #e5e5e5;
    height: 72px;
    padding: 6px 0 0;
    text-align: center;
}

.navigation-menu-side-nav-item-text {
    color: #6e6e6e;
    cursor: pointer;
    display: block;
    font-size: 10px;
    font-family: var(--font-barlow);
    font-weight: 500;
    line-height: 12px;
    margin: 8px 0 12px;
    text-align: center !important;
    text-transform: uppercase;
}

.navigation-menu-side-nav-item-link {
    color: #6e6e6e;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.navigation-menu-side-nav-item-link:hover {
    color: var(--color-valvolineBlue);
    text-decoration: none;
}

.navigation-menu-side-nav-item-link:hover .navigation-menu-side-nav-icon:before {
    color: var(--color-valvolineBlue);
}

.navigation-menu-side-nav-item-link:hover:hover .navigation-menu-side-nav-item-text {
    color: var(--color-valvolineBlue);
}

.navigation-menu-side-nav-item--active .navigation-menu-side-nav-icon:before {
    color: #fff;
    background: var(--color-valvolineBlue);
    border-radius: 50%;
    padding: 7px;
}

.navigation-menu-side-nav-item--active .navigation-menu-side-nav-item-text {
    color: var(--color-valvolineBlue);
}

.navigation-menu-side-nav-item--active .navigation-menu-side-nav-icon:before {
    color: #fff;
    background: var(--color-valvolineBlue);
    border-radius: 50%;
    padding: 7px;
}

.navigation-menu-side-nav-item--active .navigation-menu-side-nav-item-text {
    color: var(--color-valvolineBlue);
}

.navigation-menu-side-nav-item--active .navigation-menu-side-nav-item-link:hover .navigation-menu-side-nav-icon:before {
    color: #fff;
}

html.sap-tablet .navigation-menu-side-nav-item-link:hover {
    color: #6e6e6e;
    text-decoration: none;
}

html.sap-tablet .navigation-menu-side-nav-item-link:hover .navigation-menu-side-nav-icon:before {
    color: #6e6e6e;
}

html.sap-tablet .navigation-menu-side-nav-item--active .navigation-menu-side-nav-icon:before {
    color: #fff;
    background: var(--color-valvolineBlue);
    border-radius: 50%;
    padding: 7px;
}

html.sap-tablet .navigation-menu-side-nav-item--active .navigation-menu-side-nav-item-text {
    color: var(--color-valvolineBlue);
}

html.sap-tablet .navigation-menu-side-nav-item--active .navigation-menu-side-nav-icon:before {
    color: #fff;
    background: var(--color-valvolineBlue);
    border-radius: 50%;
    padding: 7px;
}

html.sap-tablet .navigation-menu-side-nav-item--active .navigation-menu-side-nav-item-text {
    color: var(--color-valvolineBlue);
}

html.sap-tablet .navigation-menu-side-nav-item--active .navigation-menu-side-nav-item-link:hover .navigation-menu-side-nav-icon:before {
    color: #fff;
}

.navigation-menu-side-nav-icon {
    display: block;
    font-size: 28px;
    padding: 8px 0 2px;
    text-align: center;
}

.navigation-menu-side-nav-icon:before {
    color: #6e6e6e;
}

.navigation-menu-icon-valvoline .sapMBtnIcon {
    height: 55px;
    width: auto;
}

.navigation-menu-icon-valvoline {
    margin-bottom: 18px;
    width: 64px;
}

.navigation-menu-nav-back-to-top {
    display: none;
}

.navigation-menu-nav-back-to-top:hover {
    background: rgba(0, 156, 217, 1);
}

.menuMobileList .sapMObjLIcon {
    color: #979797 !important;
}

.menuMobileList .sapMLIB.sapMLIBActive {
    color: var(--color-valvolineBlue) !important;
    background: #efefef !important;
}

.menuMobileList .sapMObjLTitle {
    padding-top: 12px;
}

/***** [BEGIN] CUSTOM SCREEN SIZES *****/
@media screen and (min-width: 768px) {
    .navigation-menu-header-position {
        display: none;
    }

    .navigation-menu-side-nav {
        background: #fff;
        height: 100vh;
        max-width: 70px;
        min-width: 70px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/***** [END] CUSTOM SCREEN SIZES *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .navigation-menu-side-nav {
        display: none;
    }

    .menuMobileList {
        top: 2.5rem;
    }

    .menuMobile {
        border-right-color: rgb(198, 198, 198);
        border-right-width: 2px;
        border-right-style: solid;
        animation: menuSlideEffect;
        animation-duration: .5s;
        background: #fff;
        height: 100% !important;
        width: 75% !important;
        position: fixed;
        z-index: 2;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***** [BEGIN] CUSTOM SCREEN SIZE *****/
@media screen and (min-width: 767.9px) and (max-height: 660px) {
    .navigation-menu-side-nav {
        overflow-y: scroll;
        /* Firefox */
        scrollbar-width: none;
    }

    .navigation-menu-side-nav::-webkit-scrollbar {
        /* WebKit */
        display: none;
    }

    .navigation-menu-side-nav-content {
        margin-bottom: 30px !important;
    }

    .navigation-menu-nav-back-to-top {
        border-radius: 100%;
        display: flex;
        align-items: flex-end;
        width: 20px;
        height: auto;
        position: fixed;
        bottom: 3px;
        margin-left: -26px !important;
        color: #fff;
        cursor: pointer;
        font-size: 20px;
        padding: 2px 0 2px 6px;
        z-index: 4;
        background: rgba(0, 156, 217, 0.5);
    }
}

@media screen and (min-width: 768px) {
    .menuMobile {
        display: none;
    }
}

/***** [END] CUSTOM SCREEN SIZE *****/
/***************************************************/
/* [END] MAIN PAGE (NAVIGATION) STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] HOME PAGE (WELCOME) STYLE
/***************************************************/
.welcome-card-container-MinHeight {
    min-height: 1rem;
}

.welcome-background {
    background: transparent !important;
}

.welcome-signIn-button .sapMBtnInner {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #fff;
    text-shadow: none !important;
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    font-weight: bold;
}

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width:1024px) {
    .welcome-list-anchor>ul>li {
        width: 100% !important;
        margin: 0 !important;
        background: transparent;
        border: none;
    }

    .welcome-background-image {
        background-image: url("../resources/img/SignIn_DASH_Hero_Image.jpg");
        height: 440px !important;
    }

    .welcome-hero-width {
        width: 99% !important;
        height: auto !important;
    }

    .welcome-hero-card {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        vertical-align: middle;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .welcome-signIn-position {
        position: relative !important;
    }

    .welcome-signIn-button {
        background-color: var(--color-valvolineBlue);
        color: white;
        height: 48px;
        min-width: 255px;
        width: auto;
    }

    .welcome-cards-page-container {
        padding: 5px calc(30px - .5%);
        width: 100%;
    }
}

/***** [END] DESKTOP SCREEN SIZE *****/

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
    .welcome-list-anchor>ul {
        margin: 5% !important;
    }

    .welcome-list-anchor>ul>li {
        width: 100% !important;
        margin: 0 !important;
        background: transparent;
        border: none;
    }

    .welcome-list-anchor>ul>li>div:nth-child(1)>div:nth-child(1) {
        margin: 0 !important;
    }

    .welcome-background-image {
        background-image: url("../resources/img/SignIn_DASH_Hero_Image.jpg");
        background-position-x: -75px;
        height: 420px !important;
    }

    .welcome-hero-width {
        width: 100% !important;
        height: auto !important;
    }

    .welcome-signIn-position {
        position: relative !important;
    }

    .welcome-signIn-button {
        background-color: var(--color-valvolineBlue);
        color: white;
        height: 48px;
        min-width: 255px;
        width: auto;
    }

    .welcome-cards-page-container {
        padding: 0.5% calc(6.5% - 5%);
        top: -80px;
        width: 100%;
    }
}

/***** [END] TABLET SCREEN SIZE *****/


/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .welcome-list-anchor>ul {
        justify-content: flex-start !important;
        margin: 2% !important;
    }

    .welcome-list-anchor>ul>li {
        width: 100% !important;
        border: none;
    }

    .welcome-cards-page-container {
        width: 100%;
    }

    .welcome-card-container {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        background-color: white;
        animation: opacityanimation;
        animation-duration: .5s;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***************************************************/
/* [END] HOME PAGE (WELCOME) STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] CONTACT US PAGE STYLE
/***************************************************/
.contactBox {
    width: 100%;
}

/***************************************************/
/* [END] CONTACT US PAGE STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] PRODUCT FINDER LITE (GENERAL) STYLE
/***************************************************/
.productDetailsBottomMargin {
    margin-bottom: 48px;
}

.selectBoxDark .sapMSFF {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid black;
    color: black;
}

.selectBoxDark:not(.sapMBtnDisabled)>.sapMBtnInner.sapMBtnActive .sapMBtnIcon {
    color: #bc1016;
}

.selectBoxDark .sapMSFF:hover {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid black;
    color: black;
}

.selectBoxDark.sapMSltPressed>.sapMSltArrow::before {
    background: transparent;
    color: black;
}

.selectBoxDark.select-export-class {
    background-color: transparent;
    border-bottom: 1px solid #bfbfbf !important;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.selectBoxDark:not(.select-export-class) {
    background-color: transparent;
    border-bottom: 1px solid black !important;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.selectBoxDark>.sapMSltLabel {
    color: black;
    font-size: var(--font-size-small);
    font-family: var(--font-barlow);
    font-weight: lighter;
}

.selectBoxDark.select-export-class>.sapMSltLabel {
    color: black;
    font-size: 16px;
    font-family: var(--font-barlow);
    font-weight: lighter;
}

.selectBoxDark.strong,
b {
    font-weight: normal;
}

.selectBoxDark .sapMSFI[type='search'] {
    font-size: var(--font-size-small);
    color: black;
    font-family: var(--font-barlow);
    font-weight: lighter;
}

.selectBoxDark .sapMSFB {
    background-color: transparent;
    color: #ffffff;
}

.selectBoxDark:not(.select-export-class) .sapMSltArrow {
    background: transparent;
    color: black;
}

.selectBoxDark.select-export-class .sapMSltArrow {
    background: transparent;
    color: #bfbfbf;
}

.selectBoxDark .sapMSFB:hover {
    border-bottom: 1px solid black;
    background-color: transparent;
    color: #ffffff;
}

.selectBoxDark .sapMSltHoverable:not(.sapMSltState):hover {
    border: 0;
    background: transparent;
    border-bottom-style: solid;
    border-width: 1px;
}

.makeLabel>label>span {
    padding-right: 0 !important;
}

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width: 1024px) {
    .productDetailsMargin {
        margin-left: 32px;
        margin-right: 32px;
        margin-top: 30px;
    }

    .selectBoxDark {
        width: 230px !important;
    }
}

/***** [END] DESKTOP SCREEN SIZE *****/

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .productDetailsMargin {
        margin-left: 32px;
        margin-right: 32px;
        margin-top: 32px;
    }

    .selectBoxDark {
        width: 230px !important;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .productDetailsMargin {
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 32px;
    }

    .selectBoxDark {
        width: 85vw !important;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***************************************************/
/* [END] PRODUCT FINDER LITE (GENERAL) STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] PROMOTIONS BANNER FRAGMENT STYLE
/***************************************************/
.promotions-banner__divider {
    border-left: 1px solid #9c9c9c;
    padding-left: 20px;
}

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width: 1024px) {
    .promotions-banner__width {
        width: 50%;
    }

    .promotion-banner__layout {
        flex-direction: row;
        width: 100%;
    }

    .promotions-banner__layout_divider {
        border-left: 1px solid #9c9c9c;
        padding-left: 20px;
    }
}

/***** [END] DESKTOP SCREEN SIZE *****/

/***** [BEGIN] CUSTOM SCREEN SIZE *****/
@media screen and (max-width:1023.9999px) {
    .promotions-banner__width {
        width: 100%;
    }

    .promotions-banner__layout_divider {
        padding-top: 10px;
    }
}

/***** [END] CUSTOM SCREEN SIZE *****/

/***************************************************/
/* [END] PROMOTIONS BANNER FRAGMENT STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] SDS FRAGMENT STYLE
/***************************************************/
.tableHeight {
    height: 100% !important;
}

.sdsDialogHeight {
    margin: 0 32px 0 32px !important;
    height: 15rem !important;
}

.sdsListMarginLeft {
    margin-left: 1rem !important;
}

.iconMargin {
    margin-left: 14px;
    color: var(--color-valvolineBlue);
}

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .sdsDialogHeight {
        margin: 0 16px 0 16px !important;
    }

    .sdsListMarginLeft {
        margin-left: 0.5rem !important;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***************************************************/
/* [END] SDS FRAGMENT STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] PRODUCT FINDER LITE - PRODUCT FINDER PAGE STYLE
/***************************************************/
.dividerLine {
    padding-top: 20px;
    border-bottom: 1px solid #9c9c9c;
}

.dummySearch {
    /* Search Field Dummy */
    height: 0 !important;
    visibility: collapse;
}

.sapMSelectListItem {
    white-space: pre;
}

li[id*='suggestionItemCustom'].sapMSelectListItem {
    white-space: pre-wrap;
    height: auto;
}

li[id*='suggestionItemCustom'] div {
    display: inline-flex;
    line-height: 1.8;
}

.productSearchField::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    font-family: var(--font-barlow) !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.productSearchField:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-family: var(--font-barlow) !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.productSearchField:placeholder-shown {
    font-family: var(--font-barlow) !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.productSearchField,
html.sap-desktop .sapMFocus>.sapMSFF::before {
    border: 0;
}

.productSearchField .sapMSFI[type='search'] {
    font-size: 16px;
    color: #303030;
    font-family: var(--font-barlow);
    font-weight: lighter;
}

.productSearchField .sapMSFB {
    color: #000000 !important;
}

.productSearchField:not(.sapMSFDisabled)>.sapMSFF:hover {
    border-color: #bdbdbd;
}

.productSearchField .sapMSFF {
    box-sizing: border-box;
    height: 2.5rem;
    line-height: 2.375rem;
    border: 1px solid #bdbdbd;
    background: #ffffff;
    vertical-align: top;
    width: 100%;
    position: relative;
    padding-left: .625rem;
    padding-right: 4.75rem;
}

.productSearchField .sapMSFB:hover {
    background-color: transparent;
}

.productSearchField .sapMSFF>.sapMSFB:not(.sapMSFBF):active,
.sapMSFF>.sapMSFB.sapMSFBA {
    background-color: transparent;
}

.productSearchField .sapMSFF>.sapMSFB:not(.sapMSFBF):active,
.sapMSFF>.sapMSFB.sapMSFBA {
    background-color: transparent;
    color: #000000;
}

.sideMenuPressed {
    color: var(--color-valvolineBlue);
}

.iconVehicleProductCategory {
    font-size: 3.5rem;
    color: #b0b0b0;
    cursor: pointer;
}

.productCategoryText {
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    font-family: var(--font-barlow) !important;
    font-size: var(--font-size-small) !important;
    font-weight: lighter !important;
    color: #6e6e6e !important;
}

.button {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: 48px !important;
    margin: auto;
}

.searchHistoryFromStorage {
    background-color: var(--color-valvolineDarkBlue);
    color: white !important;
}

.productCategoryButtonPressed {
    background-color: var(--color-valvolineBlue) !important;
    cursor: pointer !important;
    border: 1px var(--color-valvolineBlue) solid !important;
}

.makeImage>li>img {
    vertical-align: middle;
    background-color: white;
    border-radius: 50%;
    padding: 3px !important;
    margin-right: 16px;
    margin-left: -1px;
}

.productFinderSearchByLPLoginLink > div {
    font-size: 0 !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .makeImage>li>img[src="data:image/png;base64,"] {
        padding: 13px !important;
        visibility: hidden;
    }
}

_::-webkit-full-page-media,
_:future,
:root .makeImage>li>img[src="data:image/png;base64,"] {
    padding: 4px !important;
    margin-left: -3px;
    visibility: hidden;
}

@media screen {
    @supports (-moz-appearance: none) {
        .makeImage>li>img[src="data:image/png;base64,"] {
            padding: 1px !important;
            visibility: hidden;
        }
    }
}

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .productCategoryButton {
        height: auto !important;
        width: calc(48% - 1px);
        border: 1px #b0b0b0 solid;
        margin: 1%;
        background-color: white;
        cursor: pointer;
        white-space: normal;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .productCategoryButton {
       height: auto !important;
        width: 100%;
        border: 1px #b0b0b0 solid;
        margin-top: .25rem;
        margin-bottom: .25rem;
        background-color: white;
        cursor: pointer;
        white-space: normal;
    }

    .searchHistoryFromStorage {
        background-color: var(--color-valvolineDarkBlue);
        color: white !important;
        white-space: pre-wrap;
        height: auto;
    }

    .products__buttons .sapMFlexItem {
        width: 100%;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***** [BEGIN] CUSTOM SCREEN SIZE *****/
@media screen and (min-width: 1024px) and (max-width: 1080px) {
    .productCategoryButton {
        height: auto !important;
        width: calc(32% - 1px);
        border: 1px #b0b0b0 solid;
        margin: 0.65%;
        background-color: white;
        cursor: pointer;
        white-space: normal;
    }
}

@media screen and (min-width: 1080px) {
    .productCategoryButton {
        height: auto !important;
        width: calc(24% - 1px);
        border: 1px #b0b0b0 solid;
        margin: .5%;
        background-color: white;
        cursor: pointer;
        white-space: normal;
    }
}

@media screen and (min-width: 768px) {
    .button--apply-prodfinder {
        width: 230px;
    }

    .products__buttons {
        justify-content: flex-end;
    }
}

/***** [END] CUSTOM SCREEN SIZE *****/

/***************************************************/
/* [END] PRODUCT FINDER LITE - PRODUCT FINDER PAGE STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] PRODUCT FINDER LITE - PRODUCT CATEGORY PAGE STYLE
/***************************************************/
.printButton-height {
    height: 21px;
}

.print-button-container {
    justify-content: space-between;
}

.positionPDF {
    position: absolute;
}

.positionPDF>span {
    padding-left: 0 !important;
}

.pdf--Button {
    margin-top: -1.7rem;
}

.pdf--Button .sapMBtnInner {
    background-color: transparent;
    color: var(--color-valvolineBlue);
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
}

.pdf--Button>span {
    border: none;
}

.pdf--Button .sapMBtnIcon {
    color: var(--color-valvolineBlue);
}

.pdf--Button:hover span {
    background-color: transparent !important;
    color: #979797 !important;
    border: transparent;
}

.pdf--Button .sapMBtnIcon {
    text-align: right;
}

.pdf--Button-fix .sapMBtnInner.sapMBtnText.sapMBtnIconLast {
    padding-right: 1.9rem;
}

.switchGraph>div:nth-child(2)>div:nth-child(1) {
    margin-top: -6px;
}

.switchGraph>div:nth-child(1) {
    margin-top: 5px;
    width: 140px;
    margin-right: 3px;
}

.switchGraph>div:nth-child(1)>span {
    width: 100%;
}

.switchGraph>div:nth-child(2)>div:nth-child(1)>div:nth-child(1) {
    height: 1.5rem;
    width: 3.6rem;
}

.switchGraph>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3) {
    left: 2.1rem;
}

.noHoverFooter {
    color: var(--color-valvolineBlue) !important;
    text-decoration: none !important;
}

.productCategoryShowGraphs {
    font-size: 16px;
    font-family: var(--font-barlow) !important;
    font-weight: lighter !important;
    color: #6e6e6e !important;
    text-align: right !important;
}

.productCarImage>div {
    margin: auto;
    text-align: center;
}

.carImagePadding {
    padding-left: .5rem;
    padding-right: .5rem;
}

.resizeCarImage {
    height: auto;
    max-width: 100%;
    width: 311px !important;
}

.selectBoxHideArrow>span {
    display: none;
}

.selectBoxRemovePadding>label {
    padding-right: 0 !important;
}

.vpsMarginCategory {
    margin-top: 18px;
}

.add-custom-component-button {
    height: 2rem;
    overflow: visible;
}

.add-custom-component-button span {
    background-color: transparent !important;
    color: var(--color-valvolineBlue) !important;
    border: transparent;
}

.add-custom-component-button:hover:not(.sapMBtnDisabled) span,
.add-custom-component-button:hover:not(.sapMBtnDisabled) span bdi {
    background-color: transparent !important;
    color: #979797 !important;
    border: transparent;
}

.add-custom-component-button>span>span:nth-child(1) {
    font-size: var(--font-size-small) !important;
    line-height: 1.8rem;
}

.add-custom-component-adjust-button {
    margin-left: auto !important;
}

.prodf-go-to-products-button>span>span:first-child {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.flexCont {
    flex-wrap: wrap;
}

.products-category-buttons-wrap {
    flex-wrap: wrap;
}

.button--prodfinder:active {
    background: #0080b2;
}

.button--prodfinder {
    background-color: var(--color-valvolineBlue);
    border-color: var(--color-valvolineBlue);
    color: white;
    display: block;
    height: 48px;
    margin: 10px auto 0;
    width: 100%;
}

.button--prodfinder .sapMBtnInner {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #fff;
    text-shadow: none !important;
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    font-weight: bold;
}

.productsCategoryContainer {
    min-height: 30px;
}

.productFinderCategoryList>ul>li {
    border: 0;
    pointer-events: none;
}

.productsCardContainerBorder {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: #e5e5e5;
}

.productCategoryNoProductsMessageMargin {
    margin-top: 4rem !important;
}

.productCategoryMargin {
    margin-top: 32px;
}

.productFinderProductList>ul {
    display: flex;
    flex-wrap: wrap;
}

.product_finder_list-enable_click {
    pointer-events: auto;
}

.productCategoryFileNameLink {
    white-space: normal;
}

.productFinderUsesList>ul>li {
    border: 0;
}

.colorLinkHover {
    color: var(--color-valvolineBlue) !important;
}

.colorLinkHover.sapMLnk:hover {
    color: var(--color-valvolineBlue) !important;
}

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width: 1024px) {
    .print-button-anchor .sapUiLocalBusyIndicator {
        background-color: rgba(239, 239, 239, 0.4) !important;
    }

    .prod-category-switch-graph {
        margin-top: -1.2rem;
    }

    .productCategoryCarImageWidth {
        width: 50%;
    }

    .productCategoryWidth {
        width: 175px !important;
    }

    .productCategoryNewWidth {
        width: 400px !important;
    }

    .vps_buttons_category_desktop {
        margin-right: 30px;
    }

    .add-custom-component-button {
        margin-left: 50%;
    }

    .add-custom-component-adjust-button>span {
        padding-right: 0 !important;
    }

    .vps__buttons_desktop_end {
        justify-content: flex-end;
    }

    .productFinderProductList>ul>li {
        width: 24%;
        border: 0;
        margin: .5%;
        align-items: flex-start;
    }

    .productTilePictureFrame {
        height: 200px;
        margin-bottom: 16px;
        margin-top: 16px;
        justify-content: center;
    }

    .productTilePicture {
        max-height: 200px;
        width: auto !important;
    }

    .productShortTextContainer {
        height: auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/***** [END] DESKTOP SCREEN SIZE *****/

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width:768px) and (max-width:1023.9999px) {
    .printButton-height {
        height: 19px;
    }

    .pdf--Button {
        margin-top: -2.7rem;
    }

    .pdf-anchor {
        margin-top: -4.4vw !important;
    }

    .switchGraph>div:nth-child(1) {
        margin-top: 1px !important;
        width: 85px !important;
    }

    .switchGraph>div:nth-child(2)>div:nth-child(1) {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .prod-category-switch-graph {
        margin-top: -1.6rem;
    }

    .productCategoryShowGraphs {
        font-size: var(--font-size-small) !important;
        font-family: var(--font-barlow) !important;
        font-weight: lighter !important;
        color: #6e6e6e !important;
        text-align: right !important;
    }

    .productCategoryCarImageWidth {
        width: 50%;
    }

    .productCategoryWidth {
        width: 250px !important;
    }

    .productCategoryNewWidth {
        width: 250px !important;
    }

    .vps_buttons_category {
        margin-right: 30px;
    }

    .vps_buttons_search {
        justify-content: flex-end;
    }

    .add-custom-component-button-container {
        align-items: flex-end;
    }

    .custom-component-selection-container {
        margin-top: 25px;
    }

    .products-category-buttons-container {
        justify-content: flex-end;
        width: 100%;
        margin: 0 0 0 auto;
    }

    .vps__buttons {
        justify-content: space-between;
        width: auto;
        min-width: 250px;
    }

    .productFinderProductList>ul>li {
        width: 49%;
        border: 0;
        margin: .5%;
        align-items: flex-start;
    }

    .productTilePictureFrame {
        height: 200px;
        margin-bottom: 15px;
        margin-top: 15px;
        justify-content: center;
    }

    .productTilePicture {
        max-height: 200px;
        width: auto !important;
    }

    .productShortTextContainer {
        height: auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .printButton-height {
        height: 40px;
    }

    .pdf--Button {
        margin-top: -0.5rem;
    }

    .switchGraph>div:nth-child(1) {
        margin-top: 0px !important;
        width: 95px !important;
    }

    .switchGraph>div:nth-child(2)>div:nth-child(1) {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .productCategoryShowGraphs {
        font-size: var(--font-size-small) !important;
    }

    .productCategoryCarImageWidth {
        width: 100%;
    }

    .productSelectBoxContainer {
        justify-content: center;
    }

    .add-custom-component-button-container {
        align-items: flex-end;
    }

    .add-custom-component-button>span>span:nth-child(2) {
        font-family: var(--font-barlow) !important;
        font-size: var(--font-size-small) !important;
        line-height: 2rem;
    }

    .add-custom-component-first-button>span {
        padding-right: 0.5rem !important;
    }

    .custom-component-selection-container {
        margin-top: 25px;
        padding: 0 0.5rem;
    }

    .custom-component-selection-container>div>div {
        max-width: 100% !important;
    }

    .add-custom-component-adjust-button {
        margin-right: -0.75rem;
    }

    .flexCont {
        flex-wrap: wrap;
    }

    .products-category-buttons-container {
        justify-content: flex-end;
        width: 100%;
        margin: 0 0 0 auto;
    }

    .vps__buttons_mobile .sapMBtnInner.sapMBtnText {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .vps__buttons_mobile {
        width: 100%;
        margin: 10px 0 0 auto;
    }

    .productFinderProductList>ul>li {
        width: 100%;
        border: 0;
    }

    .productTilePictureFrame {
        max-width: initial !important;
        height: 200px;
        margin-bottom: 15px;
        margin-top: 15px;
        justify-content: center;
    }

    .productTilePicture {
        max-height: 200px;
        width: auto;
    }

    .productShortTextContainer {
        height: auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***** [BEGIN] CUSTOM SCREEN SIZE *****/
@media screen and (min-width: 768px) {
    .add-custom-component-button>span>span:nth-child(2) {
        font-family: var(--font-barlow) !important;
        font-size: 16px !important;
        line-height: 2rem;
    }

    .button--prodfinder {
        min-width: 250px;
        width: auto;
    }

    .card-container__product-finder-fix {
        width: 99% !important;
    }
}

@media screen and (min-width:768px) and (max-width:920px) {
    .vps__buttons {
        width: 100% !important;
    }
}

/***** [END] CUSTOM SCREEN SIZE *****/
/***************************************************/
/* [BEGIN] PRODUCT FINDER LITE - PRODUCT CATEGORY PAGE STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] PRODUCT FINDER LITE - PRODUCT DETAILS PAGE STYLE
/***************************************************/

.pageTitle--products-details {
    margin-bottom: 20px;
}

.productsDetailsInfo {
    display: list-item;
    margin-bottom: 5px;
    margin-left: 15px;
}

.marginPiSheet {
    margin-left: 5%;
    margin-top: 3px;
}

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

.productDetailsInfoTopBottomLine {
    border-bottom: 1px solid #9c9c9c;
    border-top: 1px solid #9c9c9c;
}

.productDetailsIcon {
    color: #979797 !important;
}

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .piSheetLink {
        white-space: nowrap;
    }

    .marginPiandSDSSheetTablet {
        margin-right: 520px;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .marginPiSheet {
        margin-left: 5%;
    }

    .marginPiandSDSSheetMobile {
        margin-right: 320px;
    }

    .piSheetLinkMobile {
        white-space: nowrap !important;
        margin-left: 5px;
    }

    .flexHeader {
        flex-wrap: wrap !important;
        margin-bottom: 20px;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/

/***************************************************/
/* [BEGIN] PRODUCT FINDER LITE - PRODUCT DETAILS PAGE STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] PRODUCT FINDER LITE - OEM PAGE STYLE
/***************************************************/
.oemCarDescriptionLine {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #9c9c9c;
}

.rowOEM {
    padding-top: .50rem;
    padding-bottom: .50rem;
    border-bottom-style: solid;
    border-bottom-width: .1px;
    border-bottom-color: #aaa8a8;
}

.oemTableRecommendationContainer {
    margin-bottom: .50rem;
}

/***** [BEGIN] DESKTOP SCREEN SIZE *****/
@media screen and (min-width: 1024px) {
    .categoryTextContainerOEM {
        width: 20rem;
        margin-right: .5rem;
    }

    .useTextContainerOEM {
        width: 30rem;
        margin-right: .5rem;
    }
}

/***** [END] DESKTOP SCREEN SIZE *****/

/***** [BEGIN] TABLET SCREEN SIZE *****/
@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .categoryTextContainerOEM {
        width: 15rem;
        margin-right: .5rem;
    }

    .useTextContainerOEM {
        width: 15rem;
        margin-right: .5rem;
    }
}

/***** [END] TABLET SCREEN SIZE *****/

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .oemCarDescriptionLine {
        border-bottom: 0;
    }

    .rowOEM {
        flex-wrap: wrap;
    }

    .categoryTextContainerOEM {
        width: 50%;
        margin-right: 5%;
    }

    .useTextContainerOEM {
        width: 100%;
        margin-right: 0;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/
/***************************************************/
/* [BEGIN] PRODUCT FINDER LITE - OEM PAGE STYLE
/***************************************************/


/***************************************************/
/* [BEGIN] PRODUCT FINDER LITE - VPS PAGE STYLE
/***************************************************/
.pageDescription {
    margin-bottom: 2.5rem;
    width: 100%;
}

.bulletPoint {
    margin-bottom: 0;
}

.tableTitle {
    text-align: left;
    color: var(--color-valvolineBlue);
    font-weight: bold;
    font-size: 1rem;
}

.noBorderVPS .sapMPanelWrappingDiv {
    border-bottom: none !important;
}

.noBorderBottomVPS .sapMPanelContent {
    border-bottom: none !important;
}

.vpsMargin {
    margin-left: 5px;
    margin-right: 5px;
}

.breakvps {
    display: contents;
}

/***** [BEGIN] MOBILE SCREEN SIZE *****/
@media screen and (max-width: 767.9px) {
    .columnsWidthForIphone>table>thead>tr>th:nth-child(2) {
        width: 10% !important;
    }

    .columnsWidthForIphone>table>thead>tr>th:nth-child(3) {
        width: 9% !important;
    }

    .columnsWidthForIphone>table>thead>tr>th:nth-child(4) {
        width: 7% !important;
    }

    .columnsWidthForIphone>table>thead>tr>th:nth-child(5) {
        width: 7% !important;
    }

    .columnsWidthForIphone>table>thead>tr>th:nth-child(6) {
        width: 5% !important;
    }
}

/***** [END] MOBILE SCREEN SIZE *****/


/***** [BEGIN] CUSTOM SCREEN SIZE *****/
@media screen and (min-width:1253px) {

    _:-ms-fullscreen,
    :root .vpsServicesCoveredTable {
        padding-top: 1rem;
        max-width: 1010px;
    }
}

@media screen and (min-width:1023px) and (max-width:1253px) {

    _:-ms-fullscreen,
    :root .vpsServicesCoveredTable {
        padding-top: 1rem;
        max-width: 800px;
    }
}

@media screen and (min-width:768px) and (max-width:1023px) {

    _:-ms-fullscreen,
    :root .vpsServicesCoveredTable {
        padding-top: 1rem;
        max-width: 580px;
    }
}

@media screen and (min-width:300px) and (max-width:768px) {

    _:-ms-fullscreen,
    :root .vpsServicesCoveredTable {
        padding-top: 1rem;
        max-width: 500px;
    }
}

.vpsServicesCoveredTable {
    padding-top: 1rem;
}

.vpsServicesCoveredTable .sapMListTblCell {
    padding: .5rem .3rem !important;
}

.vpsServicesCoveredTable .sapMListTbl th {
    background: transparent;
}

.vpsServicesCoveredTable .sapMListTblRow {
    height: 0;
}

/***** [END] CUSTOM SCREEN SIZE *****/


/***************************************************/
/* [END] PRODUCT FINDER LITE - VPS PAGE STYLE
/***************************************************/

.sapUiTableCtrlEmpty{
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    color: var(--color-text-headerGray);
}