/*
 * Your global styles here
 */

/* @font-face {
	font-family: "LindeDaxRegWeb";
	src: url("/resource/DCXFont/Fonts/LindeDaxRegWeb.woff") format('woff');
    font-weight: 500;
	font-stretch: normal;
	font-style: normal;
	unicode-range: U+20-7E, U+A0-107, U+10A-113, U+116-11B,
		U+11E-123, U+126-127, U+12A-12B, U+12E-131,
		U+136-137, U+139-13E, U+141-148, U+14C-14D,
		U+150-15B, U+15E-165, U+16A-16B, U+16E-173,
		U+178-17E, U+192, U+218-21B, U+2C6-2C7,
		U+2C9, U+2D8-2DD, U+300-304, U+306-308,
		U+30A-30C, U+312-313, U+326-327, U+3BC,
		U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
		U+2026, U+2030, U+2039-203A, U+2044,
		U+20AC, U+2122, U+2212, U+2215,
		U+2219, U+2264-2265, U+25AF, U+FB01-FB02;
} */

@font-face {
    font-display: swap;
    font-family: "LindeDaxRegWeb";
    font-style: normal;
    font-weight: 600;
    src: url("/resource/DCXFont/Fonts/LindeDaxMedWeb.woff")format("woff");
}

@font-face {
    font-display: swap;
    font-family: "LindeDaxRegWeb";
    font-style: normal;
    font-weight: 400;
    src: url("/resource/DCXFont/Fonts/LindeDaxRegWeb.woff")format("woff");
}

:root {
	/* BOC Core Brand  */
	--light-red-50: #FCE6E7;
    --light-red-100: #f5a6ab;
    --light-red-300: #ea4c57;
    --core-brand-red: #E1000F;
    --light-red-700: #9D000A;
    --light-red-900: #650007;

	/* BOC Core Neutral  */
    --white: #ffffff;
    --light-grey: #ebebeb;
    --neutral-grey: #bebebe;
    --dark-grey-80: #798080;
    --dark-grey: #586060;

    /* Dark Text  */
    --headline-primary-dark: #586060;
    --copy-primary-dark: #586060;

    /* Light Text  */
    --headline-primary-light: #ffffff;

    /* Brand Text  */
    --link-text: #E1000F;

    /* Alerts  */
    --success-outline: #60bc35;
    --success-background: #eff8eb;
    --information-outline: #1aaae4;
    --information-background: #e8f7fc;
    --warning-outline: #ffd200;
    --warning-background: #fff6cc;
    --danger-outline: #fa0000;
    --danger-background: #ffe5e5;
    --neutral-outline: #d5d7d7;
    --neutral-background: #f5f5f5;

    /* Signal Colors  */
    --validation-red: #fa0000;
    --validation-green: #60bc35;
    --linde-signal-green: #20ba82;
    --linde-signal-yellow: #ffd200;
    --linde-signal-orange: #dc7800;
    --linde-signal-turqoise: #009b9b;
    --linde-neon-green: #becd00;
    --linde-cyan: #1aaae4;

    --background-navigation-bar: #303535;
    --error-text: #D71844;

    --dcx-border-grey: #01162A33;
    --dcx-border-grey-box-shadow: #00000033;
    --dcx-card-border: #ccc;
    --tank-loading-color: #e7e7e7;
    --blue-text-primary: var(--copy-primary-dark);

    --lwc-brandAccessible: var(--core-brand-red);
    --lwc-brandAccessibleActive: var(--light-red-700);

    --lwc-colorTextDefault: var(--headline-primary-dark);
    --lwc-colorTextError: var(--error-text);
    --lwc-shadowActive: none;
    --lwc-fontSize3: var(--body-fontSize-normal);
    --lwc-brandTextLink: var(--link-text);
    --lwc-brandTextLinkActive: var(--link-text);
    --lwc-brandDisabled: var(--neutral-grey);

    /*Typography */
    --lwc-fontFamily: 'LindeDaxRegWeb', Arial, sans-serif;

    --header-font-giga:600 85px/106.25px var(--lwc-fontFamily);
    --header-font-mega:600 68px/85px var(--lwc-fontFamily);
    --header-font-h1:600 44px/55px var(--lwc-fontFamily);
    --header-font-h2:600 36px/45px var(--lwc-fontFamily);
    --header-font-h3:600 28px/35px var(--lwc-fontFamily);
    --header-font-h4:600 22px/27.5px var(--lwc-fontFamily);

    --header-font-mobile-giga: 600 60px/75px var(--lwc-fontFamily);
    --header-font-mobile-mega: 600 48px/60px var(--lwc-fontFamily);
    --header-font-mobile-h1: 600 32px/40px var(--lwc-fontFamily);
    --header-font-mobile-h2: 600 28px/35px var(--lwc-fontFamily);
    --header-font-mobile-h3: 600 24px/30px var(--lwc-fontFamily);
    --header-font-mobile-h4: 600 21px/26.25px var(--lwc-fontFamily);

    --body-fontSize-normal: 18px;
    --body-fontSize-small: 14px;
    --body-fontSize-tiny: 12px;

    --form-label-fontSize: 14px;
    --form-field-fontSize: 16px;

    --body-font-large: 400 20px/31px var(--lwc-fontFamily);
    --body-font-normal: 400 var(--body-fontSize-normal)/27.9px var(--lwc-fontFamily);
    --body-font-small: 400 var(--body-fontSize-small)/21.7px var(--lwc-fontFamily);
    --body-font-tiny: 400 var(--body-fontSize-tiny)/18.6px var(--lwc-fontFamily);
    --body-font-super-tiny: 600 10px/15.5px var(--lwc-fontFamily);
    --body-font-large-semi-bold: 600 20px/31px var(--lwc-fontFamily);
    --body-font-normal-semi-bold: 600 var(--body-fontSize-normal)/27.9px var(--lwc-fontFamily);
    --body-font-small-semi-bold: 600 var(--body-fontSize-small)/21.7px var(--lwc-fontFamily);
    --body-font-tiny-semi-bold: 600 var(--body-fontSize-tiny)/18.6px var(--lwc-fontFamily);

    --body-font-normal-link: 600 var(--body-fontSize-normal)/27.9px var(--lwc-fontFamily);
    --body-font-small-link: 600 var(--body-fontSize-small)/21.7px var(--lwc-fontFamily);
    --body-font-tiny-link: 600 var(--body-fontSize-tiny)/18.6px var(--lwc-fontFamily);

    --form-label-font: 400 var(--form-label-fontSize)/21.7px var(--lwc-fontFamily);
    --form-field-font: 400 var(--form-field-fontSize)/24.8px var(--lwc-fontFamily);
    --form-field-error-font: 400 var(--form-label-fontSize)/21.7px var(--lwc-fontFamily);

    --body-fontSize-mobile-normal: 15px;
    --body-fontSize-mobile-small: 13px;
    --body-fontSize-mobile-tiny: 11px;

    --body-font-mobile-large: 400 17px/26.35px var(--lwc-fontFamily);
    --body-font-mobile-normal: 400 var(--body-fontSize-mobile-normal)/23.25px var(--lwc-fontFamily);
    --body-font-mobile-small: 400 var(--body-fontSize-mobile-small)/20.15px var(--lwc-fontFamily);
    --body-font-mobile-tiny: 400 var(--body-fontSize-mobile-tiny)/17.05px var(--lwc-fontFamily);
    --body-font-mobile-large-semi-bold: 600 17px/26.35px var(--lwc-fontFamily);
    --body-font-mobile-normal-semi-bold: 600 var(--body-fontSize-mobile-normal)/23.25px var(--lwc-fontFamily);
    --body-font-mobile-small-semi-bold: 600 var(--body-fontSize-mobile-small)/20.15px var(--lwc-fontFamily);
    --body-font-mobile-tiny-semi-bold: 600 var(--body-fontSize-mobile-tiny)/17.05px var(--lwc-fontFamily);

    --body-font-mobile-normal-link: 600 var(--body-fontSize-mobile-normal)/23.25px var(--lwc-fontFamily);
    --body-font-mobile-small-link: 600 var(--body-fontSize-mobile-small)/20.15x var(--lwc-fontFamily);
    --body-font-mobile-tiny-link: 600 var(--body-fontSize-mobile-tiny)/17.05px var(--lwc-fontFamily);

    --caption-font: 400 10px/15.5px var(--lwc-fontFamily);

    --slds-text-color_default: var(--headline-primary-dark);
	--slds-text-body_regular: var(--body-fontSize-normal);
    --slds-text-body_small: var(--body-fontSize-small);
    /** Button **/
	--slds-c-button-sizing-border: 2px;
    --dcx-c-outline-button-sizing-border: 2px;

	--slds-c-button-color-background-active: var(--core-brand-red);
	--slds-c-button-color-border-active: var(--core-brand-red);

	--slds-c-button-brand-color-background: var(--core-brand-red);
	--slds-c-button-brand-color-background-active: var(--core-brand-red);
	--slds-c-button-brand-color-background-hover: var(--light-red-700);
	--slds-c-button-brand-text-color: var(--light-red-50);
	--slds-c-button-brand-color-border: var(--core-brand-red);
	--slds-c-button-brand-color-border-hover: var(--light-red-700);

	--slds-c-button-outline-brand-color-background: var(--white);
	--slds-c-button-outline-brand-color-background-active: var(--core-brand-red);
	--slds-c-button-outline-brand-color-background-hover: var(--light-red-700);
	--slds-c-button-outline-brand-color-border: var(--core-brand-red);
	--slds-c-button-outline-brand-color-border-hover: var(--light-red-700);
	
	--slds-c-button-text-color: var(--core-brand-red);
	--slds-c-button-text-color-active: var(--light-red-50);
	--slds-c-button-text-color-hover: var(--light-red-50);

    --slds-c-button-shadow-focus: none;
    --slds-c-button-inverse-shadow-focus: none;

    --slds-c-button-dual-stateful-color-background-selected: var(--light-red-900);
    --slds-c-button-dual-stateful-color-border-selected: var(--light-red-900);
    /** Alert **/
    --slds-c-alert-image-background: none;
    --slds-c-alert-size-background: none;
    --slds-c-alert-sizing-border: 1px;
    --slds-c-alert-font-weight: 400;
    --slds-c-alert-shadow: none;
    /* Default colors for alert */
    --slds-c-alert-color-background: var(--neutral-background);
    --slds-c-alert-color-border: var(--neutral-outline);
    --slds-c-alert-text-color: var(--dark-grey);
    --slds-c-alert-text-color-active: var(--dark-grey);

    /** Input **/
    --slds-c-input-shadow: none;
    --slds-c-input-shadow-focus: none;
	--slds-c-input-color-border: var(--neutral-outline);
	--slds-c-input-color-border-focus: var(--linde-cyan);
	--slds-c-input-text-color: var(--dark-grey);
    --slds-c-input-text-color-focus: var(--dark-grey);
	--slds-c-input-radius-border: 4px;

    --slds-c-select-shadow: none;
    --slds-c-select-shadow-focus: none;
    --slds-c-select-color-border: var(--neutral-outline);
    --slds-c-select-color-border-focus: var(--linde-cyan);
    --slds-c-select-text-color: var(--dark-grey);
    --slds-c-select-text-color-focus: var(--dark-grey);
    --slds-c-select-radius-border: 4px;

    /** Badge **/
    --slds-c-badge-radius-border: 4px;

    /******************** dxp style hooks ********************/
    --dxp-s-section-content-spacing-block-start: none;
    --dxp-s-section-content-spacing-block-end: none;
    --dxp-s-section-content-spacing-inline-start: none;
    --dxp-s-section-content-spacing-inline-end: none;

    --dxp-s-section-content-spacing-block-start-mobile: none;
    --dxp-s-section-content-spacing-block-end-mobile: none;
    --dxp-s-section-content-spacing-inline-start-mobile: none;
    --dxp-s-section-content-spacing-inline-end-mobile: none;

    --dxp-s-component-wrapper-spacer-size: none;
    --dxp-s-component-wrapper-spacer-size-mobile: none;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--lwc-fontFamily);
    font: var(--body-font-normal);
    background-color: var(--white);
    color: var(--dark-grey);
    /*scrollbar-width: none;*/ /* Hide scrollbar in FF */
    color-scheme: only light; /* Force only light mode */
}

body {
    font-family: var(--lwc-fontFamily);
    font: var(--body-font-normal);
}

.container {
    max-width: 1168px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 64px;
	padding-bottom: 64px;
}
.container-y-spacing {
    padding-top: 64px;
	padding-bottom: 64px;
}

.dcx-d-flex {
    display: flex;
}
.dcx-d-inline-flex {
    display: inline-flex;
}
.dcx-justify-content-center {
    justify-content: center;
}
.dcx-justify-content-end {
    justify-content: flex-end;
}
.dcx-justify-content-between {
    justify-content: space-between;
}
.dcx-align-items-center {
    align-items: center;
}
.dcx-flex-wrap {
    flex-wrap: wrap;
}
.dcx-flex-nowrap {
    flex-wrap: nowrap;
}
.dcx-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
 
}
.dcx-flex-start {
    display: flex;
    align-items: center;
    justify-content: start;
}
.dcx-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dcx-d-none {
    display: none;
}
.dcx-width100 {
    width:100%;
}
.dcx-height100 {
    height:100%;
}
.dcx-transparent{
    background-color: transparent;
}
.dcx-border-none{
    border:none;
}
.dcx-padding0{
    padding: 0;
}

.dark-background {
    background-color: var(--background-navigation-bar);
}
.neutral-background {
    background-color: var(--neutral-background);
}
.white-background {
    background-color: var(--white);
}
h1 {
    color: var(--headline-primary-dark);
    font: var(--header-font-h1);
}
h2 {
    color: var(--headline-primary-dark);
    font: var(--header-font-h2);
}
h3 {
    color: var(--headline-primary-dark);
    font: var(--header-font-h3);
}
h4 {
    color: var(--headline-primary-dark);
    font: var(--header-font-h4);
}

.body-font-large {
    font: var(--body-font-large);
}
.body-font-normal {
    font: var(--body-font-normal);
}
.body-font-small {
    font: var(--body-font-small);
}
.body-font-tiny {
    font: var(--body-font-tiny);
}
.body-font-super-tiny {
    font: var(--body-font-super-tiny);
}
.body-font-large-semi-bold {
    font: var(--body-font-large-semi-bold);
}
.body-font-normal-semi-bold {
    font: var(--body-font-normal-semi-bold);
}
.body-font-small-semi-bold {
    font: var(--body-font-small-semi-bold);
}
.body-font-tiny-semi-bold {
    font: var(--body-font-tiny-semi-bold);
}
.body-fontSize-normal {
    font: var(--body-fontSize-normal);
}
.body-font-normal-link {
    font: var(--body-font-normal-link);
    color: var(--link-text);
}
.body-font-small-link {
    font: var(--body-font-small-link);
    color: var(--link-text);
}
.body-font-tiny-link {
    font: var(--body-font-tiny-link);
    color: var(--link-text);
}
.body-font-error-text {
    font: var(--body-font-normal);
    color: var(--error-text);
}

.dcx-caption-font {
    font: var(--caption-font);
    color: var(--headline-primary-dark);
}
.brand-color-text {
    color: var(--core-brand-red);
}
.dcx-text-dark {
    color: var(--dark-grey);
}
.dcx-text-decoration {
    text-decoration: underline;
}

.dcx-pointer-cursor {
    cursor: pointer;
}

a {
    cursor: pointer;
}

 ::-webkit-scrollbar {
    /*width: 0px;*/ /* Hide scrollbar in Chrome & Edge */
}

/* Button Primary */
.dcx-button-primary {
   line-height: normal;
   color: var(--white);
   border: 2px solid var(--core-brand-red);
   transition: none;
}
.dcx-button-primary:hover {
    color: var(--white);
    background-color: var(--light-red-700);
    border: 2px solid var(--light-red-700);
    transition: none;
    box-shadow:none;
    outline: none;
}
.dcx-button-primary:focus {
    color: var(--white);
    background-color: var(--light-red-900);
    border: 2px solid var(--light-red-900);
    transition: none;
    outline: none;
    box-shadow:none;
}
.dcx-button-primary:active {
    color: var(--white);
    background-color: var(--core-brand-red);
    border-color: var(--core-brand-red);
    outline: none;
    box-shadow:none;
}
.dcx-button-primary:disabled {
    
    background-color: var(--neutral-grey);
    color: var(--white);
    border-color: var(--neutral-grey);
    border: 2px solid var(--neutral-grey);
    transition: none;
    outline: none;
    box-shadow:none;
}

/* Button Secondary */
.dcx-button-secondary {
   line-height: normal;
   color: var(--core-brand-red);
   background-color: var(--white);
   border: 2px solid var(--core-brand-red);
   transition: none;
}
.dcx-button-secondary:hover {
    color: var(--white);
    background-color: var(--light-red-700);
    border: 2px solid var(--light-red-700);
    transition: none;
    box-shadow:none;
    outline: none;
}
.dcx-button-secondary:focus {
    color: var(--white);
    background-color: var(--light-red-900);
    border: 2px solid var(--light-red-900);
    transition: none;
    outline: none;
    box-shadow:none;
    
}
.dcx-button-secondary:active {
    color: var(--white);
    background-color: var(--core-brand-red);
    border: 2px solid var(--core-brand-red);
    outline: none;
    box-shadow:none;
}
.dcx-button-secondary:disabled {
    background-color: var(--neutral-grey);
    color: var(--white);
    border-color: var(--neutral-grey);
    border: 2px solid var(--neutral-grey);
    transition: none;
    outline: none;
    box-shadow:none;
}

/* Button Contrast */
.dcx-button-contrast {
   background-color: var(--white);
   line-height: normal;
   color: var(--core-brand-red);
   border: 2px solid var(--white);
   transition: none;
}
.dcx-button-contrast:hover {
    color: var(--white);
    background-color: var(--light-red-700);
    border: 2px solid var(--light-red-700);
    transition: none;
    box-shadow:none;
    outline: none;
}
.dcx-button-contrast:focus {
    color: var(--white);
    background-color: var(--light-red-900);
    border: 2px solid var(--light-red-900);
    transition: none;
    outline: none;
    box-shadow:none;
}
.dcx-button-contrast:active {
    color: var(--core-brand-red);
    background-color: var(--white);
    border: 2px solid var(--white);
    outline: none;
    box-shadow:none;
}
.dcx-button-contrast:disabled {
    background-color: var(--neutral-grey);
    color: var(--white);
    border-color: var(--neutral-grey);
    border: 2px solid var(--neutral-grey);
    transition: none;
    outline: none;
    box-shadow:none;
}

.dcx-product-option {
    line-height: normal;
    color: var(--dark-grey);
    background: var(--white);
    border: 1px solid var(--dark-grey);
    transition: none;
}
.dcx-product-option:hover {
    color: var(--white);
    background-color: var(--light-red-700);
    border: 1px solid var(--light-red-700);
    transition: none;
    box-shadow:none;
    outline: none;
}
.dcx-product-option:active {
    color: var(--white);
    background-color: var(--light-red-900);
    border: 1px solid var(--light-red-900);
    transition: none;
    outline: none;
    box-shadow:none;
}
.dcx-product-option-disabled {
    line-height: normal;
    color: var( --neutral-grey);
    background-color: var(--white);
    /* border-color: var(--core-brand-red); */
    border: 1px solid var( --neutral-grey);
    outline: none;
    box-shadow:none;
}
.dcx-product-option-focused {
    color: var(--white);
    background-color: var(--core-brand-red);
    border: 1px solid var(--core-brand-red);
    transition: none;
    outline: none;
    box-shadow:none;
    line-height: normal;
}
.dcx-default-button {
    font-size: var(--body-fontSize-tiny);
    font-weight: 600;
    padding:9px 8px;
}
.dcx-tiny-button {
    padding: 5.5px 8px;
    font-size: var(--body-fontSize-tiny);
    font-weight: 600;
}
.dcx-large-button {
    padding: 12px 8px;
    font-size: var(--body-fontSize-tiny);
    font-weight: 600;
}

.small-button {
    padding: 7px 12px;
    font-size: var(--form-label-fontSize);
    font-weight: 600;
}
.medium-button {
    padding: 11px 16px;
    font-size: var(--form-label-fontSize);
    font-weight: 600;
}
.large-button {
    padding: 13px 15px;
    font-size: var(--body-fontSize-normal);
    font-weight: 600;
}
.xlarge-button {
    padding: 17px 16px;
    font-size: var(--body-fontSize-normal);
    font-weight: 600;
}
.dcx-icon-btn {
    background: none;
    border: none;
    padding: 0;
}
.dcx-scroll-to-top:hover{
    background:var(--light-red-700);
}
.dcx-scroll-to-top {
    position: fixed;
    /* width: 56px;
    height: 56px; */
    border-radius: 4px;
    bottom: 24px;
    right: 24px;
    z-index: 99;
    cursor: pointer;
    display: none;
    background: var(--core-brand-red);
}

.divider-dark-thick {
    border: 2px solid var(--neutral-outline);
}
.divider-dark-thin {
    border-top: 1px solid var(--neutral-outline);
}
.divider-light-thin {
    border-top: 1px solid var(--dark-grey-80);
}
.dark-background-overlay{
    position: fixed;
    width: 100%;
    background-color: var(--dark-grey);
    top: 0;
    z-index: 98;
    height: 100%;
    opacity: 80%;
    
}

/** Form Elements **/
.dcx-input-label {
    font: var(--form-label-font);
}
.dcx-input {
    height: 49px;
    font: var(--form-field-font);
}
.dcx-input input {
    height: 49px;
    font: var(--form-field-font);
}
/* .dcx-input:focus, .dcx-input:active  {
	border: 3px solid var(--information-outline);
} */

input:focus {
    border: 3px solid var(--information-outline);
}
.dcx-error-input {
	border: 1px solid var(--validation-red);
	color: var(--validation-red);
}
.dcx-error-text {
    font: var(--form-field-error-font);
    color: var(--validation-red);
}

.dcx-select {
	appearance: none;
    height: 49px;
    font: var(--form-field-font);
}
.dcx-select:focus, .dcx-select:active  {
	border-width: 3px;
}
.dcx-select option {
    height: 40px !important;
    font: var(--form-field-font);
}
.dcx-select option:hover,
.dcx-select option:focus {
    background-color: var(--light-red-700);
    color: var(--white);
}
/* Radio button  */
 .dcx-custom-radio {
    
    --slds-c-radio-color-border-checked:var(--information-outline);
    --slds-c-radio-color-border-focus:var(--information-outline);
    --slds-c-radio-mark-color-foreground: var(--core-brand-red);
    --slds-c-radio-shadow-focus: none;
    height: 24px!important;
    width: 24px!important;
    cursor: pointer;
    
}
.dcx-custom-radio::after {
    height: 12px!important;
    width: 12px!important;

}

/** Checkbox **/
.dcx-custom-checkbox {
    --slds-c-checkbox-color-background-checked: var(--core-brand-red);
    --slds-c-checkbox-color-border-checked: var(--core-brand-red);
    --slds-c-checkbox-mark-color-foreground: var(--white);
    --slds-c-checkbox-radius-border: 4px;
    height: 24px!important;
    width: 24px!important;
    cursor: pointer;
    outline: none !important;
    --slds-c-checkbox-shadow: none !important;
    border-color: var(--neutral-outline) !important;
    --slds-c-checkbox-shadow: var(--slds-c-checkbox-shadow-focus, var(--slds-c-checkbox-shadow-focus, var(--slds-g-shadow-outset-focus, 0 0 3px var(--core-brand-red))));
}
.dcx-custom-checkbox:focus {
    outline: none !important;
}
.dcx-custom-checkbox::after {
    height: 8px !important;
    width: 15px !important;
    top: 42% !important;
}
input[type="checkbox"]:focus-visible ~ label span.dcx-custom-checkbox, input[type="radio"]:focus-visible ~ label span.dcx-custom-radio{
    outline: 2px solid black !important;
}
/** Toggle Switch **/

/** Accordion **/
.dcx-accordion {
	cursor: pointer;
	transition: 0.4s;
}
.dcx-accordion-section {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.full-width {
    width: 100%;
}

/** Scrollbar style **/
.dcx-scrollbar::-webkit-scrollbar {
    width: 5px;
    height:5px;
}
.dcx-scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px var(--neutral-grey);
    border-radius: 10px;
}
.dcx-scrollbar::-webkit-scrollbar-thumb {
    background: var(--core-brand-red);
    border-radius: 10px;
    width: 10px;
}
.dcx-scrollbar:hover::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.dcx-scrollbar:hover::-webkit-scrollbar-thumb{
    width: 10px;
    height:10px;
}

/** Icons **/
.core-outline-icon svg use  {
    --slds-c-icon-color-foreground-default: var(--core-brand-red);
    fill: var(--core-brand-red);
}

.white-outline-icon svg use {
    --slds-c-icon-color-foreground-default: var(--white);
    --slds-c-icon-color-foreground: var(--white);
    fill: var(--white);
}

.core-bg-icon svg use {
    background-color: var(--core-brand-red);
    --slds-c-icon-color-foreground-default: var(--white);
    fill: var(--white);
}
.dark-outline-icon svg use {
    background-color: var(--dark-grey);
    --slds-c-icon-color-foreground-default: var(--dark-grey);
    fill: var(--dark-grey);

}
.check-solid-icon svg use {
    background-color: var(--success-outline);
    --slds-c-icon-color-foreground-default: var(--success-outline);
    fill: var(--success-outline);
}
.dcx-grey-icon {
    fill: var(--dark-grey);
}
.dcx-red-icon {
    fill: var(--core-brand-red);
}
.dcx-white-icon {
    fill: var(--white);
}
.dcx-green-icon {
    fill:var(--validation-green);
}
.dcx-info-icon {
    fill: var(--information-outline);
}
.dcx-icon-close{
    position: fixed;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
.dcx-icon-12 {
    height: 12px;
    width: 12px;
}
.dcx-icon-14 {
    height: 14px;
    width: 14px;
}
.dcx-icon-16 {
    height: 16px;
    width: 16px;
}
.dcx-icon-21 {
    height: 21px;
    width: 21px;
}
.dcx-icon-32 {
    height:32px;
    width: 32px;
}
.dcx-icon-24 {
    height: 24px;
    width: 24px;
}

/********Margin classes **********/
/* Margin right  */
.dcx-mr-auto {
    margin-right: auto;
}
.dcx-mr-4 {
    margin-right: 4px;
}
.dcx-mr-6 {
    margin-right: 6px;
}
.dcx-mr-8 {
    margin-right: 8px;
}
.dcx-mr-10 {
    margin-right: 10px;
}
.dcx-mr-12 {
	margin-right: 12px;
}
.dcx-mr-16 {
	margin-right: 16px;
}

.dcx-mr-24 {
	margin-right: 24px;
}
.dcx-mr-40 {
	margin-right: 40px;
}

/* Margin left  */
.dcx-ml-auto {
    margin-left: auto;
}
.dcx-ml-0 {
    margin-left: 0;
}
.dcx-ml-3 {
    margin-left: 3px;
}
.dcx-ml-20 {
    margin-left: 20px;
}
.dcx-ml-28 {
    margin-left: 28px;
}

.dcx-ml-40 {
	margin-left: 40px;
}

/* Margin top  */
.dcx-mt-8 {
    margin-top: 8px;
}
.dcx-mt-16 {
    margin-top: 16px;
}
.dcx-mt-20 {
    margin-top: 20px;
}
.dcx-mt-26 {
    margin-top: 26px;
}
.dcx-mt-32 {
    margin-top: 32px;
}
.dcx-mt-40 {
    margin-top: 40px;
}


/* Margin bottom  */
.dcx-mb-6 {
    margin-bottom: 6px;
}
.dcx-mb-8 {
    margin-bottom: 8px;
}
.dcx-mb-10 {
    margin-bottom: 10px;
}
.dcx-mb-12 {
    margin-bottom: 12px;
}
.dcx-mb-16 {
    margin-bottom: 16px;
}
.dcx-mb-20 {
    margin-bottom: 20px;
}
.dcx-mb-24 {
	margin-bottom: 24px;
}
.dcx-mb-26 {
    margin-bottom: 26px;
}
.dcx-mb-32 {
    margin-bottom: 32px;
}
.dcx-mb-38 {
    margin-bottom: 38px;
}
.dcx-mb-40 {
    margin-bottom: 40px;
}
.dcx-mb-64 {
    margin-bottom: 64px;
}

/**********padding classes ***********/
.dcx-pt-32 {
    padding-top: 32px !important;
}
.dcx-pb-32 {
    padding-bottom: 32px !important;
}

.no-wrap{
    white-space: nowrap;
}

/** Footer link section **/
.footer-bottom-link {
    display: flex;
	flex-wrap: wrap;
    justify-content: flex-end;
    padding-bottom: 10px;
}
.footer-bottom-link li a {
	padding-left: 20px;
	display: block;
}
.download-app-section {
    max-width: 500px;
    margin-left: auto;
}

/** Modal **/
.modal-wrapper {
    position: relative;
    height: 100vh;
}
.dcxCustomModal .slds-modal__container {
    background-color: var(--white);
    margin: 0 0 0 auto;
    padding: 0;
    justify-content: start;
    max-width: 511px;
}
.dcxCustomModal .slds-modal__header {
    background-color: transparent;
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 32px;
    padding-left: 40px;
    border: none;   
}
.dcxCustomModal .slds-modal__header .dcx-modal-close {
    cursor: pointer;
}
.dcxCustomModal .slds-modal__content {
    background-color: transparent;
    margin-left: 40px;
    margin-right: 40px;
    padding-right: 24px;
    box-shadow: none;
}
.dcxCustomModal .slds-modal__footer {
    background-color: var(--neutral-background);
    padding-top:20px;
    padding-bottom:20px;
    padding-left: 40px;
    padding-right: 24px;
    border-top: 1px solid var(--neutral-outline);   
    text-align: left;
}

.dcx-modal-header {
    position: relative;
    top: -20px;
    right: -20px; 
    cursor: pointer;
    
}
.modal-container {
    position: fixed;
    right: 0;
    top: 0;
    background-color: var(--white);
    z-index: 99;
    width: 575px;
    height: 100%;
    max-width: 100%;
}
.modal-header {
    background-color: transparent;
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 32px;
    padding-left: 40px;
    border: none;
}
.dcx-modal-header-specific {
    padding-left: 40px;
    padding-top: 40px;
}
.modal-body {
    height: calc(100vh - 150px);
}
 
.modal-footer {
    background-color: var(--neutral-background);
    padding-top:20px;
    padding-bottom:20px;
    padding-left: 40px;
    padding-right: 24px;
    border-top: 1px solid var(--neutral-outline);   
    text-align: left;
    bottom: 0;
    position: fixed;
    width: 100%;
}
.dcx-links:not(:last-child) {
    margin-right: 20px; margin-bottom: 20px;
}

/** Styles for Rich Text Content */
lightning-formatted-rich-text a {
    text-decoration: underline;
    cursor: pointer;
    color: var(--link-text);
}

lightning-formatted-rich-text a:focus, lightning-formatted-rich-text a:hover {
    text-decoration: underline;
	color: var(--light-red-700);
}

lightning-formatted-rich-text h1 {
    color: var(--headline-primary-dark);
    font: var(--header-font-h1);
}
lightning-formatted-rich-text h2 {
    color: var(--headline-primary-dark);
    font: var(--header-font-h2);
}
lightning-formatted-rich-text h3 {
    color: var(--headline-primary-dark);
    font: var(--header-font-h3);
}
lightning-formatted-rich-text h4 {
    color: var(--headline-primary-dark);
    font: var(--header-font-h4);
}

a[data-link-style="core-brand"] {
    text-decoration: underline !important;
    cursor: pointer;
    color: var(--link-text) !important;
}

a[data-link-style="dark-grey"] {
    text-decoration: underline !important;
    cursor: pointer;
    color: var(--dark-grey) !important;
}

a[data-link-style="core-brand"]:hover, a[data-link-style="dark-grey"]:hover {
    text-decoration: underline !important;
	color: var(--light-red-700) !important;
}

a[data-link-style="core-brand"]:hover svg use, a[data-link-style="dark-grey"]:hover svg use {
    color: var(--light-red-700) !important;
    cursor: pointer;
    fill: var(--light-red-700) !important;
}

a[data-link-style="core-brand"]:focus, a[data-link-style="dark-grey"]:focus {
    text-decoration: underline !important;
	color: var(--light-red-900) !important;
}

a[data-link-style="core-brand"]:focus svg use, a[data-link-style="dark-grey"]:focus svg use {
    color: var(--light-red-900) !important;
    cursor: pointer;
    fill: var(--light-red-900) !important;
}

.rich-text-content ol, .rich-text-content ul {
    margin-left: 1.5rem;
    list-style: revert-layer;
}
.rich-text-content li + li {
    margin-top: 16px;
}

.rich-text-content li>ul>li {
    margin-top: 8px;
}
.rich-text-content li>ol>li {
    margin-top: 8px;
}
/* Apply font-weight of 600 to 1st td under table and font-weight of 400 to remaining td under table */
.rich-text-content table tr:first-child td {
    font-weight: 600 !important;
}

/********************************** Large Screen  **************************************/
/* When the browser is at least 1024px and less */
 /* @media screen and (max-width: 1024px) {
    .container {
        max-width: 1024px;
        margin: 0 auto;
        padding-left: 21px;
        padding-right: 21px;
        padding-top: 64px;
		padding-bottom: 64px;
    }
}  */

/********************************** Medium Screen  **************************************/
/* When the browser is at least 768px and less */
/* @media screen and (max-width: 768px) {
    .container {
        max-width: 768px;
        margin: 0 auto;
        padding-left: 21px;
        padding-right: 21px;
        padding-top: 32px;
		padding-bottom: 32px;
    }
} */

/********************************** Small Screen  **************************************/
/* When the browser is at least 480px and less */
@media screen and (max-width: 480px) {
    :root {
        font: var(--body-font-mobile-normal);
    }

    body {
        font-family: var(--lwc-fontFamily);
        font: var(--body-font-mobile-normal);
    }
    
    h1 {
        color: var(--headline-primary-dark);
        font: var(--header-font-mobile-h1);
    }
    h2 {
        color: var(--headline-primary-dark);
        font: var(--header-font-mobile-h2);
    }
    h3 {
        color: var(--headline-primary-dark);
        font: var(--header-font-mobile-h3);
    }
    h4 {
        color: var(--headline-primary-dark);
        font: var(--header-font-mobile-h4);
    }
    .body-font-large {
        font: var(--body-font-mobile-large);
    }
   .body-font-normal {
        font: var(--body-font-mobile-normal);
    }
    .body-font-small {
        font: var(--body-font-mobile-small);
    }
    .body-font-tiny {
        font: var(--body-font-mobile-tiny);
    }
    .body-font-large-semi-bold {
        font: var(--body-font-mobile-large-semi-bold);
    }
    .body-font-normal-semi-bold {
        font: var(--body-font-mobile-normal-semi-bold);
    }
    .body-font-small-semi-bold {
        font: var(--body-font-mobile-small-semi-bold);
    }
    .body-font-tiny-semi-bold {
        font: var(--body-font-mobile-tiny-semi-bold);
    }
    .body-font-normal-link {
        font: var(--body-font-mobile-normal-link);
        color: var(--link-text);
    }
    .body-font-small-link {
        font: var(--body-font-mobile-small-link);
        color: var(--link-text);
    }
    .body-font-tiny-link {
        font: var(--body-font-mobile-tiny-link);
        color: var(--link-text);
    }
    .body-font-error-text {
        font: var(--body-font-mobile-normal);
        color: var(--error-text);
    }
    .body-font-mobile-normal-semi-bold {
        font: var(--body-font-mobile-normal-semi-bold);
    }
    .center-alligned-mobile {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin: auto;
    }

    .no-p-top-mobile {
		padding-top: 0;
	}
    .no-p-right-mobile {
		padding-right: 0;
	}
    .no-p-bottom-mobile {
		padding-bottom: 0;
	}
    .no-p-left-mobile {
		padding-left: 0;
	}
    .no-p-horizontal-mobile {
		padding-left: 0;
        padding-right: 0;
	}
    .no-p-vertical-mobile {
		padding-top: 0;
        padding-bottom: 0;
	}

    .no-m-top-mobile {
		margin-top: 0;
	}
    .no-m-right-mobile {
		margin-right: 0;
	}
    .no-m-bottom-mobile {
		margin-bottom: 0;
	}
    .no-m-left-mobile {
		margin-left: 0;
	}
    .no-m-horizontal-mobile {
		margin-left: 0;
        margin-right: 0;
	}
    .no-m-vertical-mobile {
		margin-top: 0;
        margin-bottom: 0;
	}

	.p-bottom-small-mobile {
		padding-bottom: 0.75rem;
	}

    .no-float-mobile {
        float: none;
    }

    .text-align_center-mobile {
        text-align: center;
    }
    
    /** Scrollbar style **/
    .dcx-scrollbar::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px var(--neutral-grey);
        background: var(--white);
        border-radius: 10px;
    }
    .dcx-links {
        width: 50%; margin-right: 0 !important; justify-content: center !important; 
    }

    lightning-formatted-rich-text h1 {
        color: var(--headline-primary-dark);
        font: var(--header-font-mobile-h1);
    }
    lightning-formatted-rich-text h2 {
        color: var(--headline-primary-dark);
        font: var(--header-font-mobile-h2);
    }
    lightning-formatted-rich-text h3 {
        color: var(--headline-primary-dark);
        font: var(--header-font-mobile-h3);
    }
    lightning-formatted-rich-text h4 {
        color: var(--headline-primary-dark);
        font: var(--header-font-mobile-h4);
    }
    .p-mobile-0{
    padding: 0 !important;
}
}
 /******************* x-small devices (portrait phones, less than 576px) ********************/
@media (max-width: 575.98px) {
    .container-y-spacing {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}
 
/*******************small devices (landscape phones, less than 768px) ********************/
@media (max-width: 767.98px) {
    .footer-bottom-link {
		padding-left: 0;
		justify-content: center;
	}
    .footer-bottom-link li a{
            padding-left: 0;
            padding-right: 10px;
            padding-bottom: 10px
        }
	.ftr-padding-bottom-none {
		padding-bottom: none;
	}
    .text-center-medium {
		text-align: center;
	}
}
 
/*******************medium devices (tablets, less than 992px)********************/
@media (max-width: 991.98px) {}
 
/*******************large devices (desktops, greater than 1200px)********************/
/* @media (min-width: 1199.98px) {
    .dcx-image-container {
        width: 600px!important;
        height: 400px!important;
    }
    .dcx-image {
        width: 600px!important;
        height: 400px!important;
    }
} */
 
/*******************x-large devices (large desktops, less than 1400px)********************/
@media (max-width: 1399.98px) { }