@font-face {
    font-family: 'Allstate Sans';
    src: url('/sales/resources/AllstateFonts/AllstateSans-Regular.otf') format('opentype');
}

natgen-design-system-provider[brand=allstate] html, body {
    font-family: 'Allstate Sans', Arial !important;
}

/*Quote Rate and FP body width*/
@media (max-width: 575px) {
    natgen-design-system-provider[brand=allstate] #QuotePriceBody {
        max-width: 100%;
    }
}

/*Page Print Formatting*/
@media print {
    natgen-design-system-provider[brand=allstate] #MainHeader {
        position: static !important;
    }
}

natgen-design-system-provider[brand=allstate] h1,
natgen-design-system-provider[brand=allstate] h2,
natgen-design-system-provider[brand=allstate] h3,
natgen-design-system-provider[brand=allstate] h4,
natgen-design-system-provider[brand=allstate] h5,
natgen-design-system-provider[brand=allstate] h6,
natgen-design-system-provider[brand=allstate] p,
natgen-design-system-provider[brand=allstate] span,
natgen-design-system-provider[brand=allstate] div,
natgen-design-system-provider[brand=allstate] natgen-form-field,
natgen-design-system-provider[brand=allstate] natgen-wizard-step,
natgen-design-system-provider[brand=allstate] natgen-anchor,
natgen-design-system-provider[brand=allstate] natgen-button {
    font-family: 'Allstate Sans', Arial !important;
}

/* buttons */
natgen-design-system-provider[brand=allstate] natgen-button {
    --ui-button-filled-color-primary-background-hover: var(--color-allstate-blue);
    --ui-button-filled-color-primary-stroke-hover: var(--color-allstate-blue);
    --ui-button-filled-color-primary-text-hover: white;
}

/*Link Sizes*/
natgen-design-system-provider[brand=allstate] #lnkDiscrd::part(control),
natgen-design-system-provider[brand=allstate] #changedMyMindLink::part(control) {
    white-space: normal;
}

natgen-design-system-provider[brand=allstate] natgen-button:not(.lienholderLink):not(#SelectMonthlyPay):not(#SelectPayInFull):not(#SelectAutoPay)::part(control) {
    /* All button text should be lowercase. Exclude specific select buttons and lienholderLink */
    text-transform: lowercase;
}

natgen-design-system-provider[brand=allstate] #SelectAutoPay[variant=outline],
natgen-design-system-provider[brand=allstate] #SelectMonthlyPay[variant=outline],
natgen-design-system-provider[brand=allstate] #SelectPayInFull[variant=outline] {
    --ui-button-outline-color-neutral-stroke-rest: lightgray;
    background-color: lightgray;
    border-radius: unset;
    height: 50px;
}

natgen-design-system-provider[brand=allstate] #SelectAutoPay[variant=filled],
natgen-design-system-provider[brand=allstate] #SelectMonthlyPay[variant=filled],
natgen-design-system-provider[brand=allstate] #SelectPayInFull[variant=filled] {
    border-radius: unset;
    height: 50px;
}

natgen-design-system-provider[brand=allstate] #SelectAutoPay[variant=outline]:hover,
natgen-design-system-provider[brand=allstate] #SelectMonthlyPay[variant=outline]:hover,
natgen-design-system-provider[brand=allstate] #SelectPayInFull[variant=outline]:hover {
    --ui-button-outline-color-neutral-stroke-hover: lightgray;
    text-decoration: underline !important;
}

natgen-design-system-provider[brand=allstate] #SelectAutoPay[variant=filled]:hover,
natgen-design-system-provider[brand=allstate] #SelectMonthlyPay[variant=filled]:hover,
natgen-design-system-provider[brand=allstate] #SelectPayInFull[variant=filled]:hover {
    text-decoration: underline !important;
}


    /* loader */
    natgen-design-system-provider[brand=allstate] natgen-loader[appearance=waves] {
        --color-primary-base: var(--color-allstate-navy);
    }

/* radios */
natgen-design-system-provider[brand=allstate] natgen-radio::part(control),
natgen-design-system-provider[brand=allstate] natgen-radio-card::part(control),
natgen-design-system-provider[brand=allstate] natgen-checkbox::part(control),
natgen-design-system-provider[brand=allstate] natgen-responsive-checkbox::part(control) {
    --color-primary-base: var(--neutral-foreground-rest);
    --color-primary-hover: var(--color-allstate-blue);
    --foreground-on-primary-rest: white;
}

natgen-design-system-provider[brand=allstate] natgen-responsive-radio::part(control),
natgen-design-system-provider[brand=allstate] natgen-checkbox-card::part(control) {
    --color-primary-base: var(--neutral-foreground-rest);
    --color-primary-hover: black;
    --foreground-on-primary-rest: white;
    --color-primary-active: black;
}

/* tooltips */
natgen-design-system-provider[brand=allstate] natgen-form-field::part(tooltip),
natgen-design-system-provider[brand=allstate] natgen-tooltip,
natgen-design-system-provider[brand=allstate] natgen-form-field {
    --color-primary-base: var(--neutral-foreground-rest);
}

/* form element hover border */
natgen-design-system-provider[brand=allstate] natgen-text-field:not([disabled]):hover::part(root),
natgen-design-system-provider[brand=allstate] natgen-select:not([disabled]):hover::part(control),
natgen-design-system-provider[brand=allstate] natgen-text-field:not([disabled]):hover,
natgen-design-system-provider[brand=allstate] natgen-anchor::part(control) {
    border-color: var(--color-allstate-blue);
}

natgen-design-system-provider[brand=allstate] natgen-option:not([disabled]):active,
natgen-design-system-provider[brand=allstate] natgen-option[aria-selected="true"] {
    background-color: var(--color-allstate-blue);
    color: white;
}

natgen-design-system-provider[brand=allstate] natgen-radio:not([disabled]):hover,
natgen-design-system-provider[brand=allstate] natgen-radio-card:not([disabled]):hover,
natgen-design-system-provider[brand=allstate] natgen-responsive-radio:not([disabled]):hover,
natgen-design-system-provider[brand=allstate] natgen-checkbox:not([disabled]):hover,
natgen-design-system-provider[brand=allstate] natgen-checkbox-card:not([disabled]):hover,
natgen-design-system-provider[brand=allstate] natgen-responsive-checkbox:not([disabled]):hover {
    --color-primary-base: var(--color-allstate-blue);
}

/* breadcrumbs */
natgen-design-system-provider[brand=allstate] natgen-wizard-step::part(tail) {
    --tail-size: calc(var(--space-design-unit) * 1px);
    position: absolute;
    left: 0%;
    width: calc(100%);
    height: var(--tail-size);
    background-color: var(--neutral-stroke-rest);
    top: calc(100% - 4px);
}

natgen-design-system-provider[brand=allstate] natgen-wizard-step::part(marker) {
    background-color: var(--neutral-stroke-rest);
    color: var(--neutral-stroke-rest);
    --marker-size: 12px;
    outline: none;
}

natgen-design-system-provider[brand=allstate] natgen-wizard-step[state=active]::part(marker) {
    visibility: hidden;
}

natgen-design-system-provider[brand=allstate] .scrollToTop {
    background-color: var(--color-allstate-blue);
    color: var(--color-allstate-blue);
}

natgen-design-system-provider[brand=allstate] .allstate-anchor {
    color: var(--color-allstate-blue) !important;
    font-size: 14px;
    font-weight: 700;
}

natgen-design-system-provider[brand=allstate] .saveQuoteLink {
    color: var(--color-allstate-blue) !important;
    font-size: 16px;
    text-decoration: none !important;
    text-transform: lowercase;
}

natgen-design-system-provider[brand=allstate] .modifiedHeader {
    font-size: 35px;
}

natgen-design-system-provider[brand=allstate] .completeIcon,
natgen-design-system-provider[brand=allstate] .processingIcon,
natgen-design-system-provider[brand=allstate] .pendingIcon {
    color: var(--color-allstate-blue);
}

natgen-design-system-provider[brand=allstate] .pendingIcon {
    height: 42px;
    width: 42px;
}

natgen-design-system-provider[brand=allstate] natgen-heading {
    display: block;
    text-transform: lowercase;
}

    natgen-design-system-provider[brand=allstate] natgen-heading::first-letter {
        text-transform: uppercase;
    }

natgen-design-system-provider[brand=allstate] .credit-card-charged-text {
    font-size: 16px;
}

natgen-design-system-provider[brand=allstate] .final-amount-text {
    font-size: 40px;
}

natgen-design-system-provider[brand=allstate] .payment-body-text {
    font-size: 16px;
}

natgen-design-system-provider[brand=allstate] .payment-type-header {
    font-size: 20px;
}