/* Based on eki-theme variables.scss, search-form.scss, buttons.scss and tables.scss. */
.eki-names {
    --eki-primary: var(--bs-primary, #173148);
    --eki-light-blue: #d7e5f2;
    --eki-gray-blue: #c4d2dd;
    --eki-focus: #4759ff;
    margin-block: 1.5rem 2.5rem;
    color: var(--eki-primary);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: .005em;
}
.eki-names *, .eki-names *::before, .eki-names *::after { box-sizing: border-box; }
.eki-names .eki-names-search { margin: 0; max-width: 55.625rem; }
.eki-names .eki-names-label { display: block; margin: 0 0 .5rem .875rem; font-size: .875rem; font-weight: 500; }
.eki-names .eki-names-input-wrap { position: relative; }
.eki-names .eki-names-input-wrap::before {
    content: ''; position: absolute; z-index: 1; left: 1.0625rem; top: 50%;
    transform: translateY(-50%); width: 1.5rem; height: 1.5rem;
    background: var(--eki-primary); pointer-events: none;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.eki-names input[type="search"] {
    display: block; width: 100%; min-width: 0; min-height: 3.125rem; margin: 0;
    padding: .75rem 8rem .75rem 3.5rem;
    border: 1px solid var(--eki-primary); border-radius: 1.8125rem;
    background: transparent; color: var(--eki-primary); box-shadow: none; font: inherit; appearance: none;
}
.eki-names input::placeholder { color: var(--eki-primary); opacity: .75; }
.eki-names button {
    border: 1px solid var(--eki-primary); border-radius: 2.375rem;
    background: #fff; color: var(--eki-primary); box-shadow: none;
    font-family: inherit; font-size: .875rem; font-weight: 500; line-height: 1.4;
    letter-spacing: .0125em; cursor: pointer; text-transform: none;
    transition: background-color .15s, color .15s;
}
.eki-names .eki-names-submit {
    position: absolute; inset: 0 0 0 auto; min-width: 7rem; margin: 0;
    padding: .75rem 1.75rem; background: var(--eki-gray-blue);
}
.eki-names button:hover, .eki-names button[aria-pressed="true"] { background: var(--eki-primary); color: #fff; }
.eki-names nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem; }
.eki-names nav button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.75rem; min-height: 2.75rem; margin: 0; padding: .5rem;
}
.eki-names :focus-visible { outline: 2.5px solid var(--eki-focus); outline-offset: 3px; }
.eki-names [role="status"] { margin: 1rem 0; font-size: .875rem; }
.eki-names .eki-names-results { max-width: 100%; overflow-x: auto; }
.eki-names table { width: 100%; margin: 0; border-collapse: collapse; color: var(--eki-primary); font: inherit; line-height: 1.3; }
.eki-names th, .eki-names td {
    padding: .875rem 1rem; border: 1px solid var(--eki-primary);
    background: #fff; color: var(--eki-primary); text-align: left; vertical-align: top; font-size: 1rem;
}
.eki-names thead th { background: var(--eki-light-blue); font-weight: 600; }
.eki-names tbody th { font-weight: 600; }
.eki-names .eki-names-note { white-space: pre-line; min-width: 10rem; }
@media (max-width: 767px) {
    .eki-names input[type="search"] { padding-right: 6rem; background: #fff; }
    .eki-names .eki-names-submit { min-width: 5rem; padding-inline: 1.25rem; }
    .eki-names th, .eki-names td { padding: .625rem .75rem; }
}
@media (prefers-reduced-motion: reduce) { .eki-names button { transition: none; } }
.eki-names-page-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin-block:1.5rem; }
.eki-names-page-nav a { display:inline-flex; align-items:center; min-height:2.75rem; padding:.5rem 1.25rem; border:1px solid #173148; border-radius:2.375rem; color:#173148; background:#fff; font:inherit; text-decoration:none; }
.eki-names-page-nav a:hover, .eki-names-page-nav a[aria-current="page"] { background:#173148; color:#fff; }
.eki-names-page-nav a:focus-visible { outline:2.5px solid #4759ff; outline-offset:3px; }
