.nnds-search {
}

.nnds-search label {
    font-weight: var(--fontWeight-bold);
    font-size: var(--fontSize-m);
    line-height: 150%;
    color: var(--color-text-default);
    display: block;
}

.nnds-search sub {
    margin-bottom: var(--space-label);
}

.nnds-search-box {
    position: relative;
}

.nnds-search input {
    color: var(--color-text-default);
    height: 48px;
    font-size: var(--fontSize-m);
    opacity: 100%;
    border-radius: 4px;
    border: 1px solid var(--color-grey-600);
    line-height: 24px;
    padding: 12px 16px 12px 48px;
}

.nnds-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.nnds-search input:focus {
    outline-width: 2px;
    outline-color: var(--color-purple-900);
    caret-color: var(--color-brand-mediumOrange);
}

.nnds-search input:active {
    outline-width: 1px;
    outline-color: var(--color-grey-800);
}

.nnds-search input:invalid {
    outline-width: 2px;
    outline-color: var(--color-darkOrange-700);
}

.nnds-search input[readonly],
.nnds-search input[readonly]:focus,
.nnds-search input[readonly]:active {
    border: none;
    outline: none;
    pointer-events: none;
}

.nnds-search-icon {
    display: block;
    padding: 12px 0 12px 16px !important;
    align-items: center;
    background: transparent;
    border: none;
    display: inline-flex;
    font-size: inherit;
    justify-content: center;
    text-decoration: none;
    position: absolute;
    top: 0;
}

/* jquery ui theme 上書き */
.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: var(--size-m) var(--size-s) !important;
}

/* footerにかぶらないようにする */
.ui-menu {
    z-index: 500 !important;
}

/* リスト全体の背景 */
.ui-widget-content {
    border-radius: 4px;
    background: var(--color-grey-100) !important;
    color: var(--color-text-default) !important;
    font-size: var(--fontSize-m) !important;
}
/* リスト hover 時のカラー */
.ui-state-active {
    border-radius: 4px;
    border: 1px solid var(--color-grey-600) !important;
    background: var(--color-brand-white) !important;
    color: var(--color-text-default) !important;
}