/* Copyright 2020-2025 Information Management Services, Inc. */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 GENERAL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body {
    display: flex;
    flex-flow: column wrap;
    min-height: 100vh;
}
a.skipnav {
    display: block;
    padding: 15px;
    text-align: center;
}
img.external {
    vertical-align: baseline;
}
span.highlight {
    background-color: #ffa;
}
.inline-label {
    display: inline;
}
.cursor-waiting {
    cursor: wait !important;
}
.clickable {
    cursor: pointer;
}

/* Could be replaced with Bootstrap classes */
.flex-one {
    flex: 1;
}
.nowrap {
    white-space: nowrap;
}

/* If you don't want a full width site add a max-width to .container-fluid */
.container-fluid {
    max-width: 1400px;
}

/* MOBILE STYLES */
.js .mobileState {
    display: block;
}

/* Not using Bootstrap d-none because of the important declaration */
.display-none {
    display: none;
}
.bioshare-form-group {
    margin-bottom: 1rem !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 SITE LAYOUT 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#header {
    display: flex;
    padding-top: 1em;
    padding-bottom: 1em;
}
#header .logo-header {
    flex: 2;
}
#header .logo-header a {
    display: block;
}
#header #search_and_login {
    flex: 1;
}

/* 

 OVERRIDES */
.dropdown-menu.show {
    /* User dropdown menu conflicts with smartmenu Z-index */
    z-index: 10000;
}
.dropdown-item {
    cursor: pointer;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MAIN MENU ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.navBar {
    background: #f8f9fa;
}
.sm-clean {
    background: none;
    display: flex !important;
    flex-wrap: wrap;
}
.sm-clean li {
    flex: 1;
    text-align: center;
}
.sm-clean ul a {
    word-break: break-word;
}
.sm-clean ul a:hover,
.sm-clean ul a:focus,
.sm-clean ul a:active,
.sm-clean ul a.highlighted {
    color: #444444;
}

/* CURRENT MENU ITEM */
.bioshare-home .sm-clean a.nav-home,
.bioshare-about .sm-clean a.nav-about,
.bioshare-requests .sm-clean a.nav-requests,
.bioshare-studies .sm-clean a.nav-studies,
.bioshare-specimens .sm-clean a.nav-specimens,
.bioshare-publications .sm-clean a.nav-publications,
.bioshare-approvedprojects .sm-clean a.nav-approvedprojects,
.bioshare-faq .sm-clean a.nav-faq,
.bioshare-histology .sm-clean a.nav-histology,
.bioshare-reports .sm-clean a.nav-reports,
.bioshare-admin .sm-clean a.nav-admin,
.approvedprojects .sm-clean a.nav-approvedprojects,
.publications .sm-clean a.nav-publications,
.Jobs .sm-clean a.nav-datamanager,
.Documentation.Repository .sm-clean a.nav-datamanager,
.admin .sm-clean a.nav-admin {
    background-color: #fdfdfd;
}

/* MOBILE NAV */

@media (min-width: 48em) {
    #menu-button {
        display: none;
    }
}
@media (max-width: 47.99em) {
    /* 767px in Chrome - only show the toggle and hide the menu if JS is enabled */
    .js #menu-button,
    .js #search-tog {
        display: block;
    }
    .js .mobileState {
        display: none !important;
    }
    .sm-clean li {
        flex-basis: 100%;
    }
}
#main-menu .sm-nowrap > li > a,
#main-menu > li > :not(ul) a {
    text-align: left;
    white-space: unset !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BREADCRUMBS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.breadcrumb {
    padding: 15px;
}
.breadcrumb i,
.breadcrumb span {
    margin-right: 5px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MAIN BODY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#main {
    flex-grow: 1;
}
.request-header,
#request-tabs .nav-link.active {
    background-color: #fdfdfd;
    border-bottom-color: #fdfdfd;
}

#request-tabs .dropdown-menu.show {
    inset: 0px auto auto 0px !important;
    transform: translate(0px, 44px) !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
footer {
    background: #f8f9fa;
    margin-top: 2em;
    padding: 1em 0 0;
}
div#footer ul {
    list-style: none;
    display: flex;
}
div#footer ul li:after {
    content: "|";
    margin-right: 1em;
    margin-left: 1em;
}
div#footer ul li:last-of-type:after {
    content: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 BOOTSTRAP OVERRIDES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#strap-field-fa-stack {
    vertical-align: middle;
    font-size: 0.5em;
}

/* POPOVERS - bootstrap doesnt include footer styling */
.popover {
    position: absolute;
}
.popover-footer {
    padding: 8px 14px;
    border-top: 1px solid #ebebeb;
    text-align: right;
    white-space: nowrap;
}

/* BADGE PILL - updating not active colors */
.nav-link:not(.active) .bg-light,
.list-group-item:not(.active) .bg-light {
    background-color: #6c757d;
    color: #fff;
}

/* Recovering btn-xs because it was removed from Bootstrap 4 with no replacement */
.btn-xs,
.btn-group-xs > .btn {
    padding: 0.0625rem 0.3125rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.1875rem;
}
.collapse {
    margin-bottom: 20px;
}
@media (max-width: 1000px) {
    .float-end {
        float: none !important;
    }
}
.h2 {
    margin: 0;
}
.td {
    border: 0;
    padding: 0;
}

/* ~~~~~ OVERRIDES ~~~~~ */

/* TABS */
.tab-content {
    margin-top: 1em;
}
.tab-content label {
    font-weight: bold;
}

/* Pager / Pagination */
.pagination {
    margin: 0;
}

/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
    text-decoration: none;
}
a:not([class*="btn"]):hover {
    text-decoration: underline;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 COMPONENTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MESSAGES AND WARNING REGION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
div#header-alert {
    float: right;
    width: 100%;
}
.request-header-wrapper label {
    font-weight: bold;
}
.request-header .post-req-update {
    margin-left: 10px;
}
.request-header .alert-warning .btn {
    float: right;
}

@media (min-width: 768px) {
    .request-header-wrapper {
        left: 5%;
        right: 5%;
        margin-top: 0;
        z-index: 1000;
        box-shadow: 0px 10px 20px #fdfdfd;
        top: 0;
    }
}
@media (max-width: 767px) {
    .request-header-wrapper {
        position: relative !important;
        left: 0 !important;
        width: auto !important;
        top: 0;
    }
}

#refresh-warning {
    margin-bottom: 10px;
    float: left;
    width: 100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MODAL WINDOWS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.modal {
    z-index: 9999 !important;
}

/* ~~~~~ MODAL CLOSE BUTTON ~~~~~ */

/* The close button has opacity that makes it fail a contrast check and it has no visual focus cue. Opacity turned off, focus style added. */
.close {
    opacity: 1 !important;
}
.close:hover {
    outline: 1px dotted #000 !important;
}
.close:focus {
    outline: 1px dotted #000 !important;
}
.history-value {
    word-break: break-word;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ICONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.large-icon {
    font-size: 200%;
}
.hidden-icon {
    visibility: hidden;
}
@media (max-width: 767px) {
    i.hidden-icon {
        display: none;
    }
}

/* Clickable Icon links to modal */
#permissions-list-link,
#request-idle-dialog-link {
    cursor: pointer;
}

/* Facet expand/collapse icons */
.facet-label-icon {
    margin-right: 4px;
    color: #aaa;
}
button.keyword-helptext-icon {
    border: none;
    background-color: inherit;
    color: #214554;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SELECT2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.select2-container.form-control {
    /* Bootstrap form-control adds an additional unneeded border, so we remove it along with the padding. */
    padding: 0 !important;
    border: none !important;
}

.select2-container--default .select2-selection--multiple.form-control {
    border: 1px solid #ced4da;
}

.select2-container--default .select2-selection--multiple.form-control.is-invalid {
    border: 1px solid #dc3545;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BUTTONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.btn-inline {
    margin-left: 10px;
}
.btn-group-vertical {
    display: block;
}
.grayButton {
    color: #646464;
    font-weight: normal;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
}
.grayButton-block {
    width: 100%;
}
.grayButton:hover,
.grayButton:focus {
    background-color: #f5f5f5;
    color: #646464;
    background-image: linear-gradient(to bottom, #ffffff, #eee);
}

/* buttons to the right of page titles */
.horizontal-button-container * {
    display: inline-block;
    margin-top: 0px;
}
.horizontal-button-container .btn {
    margin: 0 0 0 10px;
}

/* Disabled Buttons with Tooltips */
div.tooltip-wrapper {
    display: inline-block;
}
div.tooltip-wrapper .btn[disabled] {
    /* don't let button block mouse events from reaching wrapper */
    pointer-events: none;
}
div.tooltip-wrapper.disabled {
    /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
    cursor: not-allowed;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ERRORS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.attachments-container > .error {
    margin: 10px 0 1rem;
    position: relative;
    padding: 0.75rem 1.25rem;
    border: 1px solid #f5c6cb;
    border-radius: 0.25rem;
    color: #721c24;
    background-color: #f8d7da;
}
.has-error input,
.has-error textarea,
.has-error select {
    background-color: #f8d7da;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FORMS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.form-actions,
.idp {
    margin-top: 15px;
    margin-bottom: 15px;
}
.form-check-label {
    font-weight: normal;
}
form legend {
    font-weight: bold;
    font-size: inherit;
}
#scheduled_notifications_form {
    display: inline;
}

/* ~~~~~ REQUIRED ASTERISK ~~~~~ */
.bioshare-form-group.required > label:after,
.bioshare-form-group.required legend:after,
.bioshare-form-group.required .form-check-inline:after,
.bioshare-form-group.required .controls.clearfix > .form-check-label:after {
    content: " *";
    color: #999;
}
label,
.form-text {
    margin-bottom: 0px;
}

/* ~~~~~ DATEPICKER ~~~~~ */
#ui-datepicker-div {
    z-index: 100000 !important;
}

/* Hide the "today" button from the jQuery UI Datepicker because it doesn't do what you think it supposed to do */
button.ui-datepicker-current {
    display: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ LOADING SPINNER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.search-tabs {
    position: relative;
}
#shadow-pane {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 100000;
    display: none;
}
#shadow-pane .spinner-wrapper {
    padding: 10%;
    text-align: center;
    position: sticky;
    top: 0;
}
#shadow-pane .spinner-border {
    height: 3rem;
    width: 3rem;
}
#loading-spinner {
    text-align: center;
}
#report-loading-spinner {
    font-size: 2em;
    display: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ TABLES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.table th {
    border-top: none;
}
.table-striped a:not(.btn) {
    color: #2d6da4;
}
.table-striped a:not(.btn):hover,
.table-striped a:not(.btn):focus {
    color: #23527c;
}
table.no-border {
    border-style: none;
}

/* ~~~~~ TABLE SORTING ~~~~~ */
th.sort {
    background-repeat: no-repeat;
    background-position: left center;
}
th.sort.asc {
    background-image: url("../img/sorted_up.c3a5a07b01b5.png");
    background-color: #ffe;
    padding-left: 15px;
}
th.sort.desc {
    background-image: url("../img/sorted_down.6202bff518ca.png");
    background-color: #ffe;
    padding-left: 15px;
}

/* ~~~~~ DATA TABLES ~~~~~ */
.dataTable > .row {
    width: 100%;
}
.dataTable {
    width: 100%;
}
.dataTable * tr.odd {
    background-color: rgba(0, 0, 0, 0.03);
}
.card {
    margin: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ COMMENTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.comments-node-container:not(.comments-wrapper) {
    overflow: auto;
}
.comment-header.row {
    margin-left: 0;
}
.comment-header-right {
    float: right;
}
@media (min-width: 768px) {
    .comment-header-right {
        text-align: right;
    }
}
@media (max-width: 767px) {
    .comment-header-right {
        float: none;
    }
}

/* ~~~~~ BORDERS ~~~~~ */
.comments-node-container {
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* Leaf Comments - Make sure the wrapper does not show a bottom border before initialization begins */
.leaf-comments-node-container,
.comments-wrapper,
.last-node-container .comment-container,
.node-has-children > .comment-container,
.comments-node-container[data-level="0"],
div.comment-header {
    border-bottom: none;
}
.node-has-children:not(.last-node-container) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* Comments which are purely status change comments, with an immediate sibling that is also purely a status change comment. */
.inner-comments-node-container {
    border-bottom: none;
}

/* ~~~~~ AVAILABLE ACTIONS ~~~~~ */
.action-trigger-container {
    white-space: nowrap;
    display: inline-block;
}
.action-trigger-container > a {
    margin-right: 10px;
}
.action-trigger-container span {
    font-size: 12px;
}
@media (min-width: 768px) {
    .action-trigger-container > a > i.fa {
        margin-right: 5px;
    }
}
@media (max-width: 767px) {
    .action-trigger-container {
        display: block;
    }
}
.comment-link {
    padding: 0;
    margin-right: 0;
}

/* ~~~~~ AUTHORED/EDITED BY ~~~~~ */
.posting-user {
    font-weight: bold;
    margin-right: 0.5em;
}
.comment-date-created {
    color: #6a6a6a;
    display: block;
    font-family: "Open Sans Condensed", "Arial Narrow", sans-serif;
    font-weight: normal !important;
}
.last_edited {
    font-size: smaller;
    font-style: italic;
    color: #6a6a6a;
}
span.last_edited {
    display: block;
    margin-bottom: 10px;
}

/* ~~~~~ BODY CONTENT ~~~~~ */
.comment_textarea {
    width: 100%;
    resize: vertical;
}
.comment-body {
    margin: 5px 0px 0px 15px;
}
.original-message {
    margin-left: auto;
}
.comment-visible-fields {
    overflow: auto;
    margin-left: 10px;
}
.comment-btns {
    margin: 10px auto 10px 10px;
}
.comment-update-summary {
    /* Status information */
    color: #767676;
    font-size: smaller;
    font-style: italic;
    margin: 0px;
}
.comment-container {
    margin: 0px;
    padding: 15px 0px 15px 15px;
}

/* Sub-comments */
div.left-comment-indent {
    padding: 0px;
    margin-left: 50px;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

/* Bring status change comments closer together */
.inner-comments-node-container > .comment-container {
    padding-bottom: 0px;
}

/* Modified Comments */
.comment-modified {
    font-style: italic;
    font-size: 80%;
    color: #999;
}

span.mention {
    color: blue !important;
    background: transparent !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ GLOSSARY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.glossary-popover {
    text-decoration: underline dotted #2d6da4 3px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ VISUALINBOX ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#visualinbox-root {
    background-color: #9ec5fe;
}

#visualinbox-inbox {
    max-height: 50vh !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CKEDITOR ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/**
 * When creating table's in CKEditor, they are wrapped in figure attributes with class "table".
 * This causes them to be always full width, so we unset width here.
 */
figure.ck-widget.table {
    width: unset !important;
}

.ck.ck-icon {
    --ck-icon-size: 15px;
}

.ck-editor__editable[role="textbox"] {
    min-height: 200px;
}

.ck-sticky-panel__content_sticky {
    position: unset !important;
}

.ck-sticky-panel__content_sticky_bottom-limit {
    z-index: 0 !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ USA Banner ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.usa-banner {
    background: #f0f0f0;
    margin-bottom: 0;
}

.usa-banner__text {
    color: #000;
    font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 1400px;
    padding: 16px 12px;
    width: 98%;
}

.usa-banner__text img {
    margin-right: 8px;
    vertical-align: baseline;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ REQUEST PAGES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~ HEADER (includes tabs) ~~~~~ */
.request-info {
    margin: 0;
    border: 1px solid #dee2e6;
    background-color: #f4f4f4;
}
.request-info > div {
    padding-top: 5px;
    padding-bottom: 5px;
}
.request-info label {
    margin-bottom: 0px;
}
.request-workflow {
    margin: 0;
    background-color: #f4f4f4;
}
.request-workflow > div {
    padding-bottom: 10px;
}
.request-workflow .workflow-buttons {
    display: inline-block;
}

/* ~~~~~ BODY ~~~~~ */
#request-action {
    padding: 1px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ STUDIES PAGES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#publications {
    /* Individual study, right side column */
    font-size: 1.3em;
    margin-bottom: 15px;
}

.study-catalog .table > tbody > tr:first-child > td,
.study-catalog .table > tbody > tr:last-child > td {
    border: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DOCUMENTS TAB ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div.doc-category {
    padding-left: 5px;
    padding-top: 10px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background-color: #f9f9f9;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ IMS LOGIN RETIRING  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#do-later-ims-login {
    padding: 0px 0px 0.375rem;
    border-width: 0px;
}