:root {
    --color-valvolineBlue: #078bc7;
    --color-valvolineDarkBlue: #00316d;
    --color-valvolineRed: #e51c24;
    --color-text-headerGray: #303030;
    --color-text-bodyCopyGray: #6E6E6E;
    --color-text-legalGray: #979797;
    --color-background-darkGray: #E5E5E5;
    --color-background-mediumGray: #EFEFEF;
    --color-background-white: #FFFFFF;

    --font-barlow: "Barlow";
    --font-barlow-condensed: "Barlow Condensed";
    --font-passion-one: "Passion One";
    --font-size-xs-large: 48px;
    --font-size-large: 32px;
    --font-size-medium: 20px;
    --font-size-small: 16px;
    --font-size-tiny: 12px;
    --font-weight-light: 100;
    --font-weight-regular: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

/***************************************************/
/* [BEGIN] PRINT STYLE
/***************************************************/
@media print {
    .global-font-style-bodyCopy {
        font-size: 12px;
    }

    .global-font-style-links {
        font-size: 12px;
    }

    .global-not-printable {
        display: none !important;
    }

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

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

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

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

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


/***************************************************/
/* [BEGIN] GENERAL
/***************************************************/
.global-font-style-pageTitle {
    font-family: var(--font-passion-one);
    font-size: var(--font-size-xs-large);
    color: var(--color-text-headerGray);
}

.global-font-style-headers {
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    color: var(--color-text-headerGray);
    font-weight: var(--font-weight-bold);
}

.global-font-style-pageSubTitle {
    font-family: var(--font-barlow-condensed);
    font-size: var(--font-size-large);
    color: var(--color-text-headerGray);
}

.global-font-style-info {
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    color: var(--color-text-headerGray);
    font-weight: var(--font-weight-light);
}

.global-font-style-byline {
    font-family: var(--font-barlow);
    font-size: var(--font-size-tiny);
    color: var(--color-text-headerGray);
    font-weight: var(--font-weight-bold);
}

.global-font-style-bodyCopy {
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    color: var(--color-text-bodyCopyGray);
    font-weight: var(--font-weight-light);
}

.global-font-style-links {
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    color: var(--color-valvolineBlue) !important;
    font-weight: var(--font-weight-normal);
    text-decoration: none !important;
    white-space: normal;
}

.global-font-style-valvolineLink {
    color: var(--color-valvolineBlue) !important;
    text-decoration: none !important;
}

.global-font-style-bold {
    font-weight: var(--font-weight-bold);
}

.global-font-style-navigation {
    font-family: var(--font-barlow);
    font-size: var(--font-size-tiny);
    color: var(--color-text-bodyCopyGray);
    font-weight: var(--font-weight-medium);
}

.global-font-color-white {
    color: var(--color-background-white) !important;
}

.reusable-border-grey-bottom {
    border-bottom: 1px solid var(--color-text-bodyCopyGray);
}

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

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

.global-short-text-container-height {
    height: auto;
}

.global-customIcon .sapMBtnIcon {
    font-size: 24px;
    line-height: 2.375rem;
    width: 24px;
    text-align: center;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    max-height: 1.5rem;
    margin-top: 8px;
}

.global-customIcon-header .sapMBtnIcon {
    margin-top: 0;
}

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

.global-image-card-imageContainer-height {
    height: auto;
}

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

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

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

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

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

.global-footer-section {
    width: 50%;
}

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

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

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

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

.global-background-gray {
    background-color: var(--color-background-mediumGray);
}

.global-background-white {
    background-color: var(--color-background-white);
}

.global-hidden {
    display: none !important;
}

.global-overflow {
    overflow: visible !important;
}

.global-dialog-header {
    border-bottom: 1px solid #000;
    margin: 16px 16px 8px;
}

.global-byline {
    font-family: var(--font-barlow);
    font-size: 12px;
    font-weight: bold;
    color: #303030;
    height: 35px;
}

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

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

.global-navigation-cards-link-container {
    height: 75px;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
}

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


.global-font-page-subtitle-h2 {
    font-family: var(--font-barlow);
    font-size: 20px;
    font-weight: lighter;
}

.global-flex-header {
    margin-bottom: 20px;
}

.global-flex-container-label {
    flex-wrap: wrap;
    white-space: normal;
}

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

.global-header-navback-arrow .sapMBtnDefault {
    background-color: transparent;
    border: 0;
    color: white;
    font-size: 20px;
    font-family: var(--font-barlow);
    font-weight: lighter;
    height: auto;
}

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

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

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

.global-message-page .sapMMessagePageContentWrapper {
    margin-top: 1rem;
}

.global-message-page .sapMMessagePageIcon::before {
    color: rgba(135, 135, 135, 1) !important;
}

.global-message-page .sapMMessagePageMainText {
    font-family: var(--font-barlow);
    font-size: 22px;
}

/***************************************************/
/* [END] GENERAL
/***************************************************/


/***************************************************/
/* [BEGIN] BROWSER SPECIFIC
/***************************************************/

/* MOZILLA */
@-moz-document url-prefix() {
    .global-back-to-top {
        line-height: 30px;
    }
}

/***************************************************/
/* [END] BROWSER SPECIFIC
/***************************************************/


/***************************************************/
/* [BEGIN] DESKTOP SCREEN SIZE
/***************************************************/
@media screen and (min-width:1024px) {
    .global-cards-page-container {
        padding: 30px calc(30px - .5%);
        width: 100%;
    }

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

    .global-hero-card-content {
        background-color: var(--color-background-white);
        opacity: .95;
        width: 18rem;
        min-height: 200px;
        height: auto;
        position: relative;
        padding: 32px 16px 48px;
    }

    .global-hero-subtitle-height {
        height: auto;
        min-height: 48px;
    }

    .global-card-subtitle,
    .global-card-subtitle>span {
        max-height: 78px !important;
    }

    .global-card-description,
    .global-card-description>span {
        max-height: 150px !important;
    }

    .global-hero-image-card-link-position {
        position: absolute;
        bottom: 0;
        margin: 10px 0;
    }

    .global-element-hidden-in-desktop {
        display: none;
    }

    .global-card-image {
        width: 100%;
        height: 13vw;
        max-height: 176px;
        overflow: hidden;
    }

    .global-img-cardContent {
        margin: 32px 10px 54px 10px;
        height: auto !important;
    }

    .global-card-longText {
        margin-bottom: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .global-image-cardLink-position {
        position: absolute;
        bottom: 0;
        margin: 10px 10px;
    }

    .global-font-style-valvolineLink:hover {
        color: #979797 !important;
    }

    .global-header-container {
        margin-top: 0;
        height: 150px;
        padding: 0 30px 0 30px;
    }

    .global-card-container {
        width: 24%;
        height: auto;
        margin: .5%;
        animation: opacityanimation;
        animation-duration: .3s;
        min-height: 400px;
    }

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

    .global-navigation-card-container {
        height: auto;
        width: 24%;
        background-color: white;
        margin: .5%;
        animation: opacityanimation;
        animation-duration: .3s;
        position: relative;
    }

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

    .global-page-container {
        padding: 30px;
        width: 100%;
    }

    .global-white-page-container {
        padding: 30px;
        width: 100%;
        background: white;
    }

    .global-margin-text {
        margin-bottom: 20px;
    }

    .global-dash-message-container {
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
    }
}

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


/***************************************************/
/* [BEGIN] TABLET SCREEN SIZE
/***************************************************/
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
    .global-cards-page-container {
        padding: 6.5% calc(6.5% - 5%);
        width: 100%;
    }

    .global-hero-card-container {
        width: 100%;
        margin: 5%;
    }

    .global-hero-card {
        height: 100%;
        width: auto;
        background-repeat: no-repeat;
        background-size: cover;
        vertical-align: middle;
        position: relative;
        display: flex;
        align-items: center;
    }

    .global-hero-card-content {
        background-color: var(--color-background-white);
        opacity: .95;
        width: 18rem;
        min-height: 200px;
        height: auto;
        position: relative;
        padding: 32px 16px 48px;
    }

    .global-hero-subtitle-height {
        height: auto;
        min-height: 48px;
    }

    .global-card-subtitle,
    .global-card-subtitle>span {
        max-height: 78px !important;
    }

    .global-hero-image-card-link-position {
        position: absolute;
        bottom: 0;
        margin: 10px 0;
    }

    .global-element-hidden-in-tablet {
        display: none;
    }

    .global-card-image {
        width: 100%;
        height: 18vw;
        overflow: hidden;
    }

    .global-img-cardContent {
        margin: 32px 16px 48px 16px;
        height: auto !important;
    }

    .global-card-longText {
        height: auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .global-image-cardLink-position {
        position: absolute;
        bottom: 0;
        margin: 0 16px;
    }

    .global-font-style-links {
        font-family: var(--font-barlow);
        font-size: var(--font-size-small);
        color: var(--color-valvolineBlue);
        font-weight: var(--font-weight-light);
        text-decoration: none;
        white-space: normal;
    }

    .global-back-to-top {
        background: rgba(0, 156, 217, 0.5);
        border-radius: 50px;
        display: flex;
        align-items: flex-end;
        width: 30px;
        position: fixed;
        bottom: 80px;
        right: 22px;
        color: #fff;
        cursor: pointer;
        font-size: 30px;
        padding-left: 10px;
    }

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

    .global-header-container {
        margin-top: 0;
        padding: 0 calc(6.5% - .5%) 0 calc(6.5% - .5%);
        height: 150px;
    }

    .global-footer-container {
        padding: 50px calc(6.5% - .5%) 30px calc(6.5% - .5%);
    }

    .global-card-container {
        width: 40%;
        height: auto;
        margin: 10px 5%;
        animation: opacityanimation;
        animation-duration: .3s;
    }

    @supports (-ms-ime-align: auto) {
        .global-card-container {
            width: calc(50% - 5px);
            margin-bottom: 5px;
            margin-top: 5px;
        }
    }

    .global-font-style-pageTitle {
        font-size: var(--font-size-xs-large) !important;
    }

    .global-navigation-card-container {
        height: auto;
        width: 49%;
        background-color: white;
        margin: .5%;
        animation: opacityanimation;
        animation-duration: .3s;
        position: relative;
    }

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

    .global-font-page-subtitle-h2 {
        font-size: 16px !important;
    }

    .global-page-container {
        padding: 6.5%;
        width: 100%;
    }

    .global-white-page-container {
        padding: 6.5%;
        background: white;
        width: 100%;
    }

    .global-margin-text {
        margin-top: 20px;
    }

    .global-dash-message-container {
        padding-left: 6.5%;
        padding-right: 6.5%;
        width: 100%;
    }

}

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


/***************************************************/
/* [BEGIN] MOBILE SCREEN SIZE
/***************************************************/
@media screen and (max-width: 767.9px) {
    .global-cards-page-container {
        width: 100%;
    }

    .global-element-hidden-in-mobile {
        display: none;
    }

    .global-hero-card-container {
        width: 98%;
        height: 28rem;
        background-color: var(--color-background-white);
        margin: 5px;
        animation: opacityanimation;
        animation-duration: .5s;
    }

    .global-hero-card {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        vertical-align: middle;
    }

    .global-hero-card-content {
        background-color: var(--color-background-white);
        opacity: .95;
        width: 18rem;
        height: 20.2rem;
        position: relative;
        top: 4.8rem;
    }

    .global-font-style-pageSubTitle {
        font-size: var(--font-size-medium) !important;
    }

    .global-card-subtitle,
    .global-card-subtitle>span {
        max-height: 78px !important;
    }

    .global-card-description,
    .global-card-description>span {
        max-height: 150px !important;
    }

    .global-hero-image-card-link-position {
        position: absolute;
        bottom: 0;
    }

    .global-card-image {
        width: 100%;
        height: auto;
    }

    .global-img-cardContent {
        margin: 32px 16px 16px 16px;
        height: auto !important;
        padding-bottom: 38px;
    }

    .global-image-cardLink-position {
        position: absolute;
        bottom: 0;
        margin: 0 16px;
    }

    .global-font-style-links {
        font-family: var(--font-barlow);
        font-size: var(--font-size-small);
        color: var(--color-valvolineBlue);
        font-weight: var(--font-weight-light);
        text-decoration: none;
        white-space: normal;
    }

    .global-message-container-to-toast {
        left: 0;
        top: 40px;
        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;
    }

    .global-message-container-to-toast-no-menu-fix {
        box-shadow: 0 0;
        top: 0;
    }

    .global-back-to-top {
        background: rgba(0, 156, 217, 0.5);
        border-radius: 50px;
        display: flex;
        align-items: flex-end;
        width: 30px;
        position: fixed;
        bottom: 80px;
        right: 22px;
        color: #fff;
        cursor: pointer;
        font-size: 30px;
        padding-left: 10px;
    }

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

    .global-header-width {
        height: 100%;
        justify-content: flex-end;
    }

    .global-header-container {
        margin-top: 2.5rem;
        background-size: auto 100%;
        padding: 0 2% 0 2%;
        height: 150px;
    }

    .global-footer-container {
        padding: 50px 2% 30px 2%;
    }

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

    .global-card-container {
        width: 96% !important;
        height: auto !important;
        margin: 2% !important;
        background-color: white;
        animation: opacityanimation;
        animation-duration: .5s;
    }

    .global-font-style-pageTitle {
        font-size: var(--font-size-large) !important;
    }

    .global-navigation-card-container {
        height: auto;
        width: 96%;
        background-color: white;
        margin: 2%;
        animation: opacityanimation;
        animation-duration: .3s;
        position: relative;
    }

    .global-page-container {
        padding: 2%;
        width: 100%;
    }

    .global-white-page-container {
        padding: 2%;
        background: white;
        width: 100%;
    }

    .global-margin-text {
        margin-top: 20px;
    }

    .global-header-container-no-menu-fix {
        margin-top: 0;
    }

    .global-font-page-subtitle-h2 {
        font-size: 20px !important;
    }

    .global-dash-message-container {
        padding-left: 2%;
        padding-right: 2%;
        width: 100%;
    }
}

/***************************************************/
/* [BEGIN] MOBILE SCREEN SIZE
/***************************************************/


/***************************************************/
/* [BEGIN] CUSTOM SIZE
/***************************************************/
@media screen and (min-width: 1280px) {
    .global-message-container-to-toast {
        left: 50%;
        top: 0;
        position: fixed;
        width: 1210px !important;
        margin-left: -570px;
        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;
    }

    .global-message-container-to-toast-no-menu-fix {
        box-shadow: 0 0;
        width: 1280px !important;
        margin-left: -640px !important;
    }

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

@media screen and (max-width: 1280px) and (min-width: 768px) {
    .global-message-container-to-toast {
        left: 70px;
        top: 0;
        position: fixed;
        width: calc(100% - 70px) !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;
    }

    .global-message-container-to-toast-no-menu-fix {
        box-shadow: 0 0;
        left: 0;
        width: 100% !important;
    }
}

@media screen and (min-width: 767.9px) {
    .global-dialog-header {
        margin: 32px 32px 16px;
    }

    .global-footer-section {
        width: 25%;
    }
}

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

.global-tables-content-text-refactor .sapMListTbl .sapMText {
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
    color: var(--color-text-bodyCopyGray);
    font-weight: var(--font-weight-regular);
}

.global-font-style-table-header {
    font-family: var(--font-barlow) !important;
    font-size: var(--font-size-small) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-headerGray);
    white-space: normal;
}

.global-font-size-small {
    font-family: var(--font-barlow);
    font-size: var(--font-size-small);
}

.global-header-button:hover>.sapMBtnHoverable {
    background-color: transparent;
 }
 
 .global-header-button .sapMBtnTransparent {
     color: var(--color-background-white);
 }
 
 .global-header-button > .sapMBtnDefault {
     font-family: var(--font-barlow);
     font-weight: var(--font-weight-regular);
     font-size: var(--font-size-small);
     background-color: transparent;
     color: var(--color-background-white);
     border: none;
 }
 
 .global-header-button > .sapMBtnDefault > .sapMBtnIcon {
     font-size: 24px;
     line-height: 2.5rem;
 }

 .global-button-valvolineBlueButton .sapMBtnInner.sapMBtnText {
    font-family: var(--font-barlow);
    background-color: var(--color-valvolineBlue);
    color: var(--color-background-white);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    min-width: 10rem;
}

.global-button-valvolineBlueButton .sapMBtnInner.sapMBtnText:active {
    background-color: var(--color-mediumBlue);
}

.global-font-color-valvolineBlue {
    color: var(--color-valvolineBlue);
}