@import url('token-colors.css'); 

:root {
    /*   Breakpoint Tokens   */
    --breakpoint-xs-mobile-min: 0px;
    --breakpoint-xs-mobile-max: 639px;
  
    --breakpoint-sm-tablet-min: 640px;
    --breakpoint-sm-tablet-max: 1023px;
  
    --breakpoint-xmd-laptop-min: 1024px;
    --breakpoint-xmd-laptop-max: 1279px;
  
    --breakpoint-lg-desktop-min: 1280px;
    --breakpoint-lg-desktop-max: 1535px;
  
    --breakpoint-xl-desktop-min: 1536px;
    --breakpoint-xl-desktop-max: 1920px;
  
    /*   Border Radius Tokens   */
    --radius-none: 0px;
    --radius-sm: 2px;
    --radius-base: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;
  
    /*  Border Width Tokens  */
    --border-width-0: 0px;
    --border-width-2: 2px;
    --border-width-3: 3px;
    --border-width-4: 4px;
    --border-width-8: 8px;
  
    /*   Sizes Tokens   */
    --size-none: 0rem;      /* 0px */
    --size-3xs: 0.0625rem;  /* 1px */
    --size-2xs: 0.25rem;    /* 4px */
    --size-xs: 0.5rem;      /* 8px */
    --size-s: 1rem;         /* 16px */
    --size-md: 1.5rem;      /* 24px */
    --size-lg: 2rem;        /* 32px */
    --size-xl: 2.5rem;      /* 40px */
    --size-2xl: 3rem;       /* 48px */
    --size-3xl: 3.5rem;     /* 56px */
    --size-4xl: 4.5rem;     /* 72px */
    --size-5xl: 6rem;       /* 96px */

    /*   Spacing Tokens   */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
  
    /*   Opacity Tokens   */
    --opacity-0: 0;
    --opacity-5: 0.05;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-25: 0.25;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-75: 0.75;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-95: 0.95;
    --opacity-100: 1;

    /*   Shadow Tokens   */
    --shadow-ring-offset: 0 0 #0000;
    --shadow-ring: 0 0 #0000;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-dropdown: var(--shadow-ring-offset), var(--shadow-ring), var(--shadow-sm);

    /*   Typography Tokens   */
    --font-family-allane-headline: 'Allane Headline', sans-serif;
    --font-family-allane-text: 'Allane Text', sans-serif;
    --font-family-roboto: 'Roboto', sans-serif;
    --font-family-arial: 'Arial', sans-serif;
    --font-family-kia-headline: 'Kia Headline', sans-serif;
    --font-family-kia-text: 'Kia Text', sans-serif;
    --font-family-hyundai-headline: 'HYUNDAI Headline', sans-serif;
    --font-family-hyundai-text: 'HYUNDAI Text', sans-serif;

    --font-size-1: 0.75rem;  /* 12px */
    --font-size-2: 0.875rem; /* 14px */
    --font-size-3: 1rem;     /* 16px */
    --font-size-4: 1.25rem;  /* 20px */
    --font-size-5: 1.5rem;   /* 24px */
    --font-size-6: 2rem;     /* 32px */
    --font-size-7: 3rem;     /* 48px */
    --font-size-8: 3.5rem;   /* 56px */
    --font-size-9: 4rem;     /* 64px */

    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    --paragraph-spacing-none: 0;

    --letter-spacing-default: 0;
    --letter-spacing-increased: 0.12em;
    --letter-spacing-decreased: -0.05em;
    --color-neutral-50: #F9FBFD;



    /* dxp reset tokens */
    --dxp-c-link-text-decoration: unset;
    --dxp-c-link-text-decoration-hover: unset;
    --dxp-c-link-text-decoration-active: unset;
    --dxp-c-link-text-decoration-visited: unset;
    --dxp-c-link-text-decoration-focus: unset;
    --dxp-c-link-text-decoration-hover-active: unset;
    --dxp-c-link-text-decoration-hover-visited: unset;
    --dxp-c-link-text-decoration-hover-focus: unset;
    --dxp-s-link-text-color: unset;
    --dxp-s-link-text-color-hover: unset;
    --dxp-s-link-text-color-active: unset;
    --dxp-s-link-text-color-visited: unset;
    --dxp-s-link-text-color-focus: unset;
    --dxp-c-link-text-decoration: unset;
    --dxp-c-link-text-decoration-hover: unset;
    --dxp-c-link-text-decoration-active: unset;
    --dxp-c-link-text-decoration-visited: unset;
    --dxp-c-link-text-decoration-focus: unset;
    --dxp-c-link-text-decoration-hover-active: unset;
    --dxp-c-link-text-decoration-hover-visited: unset;
    --dxp-c-link-text-decoration-hover-focus: unset;
    --dxp-c-link-text-decoration-active-visited: unset;
    --dxp-c-link-text-decoration-active-focus: unset;
    --dxp-c-link-text-decoration-visited-focus: unset;
    --dxp-c-link-text-decoration-hover-active-visited: unset;
    --dxp-c-link-text-decoration-hover-active-focus: unset;
    --dxp-c-link-text-decoration-hover-visited-focus: unset;
    --dxp-c-link-text-decoration-hover-active-visited-focus: unset;
    --dxp-c-component-wrapper-spacer-size: unset;
    --dxp-s-link-text-decoration-hover: none;
    --dxp-s-link-text-decoration: none;
  
}



.header-text-color {
    color: var(--brand-header-text-color);
}

.footer-text-color p {
    color: var(--brand-footer-text-color) !important;
    font-size: 0.75rem;
    font-family: var(--brand-font-body, 'Inter'), sans-serif;
}

.comm-login-form__container, .comm-forgot-password__container, .comm-check-email__container {
	max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.comm-forgot-password__title[lwc-3fmj06unklg] .dxp-text-heading-large,
.comm-forgot-password__title[lwc-3fmj06unklg] .slds-text-heading--large,
.comm-forgot-password__title[lwc-3fmj06unklg] .slds-text-heading_large,
.comm-forgot-password__container .comm-forgot-password__title .dxp-text-heading-large,
.comm-forgot-password__container .comm-forgot-password__title .slds-text-heading--large,
.comm-forgot-password__container .comm-forgot-password__title .slds-text-heading_large {
    color: var(--brand-text);
    font-family: var(--brand-font-heading, 'Montserrat'), sans-serif;
    font-size: var(--font-size-5, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.3;
    text-align: left;
    margin: 0;
    padding: 0 0 var(--spacing-6, 1.5rem);
}

@media (min-width: 641px) {
	.comm-login-form__container, .comm-forgot-password__container, .comm-check-email__container {
		max-width: none !important;
	}
}




.comm-login-form__container .slds-input,
.slds-select_container .slds-select,
.comm-login-form__container .slds-combobox__input,
.slds-form-element .slds-input,
.slds-form-element .slds-combobox__input,
.slds-form-element lightning-combobox::part(input-button) {
    width: 100%;
    min-height: var(--size-2xl, 3rem);
    padding: 0 13px;
    border: var(--border-width-3, 3px) solid var(--brand-input-border);
    border-radius: var(--radius-none, 0);
    background-color: var(--brand-input-bg);
    color: var(--brand-text);
    font-family: var(--font-family-2, var(--brand-font-body, 'Inter')), sans-serif;
    font-size: var(--font-size-2, 0.875rem);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.5;
    box-shadow: none;
    transition: border-color .1s linear, box-shadow .1s linear;
}

.slds-select_container .slds-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
}

.slds-select_container:before,
.slds-select_container:after {
    content: none;
}

.slds-select_container {
    position: relative;
}

.slds-select_container::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.625rem;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    pointer-events: none;
    background-color: var(--brand-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9901 17.29L2.84009 8.14002L4.26009 6.72002L12.0001 14.46L19.7401 6.71002L21.1601 8.13002L13.4101 15.87L12.0801 17.2L11.9901 17.29Z'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.9901 17.29L2.84009 8.14002L4.26009 6.72002L12.0001 14.46L19.7401 6.71002L21.1601 8.13002L13.4101 15.87L12.0801 17.2L11.9901 17.29Z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.comm-login-form__container .slds-form-element__label:not(.slds-form-element__legend),
.slds-form-element .slds-form-element__label:not(.slds-form-element__legend),
.slds-form-element lightning-combobox::part(label) {
    display: block !important;
    margin: 0 0 var(--spacing-2, 0.5rem);
    padding: 0;
    color: var(--brand-text);
    font-family: var(--font-family-2, var(--brand-font-body, 'Inter')), sans-serif;
    font-size: var(--font-size-2, 0.875rem);
    font-weight: var(--font-weight-regular, 400);
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    line-height: 1.5;
    letter-spacing: normal;
}

.comm-login-form__container .slds-input::placeholder,
.comm-login-form__container .slds-combobox__input::placeholder,
.slds-form-element .slds-input::placeholder,
.slds-select_container .slds-select::placeholder,
.slds-form-element .slds-combobox__input::placeholder {
    color: var(--brand-muted-text);
}

.comm-login-form__container .slds-input:hover,
.comm-login-form__container .slds-combobox__input:hover,
.slds-form-element .slds-input:hover,
.slds-select_container .slds-select:hover,
.slds-form-element .slds-combobox__input:hover {
    border-color: var(--brand-input-border-hover);
}

.comm-login-form__container .slds-input:focus,
.comm-login-form__container .slds-input:focus-visible,
.comm-login-form__container .slds-combobox__input:focus,
.comm-login-form__container .slds-combobox__input:focus-visible,
.slds-form-element .slds-input:focus,
.slds-form-element .slds-input:focus-visible,
.slds-form-element .slds-combobox__input:focus,
.slds-select_container .slds-select:focus,
.comm-login-form__container .slds-select:focus-visible,
.slds-form-element .slds-combobox__input:focus-visible {
    border-color: var(--brand-input-border-focus);
    box-shadow: 0 0 0 1px var(--brand-input-border-focus) inset;
    outline: none;
}

.comm-login-form__container .slds-textarea:focus,
.comm-login-form__container .slds-textarea:active,
.slds-form-element .slds-textarea:focus,
.slds-form-element .slds-textarea:active,
.slds-textarea:focus,
.slds-select_container .slds-select:focus,
.comm-login-form__container .slds-select:focus-visible,
.slds-textarea:active {
    border-color: var(--brand-input-border-focus);
    box-shadow: 0 0 0 1px var(--brand-input-border-focus) inset;
    outline: none;
}

.comm-login-form__container .slds-has-error .slds-input:active,
.comm-login-form__container .slds-has-error .slds-input:focus,
.slds-form-element.slds-has-error .slds-input:active,
.slds-form-element.slds-has-error .slds-input:focus,
.slds-has-error .slds-input:active,
.slds-select_container .slds-select:active,
.comm-login-form__container .slds-select:focus,
.slds-has-error .slds-input:focus {
    border-color: var(--brand-border-error);
    box-shadow: 0 0 0 1px var(--brand-border-error) inset;
    outline: none;
}

.comm-login-form__container .slds-input:disabled,
.comm-login-form__container .slds-combobox__input:disabled,
.slds-form-element .slds-input:disabled,
.slds-select_container .slds-select:disabled,
.slds-form-element .slds-combobox__input:disabled {
    border-color: var(--brand-border-disabled);
    background-color: var(--brand-input-bg-disabled);
    color: var(--brand-text-disabled);
}

.comm-login-form__container .slds-input:disabled::placeholder,
.comm-login-form__container .slds-combobox__input:disabled::placeholder,
.slds-form-element .slds-input:disabled::placeholder,
.slds-select_container .slds-select:disabled::placeholder,
.slds-form-element .slds-combobox__input:disabled::placeholder {
    color: var(--brand-text-disabled);
}

.slds-form-element {
    border: none !important;
}

.comm-login-form__container .slds-button,
.comm-forgot-password__container .slds-button,
.comm-check-email__container .slds-button,
.slds-button,
lightning-button::part(button),
lightning-button-menu::part(button) {
    font-size: 16px;
}

/* .columns-content {
    margin-left: unset !important;
    margin-right: unset !important;
} */

@media (min-width: 640px) {
    .comm-login-form__container .slds-form-element__label:not(.slds-form-element__legend),
    .slds-form-element .slds-form-element__label:not(.slds-form-element__legend),
    .slds-form-element lightning-combobox::part(label) {
        font-size: var(--font-size-3, 1rem);
    }

    .comm-login-form__container .slds-input,
    .comm-login-form__container .slds-combobox__input,
    .slds-form-element .slds-input,
    .slds-form-element .slds-combobox__input,
    .slds-select_container .slds-select,
    .slds-form-element lightning-combobox::part(input-button) {
        min-height: var(--size-3xl, 3.5rem);
    }

    .comm-login-form__container .slds-button,
    .comm-forgot-password__container .slds-button,
    .comm-check-email__container .slds-button,
    .slds-button,
    lightning-button::part(button),
    lightning-button-menu::part(button) {
        font-size: var(--dxp-s-button-font-size, var(--font-size-3, 1rem));
    }
}



.comm-login-form__container.slds-card {
	border: none !important;
    box-shadow: none !important;
}
.comm-login-form__container .slds-form-element__control {
	justify-content: flex-end;
}
.comm-login-form__container.slds-input,
.comm-login-form__container .slds-select {
	border-color: #1A103F !important;
}
.comm-login-form__container .slds-border_top {
	border-top: none !important;
}
.slds-input,
.slds-select_container .slds-select {
	border-color: #1A103F;
}
.slds-form-element__label {
	font-size: 1rem;
	line-height: 1.5rem;
	color: #1A103F;
}
.slds-p-around_medium {
	padding: 0 !important;
}
.comm-forgot-password__container {
	max-width: none !important;
}
.comm-forgot-password__container.slds-card {
	border: none !important;
}
.comm-forgot-password__cancel-button {
	border-width:3px;
	border-color: #1A103F;
}
.comm-forgot-password__title {
	font-size: 1.5rem;
	color: #1A103F;
	text-align:left;
	padding:0;
	padding-bottom: 1.5rem;
}
.comm-check-email__container {
	max-width: none !important;
}
.comm-check-email__container.slds-card {
	border: none;        
}
.comm-check-email__title {
	font-size: 1.5rem;
	color: #1A103F;
	text-align:left;
	padding:0;
	padding-bottom: 1.5rem;
}
  
.component-wrapper-spacer {
    --dxp-c-component-wrapper-spacer-size: 0.5rem;
}
