.form-row label {
    padding-bottom: 5px;
    margin-right: 10px;
}
.flex-row {
    display: flex;
    flex-direction: row;
    }
.box--end {
    margin-left: auto;
}
.tooltip-form-add {
    margin-left: auto;
    position: relative;
    display: inline-block;
}
.tooltip-form-add .fa-question-circle {
    color: #8D8B9F;
    cursor: help;
    font-size: 1rem;
    line-height: 1;
}
.tooltip-form-add.active-projects-filter__info .fa-question-circle {
    color: var(--secondary, #917AC2);
}
.tooltip-form-add.subject-status-help .fa-question-circle {
    color: var(--secondary, #917AC2);
}
.tooltip-form-add > .help-text {
    display: none;
}
.tooltip-form-add:hover > .help-text,
.tooltip-form-add:focus > .help-text {
    display: inline-block;
    background-color: #1A1B1C;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: auto;
    right: 100%;
    z-index: 1000;
    font-size: 12px;
    min-width: 12rem;
    max-width: 20rem;
    text-wrap: auto;
    text-align: center;
}
.tooltip-form-add.project-visibility-field__help:hover > .help-text,
.tooltip-form-add.project-visibility-field__help:focus > .help-text {
    top: 50%;
    left: calc(100% + 0.5rem);
    right: auto;
    transform: translateY(-50%);
}
@media screen and (min-width: 834px) and (max-width: 1024px) and (orientation: portrait) {
    .tooltip-form-add:hover > .help-text,
    .tooltip-form-add:focus > .help-text {
        left: auto;
        right: 100%;
    }
}
@media screen and (max-width: 834px) {
    .tooltip-form-add:hover > .help-text,
    .tooltip-form-add:focus > .help-text {
        left: auto;
        right: 100%;
    }
}

.form-row .help {
    display: none;
}

/* Fields filled by "Suggest details with AI" until the user edits or undoes them. */
.ai-suggested,
.ai-suggested + .select2-container .select2-selection {
    outline: 2px solid #8e6bd3 !important;
    outline-offset: 1px;
}

/* "Fill out" (AI suggestion) button next to Lookup RRID / Lookup DOI. */
.identifier-lookup__wrap {
    display: inline-block;   /* receives hover while the button inside is disabled */
}
.identifier-ai-btn {
    white-space: nowrap;
    align-items: center !important;
    gap: 0.4rem;
}
.identifier-ai-btn__icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    fill: currentColor;
}