.search-bar-container {
    position: relative;
    margin: 1rem 0;
}

.search-bar-container .clear {
    cursor: pointer;
}

.search-bar-container .suggestion-container {
    position: absolute;
    width: 100%;
    background-color: var(--spk-form-field-background-color-default);
    border-style: var(--spk-form-field-border-style);
    border-width: var(--spk-form-field-border-width);
    border-color: var(--spk-form-field-border-color-default);
    border-radius: var(--spk-form-field-border-radius);
    margin-top: 0.5rem;
    padding: 1rem;
    z-index: 1;
    font-size: 14px;
}

.search-bar-container .suggestion-container .top-articles-text {
    color: var(--spk-form-field-text-color-active);
    font-size: 12px;
}

.search-bar-container .suggestion-container .suggestion-divider {
    margin: 8px 0 10px 0;
}

.search-bar-container .suggestion-container ul.faq-articles {
    padding: 0;
    margin: 0;
    list-style: none;
}

.search-bar-container .suggestion-container ul.faq-articles li:not(:first-child) {
    margin-top: 1rem;
}

.search-bar-container .suggestion-container ul.faq-articles li a {
    text-decoration: none;
    color: var(--spk-form-field-text-color-default);
}

.search-bar-container .suggestion-container ul.faq-articles li a:hover {
    color: var(--spk-form-field-text-color-default);
}

.search-bar-container .suggestion-container ul.faq-articles li a:active {
    color: var(--spk-form-field-text-color-default);
}

.search-bar-container .suggestion-container ul.faq-articles li a:visited {
    color: var(--spk-form-field-text-color-default);
}