/* The Related Links page (DBIM 5.6; the list follows dot.gov.in/RelatedLinks). Colours and sizes are the dbim.css tokens.
   The last block is for high contrast: html.dbim-hc is set by dbim-a11y.js while that mode is on. */
.dbim-related-search {
    position: relative;
    max-width: 30rem;
    margin-bottom: 1.5rem;
}
.dbim-related-search .dbim-ico {
    position: absolute;
    margin: 0;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--dbim-c1);
    pointer-events: none;
}
.dbim-related-search .form-control {
    padding-left: 2.75rem;
    border-color: var(--dbim-c2);
    line-height: 1.5;
}
.dbim-related-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.dbim-related-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    border: 1px solid var(--dbim-grey1);
    border-radius: 0.5rem;
    background: var(--dbim-white);
}
/* display: flex above would otherwise show a row that the search has hidden */
.dbim-related-item[hidden] {
    display: none;
}
.dbim-related-name {
    font-size: var(--dbim-fs-p1);
    color: var(--dbim-text);
    overflow-wrap: anywhere;
}
.dbim-related-visit {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background: var(--dbim-c5);
    color: var(--dbim-c1);
    font-size: var(--dbim-fs-p2);
    font-weight: 600;
    text-decoration: none;
}
/* The button is a flex row: its icon is a box of its own, not part of a line of text (the button keeps its 40px) */
.dbim-related-visit .dbim-ico {
    margin: 0;
}
.dbim-related-visit:hover {
    background: var(--dbim-c1);
    color: var(--dbim-white);
}
.dbim-related-visit:focus-visible {
    background: var(--dbim-c1);
    color: var(--dbim-white);
    outline: 2px solid var(--dbim-c1);
    outline-offset: 2px;
}
.dbim-related-none {
    padding: 1rem 1.5rem;
    border: 1px solid var(--dbim-grey1);
    border-radius: 0.5rem;
}
@media (max-width: 575.98px) {
    .dbim-related-item {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1rem;
    }
    .dbim-related-visit {
        align-self: flex-end;
    }
}

/* High contrast: black and yellow, like the rest of that mode */
html.dbim-hc .dbim-related-search .dbim-ico {
    color: yellow;
}
html.dbim-hc .dbim-related-item,
html.dbim-hc .dbim-related-none {
    border-color: yellow;
    background: black;
}
html.dbim-hc .dbim-related-name,
html.dbim-hc .dbim-related-none {
    color: yellow;
}
html.dbim-hc .dbim-related-visit {
    border: 1px solid yellow;
    background: black;
}
/* The high-contrast stylesheet makes every link yellow with !important; a button under the pointer turns yellow, so its text has to beat that */
html.dbim-hc .dbim-related-visit:hover {
    background: yellow;
    color: black !important;
}
html.dbim-hc .dbim-related-visit:focus-visible {
    background: yellow;
    color: black !important;
    outline-color: yellow;
}