.slds-file-selector__dropzone {
    padding: 20px; 
}
    
.slds-file-selector__dropzone .slds-file-selector__text {
    font-size: 0;
    display: block;
}

.slds-file-selector__dropzone .slds-file-selector__text:after {
    content: 'Drag & drop file here, or click upload button ';
    font-size: .8125rem;
}

.slds-file-selector__dropzone .slds-file-selector__button {
    font-size: 0;
    color: white;
    background-color: #02a1ff;
}

.slds-file-selector__button {
    content: 'Upload file';
    font-size: .8125rem;
    background-color: #02a1ff;
    color: white;
    cursor: pointer;
    width: 13rem;
}

.slds-file-selector__dropzone .slds-file-selector__button:after {
    content: 'Upload file';
    font-size: .8125rem;
    background-color: #02a1ff;
    color: white;
}

.slds-file-selector__dropzone .slds-file-selector__body {
    font-size: 0;
}

.slds-file-selector__dropzone .slds-file-selector__body:after {
    background-color: #02a1ff;
}

/* Cart Icon and My Profile Icon */
svg[class~="lwc-7p8nufqlag5"] {
    fill: var(--dxp-s-text-heading-large-color);
}
svg[lwc-25f9lgh55ct] {
    fill: var(--dxp-s-text-heading-large-color);
}
/* end icons */

/* Stateful - Stretch button */
lightning-button-stateful.slds-var-m-right_large.slds-button_stretch {
    display: block;
    width: 100%;
}
lightning-button-stateful.slds-var-m-right_large.slds-button_stretch >
button.slds-button.slds-button_stateful.slds-button_brand {
    width: 100% !important;
}
/* END Stateful - Stretch button */

/* Hide SSO Button */
.sso-button-invisible {
    opacity: 0%;
    cursor: default;
}
/* END Hide SSO Button */

/* Checkout Progress Bar (Path) */

    /******Remove Underlines**********/
    a.slds-path__link {
        text-decoration-line: none !important;
    }

    /*******Remove Animations *********/
    .slds-path__nav .slds-is-complete .slds-path__title {
        transform: none;
    }

    /****** Font Color *********/
    .slds-path__nav .slds-is-incomplete .slds-path__link, 
    .slds-path__nav .slds-is-complete .slds-path__title 
    {
        color: rgba(0, 0, 0, 0.6);
    }
    
    /****** Font Weight *********/
    .slds-path__nav .slds-is-incomplete .slds-path__link, 
    .slds-path__nav .slds-is-complete .slds-path__title,
    .slds-path__nav .slds-is-current.slds-is-active .slds-path__title
    {
        font-weight: 700;
    }
    

    /******* Current Active Step Color *******/
    .slds-path__nav .slds-is-active,
    li.slds-path__item.slds-is-current.slds-is-active, 
    .slds-path__nav .slds-is-active:after, 
    .slds-path__nav .slds-is-active:before,
    .slds-path__nav .slds-is-active:first-child:after,
    .slds-path__nav .slds-is-active:first-child:before
    {
        background: #00a1ff;
    }

    /******** Current Active Step Color - HOVER *********/
    .slds-path__nav .slds-is-active:hover,
    li.slds-path__item.slds-is-current.slds-is-active:hover, 
    .slds-path__nav .slds-is-active:hover:after, 
    .slds-path__nav .slds-is-active:hover:before,
    .slds-path__nav .slds-is-active:first-child:hover:after,
    .slds-path__nav .slds-is-active:first-child:hover:before
    {
        background: #008fff;
    }

    /******** Completed Step Color ************/
    .slds-path__nav .slds-is-complete,
    li.slds-path__item.slds-is-complete, 
    .slds-path__nav .slds-is-complete:after, 
    .slds-path__nav .slds-is-complete:before,
    .slds-path__nav .slds-is-complete:first-child:after,
    .slds-path__nav .slds-is-complete:first-child:before
    {
        background: #ccecff;
    }

    /******** Completed Step Color - HOVER ************/
    .slds-path__nav .slds-is-complete:hover,
    li.slds-path__item.slds-is-complete:hover, 
    .slds-path__nav .slds-is-complete:hover:after, 
    .slds-path__nav .slds-is-complete:hover:before,
    .slds-path__nav .slds-is-complete:first-child:hover:after,
    .slds-path__nav .slds-is-complete:first-child:hover:before
    {
        background: #b8e3ff;
    }
    
    /******** Incomplete Step Color ************/
    .slds-path__nav .slds-is-incomplete,
    li.slds-path__item.slds-is-incomplete, 
    .slds-path__nav .slds-is-incomplete:after, 
    .slds-path__nav .slds-is-incomplete:before,
    .slds-path__nav .slds-is-incomplete:first-child:after,
    .slds-path__nav .slds-is-incomplete:first-child:before
    {
        background: #f4f4f4;
    }

    /******** Incomplete Step Color - HOVER ************/
    .slds-path__nav .slds-is-incomplete:hover,
    li.slds-path__item.slds-is-incomplete:hover, 
    .slds-path__nav .slds-is-incomplete:hover:after, 
    .slds-path__nav .slds-is-incomplete:hover:before,
    .slds-path__nav .slds-is-incomplete:first-child:hover:after,
    .slds-path__nav .slds-is-incomplete:first-child:hover:before
    {
        background: #f2faff;
    }    

/* END Checkout Progress Bar (Path) */

/******Cybersource Payment Form Styling*********/

/*input field background color*/
c-b2b-checkout-cybersource-payment .slds-form-element__control.slds-grow > input.slds-input,
c-b2b-checkout-cybersource-payment div.number-container.form-control.slds-input.flex-microform, /*card number field*/
c-b2b-checkout-cybersource-payment div.securityCode-container.form-control.slds-input.flex-microform /*CVV*/
{
    background: rgba(0, 0, 0, 0.03) !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.18) !important;
}

/* error red borders*/
c-b2b-checkout-cybersource-payment div.number-container.form-control.slds-input.flex-microform.error-class,
c-b2b-checkout-cybersource-payment div.securityCode-container.form-control.slds-input.flex-microform.error-class
{
    border-color: rgb(186, 5, 23) !important;
    border-width: 1px !important;
}

/*placeholder and title text color*/
c-b2b-checkout-cybersource-payment .slds-form-element__control.slds-grow > input::placeholder,
c-b2b-checkout-cybersource-payment div.data-label-text-medium 
{
    color: rgba(0, 0, 0, 0.6);
}
  
/* issue with text cutoff */
c-b2b-checkout-cybersource-payment input[placeholder="MM/YY"] {
    padding-right: 3px;
}
    
/* spacing of labels */
c-b2b-checkout-cybersource-payment .data-label-text-medium.slds-p-top_small {
    font-size: 13px;
    padding-bottom: 3px;
    padding-top: 0px;
    margin-top: -4px;
}
    
/* removing error text */
c-b2b-checkout-cybersource-payment .slds-text-color_error {
    display: none;
}
    
/* fixing field alignment */
c-b2b-checkout-cybersource-payment .slds-col.slds-size_2-of-8 {
    position: relative;
    top: -2px;
}

/*********END Cybersource Payment Form Styling********/