/*************************************************************************************
The code bellow ajust the CSS to the diferenct divece screen resolutions;
1 - For devices with MORE THAN 1024-... PX - WIDE
2 - For devices with SIZE FROM 768 PX to 1023 PX - MEDIUM
3 - For devices with LESS THEN 767 PX - NARROW (Official Support is from 320px - 767px)

**************************************************************************************/


/*
* VIEW: DASH
* VIEW ID: ALL APP
* DESCPRIPTION: Font Roboto
*/

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto/Roboto-Light.eot");
    src: url("fonts/Roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto/Roboto-Light.woff2") format("woff2"), url("fonts/Roboto/Roboto-Light.woff") format("woff"), url("fonts/Roboto/Roboto-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto/Roboto-Regular.eot");
    src: url("fonts/Roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto/Roboto-Regular.woff2") format("woff2"), url("fonts/Roboto/Roboto-Regular.woff") format("woff"), url("fonts/Roboto/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto/Roboto-Medium.woff2") format("woff2"), url("fonts/Roboto/Roboto-Medium.woff") format("woff"), url("fonts/Roboto/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto/Roboto-Bold.eot");
    src: url("fonts/Roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto/Roboto-Bold.woff2") format("woff2"), url("fonts/Roboto/Roboto-Bold.woff") format("woff"), url("fonts/Roboto/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: 'Roboto !important';
}


/* General PRINT STYLES */

@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: auto !important;
        height: auto !important;
    }

    /* reset body */
    body {
        margin: 0 !important;
        padding: 0 !important;
        float: none;
        color: #000;
    }

    /* helper class to allow selective hiding elements from printing  */
    .notPrintable {
        display: none !important;
    }

    .force-printing {
        display: flex !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;
    }

    .print-display-flex {
        display: flex !important;
    }

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

    .reusable-footer-section {
        width: 25% !important;
    }

    .reusable-header-container {
        padding: 2rem;
    }

    .reusable-header-filter-container {
        padding-left: 2rem;
    }

    .reusable-header-filter-container {
        display: flex !important;
    }

    .reusable-header-filter-container .sapMComboBoxArrow {
        display: none !important;
    }

    .reusable-header-filter-container .sapMComboBoxInner {
        padding-left: 0;
        padding-right: 0;
    }
}


/* END PRINT STYLES */


/*SAP Readonly input color overrride*/

.sapMInputBaseReadonlyWrapper .sapMInputBaseInner {
    background: rgba(202, 202, 202, .5) !important;
}

@media screen and (max-width: 767.9px) {
    .hidden-in-mobile {
        display: none;
    }
}

@media screen and (min-width:768px) {
    .show-only-in-mobile {
        display: none;
    }
}


/* END */


/*
* VIEW: DASH LOADING SCREEN
* VIEW ID: N/A
* DESCPRIPTION: DASH LOADING SCREEN
*/

#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 */


/******************************************************************************************
                           Start of Overwrite to SAPUI5 classes
This should be avoided. Exception is for the layout of elements that are supposed to have
the same aspect on all DASH. If the change is specific pleas use a CSS anchor class for 
the overwrite!
******************************************************************************************/


/* All comboBoxes in DASH should be transparent instead of white and should only have a 
border in the bottom*/

.sapMComboBox>.sapMInputBaseContentWrapper {
    background: transparent !important;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #bfbfbf !important;
}

.sapMComboBox>.sapMInputBaseContentWrapper>.sapMComboBoxInner {
    font-size: 16px;
    font-family: Roboto;
    font-weight: lighter;
}

.sapMComboBox>.sapMInputBaseContentWrapper>.sapMInputBaseIconContainer>.sapMInputBaseIcon {
    background: transparent !important;
    color: rgb(191, 191, 191);
}

.sapMInputBase>.sapMInputBaseContentWrapper {
    border: none;
}

.sapMFocus .sapMInputBaseContentWrapper {
    outline: 0 none transparent !important;
    outline-offset: 0 !important;
}


/*All tables should have their header aligned to the top*/

.sapMListTblHeader>th {
    vertical-align: top !important;
}


/*All charts should not have a dotted border when selected*/

.sapMFocus.ui5-viz-controls-viz-frame .v-info::before {
    border: 0 !important;
}


/* All select boxes should a tranparent background */

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


/* All headers for UI tables should be white with no hover effects */

.sapUiTableHeaderCell:not(.sapUiTableRowActionHeaderCell):hover {
    background-color: #ffffff !important;
}


/******************************************************************************************
                           End of Overwrite to SAPUI5 classes
This should be avoided. Exception is for the layout of elements that are supposed to have
the same aspect on all DASH. If the change is specific pleas use a CSS anchor class for 
the overwrite!
******************************************************************************************/


/******************************************************************************************
							DASH immutable Classes
This classes are a part of DASH base structure, and are reused trough the diferent pages. 
Any change to this classes will impact multiple DASH pages!
The name of all reusable classes must start with the tag reusable-"class-name"
******************************************************************************************/


/*********************************************
Utils
*********************************************/

.reusable-cursor-pointer-modifier {
    cursor: pointer;
}

.reusable-hide {
    display: none;
}


/*********************************************
Fonts and colors
*********************************************/

.reusable-color-white {
    color: white !important;
}

.reusable-color-header-gray {
    color: #303030 !important;
}

.reusable-font-page-title-h1 {
    font-family: 'Roboto';
    font-size: 32px;
    font-weight: bold;
}

@media screen and (min-width: 768px) and (max-width: 1023.9px) {
    .reusable-font-page-title-h1 {
        font-size: 28px !important;
        /*TODO:STYLE GUIDE SHOULD BE 20PX!! */
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-font-page-title-h1 {
        font-size: 28px !important;
        padding-bottom: 10px;
        /*TODO:STYLE GUIDE SHOULD BE 20PX!! */
    }
}

.reusable-font-page-subtitle-h2 {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: lighter;
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .reusable-font-page-subtitle-h2 {
        font-size: 16px !important;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-font-page-subtitle-h2 {
        font-size: 20px !important;
        /*TODO:STYLE GUIDE SHOULD BE 16PX!! */
    }
}

.reusable-font-info-group-header-h3-normal {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: normal;
}

.reusable-font-info-group-header-h3-lighter {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: lighter;
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .reusable-font-info-group-header-h3-normal {
        font-size: 14px !important;
    }

    .reusable-font-info-group-header-h3-lighter {
        font-size: 14px !important;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-font-info-group-header-h3-normal {
        font-size: 14px !important;
    }

    .reusable-font-info-group-header-h3-lighter {
        font-size: 14px !important;
    }
}

.reusable_color_active {
    color: #009cd9 !important;
}


/*********************************/


/* Header                        */


/*********************************/

.reusable-header-container {
    background-image: url("../resources/headers/header.png");
    background-color: #2870a2;
    background-size: 100% 100%;
}

.reusable-header-width {
    width: 100%;
}

@media screen and (max-width: 767.9px) {
    .reusable-header-width {
        height: 100%;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-header-container {
        margin-top: 2.5rem;
        background-size: auto 100%;
        padding: 0 2% 0 2%;
        height: 150px;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-header-container-no-menu-fix {
        margin-top: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .reusable-header-container {
        margin-top: 0;
        padding: 0 calc(6.5% - .5%) 0 calc(6.5% - .5%);
        height: 150px;
    }
}

@media screen and (min-width:1024px) {
    .reusable-header-container {
        margin-top: 0;
        height: 150px;
        padding: 0 30px 0 30px;
    }
}

.reusable-header-filter-container {
    background: #085e8f;
    height: 40px;
    min-width: 100%;
    width: 100%;
}

@media screen and (min-width:1024px) {
    .reusable-header-filter-container {
        padding: 0 30px;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-header-filter-container {
        padding: 0 2% 0 2%;
        width: 100% !important;
    }

    .reusable-quick-cart-margin {
        top: 0 !important;
        margin-top: 0 !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9px) {
    .reusable-header-filter-container {
        width: 590px !important;
        padding: 0 calc(6.5% - .5%);
    }
}

.reusable-header-filter-combobox {
    background-color: transparent;
    margin: 0 .5rem .5rem;
    width: auto !important;
    padding-top: 10px;
    height: 2rem !important;
    margin-left: 5px !important;
}

.reusable-header-filter-combobox>.sapMInputBaseContentWrapper {
    background: transparent !important;
    border: none;
    border-bottom: solid 1px #ffffff !important;
}

.reusable-header-filter-combobox>.sapMInputBaseContentWrapper>.sapMComboBoxInner {
    color: #ffffff;
    font-size: 16px;
    font-family: Roboto;
    font-weight: lighter;
}

.reusable-header-filter-combobox>.sapMInputBaseContentWrapper>.sapMInputBaseIconContainer>.sapMInputBaseIcon {
    background: transparent !important;
    color: #ffffff !important;
    margin-top: -10px;
}

.reusable-header-filter-select {
    background-color: transparent;
    border-bottom: 1px solid #e5e5e5;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin: .5rem;
}

.reusable-header-filter-select:hover {
    background: transparent !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.reusable-header-filter-select>.sapMSltLabel {
    color: #e5e5e5;
    font-size: 20px;
    font-family: 'Roboto';
    font-weight: lighter;
}

@media screen and (min-width:1024px) {
    .reusable-header-filter-select {
        width: 12.5rem !important;
    }

    .reusable-header-navback-margin {
        height: 25px !important;
        margin-top: 15px;
    }

    .reusable-quick-cart-margin {
        margin-top: 15px;
    }
}

@media screen and (min-width:768px) and (max-width:1023px) {
    .reusable-header-filter-select {
        width: 13.8rem !important;
    }

    .reusable-header-navback-margin {
        height: 25px !important;
        margin-top: 15px;
    }

    .reusable-quick-cart-margin {
        margin-top: 15px;
    }
}

.reusable-header-navback-container {
    align-items: center;
    height: 35px;
}

.reusable-header-navback-arrow .sapMBtnDefault {
    background-color: transparent;
    border: 0;
    color: white;
    font-size: 20px;
    font-family: 'Roboto';
    font-weight: lighter;
    height: auto;
}

.reusable-header-navback-arrow .sapMBtnHoverable:hover {
    background-color: transparent;
}

.reusable-header-navback-arrow .sapMBtnIcon {
    font-size: 1.375rem;
    line-height: 2.375rem;
    width: 2.375rem;
    text-align: left;
    margin: 0;
    padding: 0;
    vertical-align: top;
    max-height: 2.375rem;
    color: white;
}

.reusable-header-information-position-fix {
    top: -20px !important;
}

@media screen and (max-width: 767.9px) {
    .reusable-header-information-position-fix {
        top: 0 !important;
    }
}

.reusable-header-navback-text {
    text-decoration: none !important;
    display: inline;
}


/*********************************/


/* Body/Page                     */


/*********************************/

@media screen and (min-width:1024px) {
    .reusable-dash-message-container {
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .reusable-dash-message-container {
        padding-left: 6.5%;
        padding-right: 6.5%;
        width: 100%;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-dash-message-container {
        padding-left: 2%;
        padding-right: 2%;
        width: 100%;
    }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .reusable-dash-message-container>div>div {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-message-container-to-toast {
        left: 0;
        top: 0;
        position: fixed;
        width: 100% !important;
        z-index: 99;
        box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2);
        overflow: hidden;
    }
}

@media screen and (max-width: 1280px) and (min-width: 768px) {
    .reusable-message-container-to-toast {
        top: 0;
        position: fixed;
        z-index: 99;
        box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2);
        overflow: hidden;
    }
}

@media screen and (min-width: 1280px) {
    .reusable-message-container-to-toast {
        top: 0;
        position: fixed;
        width: 1267px !important;
        z-index: 99;
        box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2);
        overflow: hidden;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-message-container-to-toast-no-menu-fix {
        box-shadow: 0 0;
        top: 0;
    }
}

@media screen and (max-width: 1280px) and (min-width: 768px) {
    .reusable-message-container-to-toast-no-menu-fix {
        box-shadow: 0 0;
        left: 0;
        width: 100% !important;
    }
}

@media screen and (min-width: 1280px) {
    .reusable-message-container-to-toast-no-menu-fix {
        box-shadow: 0 0;
        width: 1280px !important;
        margin-left: -640px !important;
    }
}

@media screen and (min-width:1024px) {
    .reusable-cards-page-container {
        padding: 30px calc(30px - .5%);
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .reusable-cards-page-container {
        padding: 6.5% calc(6.5% - 5%);
        width: 100%;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-cards-page-container {
        width: 100%;
    }
}

@media screen and (min-width:1024px) {
    .reusable-page-container {
        padding: 30px;
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9px) {
    .reusable-page-container {
        padding: 6.5%;
        width: 100%;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-page-container {
        padding: 2%;
        width: 100%;
    }
}

@media screen and (min-width:1024px) {
    .reusable-white-page-container {
        padding: 30px;
        width: 100%;
        background: white;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9px) {
    .reusable-white-page-container {
        padding: 6.5%;
        background: white;
        width: 100%;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-white-page-container {
        padding: 2%;
        background: white;
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .reusable-cards-container-flex-div-centering {
        justify-content: flex-start;
    }
}

.reusable-hero-card-container {
    width: 100%;
    height: 464px;
    background-color: white;
    margin: .5%;
    animation: opacityanimation;
    animation-duration: .3s;
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .reusable-hero-card-container {
        width: 100%;
        margin: 5%;
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-hero-card-container {
        width: 98%;
        height: 28rem;
        background-color: white;
        margin: 5px;
        animation: opacityanimation;
        animation-duration: .5s;
    }
}

.reusable-ui-table>div:nth-child(2)>div:nth-child(1)>div:nth-child(2) tr {
    line-height: 2;
}

.reusable-ui-table>div:nth-child(2)>div:nth-child(1)>div:nth-child(4) tr {
    line-height: 3;
}

.reusable-messagePage .sapMMessagePageContentWrapper {
    margin-top: 1rem;
}

.reusable-messagePage .sapMMessagePageIcon::before {
    color: rgba(135, 135, 135, 1) !important;
}

.reusable-messagePage .sapMMessagePageMainText {
    font-family: Roboto;
    font-size: 22px;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .reusable-messagePage .sapMMessagePageContentWrapper {
        vertical-align: top;
        height: 250px;
    }
}


/*********************************/


/* Footer                        */


/*********************************/

.reusable-footer-container {
    flex-wrap: wrap;
    padding: 50px 30px 30px 30px;
    width: 100%;
}


/* Scroll to top Button*/


/*Edge fix, button is not selectabe if outside centralBox*/

@media screen and (min-width: 1280px) {

    _:-ms-lang(x),
    _:-webkit-full-screen,
    .back2top {
        right: 50% !important;
        margin-right: -580px;
    }

    _:-ms-lang(x),
    _:-webkit-full-screen,
    .reusable-howtovideos {
        right: 50% !important;
        margin-right: -580px;
    }
}


/* Fix for firefox button strech*/

@-moz-document url-prefix() {
    .back2top {
        line-height: 30px;
    }

    .reusable-howtovideos {
        line-height: 30px;
    }

    .reusable-howtovideos {
        padding: 10px 10px 10px 10px !important;
    }
}

.back2top {
    background: rgba(0, 156, 217, 0.5);
    border-radius: 50px;
    display: flex;
    align-items: flex-end;
    width: 30px;
    height: auto;
    position: fixed;
    bottom: 20px;
    right: 60px;
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    padding: 10px;
    z-index: 4;
}

.back2top:hover {
    background: rgba(0, 156, 217, 1);
}

@media screen and (min-width: 767px) and (max-width: 1023.9999px) {
    .back2top {
        background: rgba(0, 156, 217, 0.5);
        border-radius: 50px;
        display: flex;
        align-items: flex-end;
        width: 30px;
        position: fixed;
        bottom: 20px;
        right: 60px;
        color: #fff;
        cursor: pointer;
        font-size: 30px;
        padding-left: 10px;
    }

    .back2top:hover {
        background: rgba(0, 156, 217, 1);
    }
}

@media screen and (max-width: 767.9px) {
    .back2top {
        background: rgba(0, 156, 217, 0.5);
        border-radius: 50px;
        display: flex;
        align-items: flex-end;
        width: 30px;
        position: fixed;
        bottom: 20px;
        right: 60px;
        color: #fff;
        cursor: pointer;
        font-size: 30px;
        padding-left: 10px;
    }

    .back2top:hover {
        background: rgba(0, 156, 217, 1);
    }
}


/* Fix for firefox button strech*/

@-moz-document url-prefix() {
    .back2top {
        line-height: 30px;
    }

    .reusable-howtovideos {
        line-height: 30px;
    }

    .reusable-howtovideos {
        padding: 10px 10px 10px 10px !important;
    }
}

.back2top {
    background: rgba(0, 156, 217, 0.5);
    border-radius: 50px;
    display: flex;
    align-items: flex-end;
    width: 30px;
    height: auto;
    position: fixed;
    bottom: 20px;
    right: 60px;
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    padding: 10px;
    z-index: 4;
}


/* Fix for firefox button strech*/

@-moz-document url-prefix() {
    .back2top {
        line-height: 30px;
    }

    .reusable-howtovideos {
        line-height: 30px;
    }

    .reusable-howtovideos {
        padding: 10px 10px 10px 10px !important;
    }
}

.back2top {
    background: rgba(0, 156, 217, 0.5);
    border-radius: 50px;
    display: flex;
    align-items: flex-end;
    width: 30px;
    height: auto;
    position: fixed;
    bottom: 20px;
    right: 60px;
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    padding: 10px;
    z-index: 4;
}


/* Fix for firefox button strech*/

@-moz-document url-prefix() {
    .back2top {
        line-height: 30px;
    }

    .reusable-howtovideos {
        line-height: 30px;
    }

    .reusable-howtovideos {
        padding: 10px 10px 10px 10px !important;
    }
}


/* if two buttons appear at same time*/

.reusable-howtovideo-button-bottom {}

@media screen and (max-width:1023px) {
    .reusable-margin-blank-bottom {
        margin-bottom: 130px;
    }
}


/* Dialog howToVideos buttons */

@media screen and (max-width: 1023px) and (min-width: 768px) {
    .valvolineButtonDialogCancel {
        background-color: #fff;
        border: 1px solid #979797;
        color: #303030;
        display: block;
        font-weight: bold;
        height: 48px;
        width: 7.05rem;
        text-transform: uppercase;
    }
}

.reusable-valvolineButtonDialogMoreInfo {
    background-color: #009cd9;
    border-color: #009cd9;
    color: white;
    font-weight: bold;
    height: 48px;
    width: 10rem;
    display: block;
    text-transform: uppercase;
}

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

.reusable-valvolineButtonDialogMoreInfo:active {
    /* Active Button Color */
    background: #0080b2;
}

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

@media screen and (max-width: 767.9px) {
    .reusable-valvolineButtonDialogMoreInfo {
        background-color: #009cd9;
        border-color: #009cd9;
        color: white;
        display: block;
        font-size: 14px;
        font-weight: bold;
        height: 48px;
        width: 7.05rem;
        text-transform: uppercase;
    }

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

.reusable-valvolineButtonDialogMoreInfo .sapMBtnInner {
    background-color: transparent !important;
    border: none !important;
    border-radius: .2rem;
    color: white !important;
    font-family: 'Roboto';
    font-size: 14px;
    text-transform: uppercase;
}

.reusable-valvolineButtonDialogCancel .sapMBtnInner {
    background-color: transparent !important;
    border: none !important;
    border-radius: .2rem;
    color: #303030 !important;
    font-family: 'Roboto';
    font-size: 14px;
    text-transform: uppercase;
}


/*End Scroll to top Button*/

@media screen and (min-width: 767px) and (max-width: 1023.9px) {
    .reusable-footer-container {
        padding: 50px calc(6.5% - .5%) 30px calc(6.5% - .5%);
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-footer-container {
        padding: 50px 2% 30px 2%;
    }
}


/*********************************/


/* Cards                        */


/*********************************/

.reusable-navigation-text-container-compensation {
    margin-bottom: 75px;
}

.reusable-navigation-card-text {
    white-space: normal;
    text-align: center;
}

@media screen and (min-width:1024px) {
    .reusable-navigation-card-container {
        height: auto;
        width: 24%;
        background-color: white;
        margin: .5%;
        animation: opacityanimation;
        animation-duration: .3s;
        position: relative;
    }

    @supports (-ms-ime-align: auto) {
        .reusable-navigation-card-container {
            margin-bottom: 5px;
            margin-top: 5px;
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .reusable-navigation-card-container {
        height: auto;
        width: 49%;
        background-color: white;
        margin: .5%;
        animation: opacityanimation;
        animation-duration: .3s;
        position: relative;
    }

    @supports (-ms-ime-align: auto) {
        .reusable-navigation-card-container {
            margin-bottom: 5px;
            margin-top: 5px;
        }
    }
}

@media screen and (max-width: 767.9px) {
    .reusable-navigation-card-container {
        height: auto;
        width: 96%;
        background-color: white;
        margin: 2%;
        animation: opacityanimation;
        animation-duration: .3s;
        position: relative;
    }
}

.reusable-navigation-card-image {
    height: auto;
}

.reusable-navigation-card-image {
    height: auto;
    overflow: hidden;
    width: 100% !important;
}

.reusable-image-card-container {
    height: auto;
    overflow: hidden;
    position: relative;
    min-height: 350px;
}


/*********************************/


/* Elements                      */


/*********************************/

.reusable-select-box .sapMSFF {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #bfbfbf !important;
    color: black;
}

.reusable-select-box .sapMSFF:hover {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #bfbfbf !important;
    color: black;
}

.reusable-select-box {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #bfbfbf !important;
    /*    margin-left: 10px;*/
    margin-right: 8px;
    min-width: 113px;
}

.reusable-select-box>.sapMSltLabel {
    color: black;
    font-size: 15px;
    font-family: 'Roboto';
    font-weight: normal;
}

.reusable-select-box.strong,
b {
    font-weight: normal;
}

.reusable-select-box .sapMSFI[type='search'] {
    font-size: 15px;
    color: black;
    font-family: 'Roboto';
    font-weight: normal;
}

.reusable-select-box .sapMSFB {
    background-color: transparent;
    color: gray;
}

.reusable-select-box .sapMSltArrow {
    background: transparent;
    color: gray;
    padding-top: 10px;
}

.reusable-select-box .sapMSFB:hover {
    border-bottom: 1px solid #bfbfbf !important;
    background-color: transparent;
    color: gray;
}

.reusable-select-box .sapMSltHoverable:not(.sapMSltState):hover {
    border: 0;
    background: transparent;
    border-bottom-style: solid;
    border-width: 1px;
    color: gray;
    border-bottom: 1px solid #bfbfbf !important;
}

.reusable-select-box>.sapMSltLabel,
.sapMSltWithArrow .sapMSelectListItemBase {
    padding: 10px 3rem 0 .625rem !important;
}

.reusable-searchField::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.reusable-searchField:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.reusable-searchField::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.reusable-searchField:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.reusable-searchField:placeholder-shown {
    /* Standard */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}


/* Search Field Outline From new update*/

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

.reusable-searchField .sapMSFI[type='search'] {
    /* Product Finder CSS */
    font-size: 16px;
    color: #303030;
    font-family: 'Roboto';
    font-weight: lighter;
}

.reusable-searchField .sapMSFB {
    /* Search Icon */
    color: #000000 !important;
}

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

.reusable-searchField .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;
    /* border-radius: 4px; */
}

.reusable-searchField .sapMSFB:hover {
    background-color: transparent;
}

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

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


/******************************************************************************************
							END of DASH immutable Classes
This classes are a part of DASH base structure, and are reused trough the diferent pages. 
Any change to this classes will impact multiple DASH pages!
The name of all reusable classes must start with the tag reusable-"class-name"
******************************************************************************************/


/*******************************************************
 1 - Desktop and Tablet landscape (FROM 1024px TO ...)
*******************************************************/

.heigthBoxCU {
    height: 20px !important;
}


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

@media screen and (min-width:1024px) {

    /*********************************/
    /* HeaderBackground              */
    /*********************************/
    .backgroundNormalHeader {
        /* Padding for left and right header used in Details Pages */
        padding-left: 8.5%;
        padding-right: 8.5%;
    }

    .backgroundNormalHeaderClaims {
        padding-left: 0;
        padding-right: 0;
    }

    .headerContentWidth {
        /* Header Content width for the main page (same width as the card container */
        width: 828px;
    }

    .headerContentWidthGoalSettings {
        /* Header Content width for the main page (same width as the card container */
        width: 886px;
    }

    .headerContentWidthClaims {
        /* Header Content width for the main page 
        (same width as the card container for the supplementalClaimsValidationPage*/
        width: 1132px;
    }

    .headerContentWidthRates {
        /* Header Content width for the main page 
        (same width as the card container for the supplementalClaimsValidationPage*/
        width: 886px;
    }

    .headerContentWidthMyAccount {
        /* Header Content width for my Account page */
        width: 812px;
    }

    /*********************************/
    /* Display                       */
    /*********************************/
    .displayNoneDesktop {
        display: none;
    }

    .accountLabelDesktop {
        width: 500px;
    }

    /****************************************/
    /* CardContainers and Content Container */
    /****************************************/
    .cardContainer {
        /* CardContainer width */
        width: 828px;
    }

    .rateContainer {
        width: 886px;
    }

    .goalSettingContainer {
        width: 886px;
    }

    .claimContainer {
        width: 1132px;
    }

    .supplementalClaimsContainer {
        align-items: center;
        width: 1132px;
    }

    .headerContentSuplementalRates {
        width: 886px;
    }

    .pageContentWidth {
        /* Page Content width */
        width: 825px;
    }

    .shortTextContainer {
        /* Shared between Cards */
        height: auto;
    }

    .fixShortTextHeight {
        /* Shared between Cards */
        height: 4rem;
    }

    .wrapLongText {
        height: auto !important;
    }

    .valvolineButton {
        /* Blue Button */
        background-color: #009cd9;
        border-color: #009cd9;
        color: white;
        font-size: 14px;
        font-weight: bold;
        height: 48px;
        width: 78%;
        display: block;
        margin: auto;
        margin-bottom: 32px;
    }

    /* Product Card */
    .productTile {
        width: 240px;
        height: 380px;
        margin: 5px;
        animation: opacityanimation;
        animation-duration: .3s;
    }

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

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

    .productTileWrapLongText {
        margin-top: 32px;
        height: 70px;
        margin-bottom: 5px;
        overflow: hidden !important;
        white-space: nowrap !important;
        display: inline-block !important;
        text-overflow: ellipsis !important;
    }

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

    /*****************************/
    /*     Fonts and colors      */
    /*****************************/
    /* Standard */
    .valvolineLink {
        color: #009cd9 !important;
        text-decoration: none !important;
    }

    .valvolineLink:hover {
        color: #979797 !important;
    }

    .valvolineLinkDisabled {
        color: #009cd9 !important;
        text-decoration: none !important;
    }

    .navBackLink {
        display: inline;
        color: white !important;
        text-decoration: none !important;
    }

    .navBackLink:hover {
        color: white !important;
    }

    .flatLink {
        display: inline;
        color: inherit !important;
        text-decoration: none !important;
    }

    .flatLink:hover {
        color: inherit !important;
    }

    .pageSubtitle {
        font-size: 20px !important;
    }

    .contactuslinkcolor {
        color: white !important;
    }

    /**********************/
    /* Product Page
    /*********************/
    .productDetailsMargin {
        margin-left: 32px;
        margin-right: 32px;
        margin-top: 30px;
    }

    .selectBoxDark {
        width: 230px !important;
    }

    .productCategoryWidth {
        width: 175px !important;
    }

    .productCategoryNewWidth {
        width: 400px !important;
    }

    .productCategoryCarImageWidth {
        width: 50%;
    }

    .productsCatContainer {
        width: 100%;
        justify-content: flex-end;
    }

    .productsPageButton {
        width: 230px;
    }

    /**********************/
    /* My Account Dialog New Case
    /*********************/
    .contentLeftBOx {
        margin-bottom: 5px;
        width: 12.5rem;
        text-align: right;
        justify-content: flex-end;
    }

    .contentRightBOx {
        width: 28rem;
        background-color: #e5e5e5;
        margin-left: 15px;
        padding-left: 10px;
    }

    .indicateStyle {
        margin-bottom: 16px;
        margin-top: 15px;
        margin-left: 13.5rem;
    }

    .contentRight {
        width: 28rem;
        margin-left: 15px;
    }

    .valvolineButtonDialogSubmit {
        background-color: #009cd9;
        border-color: #009cd9;
        color: white;
        font-weight: bold;
        height: 48px;
        width: auto;
        min-width: 10rem;
        display: block;
        text-transform: uppercase;
    }

    .valvolineButtonDialogMoreInfo {
        background-color: #009cd9;
        border-color: #009cd9;
        color: white;
        font-weight: bold;
        height: 48px;
        min-width: 10rem;
        width: auto;
        display: block;
        text-transform: uppercase;
    }

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

    /**********************/
    /* Other Sites
    /*********************/
    .otherMarginText {
        margin-bottom: 20px;
    }

    /**********************/
    /* Footer Pages
    /*********************/
    .footerPadding {
        margin-top: 64px;
        margin-left: 64px;
        margin-right: 64px;
    }

    .styleBox {
        padding: 32px 32px 48px 32px;
    }

    .flexContLabel {
        flex-wrap: wrap;
        white-space: normal;
    }

    .bottomTerms {
        padding-bottom: 20px !important;
    }

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

    .footerMargin {
        margin: 63px 240px 50px 240px;
    }

    .footerChildBox {
        width: 25%;
    }

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

    .faqsText.sapMText {
        display: initial !important;
    }

    .bodyCopyLink {
        font-family: 'Roboto';
        font-size: 14px;
        font-weight: lighter;
        color: #6e6e6e !important;
        margin-bottom: 20px !important;
    }

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

    .bodyCopy2 {
        font-family: 'Roboto' !important;
        font-size: 16px !important;
        font-weight: lighter !important;
        color: #6e6e6e !important;
    }

    .marginRightTables {
        margin: 0 .5rem 0 0;
    }

    .links {
        font-family: 'Roboto';
        font-size: 16px;
        font-weight: normal;
        color: #009cd9 !important;
        text-decoration: none !important;
        white-space: normal;
    }

    .linksImage {
        font-family: 'Roboto';
        font-size: 16px;
        font-weight: normal;
        color: #009cd9 !important;
        text-decoration: none !important;
        white-space: normal;
        margin-top: 25px;
        height: 40px;
    }

    .boldLinks {
        font-weight: bold;
    }

    .boxWithPadding {
        padding: 0;
    }

    .faqsFlexBox {
        padding-left: 88px !important;
    }

    .faqsPaddingRight {
        padding-left: 88px !important;
    }

    .faqsPaddingRightFAQS1 {
        padding-left: 0 !important;
    }

    .sapMPanelHdr {
        /* Faqs correction */
        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;
    }

    .sapUiResponsiveMargin {
        margin: 0 0 0 0 !important;
    }

    .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;
    }

    .faqsText.sapMText {
        display: initial !important;
    }

    /*************************/
    /* Account User Management
    /*************************/
    .bodyCopyCheckBoxUserManagement {
        font-family: 'Roboto';
        font-size: 14px;
        font-weight: lighter;
        color: #6e6e6e !important;
    }

    .checkBoxPaddingUserManagement {
        padding-left: 50px !important;
    }

    .contentChecktBOx {
        height: 40px;
        justify-content: flex-end;
        text-align: right;
    }

    .content-check-box--dropmenu {
        width: calc(100% - 447px);
        padding-top: 5px;
    }

    .content-check-box--permissions {
        width: calc(100% - 455px);
    }

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

    .inputCrateUser {
        width: 35rem !important;
    }

    .selectBoxDarkMoblie {
        width: 75vw !important;
    }

    .dialogInputCU .sapMInputBaseInner {
        border-bottom: 1px solid #bfbfbf !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        height: 1.2rem;
        padding: 0;
    }

    .dialogInputCU .sapMInputBaseState .sapMInputBaseInner.sapMInputBaseStateInner,
    .sapMInputBaseStateInner {
        padding: 0 !important;
    }

    .heigthPermission {
        height: 43px !important;
    }

    .heigthStatus {
        height: 32px !important;
    }

    .selectBoxMargin {
        margin-top: -18px !important;
    }

    .selectBoxRequestType {
        margin-top: -8px !important;
    }

    .selectBoxRequestType>.sapMSltLabel {
        padding: 2px 3rem 0 .625rem !important;
    }

    .selectBoxRequestType>.sapMSltArrow {
        padding-top: 2px;
    }

    .expandeStatus .sapMSltArrow {
        line-height: 3.5rem !important;
    }

    .panelMargin {
        height: 40px !important;
        margin-left: 50px;
        width: 40%;
    }

    .contentRightBOxUM {
        width: 34.5rem;
    }

    /* ERROR MESSAGEs */
    .errorMessage {
        width: 900px;
        z-index: 2;
        background-color: white;
        border-radius: 0;
        border: 1px solid #EFEFEF;
        margin-bottom: 1%;
        padding-top: 16px;
        padding-bottom: 24px;
        min-height: 5rem;
        margin-left: -6.5%;
    }

    /* Dialog Width */
    .userManagementFragmentSize {
        width: 800px !important;
    }

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

    .dialogFragmentSize {
        height: 50vh !important;
    }

    .dialogFragmentSize-manage-user {
        height: 50vh !important;
    }

    .dialogFragmentSize-case {
        height: 50vh !important;
    }

    .dialogFragmentSize-entryForm {
        height: 50vh !important;
    }

    /* Account Access scrollContainer height */
    .accountAccessScrollContainer {
        height: 40vh !important;
    }
}


/**********************************************
2 - Tablet Portrait and Small Desktops (FROM 767px TO 1023px)
**********************************************/

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

    /*********************************/
    /* HeaderBackground              */
    /*********************************/
    .backgroundNormalHeader {
        padding-left: 6.5%;
        padding-right: 6.5%;
    }

    .backgroundNormalHeaderClaims {
        padding-left: 0;
        padding-right: 0;
    }

    .headerContentWidth {
        width: 590px;
    }

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

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

    .headerContentWidthGoalSettings {
        width: 590px;
    }

    .headerContentWidthClaims {
        width: 100%;
        padding-right: 32px;
        padding-left: 32px;
    }

    .headerContentWidthMyAccount {
        /* Header Content width for my Account page */
        width: 590px;
    }

    /*********************************/
    /* Display                       */
    /*********************************/
    .displayNoneDesktop {
        display: none;
    }

    .accountLabelDesktop {
        width: 210px;
    }

    /*********************************/
    /* CarContainers and Cards       */
    /*********************************/
    /* CardContainer */
    .cardContainer {
        width: 600px;
    }

    .pageContentWidth {
        width: 86%;
        width: 590px;
    }

    /* Shared between Cards */
    .shortTextContainer {
        height: auto;
    }

    .fixShortTextHeight {
        min-height: 3rem;
        max-height: 4rem;
    }

    .wrapLongText {
        height: auto !important;
    }

    .valvolineButton {
        background-color: #009cd9;
        border-color: #009cd9;
        color: white;
        font-size: 14px;
        font-weight: bold;
        height: 48px;
        width: 78%;
        display: block;
        margin: auto;
        margin-bottom: 32px;
    }

    /*Image Card*/
    .imageTile {
        width: 290px;
        height: auto;
        margin: 5px;
        animation: opacityanimation;
        animation-duration: .3s;
    }

    /* Product Card */
    .productTile {
        width: 250px;
        height: 360px;
        margin: 5px;
        animation: opacityanimation;
        animation-duration: .3s;
    }

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

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

    .productTileWrapLongText {
        margin-top: 32px;
        height: 60px;
        margin-bottom: 5px;
        overflow: hidden !important;
        white-space: nowrap !important;
        display: inline-block !important;
        text-overflow: ellipsis !important;
    }

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

    .insightsCardGraphEO_VPS {
        height: 200px !important;
    }

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

    /*****************************/
    /*     Fonts and colors      */
    /*****************************/
    .pageTitle {
        font-size: 28px !important;
    }

    .pageTitle2 {
        font-size: 19px !important;
    }

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

    .info {
        font-family: 'Roboto' !important;
        font-size: 14px !important;
        font-weight: lighter !important;
        color: #303030 !important;
    }

    .bodyCopy {
        font-size: 14px !important;
    }

    .bodyCopyErrorMessage {
        font-size: 14px !important;
    }

    .links {
        font-family: 'Roboto';
        font-size: 14px;
        font-weight: normal;
        color: #009cd9 !important;
        text-decoration: none !important;
        white-space: normal;
    }

    .boldLinks {
        font-weight: bold;
    }

    .bodyCopy2 {
        font-family: 'Roboto' !important;
        font-size: 16px !important;
        font-weight: lighter !important;
        color: #6e6e6e !important;
    }

    .marginRightTables {
        margin: 0 .5rem 0 0;
    }

    .valvolineLink {
        color: #009cd9 !important;
        text-decoration: none !important;
    }

    .valvolineLinkDisabled {
        color: #009cd9 !important;
        text-decoration: none !important;
    }

    .contactuslinkcolor {
        color: white !important;
    }

    /**********************/
    /* MyAccountPage
    /*********************/
    .accountFilter {
        width: 150px !important;
    }

    /* My Account Menu Card Frame */
    .myAccountMenuCardFrame {
        height: auto;
        width: 290px;
        background-color: white;
        margin: 5px;
        animation: opacityanimation;
        animation-duration: .3s;
    }

    .myAccountCardImage {
        height: auto;
        width: 290px;
    }

    /**********************/
    /* Product Page
    /*********************/
    .productDetailsMargin {
        /* Product Container Margins */
        margin-left: 32px;
        margin-right: 32px;
        margin-top: 32px;
    }

    .selectBoxDark {
        width: 230px !important;
    }

    .productCategoryWidth {
        width: 250px !important;
    }

    .productCategoryNewWidth {
        width: 250px !important;
    }

    .productCategoryCarImageWidth {
        width: 50%;
    }

    .productsCatContainer {
        width: 100%;
        justify-content: flex-end;
    }

    .productsPageButton {
        width: 230px;
    }

    .valvolineButton {
        font-size: 12px;
    }

    /**********************/
    /* Faqs
	/*********************/
    .faqsText.sapMText {
        display: initial !important;
    }

    .bodyCopyLink {
        font-family: 'Roboto';
        font-size: 14px;
        font-weight: lighter;
        color: #6e6e6e !important;
        margin-bottom: 20px !important;
    }

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

    .bodyCopy2 {
        font-family: 'Roboto' !important;
        font-size: 16px !important;
        font-weight: lighter !important;
        color: #6e6e6e !important;
    }

    .boxWithPadding {
        padding: 0;
    }

    .sapMPanelHdr {
        /* Faqs correction */
        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;
    }

    .sapUiResponsiveMargin {
        margin: 0 0 0 0 !important;
    }

    .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;
    }

    .faqsText.sapMText {
        display: initial !important;
    }

    /*********************/
    /* FlexContainers
	/*********************/
    .flexCont {
        flex-wrap: wrap;
    }

    .flexContLabel {
        flex-wrap: wrap;
        white-space: normal;
    }

    /*********************/
    /* Account
	/*********************/
    .indicateStyleProfile {
        margin-bottom: 16px;
        margin-top: 15px;
        margin-left: 13.5rem;
    }

    .contentBylineForAccount {
        font-family: 'Roboto';
        font-size: 18px;
        font-weight: bold;
        color: #303030;
    }

    .profileAddress {
        /*added for profile fix*/
        margin-left: 1rem !important;
        margin-top: 1rem !important;
    }

    .profileAddress2 {
        /*added for profile fix*/
        margin-left: 1rem !important;
    }

    .horizontalDivOrders {
        height: 2px;
        width: 100%;
        border-bottom: 1px solid #cccccc;
    }

    /*************************/
    /* Account Orders Details
    /*************************/
    .orderDetailsWidth {
        width: 85% !important;
    }

    .bodyCopyOrders {
        font-family: 'Roboto' !important;
        font-size: 16px !important;
        font-weight: lighter !important;
        color: #6e6e6e !important;
    }

    /*********************/
    /* Account User Management
	/*********************/
    .umUser {
        width: 10% !important;
    }

    .umUsername {
        width: 9% !important;
    }

    .umStatus {
        width: 7% !important;
    }

    .umLastActive {
        width: 7% !important;
    }

    .umViewEdit {
        width: 10% !important;
    }

    .bodyCopyCheckBoxUserManagement {
        font-family: 'Roboto';
        font-size: 14px;
        font-weight: lighter;
        color: #6e6e6e !important;
    }

    .checkBoxPaddingUserManagement {
        padding-left: 50px !important;
    }

    .heigthPermission {
        height: 44px !important;
    }

    .heigthStatus {
        height: 32px !important;
    }

    .selectBoxRequestType {
        margin-top: -8px !important;
    }

    .selectBoxRequestType>.sapMSltLabel {
        padding: 2px 3rem 0 .625rem !important;
    }

    .selectBoxRequestType>.sapMSltArrow {
        padding-top: 2px;
    }

    .expandeStatus .sapMSltArrow {
        line-height: 3.5rem !important;
    }

    /************************/
    /* Orders List
    /************************/
    .ordersListFirstSectionWidth {
        /* defines the width of the list for tablet */
        width: 67%;
    }

    .orders_orderpartCountTextWidth {
        width: 4.5rem;
    }

    /* ERROR MESSAGES */
    .errorMessage {
        background-color: #e1261c;
        border-radius: 0;
        border: 1px solid #e1261c;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Dialog Width */
    .userManagementFragmentSize {
        width: 700px !important;
    }

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

    /* Account Access ScrollContainer height */
    .accountAccessScrollContainer {
        height: 35vh !important;
    }

    .otherMarginText {
        margin-top: 20px;
    }
}


/**********************************************
3 - Mobile portait (Up to 767px)
**********************************************/

@media screen and (max-width: 767.9px) {

    /*********************************/
    /* HeaderBackground              */
    /*********************************/
    .backgroundNormalHeader {
        padding-left: 2%;
        padding-right: 2%;
    }

    .headerContentWidth {
        width: 98%;
    }

    .headerContentWidthClaims {
        width: 98%;
    }

    /*********************************/
    /* Display                       */
    /*********************************/
    .displayNoneMobile {
        display: none;
    }

    /*********************************/
    /* CarContainers and Cards       */
    /*********************************/
    /* Product Card */
    .productTile {
        width: 45%;
        height: 400px;
        margin: 5px;
        animation: opacityanimation;
        animation-duration: .5s;
    }

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

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

    .productTileWrapLongText {
        margin-top: 10px;
        margin-bottom: 5px;
        height: 50px;
        overflow: hidden !important;
        white-space: nowrap !important;
        display: inline-block !important;
        text-overflow: ellipsis !important;
    }

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

    .valvolineButton {
        font-size: 12px;
    }

    /*****************************/
    /*     Fonts and colors      */
    /*****************************/
    .valvolineLink {
        color: #009cd9 !important;
        text-decoration: none !important;
    }

    .valvolineLinkDisabled {
        color: #009cd9 !important;
        text-decoration: none !important;
    }

    .pageTitle {
        font-size: 28px !important;
    }

    .pageSubtitle {
        font-size: 20px !important;
    }

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

    .bodyCopy {
        font-size: 14px !important;
    }

    .bodyCopyErrorMessage {
        font-size: 14px !important;
    }

    .bodyCopyOrders {
        font-family: 'Roboto';
        font-size: 16px;
        font-weight: lighter;
        color: #6e6e6e !important;
        /*   margin-bottom: 20px; */
    }

    .bodyCopyBlueBold {
        font-family: 'Roboto' !important;
        font-size: 16px !important;
        font-weight: bold !important;
        color: #009cd9 !important;
        max-width: 230px;
    }

    .contactuslinkcolor {
        color: white !important;
        margin-bottom: 187px;
    }

    /**********************/
    /* Product Page
    /*********************/
    .productDetailsMargin {
        /* Product Container Margins */
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 32px;
    }

    .productsType .sapMSLIImgThumb,
    .sapMSLIImgIcon,
    .sapMSLIImgThumbIcon {
        /* List Icon Size */
        width: auto;
        height: 40px !important;
    }

    .productsType .sapMSLITitleOnly {
        font-size: .8rem !important;
    }

    .selectBoxDark {
        /* Width of ProductSelectBox Filter */
        width: 85vw !important;
    }

    .productsPageButton .sapMBtnDefault {
        width: 90vw !important;
    }

    .productsPageButton {
        width: 90vw !important;
    }

    .productsCatContainer {
        width: 90vw !important;
    }

    .productSelectBoxContainer {
        justify-content: center;
    }

    .productsCatContainer {
        justify-content: center;
    }

    .promotionBannerTitleSize {
        font-size: 20px !important;
    }

    .productCategoryCarImageWidth {
        width: 100%;
    }

    /**********************/
    /* DIALOG
    /*********************/
    .contentLeftBOx {
        margin-bottom: 5px;
        width: 100%;
        text-align: left;
    }

    .contentRightBOx {
        width: 19.5rem;
        background-color: #e5e5e5;
        padding-left: 10px;
    }

    .indicateStyle {
        margin-bottom: 16px;
        margin-top: 15px;
    }

    .contentRight {
        width: 17.1rem;
    }

    .valvolineButtonDialogSubmit {
        background-color: #009cd9;
        border-color: #009cd9;
        color: white;
        display: block;
        font-size: 14px;
        font-weight: bold;
        height: 48px;
        width: 8.05rem;
        text-transform: uppercase;
    }

    .valvolineButtonDialogMoreInfo {
        background-color: #009cd9;
        border-color: #009cd9;
        color: white;
        display: block;
        font-size: 14px;
        font-weight: bold;
        height: 48px;
        width: auto;
        min-width: 8.05rem;
        text-transform: uppercase;
    }

    .valvolineButtonDialogSubmit-cases-fix {
        width: 50%;
    }

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

    .valvolineButtonDialogCancel-cases-fix {
        width: 50%;
    }

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

    .dialogInput .sapMInputBaseInner {
        border-bottom: 1px solid #bfbfbf !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        height: 1.2rem;
    }

    .otherMarginText {
        margin-top: 20px;
    }

    /*************************/
    /* Footer and Footer Pages
	/*************************/
    .footerPadding {
        margin: 40px 64px 64px 64px;
    }

    .styleBox {
        padding: 32px 32px 48px 32px;
    }

    .flexCont {
        flex-wrap: wrap;
    }

    .flexContLabel {
        flex-wrap: wrap;
        white-space: normal;
    }

    .bottomTerms {
        padding-bottom: 20px !important;
    }

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

    .bodyCopy2 {
        color: #6e6e6e !important;
        font-family: 'Roboto' !important;
        font-weight: lighter !important;
    }

    .links {
        font-family: 'Roboto';
        font-size: 14px;
        font-weight: normal;
        color: #009cd9 !important;
        text-decoration: none !important;
        white-space: normal;
    }

    .boldLinks {
        font-weight: bold;
    }

    .boxWithPadding {
        padding: 0;
    }

    .sapMPanelHdr {
        /* Faqs correction */
        -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;
    }

    .sapUiResponsiveMargin {
        margin: 0 0 0 0 !important;
    }

    .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;
    }

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

    /*END for Create New Case alignment*/
    .sapUiSmallNegMarginTop {
        margin-top: -1rem !important;
    }

    .caseCustomStyle {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    .casesBottom2 {
        margin-top: 0;
    }

    .casesMarginRight {
        margin-right: 4rem;
    }

    .casesmarginLeft {
        margin-left: 4rem;
    }

    .caseButtonMarginTop {
        margin-top: -2rem;
    }

    .horizontalDivOrders {
        height: 2px;
        width: 100%;
        border-bottom: 1px solid #cccccc;
        margin-top: 4rem !important;
    }

    /* ERROR MESSAGES */
    .errorMessage {
        width: 375px;
        background-color: #e1261c;
        border-radius: 0;
        border: 1px solid #e1261c;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Account Table height*/
    .accountAccessScrollContainer {
        /* height minus the compensation for the extra elements of the dialog, minus the height of the bars on the worst case(safari ios)*/
        height: calc(calc(90vh - 350px) - 109px) !important;
        min-height: 150px;
    }
}


/***************************************************
 GENERAL (ex. Fonts, Shadows, Lines colors)
***************************************************/

.sapMBtnInner {
    /* Remove shadow from lettering for all the buttons */
    text-shadow: none !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;
}

.scrollContainer {
    /* Min height of the cards container when loading */
    align-items: center;
    min-height: 200px;
}

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

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

.sapMPanelWrappingDivTb {
    border-bottom: 0;
}

.textJustify {
    text-align: justify !important;
}

.whiteBackground {
    background-color: #fff;
}

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

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

.limitAlignCases2 {
    /* overflow: hidden !important; */
    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;
}

.underline {
    text-decoration: underline !important;
}

.noUnderline {
    text-decoration: none !important;
}

.inactiveLink {
    pointer-events: none;
    cursor: default;
}

.red {
    color: red !important;
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: bold;
}

.leftCarousel {
    text-align: left;
}

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

.sdsDialog__hover:hover>a,
.sdsDialog__hover:hover>span {
    color: #6e6e6e;
}

@media screen and (max-width: 767.9px) {
    .marginPiandSDSSheetMobile {
        margin-right: 320px;
    }
}

@media screen and (max-width: 767.9px) {
    .iconMarginMobile {
        margin-left: 3px;
    }
}

@media screen and (max-width: 767.9px) {
    .piSheetLinkMobile {
        white-space: nowrap;
        margin-left: 5px;
    }
}

@media screen and (max-width: 767.9px) {
    .marginPiSheet {
        margin-left: 5%;
    }
}

@media screen and (max-width: 767.9px) {
    .sdsSheetLink {
        white-space: nowrap;
    }
}

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

input::placeholder {
    color: #747272 !important;
    font-style: normal !important;
    font-size: .8rem !important;
}


/*****************************
Filter and  Select Box
*****************************/

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

.sapMSltPressed>.sapMSltArrow {
    background: transparent;
}

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

.sapMSltArrow {
    background: transparent;
    color: #fff;
}

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


/**************************
Cards and Tiles
**************************/

    {
    background-color: white;
}

.sapMStdTileTopRow {
    padding: 16px 32px 16px 32px;
}


/*********************************************
Fonts and colors
*********************************************/

.pageTitle {
    font-family: 'Roboto';
    font-size: 32px;
    font-weight: bold;
    color: #303030;
}

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

.pageSubtitle {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: lighter;
    color: #303030;
}

.bold {
    font-weight: 500;
}

.info {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: lighter;
    color: #303030;
}

.bodyCopy {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: lighter;
    color: #6e6e6e;
}

.bodyCopyInsightsHeaders {
    font-family: 'Roboto';
    font-size: 13px;
    font-weight: lighter;
    color: black;
}

.bodyCopyErrorMessage {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: lighter;
    color: #fff;
}

.bodyCopySmaller {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: lighter;
    color: #6e6e6e;
}


/*********************************************
  Main Menu Page Icons and Button
*********************************************/

@media screen and (max-width: 767.9px) {
    .sapMMsgStripIcon {
        top: .5rem;
    }
}

.errorText {
    margin: 0;
}

.alertIcon {
    -webkit-filter: brightness(2000%);
    filter: brightness(2000%);
    margin-top: -1rem;
    width: 75%;
}

.sideNavBack2top {
    display: none;
}

.sideNavBack2top:hover {
    background: rgba(0, 156, 217, 1);
}

@media screen and (min-width: 767.9px) and (max-height: 660px) {}

@media screen and (max-width: 767.9px) {
    .alertIcon {
        margin-top: 0;
        width: 50%;
    }
}

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


/*************************************************************/

.headerSize {
    height: 150px;
    margin-bottom: 15px;
    width: 100%;
}

.headerSizeNoMenu {
    height: 150px;
    margin-bottom: 15px;
    width: 100%;
}

@media screen and (max-width: 767.9px) {
    .headerSize {
        margin-top: 2.5rem;
    }
}

.headerSize--no-margin {
    margin-bottom: 0 !important;
}

.buttomMenuHover {
    color: #009cd9;
}

.labelMenuHover {
    color: #009cd9 !important;
}

.logoPortal {
    height: 167px !important;
}

.backgroundGray {
    background-color: #efefef;
}


/***************************
  Error container
***************************/

.sapMMsgStripCloseButton {
    color: #fff !important;
    top: 2px;
}

.messageContainer {
    height: auto;
    width: 100%;
}

.messageContainerText {
    font-family: 'Roboto';
    font-weight: normal;
    font-size: 13px;
    color: white;
}

.messageContainerLink {
    font-family: 'Roboto';
    font-size: 13px;
    color: white;
    text-decoration: underline;
    font-weight: 500;
    vertical-align: middle;
    margin-left: 4px;
}

.messageContainerErrorColor {
    background: #e1261c;
}

.messageContainerWarningColor {
    background: #efc608;
}

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

.messageContainerWarningColor .messageStripIconSize,
.messageContainerWarningColor .messageContainerText,
.messageContainerWarningColor .messageContainerLink,
.messageContainerWarningColor .sapUiIcon {
    color: #303030 !important;
}

.messageContainerSuccessColor {
    background: #009cd9;
}

.messageContainerSmallSuccessColor {
    background: #00a651;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

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

@media screen and (max-width: 767.9px) {
    .message-strip-error-contact-us {
        flex-wrap: wrap;
        white-space: normal;
    }

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


/**************************************
 Feed Page
**************************************/

.sapMSelectListItemBase,
.customComboBoxList .sapMLIB,
.sapMComboBoxBaseList .sapMLIB {
    /* Filter popUp menu CSS */
    color: #e5e5e5 !important;
    background-color: #085e8f;
    font-size: 16px;
    font-family: 'Roboto';
    font-weight: lighter;
    opacity: 1 !important;
}


/* Custom control comboBox Css*/

.sapMSelectListItemBase:hover,
.customComboBoxList .sapMLIB:hover,
.sapMComboBoxBaseList .sapMLIB:hover {
    /* Filter popUp menu CSS */
    color: white;
    background-color: #2789c1;
    font-size: 16px;
    font-family: 'Roboto';
}

@media screen and (max-width: 767.9px) {

    .sapMSelectListItemBase:hover,
    .customComboBoxList .sapMLIB:hover,
    .sapMComboBoxBaseList .sapMLIB:hover {
        background-color: #085e8f;
    }

    .customComboBoxList .sapMSLITitleOnly,
    .customComboBoxList .sapMSLIInfo,
    .sapMComboBoxBaseList .sapMSLITitleOnly,
    .sapMComboBoxBaseList .sapMSLIInfo {
        color: #e5e5e5 !important;
        font-weight: lighter;
        opacity: 1 !important;
        font-size: 14px;
        font-family: Roboto;
        width: 50%;
    }

    .customComboBoxList .sapMSLITitleOnly,
    .sapMComboBoxBaseList .sapMSLITitleOnly {
        font-size: 16px;
    }

    .customComboBoxList .sapMSLIInfo,
    .sapMComboBoxBaseList .sapMSLIInfo {
        font-size: 14px;
        white-space: pre-wrap;
        /* CSS3 */
        white-space: -moz-pre-wrap;
        /* Firefox */
        white-space: -o-pre-wrap;
        /* Opera 7 */
        word-wrap: break-word;
        /* IE */
    }

    .customComboBoxList .sapMSLIInfo,
    .sapMComboBoxBaseList .sapMSLIInfo {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        -ms-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        overflow: hidden;
    }

    .customComboBoxList .sapMSLI,
    .sapMComboBoxBaseList .sapMSLI {
        min-height: 2.5rem;
        height: auto !important;
    }
}

.sapMSelectListItemBaseSelected,
.customComboBoxList .sapMLIBSelected,
.sapMComboBoxBaseList .sapMLIBSelected {
    /* List pop over button color selected */
    outline: 0;
    outline-offset: 0;
    background-color: #2789c1 !important;
}

.sapMSelectListItemBaseSelected:hover,
.customComboBoxList .sapMLIBSelected:hover,
.sapMComboBoxBaseList .sapMLIBSelected:hover {
    background-color: #2789c1 !important;
}

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


/*****************************
Animations KeyFrames
****************************/

@keyframes opacityanimation {

    /* Cards animation */
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes menuSlideEffect {

    /* menuSlideEffect animation */
    0% {
        width: 0;
    }

    100% {
        width: 75%;
    }
}


/**************************************
My Account Profile
**************************************/

.sapMSelectListItem {
    white-space: pre;
}

.profileSizePX {
    font-size: 24px !important;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -epub-hyphens: none;
    hyphens: none;
}

.accountSearchField {
    /*search box*/
    width: 70%;
}

.learnHeaderButton .sapMBtnInner.sapMBtnText.sapMBtnIconFirst,
.sapMBtnInner.sapMBtnText.sapMBtnBack {
    padding-left: 2rem;
}

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

.emailLinkMargin {
    margin-bottom: -4px;
}


/**************************************
Remove outlines
**************************************/

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

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

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

.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;

}

/**************************************
Create New Cases Dialog
**************************************/

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

@media screen and (max-width: 590px) {
    .dialogFooter {
        margin: 16px;
    }
}

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

@media screen and (max-width: 590px) {
    .headerDialog {
        margin: 32px 16px 16px;
    }
}

.borderHeader {
    margin-bottom: 6px;
}

.limitDialog {
    width: 47rem;
    height: 32rem;
}

.declineDialog {
    color: #6e6e6e;
}

.titleDialogLimit .sapMBarChild {
    /* sapMDialogTitle sapMTitle sapMTitleMaxWidth sapMTitleNoWrap sapMTitleStyleAuto sapUiSelectable*/
    text-align: left;
    font-family: 'Roboto' !important;
    font-size: 20px !important;
    font-weight: lighter !important;
    color: #303030 !important;
    width: 100%;
    padding-left: 32px !important;
}

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

.dialogUnderlineRequestChange {
    border-bottom: 1px solid #bfbfbf !important;
}

@media screen and (min-width:1024px) {

    _:-moz-tree-row(hover),
    .dialogUnderline {
        width: 35rem !important;
    }
}

@media screen and (max-width: 767.9px) {
    .dialogUnderlineRequestChange {
        margin-left: 0;
        padding-left: 0;
        padding-top: 5px;
        width: 78vw;
    }
}

@media screen and (min-width: 1024px) {
    .dialogUnderline {
        width: 35rem;
    }

    .dialogUnderlineRequestChange {
        width: 32rem;
    }
}

.dialogInput .sapMInputBaseInner {
    border-bottom: 1px solid #bfbfbf !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    height: 1.2rem;
    margin-top: 18px;
}


/**************************************
My Account Cases
**************************************/

.expandableIconLess {
    transform: translateY(-50%) rotate(0) !important;
}

.marginHeaderCases {
    margin-top: .5rem;
}

.borderTop {
    border-top: 2px solid #e5e5e5;
}

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

.containerLoadEffect {
    min-height: 50px;
    animation: opacityanimation;
    animation-duration: .8s;
}

.filterDrop {
    height: 2rem !important;
    margin-left: 5px !important;
}


/***********************************
Change combobox placeholder style
***********************************/

.accountSearchField::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: white !important;
}

.accountSearchField:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: white !important;
}

.accountSearchField::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: white !important;
}

.accountSearchField:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: white !important;
}

.accountSearchField:placeholder-shown {
    /* Standard */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: white !important;
}

.accountSearchField,
html.sap-desktop .sapMFocus>.sapMSFF {
    outline: none;
}


/**************************************
 Navigation Arrows
**************************************/

.navigationBtn .sapMBtnIcon {
    width: 1.5rem;
    height: 3rem;
}

.navigationBtn .sapMBtnInner {
    background: white;
    border: none;
    cursor: pointer;
}


/**************************************
 Orders
**************************************/

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .warpIE {
        width: 300px !important;
        word-wrap: break-word !important;
    }
}

.tableOrdersContainer {
    min-height: 10rem;
    animation: opacityanimation;
    animation-duration: .8s;
}

.BlockNoPadding>.sapUiBlockCellContent {
    padding: .25rem 0 .75rem 0;
}

.LegendPadding>.sapUiBlockCellContent {
    padding: 1rem 0 1rem 1rem;
    margin-left: 1rem;
    align-items: center;
}

.horizontalDiv {
    height: 2px;
    width: 100%;
    border-bottom: 1px solid #cccccc;
}

.orderSubheader.sapMTB {
    align-items: flex-end;
    margin-bottom: 1%;
    border-bottom: 0;
}

.OrderNavIcon>.sapMListTblNavCol.sapMListTblNavCol {
    width: 0 !important;
    visibility: hidden;
}

.OrderNavIcon>.sapMListTblNavCol>.sapMLIBImgNav {
    visibility: hidden;
    width: 0;
}

.OrderNavIcon.sapMTB {
    border-bottom: 0;
}

.OrderNavIcon>.sapMListTblNavCol {
    width: 0;
}

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

.sapMListTblSubCnt {
    padding: 0 !important;
    box-sizing: border-box;
}

@media screen and (max-width: 599px) {
    .sapMListTblSubCnt {
        padding: 15px 0 !important;
    }
}


/**************************************
My Account User Management
**************************************/

.rowsHeight .sapMLIB.sapMListTblRow {
    border-bottom: 0;
    max-height: 17px;
}

.userManagementIconColor {
    color: #009cd9 !important;
}

.accepticon::before {
    font-family: 'SAP-icons';
    content: '\e05b';
    font-size: 17px;
    padding-right: .4rem;
    font-weight: bold;
}

.borderBottomCreate {
    border-bottom: 1px solid #bfbfbf !important;
}

html.sap-desktop .sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus>.sapMCbBg {
    outline-width: 0;
}

.myAccountImage {
    height: auto;
}


/**************************************
Navigation Arrows
**************************************/

.navigationBtn .sapMBtnIcon {
    width: 1.5rem;
    height: 3rem;
}

.navigationBtn .sapMBtnInner {
    background: white;
    border: none;
    cursor: pointer;
}

.navigationBtn .sapMBtnInner:focus {
    background: transparent;
}


/**************************************
Product Finder Page
**************************************/


/* Fix Quick Chart Position */

.headerInformation-topPositionFix {
    top: -20px !important;
}

.sapMComboBoxBasePressed:not(.sapMComboBoxTextFieldReadonly):not(.sapMComboBoxTextFieldState):not(.sapMComboBoxTextFieldDisabled) {
    border-color: #e5e5e5;
}

.sapMComboBoxBasePressed .sapMComboBoxBaseArrow,
html.sap-desktop .sapMComboBoxBasePressed .sapMComboBoxBaseArrow:hover {
    background: #009cd9;
}

.searchHistoryFromStorage {
    background-color: #085e8f;
    color: white !important;
}

@media screen and (max-width: 767.9px) {
    .searchHistoryFromStorage {
        background-color: #085e8f;
        color: white !important;
        white-space: pre-wrap;
        height: auto;
    }
}

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: 'Roboto' !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: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.productSearchField::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.productSearchField:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

.productSearchField:placeholder-shown {
    /* Standard */
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    font-style: normal !important;
    color: #6e6e6e !important;
}

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

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

@media screen and (max-width: 1023.9999px) and (min-width: 768px) {
    .marginPiandSDSSheetTablet {
        margin-right: 520px;
    }
}

@media screen and (max-width: 1023.9999px) and (min-width: 768px) {
    .piSheetLink {
        white-space: nowrap;
    }
}

@media screen and (max-width: 1023.9999px) and (min-width: 768px) {
    .sdsSheetLink {
        margin-left: 30px;
    }
}


/* Safari */

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


/* IE */

@media screen and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .makeImage>li>img[src="data:image/png;base64,"] {
        padding: 0 !important;
        margin-left: -3px;
        visibility: hidden;
    }
}


/* Firefox */

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

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

.makePadding>li {
    padding-left: calc(1rem + 1px);
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .prod-details-forceimagedisplay-ie {
        visibility: visible !important;
    }
}


/* Search Field Outline From new update*/

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

.dividerLine {
    padding-top: 20px;
    border-bottom: 1px solid #9c9c9c;
}

.dividerLine_distributors {
    padding-top: 0;
}

.dividerLineV {
    border-left: 1px solid #9c9c9c;
}

.productsType:active {
    background-color: #e5e5e5;
}

.productsType:focus {
    background-color: #e5e5e5;
}

.productsType .sapMLIBImgNav {
    /* List Arrow Navigation Size */
    /* DiferentSize for mobile */
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 20px;
    color: #000000;
    background: transparent;
}

.productsType .sapMLIBImgNav:active {
    background: transparent;
}

.productsType .sapMLIBImgNav:focus {
    background: transparent;
}

.productsType .sapMSLIImgThumb,
.sapMSLIImgIcon,
.sapMSLIImgThumbIcon {
    /* List Icon Size */
    width: auto;
    height: 70px;
    line-height: 3rem;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-box-flex: 0;
    box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.productsType {
    border-top: #ececec;
    border-top-style: solid;
    border-top-width: 1px;
}

.productsType .sapMSLITitleOnly {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: lighter;
    color: #303030;
}

.productsType .sapUiIcon:before {
    /* icon changed to the arrow in prototype */
    content: "\e04c";
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

.productSearchField .sapMSFI[type='search'] {
    /* Product Finder CSS */
    font-size: 16px;
    color: #303030;
    font-family: 'Roboto';
    font-weight: lighter;
}

.productSearchField .sapMSFB {
    /* Search Icon */
    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;
    /* border-radius: 4px; */
}

.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;
}

.productCategoryButtonPressed {
    background-color: #009cd9 !important;
    cursor: pointer !important;
    border: 1px #009cd9 solid !important;
}

.productCategoryText {
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    font-family: 'Roboto' !important;
    font-size: 14px !important;
    font-weight: lighter !important;
    color: #6e6e6e !important;
}

.productCategoryTextPressed {
    color: white !important;
}

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

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

.iconVehicleProductCategoryPressed {
    color: white;
}

.productCategoryMinHeight {
    /* Min height for the products category page container */
    min-height: 400px;
    height: auto !important;
}

.productCategoryFileNameLink {
    white-space: normal;
}


/* Product Finder Car Image */

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

.selectBoxHideArrow>span {
    display: none;
}

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

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

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

@media screen and (max-width: 767.9px) {

    .sapMBarLeft,
    .sapMBarPH {
        padding-right: .25rem;
    }
}

@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;
    }
}

@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;
    }
}

@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;
    }
}


/***********************************************
Products Category Page
***********************************************/

.productNavBackArrow .sapMBtnDefault {
    background-color: transparent;
    border: 0;
    color: white;
    font-size: 20px;
    font-family: 'Roboto';
    font-weight: lighter;
    height: auto;
}

.productNavBackArrow .sapMBtnHoverable:hover {
    background-color: transparent;
}

.productNavBackArrow .sapMBtnIcon {
    /* Ajust side menu Valvoline size */
    font-size: 1.375rem;
    line-height: 2.375rem;
    width: 2.375rem;
    text-align: left;
    margin: 0;
    padding: 0;
    vertical-align: top;
    max-height: 2.375rem;
}

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

.productsCategorySelectBoxes {
    flex-wrap: wrap;
}

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

@media screen and (max-width: 1023.9999px) and (min-width: 768px) {
    .products-category-buttons-container {
        justify-content: flex-end;
        width: 100%;
        margin: 0 0 0 auto;
    }
}

@media screen and (max-width: 767.9px) {
    .products-category-buttons-container {
        justify-content: flex-end;
        width: 100%;
        margin: 0 0 0 auto;
    }
}

.productsPageButton {
    background-color: #009cd9;
    border-color: #009cd9;
    color: white;
    font-size: 14px;
    font-weight: bold;
    height: 48px;
    display: block;
    margin: auto;
}

.productsPageButton .sapMBtnDefault {
    font-size: 14px;
}

.productsPageButton .sapMBtnDefault {
    background-color: #009cd9;
    border: none;
    border-radius: 0;
    color: white;
    width: 100%;
}

.productsPageButton .sapMBtnDefault:hover {
    background-color: #009cd9;
    border: none;
    border-radius: 0;
    color: white;
}

.titleTopBottomMargin {
    margin-top: 40px;
    margin-bottom: 48px;
}

.productCategoryMargin {
    margin-top: 32px;
}

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

@media screen and (min-width: 768px) {
    .card-container__product-finder-fix {
        width: 99%;
    }
}

@media screen and (min-width: 1024px) {
    .productFinderProductList>ul>li {
        width: 24%;
        border: 0;
        margin: .5%;
        align-items: flex-start;
    }
}

@media screen and (max-width: 1023.9999px) and (min-width: 768px) {
    .productFinderProductList>ul>li {
        width: 49%;
        border: 0;
        margin: .5%;
        align-items: flex-start;
    }
}

@media screen and (max-width: 767.9px) {
    .productFinderProductList>ul>li {
        width: 100%;
        border: 0;
    }
}

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

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

.productsCategoryContainer {
    min-height: 30px;
}

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

.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: 20px;
    font-family: 'Roboto';
    font-weight: lighter;
}

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

.selectBoxSize>.sapMSltLabel {
    padding-top: 10px !important;
    color: black;
    font-size: 18px !important;
    font-family: 'Roboto';
    font-weight: lighter;
}

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

.selectBoxDark .sapMSFI[type='search'] {
    font-size: 20px;
    color: black;
    font-family: 'Roboto';
    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;
}

.productCardContainerHeight {
    min-height: 20px;
}

.cursorPointer {
    cursor: pointer;
}

.sidebarButtonColorMouseOver {
    color: #009cd9;
}

.sidebarButtonColorMouseOut {
    color: #6e6e6e;
}

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

.centerJustify {
    justify-content: center !important;
}

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

.add-custom-component-button span {
    background-color: transparent !important;
    color: #009cd9 !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;
}

@media screen and (min-width: 1024px) {
    .add-custom-component-button {
        margin-left: 50%;
    }

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

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .add-custom-component-adjust-button {
        width: 235px;
        min-width: 235px;
    }
}

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

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

@media screen and (min-width: 768px) {
    .add-custom-component-button>span>span:nth-child(2) {
        font-family: 'Roboto' !important;
        font-size: 16px !important;
        line-height: 2rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.99px) {
    .custom-component-selection-container {
        margin-top: 25px;
    }

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

@media screen and (max-width: 767.9px) {
    .add-custom-component-button>span>span:nth-child(2) {
        font-family: 'Roboto' !important;
        font-size: 14px !important;
        line-height: 2rem;
    }

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

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

    .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;
    }
}

.custom-component-selectBoxes {
    max-width: 20% !important;
}

.sapMSelectListItemBaseDisabled {
    opacity: 0.3 !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);
}


/**********************************************
Products Page
**********************************************/

@media screen and (max-width: 767.9px) {
    .products__buttons .sapMFlexItem {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .products__buttons {
        justify-content: flex-end;
    }
}


/**********************************************
Products Details Page
**********************************************/

.productsDetaisArrow .sapMBtnIcon {
    color: #ffffff;
}

.navBackheaderPadding {
    align-items: center;
    height: 35px;
}

.productDetailsBottomMargin {
    margin-bottom: 48px;
}

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

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

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

.sapMSelectList {
    background: #085e8f !important;
}


/**********************************
Privacy Policy
**********************************/

.marginPrivacyLink {
    margin-right: -0.25rem;
    margin-left: -0.25rem;
}


/**********************************
About Valvoline Dash
**********************************/

.about-max-width {
    max-width: 100%;
}

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

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

.overflowAbout {
    overflow: visible !important;
}


/*******************************
 Footer
******************************/

.marginTopFixLCC {
    margin-top: 6px;
}

.footer {
    flex-wrap: wrap;
    margin-top: 95px;
    width: 95%;
}

@media screen and (min-width: 767px) and (max-width: 1023.9999px) {
    .footer {
        width: 590px;
    }
}

@media screen and (min-width: 1024px) {
    .footer {
        width: 828px;
    }
}

.footer__section {
    width: 50%;
}

@media screen and (max-width: 767.9px) {

    .footer__section:nth-child(3),
    .footer__section:nth-child(4) {
        margin-top: 30px;
    }

    .footer__section--social {
        max-width: 200px;
    }
}

@media screen and (min-width: 768px) {
    .footer__section {
        width: 25%;
    }

    .footer__section--social {
        width: 23%;
    }
}

.footer__label {
    color: #6e6e6e;
    font-family: 'Roboto';
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8em;
}

.footer__link,
.footer__link:visited {
    color: #009cd9;
    font-family: 'Roboto';
    font-size: 16px;
    line-height: 1.8em;
    width: 100%;
}

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

.marginTopFooter {
    margin-top: 63px;
}

.footerMarginMobile {
    margin-left: 5%;
    margin-right: 5%;
}

.hugeMarginRight {
    margin-right: 85px;
}

.marginMobilePortrait {
    margin-left: 6% !important;
}

.marginMobileLandscape {
    margin-left: 22% !important;
}

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

.noHoverFooter {
    color: #009cd9 !important;
    text-decoration: none !important;
}

.footerText1padding {
    margin-bottom: 16px;
}

.footerText2padding {
    margin-bottom: 28px;
}

.borderAbout {
    border-right: #898989 1px solid;
    padding-right: 10px;
}

.borderContact {
    border-right: #898989 1px solid;
    padding-right: 10px;
}

.borderTerms {
    border-right: #898989 1px solid;
    padding-right: 10px;
}

.selectBoxFooter {
    margin-left: 16px;
    margin-right: 16px;
    width: 172px !important;
    background-color: transparent;
    border: 1px solid #a5a5a5 !important;
    color: #a5a5a5;
}

.selectBoxFooter:hover {
    background-color: transparent;
    border: 1px solid #a5a5a5 !important;
}

.selectBoxFooter .sapMSltArrow {
    color: #a5a5a5 !important;
}

.selectBoxFooter .sapMSltLabel {
    padding: 0 !important;
    padding-left: 10% !important;
}

.bringBack {
    z-index: 1;
}

.colorLinkHover.sapMLnk:hover {
    color: #009cd9 !important;
}

.backTo.sapMLnk:hover {
    color: white !important;
    text-decoration: none !important;
}

.red.sapMLnk:hover {
    color: red !important;
    text-decoration: none !important;
}

.correctwidth>.sapMFlexItem {
    width: 100% !important;
    height: 100% !important;
}

.borderBottom {
    border-bottom: 2px solid #EBEBEB;
}

.learnPressed {
    font-weight: bold;
}


/***********************
BUTTONS STYLES
***********************/


/* button how to videos*/

.valvolineButton:active {
    /* Active Button Color */
    background: #006c96;
}

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

.button--prodfinder:active {
    /* Active Button Color */
    background: #0080b2;
}

.valvolineButton:before {
    background-color: #009cd9;
}

.valvolineButton .sapMBtnInner {
    background-color: transparent !important;
    border: none !important;
    border-radius: .2rem;
    color: #fff !important;
    font-family: 'Roboto';
    font-size: 14px;
    text-transform: uppercase;
}

.valvolineButtonPages {
    background-color: #009cd9;
    border-color: #009cd9;
    color: white;
    font-size: 14px;
    font-weight: bold;
    height: 48px;
    width: 15rem;
}

.valvolineButtonPages .sapMBtnInner {
    background-color: transparent !important;
    border: none !important;
    border-radius: .2rem;
    color: white !important;
}

.valvolineButtonDialogCancel .sapMBtnInner {
    background-color: transparent !important;
    border: none !important;
    border-radius: .2rem;
    color: #303030 !important;
    font-family: 'Roboto';
    font-size: 14px;
    text-transform: uppercase;
}

.boxWithPadding {
    padding: 30px;
}

.sapMStdTileBottomRow {
    height: 176px;
    padding: 0;
}

.sideMenuPressed {
    color: #009cd9;
}

.sideMenuLabel:hover {
    color: #009cd9;
}

.cursorPointer {
    cursor: pointer;
}

.boldText {
    font-weight: bold;
}


/* SelectBox and Combobox text aligments */

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


/*Contact Boxes */

.contactBox {
    width: 100%;
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .paddingforTablet {
        padding-right: 24px;
    }
}


/*******************************
Other Sites
******************************/

.iconOtherSites {
    color: #979797 !important;
}

.marginTopLinkOtherSites {
    margin-top: 26px;
}

.iconColorOther {
    color: #009cd9;
}

.otherMargin {
    margin-top: 7px !important;
    margin-bottom: 7px !important;
}

.iconMargin {
    margin-left: 14px;
    color: #009cd9;
}

.otherLeft {
    padding-left: 40px;
}

.otherLeftAboutDash {
    padding-left: 60px;
}

.fixWidth>div {
    width: 100%;
}


/*********************************
 Mobile Menu
********************************/

.contactusfixedheight {
    flex-direction: row;
    height: 55px;
    justify-content: flex-end;
    align-items: center;
}

@media screen and (max-width: 767.9px) {
    .header-page-title-container {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 767.9px) {
    .contactusfixedheight--products-inside {
        height: 20px;
    }

    .huserinfo-frag-container {
        height: 0;
    }
}

.menuMobileHeader {
    height: 2.5rem;
    position: absolute;
    width: 100%;
    z-index: 3;
}

@media screen and (max-width: 767.9px) {
    .hide-bar-mobile-unable-imp {
        margin-top: 0;
    }
}

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

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

.menuMobileIcon {
    height: 20px;
}

@media screen and (max-width: 767.9px) {
    .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;
    }

    .menuMobileList {
        top: 2.5rem;
    }
}

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

.menuMobileButton.sapMBtn .sapMBtnInner,
.sapMBtn .sapMBtnContent {
    background: transparent;
    border: none;
    display: block;
}

.menuMobileButton.sapMBtn .sapMBtnInner,
.sapMBtn .sapMBtnContent:active {
    display: block;
    background: transparent;
    border: none;
}

.menuMobileList .sapMObjLIcon {
    /* Icon Color */
    color: #979797 !important;
}

.menuMobileList .sapMLIB.sapMLIBActive {
    /* List Press Color */
    color: #009cd9 !important;
    background: #efefef !important;
}

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

.sapMLIBHoverable:hover {
    background: transparent !important;
}

.customComboBoxList .sapMLIBHoverable:hover,
.sapMComboBoxBaseList .sapMLIBHoverable:hover {
    background-color: #2789c1 !important;
}

.customComboBoxList .sapMLIB.sapMLIBActive,
.sapMComboBoxBaseList .sapMLIB.sapMLIBActive {
    color: #e5e5e5 !important;
    background: #2789c1 !important;
}

.customComboBoxList .sapMLIB.sapMLIBTypeInactive {
    pointer-events: none !important;
}

.sapMText.sapMObjLTitle {
    color: #979797 !important;
    white-space: nowrap;
    overflow: hidden;
}

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

.sapMPanelContent:not(.sapMPanelBGTransparent) {
    border: none;
}

.customExpandableIcon .sapMPanelExpandableIcon {
    /* hide panel arrow */
    visibility: hidden;
}

.sapContrast.sapMIBar-CTX.sapMFooter-CTX,
.sapContrast .sapMIBar-CTX.sapMFooter-CTX {
    border-top: 1px solid #009cd9;
    background: #009cd9;
}

.sapContrast.sapMFooter-CTX .sapMBtnInner:not(.sapMBtnDisabled),
.sapContrast .sapMFooter-CTX .sapMBtnInner:not(.sapMBtnDisabled) {
    font-family: 'Roboto';
    font-size: 16px;
}

.sapMBtnInner {
    text-shadow: none !important;
}


/****************************************************
Object List Item
****************************************************/

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

.sapMText.sapMObjLTitle {
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}


/**************************************
CSS to costum ICONs
**************************************/

@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-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'valvoline-icons' !important;
    speak: none;
    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;
}

.sapUiSmallestMarginBottom {
    margin-bottom: .5rem !important;
}

.sapUiSmallestMarginBottom {
    margin-bottom: .5rem !important;
}

.orderRowBground2.sapMListBGTranslucent .sapMListTblSubRow {
    background: #f7f7f7 !important;
}

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

.casesMedMarginTop {
    margin-top: 1.5rem;
}

.orders-active-title-spacing {
    margin-top: 1.5rem;
}

.profileDividerMarginRight {
    margin-right: 4rem !important;
}


/* Fix tables in mobile */

.sapMListTblHighlightCol+.sapMListTblHeaderCell,
.sapMListTblHighlightCell+.sapMListTblCell {
    padding-left: 0 !important;
}

.sapMListTblCell.sapMListTblCellNoData,
.sapMListTblRow>:nth-last-child(2) {
    padding-right: 0 !important;
}

.viz-axis-label-rect {
    fill: none !important;
}

.v-hovershadow {
    fill: none !important;
}


/* Fix tables only IE*/

@media screen and (max-width: 767.9px) and (-ms-high-contrast: none) {
    .sapMListTblHighlightCell {
        display: none;
    }

    .sapMListTbl {
        table-layout: auto !important;
    }
}


/* Fix tables only Edge*/

@media screen and (max-width: 767.9px) {
    @supports (-ms-ime-align: auto) {
        .sapMListTblHighlightCell {
            display: none;
        }

        .sapMListTbl {
            table-layout: auto !important;
        }
    }
}

#permissionsPanel>.sapMFlexItem {
    border-bottom: 1px solid #d3d3d3;
}

#permissionsPanel>.sapMFlexItem:last-child {
    border-bottom: 0;
}

.accountDetails .sapMSF {
    width: 100% !important;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .accountDetails .sapMSF {
        width: 378px !important;
    }
}

.accountDetails .sapMFlexItem {
    width: 100%;
}


/* Header */

.upperCase {
    text-transform: uppercase;
}

.header-quick-order__button .sapMBtnDefault {
    background-color: transparent;
    border: 0;
    color: #fff;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 300;
    letter-spacing: .5px;
    padding-top: 2px;
}

.header-quick-order__button__pressed .sapMBtnDefault {
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    font-family: 'Roboto';
    letter-spacing: .5px;
    padding-top: 2px;
}

.header-quick-order__button .sapMBtnHoverable:hover {
    background-color: transparent;
}

@media screen and (max-width: 767.9px) {
    .contactbuttonmobilemargin {
        margin-bottom: 110px;
    }
}

.icon-quick-cart-items-mobile {}

.icon-header {
    color: #fff;
    font-size: 30px;
}

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

.messageStripDialog {
    position: absolute;
    z-index: 15;
    bottom: 15%;
    padding: 10px;
}

.messageStripDialog .sapMMsgStripCloseButton {
    color: #a49393 !important;
    top: 3px;
}

.sapMMsgStripCloseButton::after {
    border: 0;
}


/*************************************
Dialog
*************************************/

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

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .dialog>.sapMDialogSection {
        width: 100% !important;
    }
}

.dialog-margin {
    margin-left: 30px;
    margin-right: 30px;
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .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;
    }

    .dialog_priceList,
    .dialog_sellinData,
    .dialog__content {
        width: 560px !important;
    }
}

@media screen and (min-width: 1024px) {
    .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;
    }

    .dialog_priceList,
    .dialog_sellinData,
    .dialog_export {
        width: 560px !important;
    }

    .dialog_priceList .dialog__content,
    .dialog_sellinData .dialog__content,
    .dialog_export .dialog__content {
        width: 560px !important;
    }
}

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

@media screen and (min-width: 768px) {
    .dialog__header {
        margin: 32px 32px 16px;
    }
}

.dialog__header-title {
    color: #303030;
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 6px;
}

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

.dialog__footer-linkContainer:hover .file-uploaded-link {
    color: #005c87 !important;
    text-decoration: none !important;
}

.dialog__footer-linkContainer .sapUiIcon {
    margin: auto 2px auto 0;
}

.dialog__footer-newCasesFix {
    height: auto;
    flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
    .dialog__footer {
        margin: 16px 32px 32px;
    }
}


/********************************
Buttons
*******************************/

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

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .button {
        color: #fff;
        display: block;
        font-size: 14px;
        font-weight: 600;
        height: 52px !important;
        margin: auto;
    }
}

.button--prodfinder {
    background-color: #009cd9;
    border-color: #009cd9;
    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: 'Roboto';
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

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

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


/*
* VIEW NAME: PromotionsBanner
* DESCPRIPTION: Promotions Banner
*/

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

.promotions-banner__title {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 700;
    color: #303030;
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .promotions-banner__title {
        font-size: 28px;
    }
}

@media screen and (min-width: 1024px) {
    .promotions-banner__title {
        font-size: 32px;
    }
}

.promotions-banner__link {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: normal;
    color: #009cd9 !important;
    text-decoration: none !important;
}

@media screen and (min-width: 1024px) {
    .promotions-banner__link {
        font-size: 16px;
    }
}


/* END */


/*
* VIEW NAME: DirectAccountInactivated; NotAuthorized
* DESCPRIPTION: N/A
*/

.not-authorized-content section,
.unexpected-error-content section {
    display: table;
    width: 100%;
}


/* END */


/*
* VIEW NAME: ProductOEM
* DESCPRIPTION: Product OEM Table
*/

.white {
    color: white;
}

.oemCarDescriptionLine {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #9c9c9c;
}

@media screen and (max-width: 767.9px) {
    .oemCarDescriptionLine {
        border-bottom: 0;
    }
}

.oemTableFont {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 300;
    color: #6e6e6e;
}

.oemTableFontBold {
    font-family: 'Roboto';
    font-size: 16px;
    color: #6e6e6e;
    font-weight: 700;
}

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

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

@media screen and (max-width: 767.9px) {
    .rowOEM {
        flex-wrap: wrap;
    }

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

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

    .OEMTableMobileDisplayNone {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .categoryTextContainerOEM {
        width: 15rem;
        margin-right: .5rem;
    }

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

    .OEMTableMobileDisplay {
        display: none;
    }
}

@media screen and (min-width: 1024px) {
    .categoryTextContainerOEM {
        width: 20rem;
        margin-right: .5rem;
    }

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

    .OEMTableMobileDisplay {
        display: none;
    }
}


/* END */


/*
* VIEW NAME: MyAccountSupplementalRate
* DESCPRIPTION: Supplements Page
*/


/* Safari */

_::-webkit-full-page-media,
_:future,
:root .claimStatusIcon {
    line-height: 1.5;
}

.pageSubtitleBold {
    font-family: Roboto;
    font-size: 25px;
    font-weight: 500;
    color: #303030;
}

.marginCenter {
    margin: auto;
    width: auto;
}


/*Fix IE */

@media screen and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .marginCenter {
        margin: auto;
        direction: rtl;
        width: 100%;
    }
}


/* Fix Edge */

@media screen {
    @supports (-ms-ime-align: auto) {
        .marginCenter {
            margin: auto;
            direction: rtl;
            width: 100%;
        }
    }
}

.marginCenter>div {
    margin: auto;
}


/*Table layout unification*/

.sapUiTableTr>td,
.sapUiTableColHdrTr>td,
.sapUiTableColRowHdr,
.sapUiTableRowHdr {
    border-right: none;
    background-color: #ffffff;
}

.sapUiTableCnt {
    border-right: none;
    border-left: none;
}

.sapUiTableColHdrCnt {
    background-color: #ffffff;
    border-top: 1px solid #9c9c9c;
    border-bottom: 2px solid #e5e5e5;
}

.sapUiTableColRowHdrIco::after {
    top: 0;
    bottom: 0;
    margin-top: 7px;
}

.tableCellStyle .sapUiTableColHdrTr .sapUiTableCol {
    vertical-align: top;
}

.tableHeaderFont {
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #303030;
}

.tableHeaderFontValidateClaims {
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #303030;
    white-space: normal;
}

.sapMTableHeaderNumber {
    text-align: right !important;
    justify-content: flex-end;
}


/*
* VIEW NAME: MyAccountUserManagement
* DESCPRIPTION: Account Access create user  dialog
*/


/* Safari desktop */

@media screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio:0) {
    .width-primary {
        width: 127px;
    }
}


/*
* VIEW NAME: DashHeader
* DESCPRIPTION: All components in Header
*/

.backgroundNormalHeader {
    background-image: url("../resources/headers/header.png");
    background-color: #2870a2;
    background-size: 100% 100%;
}

@media screen and (max-width: 767.9px) {
    .backgroundNormalHeader {
        background-size: auto 100%;
    }
}

.sapMShellBrandingBar {
    /* Hidde the blue Bar on top of the page */
    visibility: hidden;
}


/* END */


/*
* Success Message dialog
*/

.successMessageDialogIcon {
    color: #009cd9;
    margin-bottom: 10px;
    font-size: 25px;
}


/*
* Error Message dialog
*/

.errorMessageDialogIcon {
    color: #e1261c;
    margin-bottom: 10px;
    font-size: 25px;
}


/*
* VIEW NAME: DataLossWarning
* DESCPRIPTION: Warning Message Dialog
*/

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

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

@media screen and (max-width: 1023.9px) and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .warningMessageDialog {
        width: 386px;
    }
}

.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;
}

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

.warningMessageDialog__title {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: bold;
    color: #303030;
}

.warningMessageDialogButton .sapMBtnInner {
    /*updated for mobile button of create new case 6/21/2017*/
    background-color: transparent !important;
    border: none !important;
    border-radius: .2rem;
    color: #fff !important;
    font-family: 'Roboto';
    text-transform: uppercase;
}

.warningMessageDialogButton {
    background-color: #009cd9;
    color: white;
    font-size: 14px;
    font-weight: normal;
    height: 41px;
    width: 7rem;
    padding: 0;
}

.warningMessageDialogButton_Blue {
    background-color: #009cd9;
    border-color: #009cd9;
    color: white;
}

.warningMessageDialogButton_Red {
    background-color: #e1261c;
    border-color: #e1261c;
    color: white;
}

.warningMessageDialogButton_White {
    background-color: #ffffff;
    border: 1px solid #009cd9;
    color: #009cd9;
}

.warningMessageDialogButton_White .sapMBtnInner {
    color: black !important;
}

@media screen and (min-width: 1024px) {
    .warningMessagedialog {
        width: 450px !important;
        border-radius: 11px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .warningMessagedialog {
        width: 450px !important;
        border-radius: 11px;
    }
}

@media screen and (max-width: 767.9px) {
    .warningMessagedialog {
        width: 100vw;
    }

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


/* END */


/*
* VIEW NAME: DistributorInsights
* VIEW DESCPRIPTION: Insights Distributor
*/

.InputField .sapMInputBaseInner {
    /* For IE */
    font-family: 'Roboto' !important;
    font-size: .8rem !important;
    font-weight: lighter !important;
    font-style: normal;
    color: #6e6e6e !important;
    padding-left: .5rem;
    padding-right: .5rem;
}

.InputField>div>input {
    border: 1px solid #bfbfbf;
}

@keyframes inputColorAnimation {
    0% {
        background-color: transparent;
    }

    100% {
        background-color: #fff2d3;
    }
}


/* END */


/*
* VIEW NAME: DASH
* VIEW DESCPRIPTION: Shared Components
*/

men html.sap-desktop .sapMCrslHud .sapMCrslPrev:focus::before,
html.sap-desktop .sapMCrslHud .sapMCrslNext:focus::before {
    border: 0;
}

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


/* This is to match the SapUI5 media queries breakpoints */

@media screen and (max-width: 599px) {
    .sapMCrsl {
        min-width: auto;
    }
}

html.sap-tablet .sapMDialog,
html.sap-desktop .sapMDialog {
    min-width: auto;
}

.hidden {
    display: none !important;
}

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


/* END */

.storeList .sapMListHdr,
.storeListReviews .sapMListHdr {
    background-color: #009cd9;
    color: #ffffff;
}

.HeaderStoreReview {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.125rem;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #009cd9;
    color: #ffffff;
    height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
    border-bottom: 1px solid #cccccc;
}

.backgroundColorForReview {
    background-color: #009cd9;
    width: 1155px;
}

.iconReview {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 2rem;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    color: #ffffff;
}

.SentimentList .sapMFeedListShowSeparatorsAll .sapMFeedListItem {
    padding-top: .2rem;
    padding-bottom: .2rem;
}

.SentimentList .sapMFeedListItemFigure {
    display: none;
}


/*********************************/


/* VPS Page                     */


/*********************************/

.tableTitle {
    text-align: left;
    color: #009cd9;
    font-weight: bold;
    font-size: 1rem;
}

.pageDescription {
    margin-bottom: 2.5rem;
    width: 100%;
}

.vpspageHeader {
    text-align: left;
    font-size: 18px;
    font-weight: bolder;
}

.bulletPoint {
    margin-bottom: 0;
}

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

.vpsTable {
    font-family: 'Roboto' !important;
    font-size: 16px !important;
    font-weight: lighter !important;
    color: #6e6e6e !important;
}

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

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

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

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

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

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

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

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

.vpsServiesCoveredTable {
    padding-top: 1rem;
}

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

.vpsServiesCoveredTable .sapMListTbl th {
    background: transparent;
}

.vpsServiesCoveredTable .sapMListTblRow {
    height: 0;
}

.vpsMarginSearchDescription {
    margin-bottom: 25px;
}

.vpsMarginCategory {
    margin-top: 18px;
}

.vpsContainerHeadLine {
    margin-top: 30px;
    padding-left: 32px;
    padding-right: 32px;
    margin-bottom: 48px;
}

.breakvps {
    display: contents;
}

@media screen and (min-width:1024px) {
    .vps__buttons_desktop {
        justify-content: space-between;
    }

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

    .vps_buttons_category_desktop {
        margin-right: 30px;
    }

    .hidelistdesktop {
        display: none;
    }

    .hide-in-desktop {
        display: none;
    }
}

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

@media screen and (min-width:768px) and (max-width:1023px) {
    .vps__buttons {
        justify-content: space-between;
        width: auto;
        min-width: 250px;
    }

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

    .vps_buttons_category {
        margin-right: 30px;
    }

    .hidelisttablet {
        display: none;
    }

    .hide-in-tablet {
        display: none;
    }
}

@media screen and (max-width: 767.9px) {
    .vps__buttons_mobile .sapMBtnInner.sapMBtnText {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

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

    .hidetablemobile {
        display: none;
    }

    .showNowButtonMargin {
        min-width: 150px;
    }
}


/*********************************/


/* Goal Settings Page            */


/*********************************/

.sapUiTableCol:hover {
    background-color: #ffffff !important;
}

.sapUiTableRowHdr.sapUiTableRowHvr {
    background-color: #ffffff !important;
}

.sapUiTableCtrl tr.sapUiTableRowHvr {
    background-color: #ffffff !important;
}

.sapUiTableTr.sapUiTableRowHvr>td:not(.sapUiTableTDDummy) {
    background-color: #ffffff !important;
}

.textColorForce {
    color: #333333 !important;
}

.sapUiTableTreeIcon {
    width: 1rem;
}

.sapUiTableVScr .sapUiTableCtrlScr {
    border-right: none;
}


/*********************************/


/* Custom Panel                  */


/*********************************/

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

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


/*********************************/


/*  Advanced Sorting Dialog      */


/*********************************/

.displaySelectedTableRow {
    border-color: #009cd9;
}

.showNowButtonMargin {
    margin-bottom: 15px;
}


/* Hybris iframe */

@media screen and (max-width:1023.9999px) {
    .promotions-banner__width {
        width: 100%;
    }

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

    .filtersPageLayout {
        flex-direction: column;
    }

    .filterPageWidth {
        width: 100%;
    }

    .filterPageMargin {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    .iconFilterMargin {
        margin-left: 8px;
        color: #009cd9;
    }
}

@media screen and (min-width: 1024px) {
    .promotion-banner__layout {
        flex-direction: row;
        width: 100%;
    }

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

    .promotions-banner__width {
        width: 50%;
    }

    .filterPageWidth {
        width: 50%;
    }

    .iconFilterMargin {
        margin-left: 14px;
        color: #009cd9;
    }
}

.otherBackgroundImageFilter {
    background-image: url("../resources/img/Filters.png");
    height: 200px;
    width: 100%;
    background-position: center;
}

.otherBackgroundImageWiper {
    background-image: url("../resources/img/Wipers.png");
    height: 200px;
    width: 100%;
    background-position: center;
}

.font-wiper-filter-h1 {
    font-family: 'Roboto';
    font-size: 55px;
}

.paddingFilterWiperSection {
    padding-top: 20px;
    padding-bottom: 15px;
}

.filterPageMargin {
    margin-top: 7px !important;
    margin-bottom: 7px !important;
}

.iconMarginGuides {
    margin-right: 8px;
}

.filterPagePadding {
    padding-right: 10px;
    padding-left: 10px;
}

.filterPageSectionPadding {
    padding-top: 5px;
    padding-bottom: 5px;
}

.filterPageLinkHover a,
.filterPageLinkHover span {
    color: #979797 !important;
}

.filterPageSubtitle {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: lighter;
    color: #303030;
}


/****************************************/


/* Products Stocking Solution           */


/****************************************/

.sapMITBText:after {
    border: none !important;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

    /* IE10+ CSS styles*/
    .widthDLCodeIE {
        width: 80px;
    }

    .widthDLNameIE {
        width: 100px;
    }

    .widthMultiHeaderIE {
        width: 102px;
    }

    .widthMultiHeaderVariationIE {
        width: 106px;
    }

    .iconIE {
        position: absolute;
        margin-left: -12px;
    }

    .iconMultiHeaderIE {
        position: absolute;
        margin-left: -3px;
        margin-top: -10px;
    }

    .dialog__content-input-entryform .sapMInputBaseInner,
    .dialog__content-input-entryform .sapMInputBaseInner:focus,
    .dialog__content-input-entryform .sapMInputBaseInner:hover {
        font-style: normal !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.9999px) {
    .newWidth {
        width: 600px !important;
    }

    .marginLeft {
        margin-left: 42px;
    }

    .newWidth {
        width: 530px !important;
    }
}

@media screen and (min-width: 1024px) {
    .marginLeft {
        padding-left: 40px;
    }

    .newWidth {
        width: 530px !important;
    }
}


/* Edge */

.dialog__content-input-entryform input::-webkit-input-placeholder {
    font-style: normal !important;
}


/* Order Details Page Carrier Tracking */

.order-details-line-item-status {
    justify-content: center;
    flex-wrap: wrap;
    max-height: 18px;
    overflow: hidden;
}

@media screen and (min-width: 1024px) {
    .pageSubtitle {
        font-size: 20px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .pageTitle {
        font-size: 13px !important;
    }
}

.bottomLinkMargin {
    margin-top: 25px;
}

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

.tableHeight {
    height: 100% !important;
}

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

@media screen and (max-width: 767.9px) {
    .pageTitle {
        font-size: 13px !important;
    }

    .sdsDialogHeight {
        margin: 0 16px 0 16px !important;
    }

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