:root {
    --citgo-border-color: #B3BEC6;
    --citgo-background-color: #F5F6F7;
    --citgo-modal-background-color: #EBEEF0;
    --citgo-white-color: #fff;
    --citgo-black-color: #000;
    --citgo-error-color: #EF4444;
    --citgo-swift-ship-error-color: #EA001E;
    --citgo-badge-background-color: #ECFDF5;
    --citgo-badge-color: #047857;
    --citgo-brand-secondary: #33A3FF;
    --citgo-bold-font-weight: 700;
    --citgo-semi-bold-font-weight: 600;
    --citgo-disabled-button-hover-color: #DCE1E4;
    --citgo-disabled-button-hover-text-color: #47555F;
    --citgo-button-text-color: #005DAA;
    --citgo-inactive-icon-color: #C7CFD5;
    --citgo-spacing-small: 0.5rem;
    --citgo-spacing-large: 1.25rem;
    --citgo-font-size-x-large: 1.5rem;
}

/* match font sizes with configured sizes in XB theme */
h1 {
    font-size: var(--dxp-s-text-heading-extra-large-font-size);
}

h2 {
    font-size: var(--dxp-s-text-heading-large-font-size);
}

h3 {
    font-size: var(--dxp-s-text-heading-medium-font-size);
}

h4 {
    font-size: var(--dxp-s-text-heading-small-font-size);
}

/* june 15th update made section margin left & right 15% - overrides this */
.comm-section-container {
    margin: 0 !important;
}

section[c-rocketHomeLayout_rocketHomeLayout] {
    margin-bottom: 40px!important;
}
section[c-rocketLayout_rocketLayout] {
    margin: 40px 0 !important;
}

[commerce-my-account-password]label {
    --dxp-s-form-element-label-font-size: 1rem !important;
}

/* PDP ootb customizations START*/
commerce_product_details-heading div > p {
    font-weight: bold;
}
commerce_product_details-heading div {
    font-size: var(--dxp-g-font-size-4);
}
/* PDP ootb customizations END*/

/* override the ootb commerce layout sticky header */
.header[data-f6-region] {
    position: static !important;
}

[data-f6-region] {
    z-index: auto;
}

[data-f6-region]:focus-within {
    outline: none !important;
}

.ship-to-dropdown .slds-dropdown {
    max-height: 175px;
    overflow: scroll;
}
    /* OOTB added classes START */

/* fixes site logo in header to set width of <a> tag  */
.site-logo-style {
    display: block;
    width: max-content;
}

/* section that holds banner and section that holds quick order*/
.banner-section,
.quickorder-section {
    padding: 0 !important;
}

/* text blocks in rocketBanner */
.banner-text__primary h1 {
    font-size: 80px;
}

/* centers tile content in Section on homepage */
.tile-content__center .columns-content {
    align-items: center;
}

/* on pdp Product Detail Heading removes margin bottom to properly align lead time component  */
.pdp-remove-margin-bottom {
    margin-bottom: 0;
}

/* centers PDP qty with buttons */
.column-content__center .columns-content .columns {
    align-items: center;
}

/* styling for Account Switcher button in utility header */
.switch-account__button a {
    background:rgb(0, 23, 42);
    font-weight: bold;
    font-size: var(--dxp-g-font-size-4);
    border: none;
    padding: 0;
}

.switch-account__button a:hover {
    background-color: transparent !important;
}

/* for pages with background color and border line */
.section-background-color,
.cart-background-color {
    background-color: var(--citgo-background-color);
}

.section-background-color > .columns-content,
.cart-background-color .columns-content community_layout-column:first-child,
.custom-permission-cart-background-color .columns-content .columns dxp_layout-column:first-child,
.component-border-styles {
    background: var(--citgo-white-color);
    padding: var(--dxp-g-spacing-medium);
    border: 1px solid var(--citgo-border-color);
}

.custom-permission-cart-background-color .quantity-selector-numberInput .number-input__increment-button,
.custom-permission-cart-background-color .quantity-selector-numberInput .number-input__decrement-button {
    background-color: var(--slds-c-button-color-background);
}

/* PDP class to remove column when images are not being used */
.no-image .columns-content community_layout-column:first-child,
.no-image .columns-content .columns dxp_layout-column:first-child {
    display: none;
}

    /* OOTB added classes END */

/* Cart */
commerce_cart-header lightning-combobox .slds-input_faux {
    border: none;
    color: var(--dxp-s-link-text-color, var(--dxp-g-brand));
    font-weight: bold;
}

commerce_cart-header lightning-combobox svg.slds-icon {
    fill: var(--dxp-s-link-text-color, var(--dxp-g-brand));
}

/* Added for Prouct listing page custom tabs */
.custom-tabs .slds-tabs_default__nav {
    border-bottom-color: #9AA8B3 !important;
}
.custom-tabs .dxp-tab-bar-tab-horizontal {
    border: 1px solid #9AA8B3;
    color: var(--dxp-g-neutral-contrast-1) !important;
    font-size: var(--dxp-g-font-size-6);
    font-weight: 700;
    min-height: 37px;
    padding: var(--dxp-g-spacing-xxsmall) var(--dxp-g-spacing-small) !important;
}
.custom-tabs .dxp-tab-bar-tab-horizontal.dxp-tab-bar-active-tab-styles {
    background: var(--dxp-g-brand) !important;
    border-bottom: var(--dxp-g-spacing-none);
    border: 1px solid var(--dxp-g-brand);
    color: var(--dxp-g-root) !important;
}
.custom-tabs .dxp-tab-bar-hover-tab-horizontal:hover {
    border-bottom: var(--dxp-g-spacing-none) !important;
    color: var(--dxp-g-root) !important;
}
.custom-tabs .dxp-tab-bar-hover-tab-horizontal:focus-visible {
    outline: var(--dxp-g-spacing-none);
}
.custom-tabs .dxp-tabs-container li + li {
    margin-left: -1px;
}

/* Added for order preferences Modal UI */
.order-preference.slds-modal__container {
    margin: 0 auto;
    max-width: 1200px;
    width: 90%;
}
.order-preference .slds-modal__content {
    max-height: 75vh;
    overflow-y: auto;
    background: var(--citgo-modal-background-color);
}

.order-preference c-rocket-order-preferences {
    width: 100%;
}
.order-preference lightning-combobox svg.slds-icon {
    fill: var(--citgo-black-color);
}
.hide-body-scroll {
    overflow: hidden;
}

.custom-checkbox .slds-form-element__label {
    color: var(--dxp-g-brand);
    font-size: var(--dxp-g-spacing-medium);
    font-weight: 700;
}

.custom-checkbox  .slds-checkbox [type=checkbox]+.slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--dxp-g-brand);
    border-width: 2px;
    border-radius: 3px;
}
/* Added for order preferences Modal UI */

/* Added for Prouct listing page custom tabs */
.custom-tabs .slds-tabs_default__nav {
    border-bottom-color: #9AA8B3 !important;
}
.custom-tabs .dxp-tab-bar-tab-horizontal {
    border: 1px solid #9AA8B3;
    color: var(--dxp-g-neutral-contrast-1) !important;
    font-size: var(--dxp-g-font-size-6);
    font-weight: 700;
    min-height: 37px;
    padding: var(--dxp-g-spacing-xxsmall) var(--dxp-g-spacing-small) !important;
}
.custom-tabs .dxp-tab-bar-tab-horizontal.dxp-tab-bar-active-tab-styles {
    background: var(--dxp-g-brand) !important;
    border-bottom: var(--dxp-g-spacing-none);
    border: 1px solid var(--dxp-g-brand);
    color: var(--dxp-g-root) !important;
}
.custom-tabs .dxp-tab-bar-hover-tab-horizontal:hover {
    border-bottom: var(--dxp-g-spacing-none) !important;
    color: var(--dxp-g-root) !important;
}
.custom-tabs .dxp-tab-bar-hover-tab-horizontal:focus-visible {
    outline: var(--dxp-g-spacing-none);
}
.custom-tabs .dxp-tabs-container li + li {
    margin-left: -1px;
}

.start-order-cancel-button .slds-button {
    background-color: var( --citgo-background-color);
    border-color: var(--dxp-g-brand);
    color: var(--dxp-g-brand);
}

.show-cart-base-button .slds-button {
    color: var(--dxp-g-brand);
}

.popover-dismiss .slds-button {
    padding: 0;
}

.bottom-btns-outer lightning-button button, .bottom-btns lightning-button button {
    font-weight: var(--dxp-c-strong-text-weight);
}

.full-width-btn .slds-button {
    width: 100%
}

.blue-button-border .slds-button:not([disabled]) {
    border-color: var(--dxp-g-brand);
}

/* custom styles to lightning-file-upload */
.slds-file-selector__button,
.slds-file-selector__text,
.lightning-file-upload-info-label {
    font-size: 12px;
}

/* hiding my profile input border */
.my-profile__label .slds-input[disabled], .my-profile__label .slds-button[disabled] {
    border: 0;
    color: var(--slds-g-color-neutral-base-50);
}
.my-profile-outer .slds-card__header{
    padding-top: var(--dxp-g-spacing-medium);
}

/* Cart page order preferences component styles */
.cart-start-new-order-btn {
    width: 100%;
    border: 1px solid var(--dxp-g-brand);
    color: var(--dxp-g-brand);
    font-size: var(--dxp-s-body-font-size);
    font-weight: var(--citgo-bold-font-weight);
}

.order-preferences-button .slds-button {
    color: var(--citgo-black-color);
    font-family: Arial;
    font-size: 1.25rem;
    font-weight: 700;
}

.order-preferences-button .slds-button, .order-preferences-button .slds-button:focus {
    box-shadow: none;
}

.chevron-button-icon .slds-button {
    border: 0;
}

.chevron-button-icon .slds-button lightning-primitive-icon .slds-button__icon {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--citgo-black-color);
}

.navigation-container .navigationCtn.lwc-1tll2hor428 {
    padding-inline: var(--dxp-g-spacing-none);
}

/* added for plp rocket add to list button UI */
.plp-add-to-list-btn {
    align-items: center;
    display: flex;
    min-height: 100px;
    padding-bottom: 20px;
    position: relative;
}

.add-to-cart-button {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

/* wishlist add all to cart */
.add-all-to-cart-btn .slds-button[disabled] {
    background-color: var(--dxp-g-neutral-1) !important;
    border-color: var(--dxp-g-neutral-1) !important;
    color: var(--dxp-s-button-color-contrast) !important;
}

.create-list-btn .slds-button[disabled] {
    border-color: transparent !important;
}

.navigation-container h1 {
    padding-top: var(--dxp-g-spacing-xxxsmall);
}
.user-admin__header {
    margin-top: var(--dxp-g-spacing-medium);
}

.tooltip-outer-plp .slds-nubbin--right:before, .slds-nubbin_right:before, .tooltip-outer-plp .slds-nubbin--right:after, .slds-nubbin_right:after{
    margin-top: -0.2rem;
}
.tooltip-outer-plp .slds-popover {
    z-index: 100;
}
.user-data-table lightning-input {
    margin-bottom: var(--dxp-g-spacing-none);
}
lightning-button .slds-button:focus, lightning-button .slds-button:focus-visible {
    box-shadow: none;
    outline: none;
}
.slds-button:active, .slds-button:focus {
    box-shadow: none;
    outline: none;
    border: 1px solid transparent;
}
/* Added for lightning button hover issue fixes start */
lightning-button [kx-scope=button][kx-type=underline]:after {
    background: inherit;
}
lightning-button [kx-scope=button][kx-type=underline]:active {
    transform: inherit;
    outline: none;
}
/* Added for lightning button hover issue fixes end */

/* hides the date format under datepicker */
.ship-date-input .slds-form-element__help[data-date-format] {
    display: none;
}

.user-data-table table{
    table-layout: fixed;
}

.slds-file-selector__dropzone {
    border: none !important;
    padding: 0 !important;
}
.slds-file-selector__text {
    display: none !important;
}

.slds-file-selector__button {
    height: 32px;
}

.delete-quote-modal {
    max-width: 446px;
}
.td-text-align_right{
    text-align: right;
    margin-left: auto;
    padding-right: 1rem;
}
[data-align="td-text-align_right"] {
    justify-content: flex-end;
    padding-right: 6px;
}
.column-full-width-container {
    padding: 0 !important;
}

.repackaging-information-container {
    background-color: var(--citgo-background-color);
    border: 1px solid var(--citgo-border-color);
}

.start-order-container {
    background-color: var(--citgo-disabled-button-hover-text-color);
}

.permission-slot-container .columns-content .columns:first-child .column-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 1rem;
}

.accordion-header-text-label h1,
.accordion-header-text-label h2,
.accordion-header-text-label h3,
.accordion-header-text-label h4,
.accordion-header-text-label h5,
.accordion-header-text-label h6 {
    font-size: 24px !important;
    text-wrap: auto;
}

c-rocket-accordion.component-wrapper-spacer,
c-rocket-permission-set-controlled-slot.component-wrapper-spacer {
    margin-bottom: 0 !important;
}

.rocket-accordion-image-container .image-wrapper .image-container .image {
    height: 120px;
    width: 100%;
}

.rocket-accordion-image-container .image-wrapper .image-container .image picture img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .tooltip-outer-plp .slds-nubbin--right:before, .slds-nubbin_right:before {
        margin-top: -0.8rem;
        left: -.5rem;
    }
    .tooltip-outer-plp.slds-nubbin--right:after, .slds-nubbin_right:after {
        left: -0.5rem;
        transform: rotate(225deg);
        margin-top: -0.8rem;
    }
    .tooltip-outer-plp .slds-popover.slds-nubbin_right.slds-popover_small {
        max-width: 14rem;
        margin-left: var(--dxp-g-spacing-xsmall);
    }
    c-rocket-product-quantity-selector, c-rocket-add-to-cart-button {
        width: 100%;
    }
    .plp-add-to-list-btn, .add-to-cart-button {
        margin-top: var(--dxp-g-spacing-small);
        min-height: inherit;
        padding-bottom: var(--dxp-g-spacing-none);
        flex-direction: column;
    }
    .addtolist-button, .pdp-add-to-list-btns dxp_layout-column, .column-width dxp_layout-column {
        width: 100%;
    }

    .pdp-add-to-list-btns .plp-add-to-list-btn, .pdp-add-to-list-btns .add-to-cart-button, .column-width  .plp-add-to-list-btn, .column-width  .add-to-cart-button {
        margin-top: var(--dxp-g-spacing-none);
    }

    .add-to-cart-button {
        width: 100%;
    }

    .accordion-header-text-label h1,
    .accordion-header-text-label h2,
    .accordion-header-text-label h3,
    .accordion-header-text-label h4,
    .accordion-header-text-label h5,
    .accordion-header-text-label h6 {
        font-size: 20px !important;
        text-wrap: auto;
    }

    .rocket-accordion-image-container .image-wrapper .image-container .image {
        height: 208px;
    }
}

/* We have used custom lwc for clear cart and to align it with other components we had to use negative margins */
.cart-btn-outer {
    margin-top: -14px;
}
.clear-cart-btn {
    margin-top: -14px;
}

.heading-style1, .heading-style1 h1, .heading-style1 h2{
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem;
    margin-top: 0.25rem;
}

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

    .header-labels{
        max-height: var(--dxp-g-spacing-xlarge);
    }
    .header-labels + lightning-combobox {
        margin-left: -10px;
    }
    .clear-cart-btn {
        margin-top: 0;
    }
    .cart-btn-outer {
        margin-top: 14px;
        position: absolute;
        right: var(--dxp-g-spacing-medium);
        top: var(--dxp-g-spacing-none);
    }
}

@media (min-width: 1024px) {

}

@media (max-width: 767px) {

        /* OOTB added classes START */

    /* text blocks in rocketBanner */
    .banner-text__primary h1 {
        font-size: 32px;
    }

    .banner-text__secondary h2 {
        font-size: 18px;
    }

    /* centers PDP qty with buttons */
    .column-content__center .columns-content .columns {
        align-items: flex-start;
    }
    /* OOTB added classes END */

    .bottom-btns-outer lightning-button, .bottom-btns lightning-button {
        margin: var(--dxp-g-spacing-none);
    }
    .bottom-btns-outer lightning-button button, .bottom-btns lightning-button button {
        width: 100%;
        justify-content: center;
    }
    .custom-checkbox {
        margin-top: var(--dxp-g-spacing-medium);
    }

    /* Cart page order preferences component styles */
    .order-preferences-button .slds-button {
        font-size: var(--dxp-s-text-heading-large-font-size);
    }

    .tooltip-outer .slds-popover.slds-nubbin_right.slds-popover_small {
        max-width: 9rem;
        margin-left: var(--dxp-g-spacing-xsmall);
    }
    .tooltip-outer .slds-nubbin--right:before, .tooltip-outer .slds-nubbin_right:before {
        left: -.5rem;
        margin-top: -2.8rem;
        transform: rotate(225deg);
    }
    .tooltip-outer .slds-nubbin--right:after,.tooltip-outer .slds-nubbin_right:after {
        left: -.5rem;
        margin-top: -4.0rem;
        transform: rotate(225deg);
    }
    /* We have used custom lwc for clear cart and to align it with other components we had to use negative margins */
    .cart-btn-outer {
        margin: -60px 0 10px -42px;
    }
    .header-labels{
        max-height: var(--dxp-g-spacing-xlarge);
    }
    .header-labels + lightning-combobox {
        margin-left: -10px;
    }
    .cart-btn-outer {
        margin-top: 14px;
        position: absolute;
        right: var(--dxp-g-spacing-medium);
        top: var(--dxp-g-spacing-none);
    }

}