/* Form */
.c-form__wrapper {
    display: flex;
    flex-flow: column wrap;
    position: relative;
    min-height: 20px;
    padding: 19px;
    margin-bottom: 2rem;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.c-search-form {
    width: 100%;
}
.c-search-form .c-form__fieldset {
    display: flex;
    flex-flow: column wrap;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    width: 100%;
    gap: var(--search-fieldset-gap, 1rem);
}
.c-search-form__input {
    font-size: 1rem;
    background: var(--search-input-bg, white);
    box-shadow: none;
    position: relative;
    top: 0;
    transform: none;
    border-radius: var(--search-input-radius, 0);
    border: var(--search-input-border, none);
    width: 100%;
    height: var(--search-input-height, 100%);
    appearance: none;
    padding: 0.5rem;
}
.c-search-form__input::-ms-clear,
.c-search-form__input::-webkit-search-decoration,
.c-search-form__input::-webkit-search-cancel-button,
.c-search-form__input::-webkit-search-results-button,
.c-search-form__input::-webkit-search-results-decoration {
    display: none;
}
.c-search-form__input::-webkit-input-placeholder,
.c-search-form__input::-moz-placeholder,
.c-search-form__input:-moz-placeholder,
.c-search-form__input:-ms-input-placeholder {
    color: #333;
}
.c-search-form .c-form__action .c-btn, .c-search__page .c-btn {
    padding: var(--search-btn-padding, 0.535rem 2.3125rem);
    text-transform: none;
    border-radius: var(--search-btn-radius, 3px);
}

/* Autocomplete */
.c-autocomplete__wrapper.is-hidden {
	display: none;
	opacity: 0;
    pointer-events: none;
}
.c-autocomplete__wrapper.is-visible {
	display: flex;
	background: #fff;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
    transition: opacity 0.2s;
    opacity: 1;
}
.c-autocomplete {
	position: relative;
    background: #fff;
    width: 100%;
    padding: 0;
    z-index: 9;
    max-height: 300px;
    overflow-y: visible;
}
.c-autocomplete > li {
    display: none;
    width: 100%;
    background: #fff;
    list-style-type: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.c-autocomplete > li:nth-last-of-type(-n+5) {
    display: block;
}
.c-autocomplete > li:last-of-type {
    padding-bottom: 10px;
}
.c-autocomplete > li[aria-selected="true"] {
  background: #e6f0fa;
}
.c-autocomplete > li:hover {
  background: #f0f0f0;
}
.c-search-form__input:focus-visible {
  outline: 2px solid var(--search-focus-outline);
  outline-offset: 2px;
}
.c-form__error[role="alert"] {
  color: #b00020;
  font-size: 1rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: #fff0f0;
  border-left: 4px solid #b00020;
}
.c-form__error.is-hidden {
	display: none;
}
.c-form__error.is-visible {
	display: block;
}
.c-form__error > .error {
	padding-bottom: 0;
	width: auto;
	font-weight: 700;
	color: #FF1C1C;
}
@media only screen and (min-width: 64.06em) {
	.c-form__wrapper {
	    flex-flow: row wrap;
	}
	.c-search-form .c-form__fieldset {
	    flex-flow: row wrap;
	}
    .c-search-form .c-form__input {
        flex: 1;
        padding: 0;
        /* `.c-form__input` is a SHARED, site-wide class (clientlib-style/
           css/style.css) that styles this same class name as an actual
           bordered/sized <input> for unrelated forms (cd-rates, mortgage-
           rates, mortgage-lead-form, branch-locator) — height:40px, a
           1px #bebfbf border, white background, inline-block display.
           Here `.c-form__input` is only the flex WRAPPER <div> around the
           real input (`.c-search-form__input`, styled separately above),
           so that generic input-shaped styling was bleeding onto the
           wrapper too, rendering a mismatched "double box" around the
           actual search input. Reset to a plain, invisible flex item —
           these resets are unconditional (not hooked/themed) since the
           conflict is a cross-component naming collision, not a themeable
           value, and applies identically on every theme. */
        display: block;
        width: 100%;
        border: none;
        background: transparent;
        font-size: inherit;
        line-height: inherit;
    }
    .c-header .c-search-form__input {
        position: relative;
    }
}