
.ce-step-by-step-plan {
    --font-size: var(--root-font-size); /* Reset: use REM */
}

.ce-step-by-step-plan__container {
    --color-background: var(--root-color-background--grey);
    --color-border: var(--root-color-border);
    --border-width: var(--root-border-width);
}

.ce-step-by-step-plan__header {
    --color: var(--root-heading-3-color);
    --font-family: var(--root-heading-3-family);
    --font-size: var(--root-heading-3-size);
    --font-weight: var(--root-heading-3-weight);
    --font-style: var(--root-heading-3-style);
    --line-height: var(--root-heading-3-line-height);
}

.ce-step-by-step-plan__term {
    --color: var(--root-heading-4-color);
    --color-border: var(--root-color--primary);
    --font-family: var(--root-heading-4-family);
    --font-size: var(--root-heading-4-size);
    --font-weight: var(--root-heading-4-weight);
    --font-style: var(--root-heading-4-style);
    --line-height: var(--root-heading-4-line-height);
}

.ce-step-by-step-plan__term::before {
    --color-background: var(--root-color--primary);
    --border-color: transparent;
    --border-radius: 50%;
    --border-width: 0;
    --color: var(--root-color--white);
    --font-size: var(--root-heading-4-size);
    /*--font-family: var(--root-heading-4-family);*/
    --font-weight: var(--root-heading-4-weight);
    /*--font-style: var(--root-heading-4-style);*/
    --line-height: var(--root-heading-4-line-height);
}

.ce-step-by-step-plan__description {
    --color: var(--root-color-text);
    --color-border: var(--root-color--primary);
    /*--font-family: inherit;*/
    /*--font-size: 1em; !* Mobile 16px / > Mobile 18px *!*/
    /*--font-style: normal;*/
    --font-weight: var(--root-font-weight--normal);
    /*--line-height: inherit;*/
}

.ce-step-by-step-plan__description a {
    /*--color: var(--root-color-text-link);*/
    /*--font-family: inherit;*/
    /*--font-size: 1em; !* Mobile 16px / > Mobile 18px *!*/
    /*--font-style: normal;*/
    --font-weight: var(--root-font-weight--normal);
    /*--line-height: inherit;*/
}

.ce-step-by-step-plan__description a:active,
.ce-step-by-step-plan__description a:focus,
.ce-step-by-step-plan__description a:hover {
    /*--color: var(--root-color-text-link--hover);*/
}

.ce-step-by-step-plan__text {
    --color: var(--root-color-text);
    /*--font-family: inherit;*/
    /*--font-size: 1em; !* Mobile 16px / > Mobile 18px *!*/
    /*--font-style: normal;*/
    --font-weight: var(--root-font-weight--normal);
    /*--line-height: inherit;*/
}

.ce-step-by-step-plan__text a {
    /*--color: var(--root-color-text);*/
    /*--font-family: inherit;*/
    /*--font-size: 1em; !* Mobile 16px / > Mobile 18px *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
}

.ce-step-by-step-plan__text a:active,
.ce-step-by-step-plan__text a:focus,
.ce-step-by-step-plan__text a:hover {
    /*--color: var(--root-color-text-link--hover);*/
}

.ce-step-by-step-plan {
}

.ce-step-by-step-plan__container {
    border-style: solid;
    padding: 1.25rem 1.5rem 1.5rem;
}

.ce-step-by-step-plan__list {
    counter-reset: step;
}

.ce-step-by-step-plan__term {
    position: relative;
}

.ce-step-by-step-plan__term::before {
    align-items: center;
    aspect-ratio: 1 / 1;
    border-style: solid;
    counter-increment: step;
    content: counter(step);
    display: inline-flex;
    justify-content: center;
    left: -.845em;
    position: absolute;
    width: 1.556em;
}

.ce-step-by-step-plan__header,
.ce-step-by-step-plan__list,
.ce-step-by-step-plan__description *:first-child {
    margin-top: 0;
}

.ce-step-by-step-plan__header,
.ce-step-by-step-plan__description {
    padding-bottom: 1rem;
}

.ce-step-by-step-plan__term,
.ce-step-by-step-plan__description {
    margin-left: 0.875rem;
    padding-left: 1.772rem;
    border-left-style: solid;
    border-left-width: .125rem;
}

.ce-step-by-step-plan__term:last-of-type,
.ce-step-by-step-plan__description:last-of-type {
    border-left-color: transparent;
}

@media (min-width: 30rem) {
    .ce-step-by-step-plan__container {
        padding: 1.75rem 2rem 2rem;
    }
}

.ce-step-by-step-plan {
    font-size: var(--font-size, 1rem);
}

.ce-step-by-step-plan__container {
    background-color: var(--color-background, white);
    border-color: var(--color-border, grey);
    border-width: var(--border-width, 0.063rem);
}

.ce-step-by-step-plan__header {
    color: var(--color, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.3em);
    font-weight: var(--font-weight, bold);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.ce-step-by-step-plan__term,
.ce-step-by-step-plan__description {
    border-left-color: var(--color-border, black);
}

.ce-step-by-step-plan__term {
    color: var(--color, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.3em);
    font-weight: var(--font-weight, bold);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.ce-step-by-step-plan__term::before {
    background-color: var(--color-background, black);
    border-color: var(--border-color, transparent);
    border-radius: var(--border-radius, 50%);
    border-width: var(--border-width, 0.125rem);
    color: var(--color, white);
    font-size: var(--font-size, 1.3em);
    font-family: var(--font-family, inherit);
    font-weight: var(--font-weight, bold);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.ce-step-by-step-plan__description {
    color: var(--color, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-weight: var(--font-weight, normal);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.ce-step-by-step-plan__description a {
    color: var(--color, #022979);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, inherit);
    font-weight: var(--font-weight, inherit);
    font-style: var(--font-style, inherit);
    line-height: var(--line-height, inherit);
}

.ce-step-by-step-plan__text {
    color: var(--color, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-weight: var(--font-weight, normal);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}
