/* opus-specific values live here... */
body {
    overflow: hidden;
}

/* Make sure when bootstrap modal is open, extra padding-right is not
added to body and navbar */
body.modal-open {
    padding-right: 0 !important;
}

body.modal-open .navbar {
    padding-right: 16px !important;
}

a {
    text-decoration: none;
}

.app-body {
    margin-top: 3.8em !important;
    overflow: hidden;
}

.container-fluid {
    padding: 0;
}

.dictionary {
    display: none;
}

.tab-full-width {
    margin: 0 auto;
    width: 100%;
}

.navbar-brand {
    width: 3em !important;
}

.dropdown-menu {
    padding: 0 0;
}

.dropdown-item {
    position: relative;
    padding: 10px 20px;
    border-bottom: 1px solid #c8ced3;
}

.dropdown-item:last-child {
    border-bottom: 0;
}

.dropdown-item i {
    display: inline-block;
    width: 20px;
    margin-right: 10px;
    margin-left: -10px;
    color: #c8ced3;
    text-align: center;
}

.dropdown-header {
    font-size: 0.765625rem;
    padding: 8px 20px;
    background: #e4e7ea;
    border-bottom: 1px solid #c8ced3;
}

.table {
    max-width: 100%;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}


/* Make the main nav bar just a little taller than normal (style says 8px) */
#op-main-nav {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Keep the horizontal spacing between Search/Browse Results/Cart/Detail the same
even when the browser size is narrow. */
#op-main-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Override style.css so that the navbar buttons are always dark when the mouse
   is away, and always light when the mouse is hovering. This makes them
   consistent with the other nav items which go from dark grey to light grey. */
#op-main-nav .navbar-nav .nav-link.active,
#op-main-nav .navbar-nav .nav-link.open,
#op-main-nav .navbar-nav .active>.nav-link,
#op-main-nav .navbar-nav .nav-link.show,
#op-main-nav .navbar-nav .show>.nav-link
{
    color: var(--cui-dark); /* From style.css */
}
#op-main-nav .navbar-nav .nav-link.active:hover,
#op-main-nav .navbar-nav .nav-link.open:hover,
#op-main-nav .navbar-nav .nav-link:hover {
    color: var(--cui-nav-link-hover-color); /* From style.css */
    text-decoration: none;
}

/* Remove annoying dotted border in Firefox */
#op-main-nav .navbar-nav .nav-link {
    outline: none !important;
}

#op-main-nav .op-nav-detail-image {
    height: 20px;
    width: 20px;
    vertical-align: top;
    margin-left: 0.3em;
}

@media (max-width: 992px) {
    #op-main-nav.navbar .navbar-brand {
        float: none;
    }

    #op-main-nav.navbar .navbar-nav>.nav-item {
        float: none;
    }

    #op-main-nav.navbar .navbar-nav {
        float: none !important;
    }

    /* Make items in hamburger stay in one line, not sure if we want this? */
    #op-main-nav-collapse.show, #op-main-nav-collapse.collapsing {
        display: flex;
    }
}

/* Make sure the height of top navbar will not change when "Recent Announcement"
appears & disappears. Padding-top & bottom need to match ones for .op-user-msg
so that both "Recent Announcements" and "Message" can be vertically aligned. */
.op-tab .op-blog-link {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 992px) {
    /* Add spaces between each nav-link item */
    #op-tab .nav-link {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* Padding-top & bottom need to match ones for .op-blog-link so that both
"Recent Announcements" and "Message" can be vertically aligned. */
.op-user-msg {
    display: none;
    padding-top: 0;
    padding-bottom: 0;
}

/* display normalized url message */
.op-show-msg {
    display: block;
}

/* Make sure expanding help menu will not expand the navbar in hamburger */
#op-help .dropdown-menu {
    position: absolute;
}

/* Add padding to (?)help when main nav has the hamburger */
#op-help-menu {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#op-help-menu.show:hover {
    color: var(--cui-dark) !important;
}

#op-interpret-image-menu {
    padding-left: 0.8em;
}

@media (max-height: 535px) {
    #op-help a {
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 10px;
        padding-right: 10px;
    }

    #op-interpret-image-menu {
        padding-left: 0.2em !important;
    }
}

#op-tab img.newGIF {
    display: none;
}

#search {
    height: 100%;
    position: fixed;
    left: 0;
    margin: 0;
    /* Make the whole search page shrink proportionally when window
    is narrower */
    width: 100%;
    /* Make sure search tab will not scroll horizontally */
    overflow-x: hidden;
}

#search .add_input {
    display: none;
}

#search .op-search-param {
    font-size: 90%;
    margin-top: 1.5px;
    margin-bottom: 1.5px;
    display: flex;
}

/* Spacing between (i) icon, and widget title text in search tab */
#search .card-title i.fa-info-circle {
    padding-right: 0.2rem;
}

#browse, #cart, #detail {
    padding: 0; margin:0;
    display: none;
}

#browse {
    background-color: #303030; /* #383838; */
}

#browse .data {
    background-color: white;
}

#browse .gallery {
    margin: 0;
    padding: 0;
    background-color: #303030; /* #383838; */
    padding-left: 1.5em;
}

.op-gallery-view {
    overflow: hidden;
    position: relative;
}

/* Make sure y-axis rail is not moving and always visible */
.op-gallery-view > .ps__rail-y {
    background-color: transparent !important;
}

/* remove the highlight border of ps when it's focus */
.op-gallery-contents .ps__thumb-y:focus {
    outline: none;
}

.op-metadata-detail-edit {
    margin-bottom: 0.5em;
    white-space: nowrap;
    display: inline-flex;
}

.op-metadata-detail-edit a:hover {
    text-decoration: none;
}

.op-metadata-detail-edit-wrap {
    max-width: 10em;
    flex-wrap: wrap;
}

.op-metadata-detail-edit-message {
    display: inline-flex;
    padding-left: 2em;
}

.op-metadata-details-edit-enabled ul:hover {
    cursor: -webkit-grab;
    cursor: grabbing;
}

.op-metadata-details-sortable {
    margin-bottom: 0;
}

.op-browse-view[data-view] {
    width: 8em;
}

#detail {
    padding: 20px 50px;
}

#detail h1 {
    white-space: nowrap;
}

/* Group the magnifying glass and the value together in detail page. This will
make sure they always stay together when wrapping into a different line */
#detail .op-detail-entry-values {
    display: inline-block;
    max-width: 100%;
}

/* When some entry values overflow, we break them into multiple lines */
#detail .op-detail-entry-values-wrapper {
    overflow-wrap: break-word;
    max-width: 100%;
}

#nav-sidebar {
    margin: 0;
    padding: 0;
    width: 400em;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

#sidebar {
    /* set 100% on min-width so search menu (including the grey border)
    will shrink proportionally when screen is narrow */
    min-width: 100%;
    max-width: 26rem;
    height: 100%;
}

#sidebar .submenu {
    margin-left: 15px;
}

#sidebar .menu_help {
    margin: 0;
    padding: .1em .2em;
    padding-left: 1em;
}

/*
Fix the sidebar width so the width will not change when .menu_help message shows up
Not sure if this is the desired behavior
*/
.sidebar-area {
    max-width: 420px;
}

/* As long as q-type shrink to the 2nd line, we set text input width
to 100%, this will make the shrinking look smoother */
@media (max-width: 940px) {
    /* Make STRING input shrink proportionally when window is narrow */
    #op-search-widgets input[class~="STRING"] {
        width: 100%;
    }

    /* The following styling are to group Min/Max with its corresponding input
    when window is narrow */
    #op-search-widgets input[class~="RANGE"] {
        flex: 1 0 auto;
    }

    .op-range-input-min-list, .op-range-input-max-list {
        white-space: nowrap;
        display: inline-flex !important;
        width: 100%;
    }

    /* Align the Min/Max input tag when they are in different lines */
    .op-range-input-min {
        margin-left: 0.5rem;
    }

    .op-range-input-max {
        margin-left: 0.3rem;
    }

    .op-or-labels {
        width: auto !important;
    }
}

@media (max-width: 860px) {
    /* Make search menu shrink proportionally when screen width is narrower */
    .sidebar-area {
        max-width: 44%;
    }

    /* Make sure scrollbar is not covered by search menu item when search
    menu item is hovered over */
    #sidebar-container .ps__rail-y {
        z-index: 999;
    }

    /* Make sure widget area can take up at least 50% of screen */
    #widget-container {
        min-width: 50%;
    }
}

@media (max-width: 700px) {
    /* Remove left space of search menu when screen width is narrower */
    .sidebar-area {
        padding-left: 0;
    }

    /* Make sure horizontal divider has little left margin when screen
    is narrow */
    .shadow-divider {
        margin-left: 1em !important;
    }

    /* Keep equal padding on both left/right sides of the search menu when
       the screen is narrow. Don't do this for the metadata selector so the
       menu is close to the edge of the dialog. */
    #search ul.op-search-menu {
        padding-right: 1em;
        padding-left: 1em;
    }
}

@media (max-width: 670px) {
    /* Remove button padding so both reset buttons can stay in one line
    when window width is about 600px*/
    .op-reset-button button {
        padding-left: 1px;
        padding-right: 1px;
    }
}

/* If the menu category (in the search pane or metadata selector) is collapsed,
   then rotate the little triangle 90 degrees to indicate its status. */
.op-search-menu .dropdown-toggle::after {
    transition: all .3s;
    -webkit-transition: all .3s;
}

.op-search-menu .dropdown-toggle.collapsed::after {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

/* Rotate triangle arrows when menu category is clicked */
.op-search-menu .dropdown-toggle .op-menu-arrow {
    transition: all .3s;
    -webkit-transition: all .3s;
}
.op-search-menu .dropdown-toggle.collapsed .op-menu-arrow {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}


/* for selected metadata items */
.op-mark .op-menu-item {
    background: gainsboro;
}

.op-mark .op-search-param-checkmark {
    opacity: 1;
}

/* Css styling for triangle arrow pointing right */
.op-menu-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Make sure triangle arrow is veritcally centered */
.op-menu-triangle-group {
    display: inline-block;
}

/* Hide the default bootstrap dropdown triangle arrow */
.op-search-menu .dropdown-toggle::after {
    display: none !important;
}

.sidebar_wrapper {
    display: flex;
    margin: 0;
    padding: 0;
    overflow: auto;
    margin-top: 5px;
    position: relative;
    height: 500px; /* matches .op-widget-column */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

hr.op-shadow-divider {
    height: 10px;
    border: 0;
    background-color: rgba(0,0,0,0);
    opacity: 1;
    box-shadow: 0 9px 9px -10px #8c8b8b inset;
}

ul.op-search-menu {
    padding-right: 2em;
}

/* Add or remove background and checkmark when a search item is active.
   This is both for the main search tab and the select metadata dialog. */
.op-search-param {
    background: initial;
    transition: background .4s;
    -moz-transition: background .4s;
    -webkit-transition: background .4s;
}

.op-search-param-checkmark {
    display: inline-block;
    opacity: 0;
    transition: opacity .4s;
    -moz-transition: opacity .4s;
    -webkit-transition: opacity .4s;
}

/* Remove hyperlink underlines from chevron and X on widget title */
.widget .card-header a {
    text-decoration: none;
}

.widget .card-header:hover {
    cursor: grab;
}

/* Make sure all black info circles have the default cursor style */
.fa-info-circle:hover {
    cursor: default;
}

/* Rotate the chevron on a widget header to indicate its open/closed status */
.widget .card-header .icon-action {
    transition: .3s;
}

.widget .card-header .collapsed .icon-action {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -ms-transform-origin: 80% 43%; /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari 3-8 */
    -webkit-transform-origin: 80% 43%; /* Safari 3-8 */
    transform: rotate(-90deg);
    transform-origin: 80% 43%;
}

.op-thumbnail-container {
    float: left;
    position: relative;
    margin: 1px;
    /* Extra 2px margin + 98px (content + padding + border) = 100px */
    min-width: 98px;  /* This gives us a 100x100 thumbnail including margin */
    min-height: 98px;
    border: medium solid transparent;
}

.op-thumbnail-container .img-thumbnail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    padding: 0px !important;
    max-height: 100%;
    max-width: 100%;
}

.op-thumbnail-container:hover .op-thumb-overlay {
    height: 30%;
}

.op-thumb-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.92;
    filter: alpha(opacity=92);
    background: rgba(76, 75, 80, 0.3);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
}

.op-thumb-overlay a:hover {
    color: #097da5;
    /* font-size: 130%; */
}

#browse .op-in-cart {
    border: thick solid #097da5;
    border-radius: 5px;
}

#cart .remove {
    display: none;
}

#cart .removed {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

#cart tr.op-recycled td:not(.op-table-tools) {
    text-decoration: line-through;
}

#op-confirm-modal {
    border-radius: 6px;
    border-width: 3px;
}

.modal-header .btn-close i {
    font-size: 1.5rem;
}

.modal-content {
    border-radius: 1%;
}

/* Make sure "x" button in metadata-dialog is not cut off */
.modal-content .btn-close i {
    line-height: 1.1em;
}

.modal-footer .left-container {
    position: absolute;
    left: 0;
    padding: 1rem;
}

.op-thumbnail-container .op-modal-overlay,
.op-thumbnail-container .op-recycle-overlay {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
}

.op-thumbnail-container .op-modal-overlay {
    opacity: 0;
    z-index: -1;
}

.op-thumbnail-container .op-recycle-overlay {
    transform: translate(-50%, -50%);
    filter: contrast(200%) drop-shadow(3px 2px 2px black);
    opacity: 1;
    z-index: 999;
}

.op-thumbnail-container .op-detail-overlay {
    transform: translate(-50%, -50%);
    filter: contrast(200%) drop-shadow(3px 2px 2px black);
    opacity: 1;
    z-index: 999;
}

.op-thumbnail-container .op-detail-overlay:after {
    content: "DETAIL";
    font-family: sans-serif;
    position: absolute;
    width: 100%;
    left: 95%;
}

.op-thumbnail-container .op-last-modal-overlay {
    filter: contrast(200%) drop-shadow(3px 2px 2px black);
    opacity: 1;
    z-index: 999;
}

.op-thumbnail-container .op-last-modal-overlay:after {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1e5";
    position: absolute;
    width: 100%;
    left: 5%;
}

.op-thumbnail-container .op-modal-show {
    z-index: 999;
    filter: contrast(200%) drop-shadow(3px 2px 2px black);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*  -webkit-transition: opacity 0.1s ease-in;
      -moz-transition: opacity 0.1s ease-in;
      -o-transition: opacity 0.1s ease-in; */
    opacity: 1;
}

tr.op-modal-show  > * {
    color: var(--cui-btn-link-hover-color) !important;
    opacity: 0.92;
    filter: alpha(opacity=92);
}

.op-thumbnail-container .op-recycle-overlay.op-modal-show {
    -webkit-transform: scale(0.4) translate(-210%, -270%);
    -moz-transform: scale(0.4) translate(-210%, -270%);
    transform: scale(0.4) translate(-210%, -270%);
}

.op-thumbnail-container .op-detail-overlay.op-modal-show {
    -webkit-transform: scale(0.4) translate(-210%, -270%);
    -moz-transform: scale(0.4) translate(-210%, -270%);
    transform: scale(0.4) translate(-210%, -270%);
}

.op-thumbnail-container .content-text {
    margin: 0px;
    opacity: 0.65;
}

.op-results-message {
    color: #fff;
    padding-left: 3em;
    width: 500px;
    display: none;
}

.img-thumbnail {
    background-color: transparent !important;
    border: 0px solid #000000 !important;
}

.op-thumb-overlay .op-tools {
    text-align: center;
}

.op-thumb-overlay .op-tools > a {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.op-thumb-overlay .op-tools a:nth-child(1n) {
    position: relative;
    left: 0;
}

.op-thumb-overlay .op-tools a:nth-child(2n) {
    margin-right: 0.8em;
    margin-left: 0.8em;
}

.op-thumb-overlay .op-tools a:nth-child(3n) {
    position: relative;
    right: 0;
}

td.op-table-tools {
    width: 3em;
    min-width: auto !important;
}

td .form-group {
    padding: 0px 8px;
    height: 0.5em;
    margin-top: -5px;
}

td .form-group > a {
    color: white;
    font-size: 20px;
}

th.sticky-header {
    /*  avoid seeing through at the top of header */
    border-top: 0px;
    position: sticky;
    /* Make sure table header is sticky in Safari */
    position: -webkit-sticky;
    top: 0;
    z-index: 10;
    background-color: black;
}

.op-data-table  {
    padding: 0;
}

.op-data-table tbody {
    color: var(--cui-table-border-color);
}

.op-data-table th {
    /* Fix the hidden th left/right border in firebox */
    background-clip: padding-box;
    text-align: center;
}

.op-data-table th a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.op-edit-field-tool .dropdown-menu {
    overflow-y: auto;
}

.op-edit-field-tool {
    min-width: 0;
    background-color: black;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    transition: height 0.5s;
}

.op-data-table .op-column-ordering {
    margin: 0 10px;
}

.op-data-table .op-last-word-group {
    display: inline-block;
    white-space: nowrap;
}

.op-data-table td {
    white-space: nowrap;
    min-width: 4.2em;
}

/* Move y-scrollbar out of container in table view */
.op-data-table th:last-child {
    border-right-width: 15px;
}

.op-data-table tr > td:last-child {
    border-right-width: 15px;
}

/* Fine tune the sortable helper text to stay at the bottom in table header.
   Note: the original text moves up because the helper's default position is
    absolute, which causes the child element, ui-resizable (position: relative),
    to move up.
*/
.op-data-table .ui-sortable-helper {
    display: flex;
    align-items: flex-end;
    border-bottom-width: 1px;
}

/* Make sure placeholder width matches helper */
.op-data-table .ui-sortable-placeholder {
    display: block;
}

.op-data-table th > div {
    vertical-align: middle;
    display: inline-block;
    width: 100%;
    position: relative;
    /* white-space: nowrap; */
    /* height: 100%; */
}

/* vertically center the resizable handle */
.op-data-table th > div div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.op-data-table-view {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Remove the little gap on top of the table header when
scolling the browse table view */
.op-data-table-view tr {
    border-top: 0px;
}

.op-data-table-view .ps__rail-y {
    background-color: transparent !important;
    z-index: 11;
}

/* Make sure x-scrollbar in dataTable is always at the left and visible */
.op-data-table-view .ps__rail-x {
    background-color: transparent !important;
    opacity: 0.9 !important;
}

/* change from 1px to 2px to make ps__thumb-y more cnetered */
.op-data-table-view .ps__thumb-y {
    right: 2px;
}

/* avoid seeing through ps__rail_x in table view */
.op-data-table-view .ps__thumb-x {
    bottom: 1px;
}

.op-metadata-detail-view-docked {
    display: none;
}

.op-sort-position-indicator {
    border-radius: 0.6em;
    -moz-border-radius: 0.6em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    border: 1px solid #20a8d8;
    display: inline-block;
    font-weight: bold;
    line-height: 1.2em;
    margin-right: 5px;
    text-align: center;
    width: 1.2em;
}

.op-mini-thumbnail {
    width: 3em;
    min-width: auto !important;
}

.op-mini-thumbnail div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.op-mini-thumbnail img {
    transition: transform .1s;
    height: 21px;
}

/* zoom the mini-thumbnail on hover */
.op-mini-thumbnail img:hover {
    -ms-transform: scale(4.5); /* IE 9 */
    -webkit-transform: scale(4.5); /* Safari 3-8 */
    transform: scale(4.5);
    z-index: 9999;
}

button.op-mini-thumbnail-zoom {
    padding: 0px;
    color: #FFFFFF;
    padding-right: 3px;
}

.fadey {
    color: #b0b0b0;
}

.detailViewLink {
    margin-top: 70px;
    font-size: 130%;
    padding: 5px 0px;
    color: #3399ff;
}

#product_types {
    display: inline-grid;
}

#op-select-metadata i.fa-check {
    display: inline-block;
}

#op-select-metadata ul li {
    text-decoration: none;
}

/* prevent weird browser y-scrollbar */
#op-select-metadata {
    overflow-y: hidden;
}

/* Center the header text in select metadata modal */
#op-select-metadata .modal-header {
    align-items: center;
}

#op-select-metadata .modal-header .btn-close {
    color: rgb(240, 243, 245);
}

/* make modal width shrink smoothly with screen */
#op-select-metadata .modal-dialog {
    /* max-width: 1100px; */
    max-width: 92%;
}

#op-select-metadata .modal-content {
    border: solid 2px #FFF;
}

/* Make both "Save Changes" and "Discard Changes" stay in one line */
#op-select-metadata .right-container {
    display: flex;
}

/* Make a little white space between "Save Changes" and "Discard Changes" */
#op-select-metadata .right-container button[type="submit"] {
    margin-right: 2px;
}

#op-select-metadata .right-container button[type="cancel"] {
    margin-left: 2px;
}

/* Make white space (padding) in metadata selector menu responsive */
#op-select-metadata .op-search-menu {
    padding-right: 3%;
}

#op-select-metadata .op-download-csv {
    position: relative;
    float: right;
    margin-top: 1rem;
}

/* Add spacing between each menu item in select metadata menu */
#op-select-metadata .op-search-param {
    margin-top: 1px;
    margin-bottom: 1px;
    display: flex;
}

/* Make sure first category search title text is vertically aligned with
   .op-menu-spinner */
.op-menu-first-category {
    display: flex;
    align-items: center;
}

/* Make sure first category anchor tag takes the full width when spinner is not
   there. */
.op-menu-first-category .op-submenu-category {
    flex: 1 0 auto;
}

/* Make sure .op-menu text spinner stays next to first category search title
   when it's spinning. */
.op-menu-first-category .op-menu-spinner {
    flex: 100 0 auto;
}

/* Make the first category name closer to the border line above it. */
.op-menu-first-category .op-submenu-category {
    padding-top: 0 !important;
}

a.op-submenu-category,
.list-group-item a {
    text-decoration: none;
}

/* Make sure the a tags for categories take up full width in select metadata
   and search sidebar menu */
.op-submenu-category {
    display: block;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Shift the whole search term list up to reduce the spacing between the
   category name and search term in search sidebar and select metadata menu.
   Need to set both margin-top and margin-bottom to avoid the animation glitch
   when a category is collapsing. */
.op-submenu-item-list {
    margin-top: -0.35rem;
    margin-bottom: 0.35rem;
}

/* Make white space (padding) in metadata selector modal responsive */
.op-all-metadata-column-header, .op-selected-metadata-column-header {
    padding-left: calc(1.5% + 4px);
    padding-right: 2.0%;
}

.op-all-metadata-column, .op-selected-metadata-column {
    position: relative;
    padding-left: 1.5%;
    padding-right: 1.5%;
    overflow: scroll;
    overflow-x: auto;
}

.op-all-metadata-column .op-search-menu-category {
    padding-left: 4px;
    padding-top: 0px !important; /* Required to override style default */
}

.op-all-metadata-column ul li {
    padding-bottom: 3px;
}

.op-all-metadata-column .cat_label {
    margin-top: 15px;
    margin-bottom: -5px;
}

.op-all-metadata-column .submenu {
    margin-left: 15px;
}

/* Make sure metadata selector's text is not wrapped when screen is
narrow */
.op-all-metadata-column .list-group-item {
    padding-right: 0;
}

.op-selected-metadata-column ul {
    padding-inline-start: 4px;
    padding-inline-end: 1em;
}

.op-selected-metadata-column ul li:hover {
    cursor: grab;
}

.op-selected-metadata-unselect:hover {
    cursor: default;
}

.op-selected-metadata-info:hover {
    cursor: default;
}

.op-selected-metadata-unselect {
    float: right;
}

.op-selected-metadata-column {
    border: 0;
    z-index: 9999;
    /* The following stylings are required for sortable metadata selections */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior: contain;
}

.op-selected-metadata-column ul li {
    padding: 5px 10px 5px 5px;
    border: 1px dotted gray;
    list-style-type: none;
}

.hints {
    color: green;
    margin: 0 2px 0 5px;
}

.op-range-hints {
    display: block;
    clear: both;
    padding: 5px 0 10px 50px;
}

.op-range-hints > span {
    margin-right: 5px;
    display: inline-block;
}

/* Only values in range hints are green */
.op-range-hints .op-hints-info {
    color: green;
}

.paging_indicator {
    color: #A8A8A8;
    padding: 0 10px;
}

.end_of_page {
    /* display:absolute; */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    display: none;
}

@media (min-width: 1200px) {
    /* This covers the metadata selector and slideshow */
    .modal-lg {
        max-width: 1100px !important;
        max-height: 1100px !important;
    }
    img.op-slideshow-image-preview {
        max-width: 600px !important;
        max-height: 600px !important;
    }
}

/* make image preview in the modal stretchable when screen is resized */
img.op-slideshow-image-preview {
    /* make image responsive to horizontal shrinking */
    max-width: 100% !important;
    /* make image responsive to vertical shrinking */
    max-height: 70vh !important;
}

.op-resize-small {
    font-size: 86%;
}

/* The following will make sure vertical resizing of modal works properly
without resizing image proportionally. */
/* The following two stylings make sure children (img tag) stay inside of it */
#op-metadata-detail-view .left a {
    display: flex;
    height: 100%;
}
#op-metadata-detail-view .left img {
    object-fit: contain;
}

#op-metadata-detail-view .modal-dialog {
    height: 80%;
}

#op-metadata-detail-view .modal-content {
    /* these need to be here so the min/max size is calculated correctly when the modal is opened */
    height: 100%;
    max-height: 100%;
}

.op-tune-image-size {
    height: 88% !important;
}

/* Edit button takes up 10% */
.op-position-edit-button {
    height: 10%;
    top: 0;
}
/* Row of bottom icon takes up 10% */
.op-position-modal-buttom {
    height: 10% !important;
    align-items: center !important;
}

/* prevent weird browser y-scrollbar */
#op-metadata-detail-view {
    height: 100%;
    overflow-y: hidden;
    pointer-events: none;
}

#op-metadata-detail-view .modal-content {
    border: solid 2px #FFF;
    min-width: 250px;
    min-height: 240px;
}

#op-metadata-detail-view .modal-dialog:hover {
    cursor: grab;
}

#op-metadata-detail-view-content {
    top: 10%;
}

#op-metadata-detail-view-content .op-docking-tools {
    position: absolute;
    float: right;
    top: 1em;
    right: 4em;
    z-index: 999;
}

.op-docking-tools a {
    padding-right: 0.5em;
}

/* Make sure the right part of the slide modal will take proper space when slide
modal is narrow */
.op-remove-col {
    flex: 1 0 auto !important;
    width: 100%;
}

#op-metadata-detail-view-content .btn-close {
    position: absolute;
    float: right;
    top: 0.2em;
    right: 0.6em;
    z-index: 999;
    opacity: 1;
    text-shadow: 0 1px 0 black;
    color: var(--cui-btn-link-color);
    font-size: 1.5em;
}

.op-metadata-detail-view-body {
    position: relative;
    height: 100%;
    border-radius: 1%;
}

.op-metadata-detail-view-body .right {
    position: relative;
}

/* set the font color for metadata slide modal */
.op-metadata-details .list-inline {
    color: #ffffff;
}

.op-metadata-detail-view-body .contents:hover {
    cursor: text;
}

/* Make sure image always stays at the left in metadata modal */
.op-metadata-detail-view-body .row {
    height: 100%;
}

/* make sure left/right hand icon in metadata dialog stay in the same line
when window sized is narrow */
.op-metadata-detail-view-body .op-obs-direction {
    flex-grow: 3;
    width: 20em;
    padding-right: 0;
    padding-left: 0;
}

.op-metadata-detail-view-body .op-metadata-detail-add {
    left: 0;
    position: absolute;
}

.op-metadata-detail-view-body .op-metadata-details-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior: contain;
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
}

.op-metadata-detail-view-body .op-metadata-details {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior: contain;
    /* Make #op-metadata-detail-view modal right contents shrink vertically
    93% for the metadata info, 5% for the bottom icons, 2% for the gap between
    4% for the edit line & icon
    metadata and font awesome icons */
    height: 89%;
    width: 100%;
    /* make ps stick to the right of the modal when screen is resizing */
    position: absolute;
    right: 0;
}

.op-metadata-detail-view-body .op-metadata-details  .op-metadata-details-tools {
    float: left;
}

/* to account for empty field data */
.op-metadata-detail-view-body .op-metadata-details .op-metadata-data {
    min-height: 1.5em;
    /* Make sure info with long string like "Multiple Target List" is wrapped
    in metadata detail modal */
    overflow-wrap: break-word;
    /* For Safari */
    line-break: anywhere;
}

.op-metadata-detail-view-body .op-prev > i {
    margin-right: .4em;
}

.op-metadata-detail-view-body .bottom {
    position: absolute;
    padding-right: 1em;
    bottom: 0;
    width: 100%;
    height: auto !important;
    z-index: 1030;
    /* Make sure bottom icons will be vertically centered in metadata modal in
    different browsers */
    align-items: stretch;
    padding-top: 0.3em;
    /* All icons in metadata display will stay at the bottom */
    align-items: flex-end;
    /* align-item for Safari */
    -webkit-align-items: end;
    /* Right container in metadata display
    95% for the metadata info, 5% for the bottom icons */
    height: 5%;
}

.op-metadata-detail-view-body .fa-cart-plus {
    float: left;
}

.op-metadata-detail-view-body a.menu {
    width: 0px;
}

.op-metadata-detail-view-body .ps__rail-y {
    background-color: transparent !important;
}

/* note - this is here to allow the user-style to be overridden on the modal */
a:-webkit-any-link, a::any-link {
    cursor: inherit;
}

#op-add-metadata-fields {
    cursor: pointer;
    z-index: 9999;
}

#op-add-metadata-fields .op-select-list {
    height: 40vh;
    overflow-y: auto;
}

#op-add-metadata-fields .submenu {
    margin-left: 1.2em;
}

/* this is used to disable clicking on modal (.op-metadata-detail-view-body) when infiniteScroll is still loading the next page */
.op-disabled {
    pointer-events: none;
    cursor: default;
}

/* this is used to style grey out disabled buttons */
.op-button-disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.30 !important;
}

.op-sort-add-disabled {
    cursor: default;
    opacity: 0.30 !important;
}

#cart .op-cart-gallery-side {
    background-color: #303030; /* #383838; */
    position: relative;
}

#cart-sidebar {
    padding-left: 0em;
    padding-right: 1em;
}

/* Make both buttons the same width */
#cart .op-cart-select-btn, #cart .op-cart-deselect-btn {
    width: 4%;
    outline: none;
}

/* Remove the focus/hover background for "v" & "x" icon in download data
panel */
#cart .op-cart-select-btn:hover, #cart .op-cart-deselect-btn:hover,
#cart .op-cart-select-btn:focus, #cart .op-cart-deselect-btn:focus {
    background-color: transparent !important;
    box-shadow: none;
}

/* Remove default scrollbar in #op-download-options-container */
#cart #op-download-options-container {
    overflow: hidden;
}

/* Remove pointer when button is disabled in download data */
#cart #op-download-options-container button:disabled {
    pointer-events: none;
}

/* Make download options product types table take wider space */
#cart .op-download-options-product-types {
    position: absolute;
}

/* Required styling for perfect scrollbar in download options panel */
#cart .op-product-type-table-body {
    position: relative;
}

#cart .op-data-archive-notes hr {
    border-top: 3px double;
}

#cart .op-product-type-table-body .ps__rail-y {
    background-color: transparent !important;
}

#cart .col {
    overflow-x: hidden;
    overflow-y: hidden;
}

#cart .op-gallery-contents {
    position: relative;
}

#op-recycled-count img {
    max-height: 1em;
    margin-top: -0.2em;
}

/* Make Total Size and Total Files stay in one line in download data */
.op-total-size, .op-total-download {
    display: inline;
}

.hide_ps__rail-y {
    display: none !important;
}

#cart-sidebar .op-zipped-files li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin: 10px 0px 15px -20px;
}

.op-cart-details {
    border-left: .3em double black;
    padding-left: 2em;
    /* Fix the width of download data area */
    min-width: 36em;
    max-width: 36em;
}

.op-cart-ver-sub-header {
    color: #808080;
    padding-left: 20px;
    padding-right: 20px;
}

.op-cart-ver-hidden {
    display: none;
}

#op-download-links {
    display: none;
}

/* Styling for cite OPUS button at bottom of Download Links History popover */
.op-cite-opus-btn {
    cursor: pointer;
    outline: none;
}

.op-cite-container {
    display: flex;
    align-items: center;
}

.op-cite-fixed-width {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
    word-break: break-all;
}

.op-cite-image {
    float: left;
    margin-right: 1rem;
}

/* Styling for download history button at the lower right of footer */
.op-download-links-btn {
    float: right;
    cursor: pointer;
}

/* Styling for disable a tag button */
.op-a-tag-btn-disabled {
    color: grey;
    opacity: 0.5;
    pointer-events: none;
}

.op-download-links-btn:hover {
    text-decoration: none;
}

.op-download-links-btn:focus {
    outline: none;
}

/* Make the "x" button in download links popover stays at the right. */
.op-close-download-links-history {
    float: right;
    --cui-link-color: var(--cui-popover-header-color);
    --cui-link-hover-color: var(--cui-popover-header-color);
}

/* Remove the outline for "x" icon in download history window when it's clicked. */
.op-close-download-links-history:focus {
    outline: none;
}

/* Copy and modify based on bootstrap .modal-footer to create a pretty
footer for popover window */
.popover-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: space-between;
    padding: 0.2rem;
    border-top: 1px solid #e4e7ea;
}

.op-links-popover {
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-header-bg: var(--bs-primary);
    --bs-popover-header-color: var(--bs-white);
}

.op-zipped-files {
    padding-left: 2em;
}

/* Requirement for ps in popover window */
.popover-body {
    position: relative;
}

/* Make the popover cover the chat balloon */
.popover {
    z-index: 2000000001;
}

/* Make sure browser size modal window has higher z-index than other
windows, this will make sure it's not covered by any other windows. */
#op-browser-size-msg-modal {
    z-index: 9999;
}

div.gallery {
    margin: 0;
    padding:0;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-right: -80px;
}

/* Make op-sort-order-container wrapped within the same container as browse-nav-containers */
nav.panel-heading {
    flex-direction: column;
    align-items: flex-start;
}

/* Make sure browse navbar tab (flex item, icon + text) will take up enough space
to stay in one line */
#browse .browse-nav-container .navbar-nav {
    min-width: fit-content;
}

@media (max-width: 992px) {
    /* keep the 2nd navbar in a row when window is narrow */
    #browse .browse-nav-container .navbar-nav {
        flex-direction: row;
    }
}

@media (max-width: 1050px) {
    /* Remove the left space of Observation # */
    .op-observation-text {
        margin-left: 0px !important;
    }
}

/* Browse view navbar responsiveness  */
@media (max-width: 1000px) {
    /* Move down the sort pill area so that slider can be moved down
    to the 2nd line */
    #browse .op-sort-order-container {
        margin-top: 1.75em;
    }

    /* Keep left/right spaces between 2nd navbar options */
    #browse .nav-link {
        padding: 0 0.5rem;
    }

    /* Move the last item in flexbox to the 2nd line */
    #browse .browse-nav-container .navbar-nav {
        width: 100%;
    }

    /* Make sure first 3 options in 2nd navbar have space between each
    other */
    #browse .browse-nav-container .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Move slider to the 2nd line when screen is narrow */
    #browse .browse-nav-container {
        flex-wrap: wrap;
    }

    /* When slider is at the 2nd line, make it take up more width */
    #browse .op-observation-slider.ui-slider {
        width: calc(80% - 2rem) !important;
    }

    /* When slider is at 2nd line, its container will take up 100% of
    width */
    #browse .op-slider-nav {
        flex-basis: 100% !important;
    }
}

/* Make slider stays next to other options in 2nd navbar */
.op-slider-nav {
    flex-basis: 80%;
    padding-left: 0.5rem;
}

.browse-nav-container {
    height: 1.5em;
    width: 100%;
    /* display the 2nd navbar in browse view */
    display: flex;
}

.browse-nav-container li {
    display: flex;
    align-items: center;
    /* This will make text stay in one line without wrapping */
    white-space: nowrap;
}

.browse-nav-container li input {
    height: 1.6em;
    width: 4.2em;
    text-align: center;
}

/* Style the first line of the cart nav - calculate the width of the entire container such
  that the empty cart button is always adjacent, not overlaid, by this container. */
#cart .op-cart-nav-container {
    display: flex;
    width: 100%;
}
/* Styling for slider's height and width in cart page */
#cart .op-cart-nav-container .op-observation-slider {
    width: 100%;
    height: 0.1em;
}
/* Remove the space at the left of "Observation#" in cart page slider area */
#cart .op-cart-nav-container .op-observation-text {
    margin-left: 0px;
}
/* Make the 'empty' button stay at the right end of the 2nd navbar */
#cart .browse-nav-container {
    justify-content: space-between;
}
/* Make options of 2nd navbar and slider stay at the left end of the 2nd navbar */
#cart .op-cart-nav-container {
    justify-content: flex-start;
}

/* Make sure cart navbar tab (flex item, icon + text) will take up enough space
to stay in one line */
#cart .op-cart-nav-container .navbar-nav {
    min-width: fit-content;
}

#cart .op-download-options {
    display: inline-flex;
}

/* Make sure ps container is NOT a flexbox (display: flex) */
#cart #op-download-options-container {
    display: block;
}

#cart .op-cart-actions {
    display: inline-flex;
    padding: 0.5em 0.5em 0;
}

#cart .op-cart-actions a {
    opacity: 0.6;
    text-decoration: none;
}

#cart .op-cart-actions a:hover {
    opacity: 1 !important;
    text-decoration: none;
}

/* Cart view navbar responsiveness */
@media (max-width: 1100px) {
    /* Remove the top/bottom extra spaces in options of 2nd navbar when
    slider moves to the 2nd line */
    #cart .browse-nav-container .nav-link {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    /* Make slider move down to 2nd line when screen is narrow */
    #cart .op-cart-nav-container {
        width: 100%;
    }
    /* Style the width of slider when it moves to the 2nd line */
    #cart .op-slider-nav {
        flex-basis: 90%;
    }

    /* move the second line down to make room for the slider*/
    #cart .op-download-options {
        display: inline-flex;
    }
}

@media (max-width: 1080px) {
    /*  keep the 2nd navbar in a row and move some options to the 2nd
    line when screen is narrow */
    #cart .browse-nav-container .navbar-nav {
        flex-direction: row;
    }

    /* Make the 2nd navbar options + slider take up 80% of width when screen is narrow */
    #cart .op-cart-nav-container {
        flex: 1 0 80%;
    }

    /* Make empty cart button take up 20% of width when screen is narrow */
    #cart .browse-nav-container > .navbar-nav {
        flex: 1 0 5%;
    }

    /* Keep left/right spaces between 2nd navbar options */
    #cart .nav-link {
        padding: 0 0.5rem;
    }
}

@media (max-width: 1100px) {
    /* Hide download data pane when the screen is too narrow */
    .op-cart-details {
        display: none;
        max-width: 40%;
        min-width: 10%;
        padding-left: 0px;
    }

    /* Add a nav-link option for user to open the donwload options panel
    when the screen is too narrow */
    .op-cart-toggle-download-panel {
        display: flex !important;
        padding-left: 0.5em;
        padding-top: 0.5em;
    }

    /* Make sure op-gallery-contents not cut off by the right edge of the
    screen */
    #cart .op-gallery-contents {
        padding-left: 10px;
    }

    /* Remove the white space at the bottom of op-gallery-contents when screen
    is narrow */
    #cart .op-cart-gallery-side {
        height: 100vh;
    }
}

/* Remove the nav-link for opening up download data panel when screen
is wide enough */
@media (min-width: 1101px) {
    .op-cart-toggle-download-panel {
        display: none !important;
    }
}

/* download data panel */
#op-cart-download-panel {
    display: none;
    position: absolute;
    left: 0;
    /* Make sure this value is larger than the z-index of .op-overlay and smaller than
    the z-index of #op-download-links-error-msg-modal */
    z-index: 9998;
    top: 2em;
    /* Fix the width of the panel so that it will increase when browser
    is wider*/
    width: 36em;
}

/* Download error modal */
#op-download-links-error-msg-modal {
    z-index: 9999;
    /* Add a transparent black background as an extra backdrop to cover the download
    panel when the screen is small */
    background: rgba(0, 0, 0, 0.3);
}



/* Make sure "x" and download data title in header of download data
panel are properly separated */
#op-cart-download-panel .card-header {
    display: flex;
    justify-content: space-between;
}

/* Center "Download Data" in download panel in cart tab */
#op-cart-download-panel .card-header h3,
#op-cart-download-panel .card-header h2 {
    margin-bottom: 0;
}

/* Override the table row (.table > :not(caption) > * > *) color in style.css */
.text-success td {
    color: var(--cui-success, #2eb85c) !important;
}

.op-sort-order-container {
    display: inline-flex;
    padding-left: 0.5em;
    margin-top: 0.35em;
    color: var(--cui-navbar-color);
}

.op-sort-order-icon {
    vertical-align: middle;
    padding-right: 0.3em;
    white-space: nowrap;
}

.op-sort-order-add-icon {
    margin-bottom: 0.1em !important;
    vertical-align: middle;
    margin-left: 0.5em;
    display: inline-flex;
}

.op-sort-contents {
    /* display: flex; */
    display: block;
    margin-bottom: 0;
}

.op-sort-contents .list-inline-item {
    opacity: 0.7;
    margin-bottom: -10px;
}

.op-sort-contents span {
    color: var(--cui-dark);
}

.op-sort-last {
    display: inline-block;
    border-left-style: solid;
    border-width: 1px;
    padding-left: .5em;
    margin-left: 2em;
}

#op-add-sort-metadata .op-sort-list {
    max-height: 50vh;
    overflow-y: auto;
}

/* Set the vertical spacing between each dropdown item */
.op-sort-list .dropdown-item {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.op-flip-sort {
    cursor: row-resize;
}

@media (max-width: 700px) {
    .browse-nav-container li {
        padding: 0;
    }
    .browse-nav-container {
        width: 100%;
        margin: 0;
    }
    .browse-nav-container .order-container {
        display: none;
    }
}

.op-observation-slider.ui-slider {
    /* Note: Make slider grow when screen
    is wider */
    width: calc(90% - 9rem);
    height: .1em;
    font-size: 1.1em;
    font-family: Verdana,Arial,sans-serif;
}

.op-observation-slider .ui-state-focus {
    outline: none;
    background: inherit;
    border: 1px solid #c5c5c5;
}

.op-observation-text {
    margin-left: 45px;
    padding-right: .5em;
    color: var(--cui-navbar-color);
}

.op-observation-number {
    text-align: center;
    vertical-align: middle;
    color: var(--cui-dark);
}

.ui-slider-horizontal .ui-slider-handle {
    /* width: auto; */
    top: -.6em;
    display: inline-block;
    height: 1.5em;
    position: relative;
    min-width: .68em;
}

.panel-body .op-gallery-contents {
    position: fixed !important;
    overflow-y: auto;
}

.op-page-load-status {
    display: none; /* hidden by default */
    padding-top: 20px;
    border-top: 1px solid #DDD;
    text-align: center;
    /*color: #777;*/
}

/* opus-specific card stuff, used to be widgets */
.card-title {
    margin-top: .15em;
    margin-bottom: .15em;
}

.icon-action {
    margin-top: 5px;
    padding-left: 1em;
    font-size: 80%;
}

.op-search-menu a.dropdown-toggle {
    margin-top: 5px;
    margin-bottom: 12px;
    font-weight: 600;
    color: initial;
}

.op-search-menu a.dropdown-toggle:hover {
    text-decoration: none;
}

.op-search-menu a.op-search-param {
    color: initial;
    /* Make sure each menu option takes up full width */
    display: block;
}

.op-search-menu a.op-search-param:hover {
    text-decoration: none;
}

.op-search-menu .list-group li:nth-child(1) {
    border-top: 0 none;
}

/* Make sure full width of white space in search sidebar is clickable */
.op-search-menu .list-group-item {
    padding-right: 0;
}

/* Reduce left space in each widget (from 50px to 10px) */
#op-search-widgets ul {
    padding-left: 1%;
}

#op-search-widgets li {
    display: inline;
    list-style-type: none;
}

/* this is for sorting widgets cards, display has to be block */
#op-search-widgets > li {
    display: block;
    list-style-type: none;
}

#op-search-widgets {  /* this fixes problem scrolling when widget column is short */
    padding-bottom: 20px;
    /* Make left/right space of widgets are shrink proportionally when
    screen is narrower */
    padding-right: 3%;
    padding-left: 3%;
}

/* Make room for the feedbackTab widget - this gives room to the PS on the right
   side of the widget column */
.op-widget-col {
    padding-right: 25px;
}

.op-widget-main .op-range-qtype-helper {
    font-size: 130%;
    color: gray;
    line-height: 1;
}

/* Make qtype (i) icon align vertically with inputs */
.op-widget-main .op-range-qtype-helper a {
    vertical-align: middle;
}

#op-qtype-tooltip {
    display: none;
    width: 500px;
}

.op-widget-main ul li ul li {  /* mult labels */
    white-space: nowrap;
}

.op-widget-main > ul {
    margin-bottom: 5px;
    padding-bottom: 0;
}

.op-widget-main > ul > li ul {
    padding-left: 0;
    padding-bottom: 0;
}

.op-widget-main ul li {
    display: inline;
    list-style-type: none;
}

.op-widget-main label {
    font-size: 95%;
}

/* This is to make sortable scrolling (when sorting happened) works with ps */
#widget-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior: contain;
}

/* Make only widget title and "i" icon wrapped and keep arrow & x symbols
stay at the top right corner when screen is narrow */
#widget-container .card-title {
    display: flex;
    justify-content: space-between;
}

/* Group widgets' arrow and x symbols, make them always stay in one line
even when screen is narrow */
#widget-container .card-title > span {
    display: flex;
}

.op-widget-column {
    position: relative;
    padding: 0 20px;
    margin: 0 10px;
    margin-left: -20px;
    margin-top: 5px;
    /* Widget container can shrink to a minimum width = min-width when
    browser width is shrinking */
    max-width: 740px;
    min-width: 450px;
    height: 500px;  /* matches .sidebar_wrapper */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.widget-header {
    margin: 0;
    padding: 0;
    min-height: 20px; /* overwrites ace style */
    height: 20px;
    padding-left: 5px;
}

.widget-header > .widget-title {
    line-height: 20px;
}

.widget-toolbar {
    margin: 0;
    padding: 0;
    line-height: 15px;
    margin-top: -2px;
    padding: 0px 5px;
}

/* small spinner */
.spinner {
    background-image: url('https://opus.pds-rings.seti.org/static_media/img/spinner.gif');
    width: 30px;
    display: inline-block;
    background-repeat: no-repeat;
}

/* small spinner: shows up when zipped file links are loading (cart page) */
#op-download-links .spinner {
    display: none;
    margin: 0px 10px;
    width: 30px;
}

/* small spinner: shows up when total size/files is loading (cart page) */
.op-total-size .spinner, .op-total-download .spinner {
    display: none;
    line-height: 16px;
    margin: 0 10px;
}

/* smaller spinner next to first category: shows up when menu is loading */
.op-menu-spinner.spinner {
    display: none;
    margin-top: -10px;
    margin-left: 5px;
    width: 18px;
    line-height: 16px;
}

.spinner.op-show-spinner {
    display: inline-block;
}

/* large ellips spinner */
.op-page-loading-status .loader,
.op-select-metadata-load-status .loader {
    display: none;
    /* top: 250px; */
}

#op-cart-summary .button-container button {
    margin-bottom: 1em;
}

.badge.rounded-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
}

.badge-xlg {
    font-size:115%;
    font-weight:bold;
}

.op-mult-group-checked-indication {
    margin: 0 2px 0 5px;
}

.mult-group-label {
    padding: 5px 4px;
    padding-left: 5px;
}

.mult-group {
    padding-left: 0;
    display: none;
}

.mult-group > .multichoice {
    padding-left: 0;
}

/* For widget with a mix of grouping and non-grouping checkboxes, left align
grouping icon with non-grouping checkboxes */
.mult-group-label-container {
    padding-left: 1%;
}

/* Increase the indentation of subcategories for mult */
.mult-group {
    padding-left: 1.2em !important;
}

/* detail tab */
.op-detail-metadata {
    /* Make detail left pane shrink proportionally when window is narrow
    and set its min width to be 470px (+ padding left/right: 30px) */
    position: relative;
    min-width: 470px;
    max-width: 800px;
}

.op-detail-metadata-header h1 {
    margin-bottom: 0.2em;
}

/* Add this class to set ps container overflow to scroll, this is part of
the workaround for ctrl + F search scroll to work with perfect scrollbar */
.op-enable-default-scrolling {
    overflow-y: scroll !important;
}

/* Hide the Chrome default scrollbar, this is part of steps to make ctrl
+ F search scroll to work with perfect scrollbar in Chrome. */
.op-detail-metadata::-webkit-scrollbar,
#op-help-panel .card-body::-webkit-scrollbar {
    display: none;
}

/* Hide the FF default scrollbar in detail page, this is part of steps to
make ctrl + F search scroll to work with perfect scrollbar in FF. */
.op-detail-metadata, #op-help-panel .card-body {
    scrollbar-width: none;
}

/* Make detail left pane takes up 50% of width */
.op-detail-metadata-container {
    flex: 1 0 50%;
}

/* For the individual metadata categories - removes list bullet and
   makes indent look like it did with bullet. Same for the product
   type list. */
.op-detail-list {
    list-style: none;
    padding-left: 22px;
}

/* For the product type list at the top of the detail page -
   make each line wrap with the name of the product, not the tooltip. */
.op-detail-entry {
    display: flex;
}

.op-detail-entry-icon {
    line-height: 21px;
}

.op-detail-file-list {
    display: inline;
}

/* Make detail right pane (img) takes up 50% of width */
.op-detail-img {
    flex: 1 1 50%;
}

@media (max-height: 520px) {
    /* Make detail image fit the screen when its height is short */
    .op-detail-img img {
        max-height: 50vh !important;
    }

    /* Reduce the top space above the detail image when screen is short */
    .op-detail-img {
        padding-top: 1% !important;
    }
}

/* Set max width of flexbox container so that detail image will keep close
to the left pane when screen is getting too wide */
.op-detail-content {
    max-width: 1800px;
}

@media (max-height: 400px) {
    /* Keep detail image stay at the right of the page when screen is narrow
    (detail tab) */
    .op-detail-content {
        flex-wrap: nowrap;
    }
}

@media (max-width: 767px) {
    /* Move the detail image on top of the left pane */
    .op-detail-content {
        flex-wrap: wrap-reverse;
    }

    /* Set detail image size when it's above the left pane, use !important to override
    the styling from flexslider */
    .op-detail-img img {
        height: 150px !important;
    }

    /* Reduce the space above the detail image when the screen is short and narrow */
    .op-detail-img {
        padding-top: 0 !important;
    }
}

@media (max-width: 767px) and (max-height: 450px) {
    .op-detail-img {
        margin-bottom: -1em;
    }

    /* use !important to override the styling from flexslider  */
    .op-detail-img img {
        height: 100px !important;
    }
}

/* These stylings are for the case when screen is very small (short & narrow) */
@media (max-width: 767px) and (max-height: 350px) {
    .op-detail-img .flexslider {
        margin-bottom: 0 !important;
    }

    /* use !important to override the styling from flexslider  */
    .op-detail-img img {
        height: 60px !important;
        min-width: 60px !important;
    }

    .op-detail-img .op-preview-guide-center {
        margin-top: 1rem !important;
    }

    .op-detail-img .op-preview-guide-center p {
        margin-bottom: 0.5rem;
    }

    .op-detail-img .flex-control-nav {
        bottom: -25px;
    }

    .op-detail-metadata-header div {
        margin-bottom: 0.2rem !important;
    }
}

@media (max-height: 615px) {
    /* Reduce the spaces around "Observation Detail" (detail tab) */
    .op-detail-metadata h1, .op-detail-metadata-header h1 {
        margin-top: 0.2em;
        margin-bottom: 0.2em;
    }

    /* Reduce the spaces around "OPUS ID" in detail tab */
    .op-detail-metadata p, .op-detail-metadata-header p {
        margin-bottom: 0.2em;
    }
}

/* Make detail image shrink proportionally when screen is resized, and
also set its min width to be 90px */
.op-detail-img img {
    max-width: 85%;
    min-width: 90px;
    max-height: 60vh;
    /* Make sure image under flexslider is not taking up the full width of
    the container */
    width: auto !important;
}

/* Align the children img tags with the nav buttons */
.op-detail-img li {
    text-align: -webkit-center;
    text-align: -moz-center;
}

.op-detail-img .flexslider {
    margin-bottom: 1.5rem;
    /* Center the detail preview image and nav buttons horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Make sure nav buttons of the detail preview images won't be wrapped into two rows when
the screen is narrow  */
.op-detail-img .flex-control-nav {
    width: 120%;
}

/* Align preview guide text with preview images and set proper spacing between preview
guid message and the nav buttons */
.op-detail-img .op-preview-guide-center {
    text-align: -webkit-center;
    text-align: -moz-center;
    margin-top: 2rem;
}

/* Fine tune the position of preview images prev button "<" */
.op-detail-img .flex-direction-nav a {
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    width:auto;
    height: auto;
}

.op-detail-img .slides a {
    cursor: default;
}

.op-detail-img .flex-direction-nav .flex-prev {
    color: transparent;
    opacity: 1;
    left: 0px;
}

/* "<" size will change based on viewport width */
.op-detail-img .flex-direction-nav .flex-prev:before {
    font-size: min(3vw, 40px);
}

/* Fine tune the position of preview images next button ">" */
.op-detail-img .flex-direction-nav .flex-next {
    color: transparent;
    opacity: 1;
    right: 0px;
}

/* ">" size will change based on viewport width */
.op-detail-img .flex-direction-nav .flex-next:before {
    font-size: min(3vw, 40px);
}

/* Properly set "<" & ">" buttons positions so that we don't have flickering
when hovering over the detail preview image */
.op-detail-img .flexslider:hover .flex-direction-nav .flex-prev {
  left: 0px;
}
.op-detail-img .flexslider:hover .flex-direction-nav .flex-next {
  right: 0px;
}

.op-share-message {
    display: none;
    max-width: 7.5em;
}

.op-range-select-info-box {
    position: fixed;
    bottom: 0;
    width: auto;
    height: 0;
    text-align: center;
    margin-left: 0px  !important;
    transition: .5s ease;
}

.op-range-select-info-box.op-range-select {
    height: 3.8em;
}

/* TODO: use @media to fine tune the heights of footer & nav bar
   when the width of browser window is small
*/

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    z-index: 9999;
    min-height: 1rem !important;
}

footer p {
    margin-bottom: 0.25rem;
}

footer a:hover {
  text-decoration: underline;
}

#op-help-panel {
    display: none;
    position: absolute;
    right: 0;
    z-index: 9999;
    top: 2em;
}

.op-open-help {
    float: right;
}

.op-about-table table, .op-about-table th, .op-about-table td  {
    border: 1px solid black;
}

/* Styling for the API Guide */

.op-help-api-guide .op-api-guide-code-block {
    margin-left: 3em;
    padding-left: 1em;
    margin-right: 3em;
    border-left-style: solid;
}

.op-help-api-guide .op-api-guide-code-block code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

.op-help-api-guide .op-api-guide-code code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

.op-help-api-guide .op-table-nonfluid {
    width: auto !important;
}

.op-help-api-guide .op-table-indent {
    margin-left: 2em;
}

.op-help-api-guide .op-table-padding {
    padding-right: 20px !important;
}

.op-help-api-guide h1:first-of-type {
    counter-reset: apih1counter;
}

.op-help-api-guide h1 {
    counter-reset: apih2counter;
}
.op-help-api-guide h1::before {
    counter-increment: apih1counter;
    content: counter(apih1counter) ". ";
}

.op-help-api-guide h2 {
    counter-reset: apih3counter;
}
.op-help-api-guide h2::before {
    counter-increment: apih2counter;
    content: counter(apih1counter) "." counter(apih2counter) ". ";
}

.op-help-api-guide h3::before {
    counter-increment: apih3counter;
    content: counter(apih1counter) "." counter(apih2counter) "." counter(apih3counter) ". ";
}

.op-help-api-guide h1.op-help-api-guide-no-count::before,
.op-help-api-guide h2.op-help-api-guide-no-count::before,
.op-help-api-guide h3.op-help-api-guide-no-count::before {
    content: "";
    counter-increment: none;
}

.op-help-api-guide .op-help-api-guide-toc ul {
    counter-reset: apiulcounter;
    list-style-type: none;
}

.op-help-api-guide .op-help-api-guide-toc li::before {
    counter-increment: apiulcounter;
    content: counters(apiulcounter, ".") ". ";
}

/* End of API Guide */

/* Styling for the Splash welcome message */

#op-new-user-msg-modal .modal-body {
    padding: 10px;
}

#op-new-user-msg-modal p:first-child {
    margin-top: 10px;
}

#op-new-user-msg-modal p {
    margin-bottom: 12px;
}

#op-new-user-msg-modal p:last-child {
    margin-bottom: 0px;
}

/* End of Splash welcome message */

.op-header-text {
    display: inline-block;
}

/* Remove default h tag margin-bottom to center the title text in help panel */
#op-help-panel .op-header-text {
    margin-bottom: 0;
}

#op-help-panel .op-header-text h2 {
    margin-bottom: 0;
}

/* Center the "x" icon in help panel */
#op-help-panel .btn-close, #op-cart-download-panel .btn-close {
    display: flex;
    content: "\f057";
    float: right;
    font-size: 1.3125rem;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
}

#op-help-panel .card-body {
    overflow: auto;
    /* requirement for perfectScrollbar */
    position: relative;
}

/* In help menu, make "x" icon stays at the right of header. This will
prevent "x" from getting squeezed to the body area and creating a white
gap next to ps */
#op-help-panel .card-header {
    display: flex;
    justify-content: space-between;
}

.op-overlay {
    display: none;
    top: 0;
    position: fixed;
    /* full screen */
    width: 100vw;
    height: 100vh;
    /* transparent black */
    background: rgba(0, 0, 0, 0.7);
    /* middle layer, i.e. appears below the panel */
    z-index: 1099;
    opacity: 0;
    /* animate the transition */
    transition: all 0.5s ease-in-out;
}

/* display .op-overlay when it has the .active class */
.op-overlay.active {
    display: block;
    opacity: 1;
}

/* about page */
.about ul {
    padding-left: 30px;
    max-width: 900px;
}

.about ul li {
    display: inline;
}

.about li::after {
    content: ', ';
}

.about li:last-child::after {
    content: '';
}

/* Keep reset buttons in the center when screen is narrow */
.op-reset-button {
    text-align: center;
    display: flex;
    justify-content: center;
}

.op-reset-button button {
    margin: 5px 1px;
    font-weight: bold;
}

.op-reset-button button:disabled {
    pointer-events: none;
}

/* Remove the reddish focus outline on Linux Chrome that makes it look like an
   invalid value using our color scheme. This color is what is used on Macs. */
input:focus {
    outline: none;
    border: 1px solid;
}

input[type="text"] {
    border: 1px solid #D5D5D5;
}

input[type="text"].search_input_original {
    border: 1px solid #D5D5D5;
}

input[type="text"].search_input_valid {
    border: 1px solid #9EEEBB;
}

input[type="text"].search_input_invalid {
    background-color: #EEECEC;
    border: 1px solid #FFD700;
}

input[type="text"].search_input_invalid_no_focus {
    background-color: #F6AFAF;
    border: 1px solid #F6AFAF;
}

.search_overlay {
    opacity: 0.5;
    pointer-events: none;
}

/* Make drop down scrollable vertically */
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ui-helper-hidden-accessible {
    display: none;
}

ul.ui-autocomplete {
    list-style: none;
}

ul.ui-autocomplete li {
    display: block
}

ul.ui-autocomplete li a {
    text-decoration: none;
}

ul.ui-autocomplete li a:hover {
    color: #000000;
}

ul.ui-autocomplete a.ui-state-active {
    background: #CECBFA;
    /* background: #4f99c6; */
    border: none;
}

.list-header, .list-footer {
    background-color: #F9F6F6;
}

.op-no-select, .feedbackTab, .fas, .far {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /*
      Introduced in IE 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

/* Allow users to mouse over and select texts & hints in widgets */
.op-input ul label, .op-input ul span,
.op-hints-info, .op-hints-description,
.op-detail-list {
    -ms-user-select: text;
    user-select: text;
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
}

.op-input .text-info,
.menu_help.text-info {
    filter: brightness(0.8);
}

/* prevents all click, state and cursor options on the specified HTML element */
.op-prevent-pointer-events {
    pointer-events: none;
}

/* Ripple In */
@-webkit-keyframes hvr-ripple-in {
    100% {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 1;
    }
}

@keyframes hvr-ripple-in {
    100% {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 1;
    }
}

.hvr-ripple-in {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    /* Avoid overlapping with table header (z-index: 10) */
    z-index: 9;
}

.hvr-ripple-in::before {
    content: '';
    position: absolute;
    border: #20c997 solid 6px;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    opacity: 0.5;
    animation: hvr-ripple-in 1s infinite;
    -webkit-animation: hvr-ripple-in 1s infinite;
    z-index: 9999;
}

/* Styling for ranges info dropdown */
.op-preprogrammed-ranges .dropdown-item:active {
    background-color: transparent;
    color: inherit;
}

/* Enable default scrollbar for ranges info dropdown */
.op-selected-metadata-column .op-scrollable-menu,
.op-preprogrammed-ranges.op-scrollable-menu {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border-width: 2px;
    /* Set the width of ranges dropdown */
    width: 500px;
    max-width: 110%;
    word-break: keep-all;
    /* This will make sure dropdown is not covering the widget scrollbar */
    left: -2.5em !important;
}

.op-preprogrammed-ranges .op-scrollable-menu {
    max-height: 200px;
}

/* remove the caret next to unit dropdown in selected metadata fields menu
under select metadata modal in browse view */
.op-selected-metadata-column .dropdown-toggle::after {
    display: none !important;
}

.op-selected-metadata-column .op-scrollable-menu {
    max-height: 150px;
}

.op-selected-metadata-column .op-scrollable-menu .dropdown-item {
    padding: 5px 10px 5px 5px;
}

/* Reduce the size of "..." nav buttons for detail preview image */
@media (max-width: 950px) {
    .op-detail-img .flex-control-paging li a {
        width: 9px;
        height: 9px;
    }
}

@media (max-width: 680px) {
    /* When browser is narrow, we increase the width to squeeze in the long numbers */
    .op-preprogrammed-ranges.op-scrollable-menu {
        max-width: 125% !important;
    }
}

@media (max-width: 710px) {
    /* When browser is narrow, we increase the width to squeeze in the long numbers */
    .op-preprogrammed-ranges.op-scrollable-menu {
        max-width: 122%;
    }
}

@media (max-width: 750px) {
    /* Make sure ring radius dropdown never wraps names by letters */
    .op-preprogrammed-ranges-data-name {
        word-break: keep-all;
    }
    /* When browser is narrow, we remove the padding for max value  */
    .op-preprogrammed-ranges-max-data {
        padding-left: 0 !important;
    }
}

@media (max-width: 830px) {
    /* When browser is narrow, don't fix the size of each digit, this will
    save some spaces for long numbers */
    .op-preprogrammed-ranges-data-item {
        font-variant-numeric: proportional-nums !important;
    }
}

@media (min-width: 750px) {
    /* When widget width is wide, don't wrap ranges names */
    .op-preprogrammed-ranges-data-header {
        white-space: nowrap;
    }

    /* Make sure ring radius dropdown starts to wrap the names when width is
    less than 750px */
    .op-preprogrammed-ranges-data-name {
        white-space: nowrap;
    }
}

/* Make sure ranges names can be wrapped when dropdown width is narrow */
.op-preprogrammed-ranges.op-scrollable-menu li {
    white-space: normal;
}

.op-preprogrammed-ranges-data-name {
    padding-right: 0 !important;
}

.op-preprogrammed-ranges-min-data {
    padding-left: 0 !important;
}

/* Make sure ranges data is not wrapped into multiple lines */
.op-preprogrammed-ranges-min-data, .op-preprogrammed-ranges-max-data {
    white-space: nowrap;
}

/* This class will be assigned to ranges name with long first word */
.op-preprogrammed-ranges-data-item[data-name*="Epimetheus"]
.op-preprogrammed-ranges-data-name {
    word-break: break-all !important;
}

@media (max-width: 900px) {
    /* Make long word break earlier */
    .op-preprogrammed-ranges-data-item[data-name*="Epimetheus"]
    .op-preprogrammed-ranges-data-name {
        white-space: normal !important;
    }
}

/* Hide values for different units in preprogrammed ranges */
.op-hide-different-units-info {
    display: none !important;
}

/* Make sure each digit has the same size in preprogrammed ranges */
.op-preprogrammed-ranges-data-item {
    font-variant-numeric: tabular-nums;
}


/* Styling required to make ranges data aligned by decimal point */
.op-integer {
    text-align: right;
    display: inline-block;
    width:  100%;
}

/* Add customized styling for dropdown list items */
.op-preprogrammed-ranges-data-item:hover  {
    background-color: #d1dbe1;
    background-clip: padding-box;
    cursor: pointer;
}

/* Rotate arrow icon when ranges dropdown list or expandable contents are
expanded/collapsed */
.op-preprogrammed-ranges .dropdown-toggle::after {
    transition: all .3s;
    -webkit-transition: all .3s;
}

.op-preprogrammed-ranges .dropdown-toggle.collapsed::after {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

.op-hide-element {
    display: none !important;
}

/* Set the width of input.STRING to make sure it can be shrunk more when screen
is shrinking (before reaching to the breakpoint at 940px)*/
input.STRING {
    width: 55%;
}

/* Make palceholder hints visible when browser width is large enough, and also
make sure it can be shrunk more when screen is shrinking (before reaching to
the breakpoint at 940px) */
input.RANGE {
    width: 27%;
}

/* Style placeholder to have "..." when text is overflow */
input[placeholder] {
    text-overflow: ellipsis;
}

::-moz-placeholder {
    text-overflow: ellipsis;
}

input:-moz-placeholder {
    text-overflow: ellipsis;
}

/* Customized jquery autocomplete hover background color and prevent
wiggling when mouse over autocomplete menu items */
.ui-menu-item a.ui-state-active {
    background: #d1dbe1 !important;
    /* Prevent menu item wiggling when we mouse over it */
    margin: 0;
}

/* Styling for the button to delete a set of inputs in a widget */
.op-remove-inputs {
    margin-left: 10px;
}

.op-remove-inputs-btn, .op-add-inputs-btn {
    background: transparent !important;
}

/* Make "+ (OR)" sans-serif */
.op-add-inputs-btn i {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
                 "Segoe UI Emoji", "Segoe UI Symbol", "Font Awesome 5 Free";
}

/* Styling for the text between each set of inputs in a widget */
.op-or-labels {
    text-align: center;
    font-style: italic;
    font-weight: bold;
    width: 75%;
}

/* Styling for horizontal divider between OR label when there are multiple
searches */
.op-or-label-divider {
    margin: 0px;
    display: inline-block;
    width: 10%;
    vertical-align: middle;
}

/* Disable a button (or a tag button) */
.op-disable-btn {
    pointer-events: none;
}

.op-btn-tag-disable {
    pointer-events: none;
}

/* Hide the element but still keep its space. This is used for dummy items placed
at the right of -- OR -- label. */
.op-visibility-hidden {
    visibility: hidden;
}

/* Styling for dummy items */
#op-search-widgets .op-dummy-item1, #op-search-widgets .op-dummy-item2 {
    display: inline-block;
}

@media (max-width: 940px) {
    .op-dummy-item1, .op-dummy-item2 {
        display: none !important;
    }
}

/* Set the vertical spacing between each dropdown item in the hamburger */
#op-obs-menu .dropdown-item {
    /* default is 10px at top and bottom, and total menu height 368px */
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    color: #000;
}

/* Make sure hamburger menu will not be covered by metadata modal */
#op-obs-menu {
    z-index: 1100;
}

/* Styling for the first column of table header in browse tab */
.op-table-first-col div {
    /* hamburger width 13px + 2px gap to align with checkboxes in other rows */
    padding-right: 15px;
}

/* Hide the first column of table header in cart tab */
#cart .op-table-first-col div {
    display: none;
}

.op-table-header-addall {
    padding: 0px;
    color: #FFFFFF;
    padding-right: 3px;
}

/* Tooltips */

[title] {
    cursor: default;
}

/* This is for touch screens */
.op-tooltip-text {
    position: fixed;
    top: 80px;
    left: 10%;
    right: 10%;
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-color: white;
    box-shadow: 2px 2px 6px;
    padding: 0.3em;
    line-height: 17px;
    z-index: 20000;
}

/* Style for print - automatic creation of PDF files */

@media print {
    body {
        font-size: 12pt;
        font-family: "Times New Roman", Times, 'serif';
        font-style: normal;
        font-weight: 400;
        color: #000;
        background-color: #fff;
        overflow: visible;
    }

    /* This gets rid of boxes around "pre" that show up with the Qt WebKit
       rendering engine used to produce PDFs */
    pre {
        border: 0;
        font-size: 10pt;
        font-weight: 700;
        color: #000;
    }

    /* Avoid breaking tables and rows across pages if possible. */
    table, tr, td, th, tbody, thead, tfoot {
        page-break-inside: avoid !important;
    }

    /* This is not actually implemented in WebKit right now, so there's
       no way to avoid these ugly page breaks. But maybe some day it will be,
       and this will magically start working. */
    h1, h2, h3, h4, h5, h6 {
        font-family: Arial, Helvetica, sans-serif;
        page-break-after: avoid;
    }

    .op-new-page {
        page-break-before: always;
    }
}

/* Make sure label names & hints in widgets have a caret cursor when users mouseover */
.op-choice-label-name,
.op-hints-description,
.op-hints-info {
    cursor: text;
}

/* Make sure text in the menu align with text in the 1st line instead of (i) icon
when wrapping into the 2nd line */
.op-menu-item {
    display: flex;
    align-items: baseline;
}

/* Spacing between V, (i) icon, and text in the menu */
.op-menu-item i.fa-info-circle {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

/* This is to have "Flat zip file structure" checkbox to fit in at the bottom of
"Download Options" */
.op-download-options-title {
    margin-bottom: 0 !important
}

#op-main-nav .navbar-toggler {
    font-size: 1.09375rem;
}

#op-main-nav .navbar-toggler:focus {
    box-shadow: 0 0 0 0.05rem;
}

/* ************************************************************************** */
/* The followings are for mobile support (width: 550px and height: 270px)     */
/* NOTE: Current breakpoints are width: 700px & height: 400px, these have to  */
/* match the constant browserThresholdWidth & browserThresholdHeight in       */
/* opus.js.                                                                   */
/* ************************************************************************** */
@media (max-width: 700px), (max-height: 400px) {
    body {
        font-size: 75% !important;
    }

    /* the metdata detail view slide needs to control it's own font size independent of the body */
    #op-metadata-detail-view-content {
        font-size: 100% !important;
        top: 0;
    }

    /* Need to use !important here so that the footer (inside a flex container)
    will not take up the space when hidden */
    .app-footer {
        display: none !important;
    }

    .op-links-popover {
        display: none;
    }

    /* When footer is gone, make sure range select info box at the lower left
    corner has the proper height */
    .op-range-select-info-box.op-range-select {
        height: 1.6em;
    }

    /* Reduce the thumbnail container from 100x100 to 90x90 (10% off) when font
    size is changed */
    .op-thumbnail-container {
        /* Extra 2px margin + 88px (content + padding + border) = 90px */
        min-width: 88px;
        min-height: 88px;
    }

    .op-reset-search,
    .op-reset-search-metadata,
    .op-slider-pointer {
        font-size: 90% !important;
    }

    /*  Make sure main nav tabs are displayed horizontally when screen is narrow */
    .op-tab {
        flex-direction: row !important;
    }

    /* Shrink the height of main nav */
    #op-main-nav {
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }

    /* Reduce the padding around selected tab on main nav */
    #op-main-nav .nav-link {
        padding: 0.25rem;
    }

    /* Reduce the hamburger icon on main nav */
    #op-main-nav .navbar-toggler {
        padding: 0.1em 0.6em;
    }

    /* Remove the top margin to make reset buttons horizontally centered */
    .op-reset-button button {
        margin-top: 0;
    }

    /* Reduce the space around search sidebar & widgets when screen narrow
    (search tab) */
    #search {
        padding-left: 0.5rem;
        padding-right: 0.25rem;
        padding-top: 0.25rem;
        padding-bottom: 0.5rem;
    }

    /* Expand the width of widgets area when screen is narrow (search tab) */
    #search .op-widget-col {
        padding-left: 0.3em;
        padding-right: 0.3em;
    }

    /* Reduce widget title font-size to 75% */
    .op-widget-title {
        font-size: 75%;
    }

    /* Reduce the padding around widget header */
    #widget-container .card-header {
        padding: 0.25em 0.75em;
    }

    #widget-container .card-title {
        margin-bottom: 0;
    }

    /* Reduce the spaces between each widget */
    #widget-container .card {
        margin-bottom: 0.75em;
    }

    /* Reduce the font-size of category headers to 75% */
    /* Original font-size 2.1875rem */
    .op-detail-metadata h1, .op-detail-metadata-header h1 {
        font-size: 1.64rem;
    }

    /* Original font-size 1.75rem */
    .op-detail-metadata h2 {
        font-size: 1.3125rem;
    }

    /* Original font-size 1.53125rem */
    .op-detail-metadata h3 {
        font-size: 1.15rem;
    }

    /* Reduce the size of zoom-in mini-thumbnail on hover */
    .op-mini-thumbnail img:hover {
        -ms-transform: scale(2.5); /* IE 9 */
        -webkit-transform: scale(2.5); /* Safari 3-8 */
        transform: scale(2.5);
    }

    #op-add-metadata-fields, .op-edit-field-tool {
        font-size: 75% !important;
    }

    #op-add-metadata-fields .op-select-list {
        height: 30vh;
    }

    .tooltipster-content {
        font-size: 90% !important;
    }
}

@media (max-width: 560px), (max-height: 630px) {
    /* Hide the feedback button when screen is narrow or short */
    .feedbackTab {
        display: none !important;
    }

    /* Hide contact us when screen is narrow or short */
    .op-help-item[data-action="contact"] {
        display: none !important;
    }
}

@media (max-width: 700px), (max-height: 400px) {
    /* Shrink the modal header, modal body, and modal footer when screen is
    narrow or short (confirm modal) */
    .modal-header, .modal-body, .modal-footer {
        padding: 0.25em 0.5em !important;
    }

    /* Keep the spaces for detail metadata modal in browse & cart tab to have
    the pretty display when screen is narrow or short */
    #op-metadata-detail-view .modal-header,
    #op-metadata-detail-view .modal-body {
        padding: 1.3em !important;
    }

    /* Reduce the size of font awesome icon in slide show */
    #op-metadata-detail-view .btn-close i {
        font-size: 1.1em;
    }

    .op-metadata-detail-view-body .bottom i {
        font-size: 1.8em;
    }

    /* Reduce the modal buttons size when screen is narrow or short (confirm
    modal) */
    .modal-footer button {
        padding: 0.175rem 0.55rem;
    }

    /* Reduce the top & bottom spaces around "Download Options" in download panel
    when screen is narrow or short (cart tab) */
    .op-download-options-title {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Reduce the space around card body in download panel when screen is narrow
    or short (cart tab) */
    #op-cart-download-panel .card-body {
        padding-top: 0.5em;
        padding-left: 0.5em;
        padding-bottom: 0.5em;
    }

    /* Reduce the space around "Download Data" in download panel & the header text
    in help panel when screen is narrow or short */
    #op-cart-download-panel .card-header,
    #op-help-panel .card-header {
        padding: 0.5em 0.75em;
    }

    /* Shrink the font size of "Download Data" in download panel & the header text
    in help panel to 75% when screen is narrow or short */
    #op-cart-download-panel .op-header-text h2,
    #op-help-panel .op-header-text h2  {
        font-size: 75%;
    }

    /* Shrink "x" icon in download & help panel when screen is narrow or short */
    #op-cart-download-panel .btn-close i,
    #op-help-panel .btn-close i {
        font-size: 1.1em;
    }

    /* Reduce the space around "Download Data" in download pane */
    .op-download-panel-title h1 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }

    /* Reduce the size of "Metadata CSV", "Data Archive", and "URL Archive"
    buttons */
    .op-download-csv,
    #create_zip_url_file a,
    #create_zip_data_file a {
        padding: 0.175em 0.55em;
    }
}

@media (max-width: 700px) {
    /* Position "Download CSV (all results)" button right above the modal footer
    when screen is narrow */
    #op-select-metadata .op-download-csv {
        margin-top: 0.1em;
        bottom: auto;
    }
}

/* Make sure confirm modal header is vertically centered */
.modal-header {
    align-items: center !important;
}

@media (max-width: 700px) and (max-height: 400px) {
    /* Shrink the table header font size to have a better table display when
    screen is narrow & short (browse/cart tab) */
    .op-data-table-view thead {
        font-size: 75%;
    }

    /* The followings are to make hide "Download CSV (all results)" and move the
    slider a line above */
    #browse .browse-nav-container {
        flex-wrap: nowrap;
    }

    #browse .browse-nav-container .navbar-nav {
        width: auto;
    }

    #browse .browse-nav-container .op-download-csv {
        display: none !important;
    }

    #browse .op-sort-order-container {
        margin-top: 0;
    }

    /* Reduce spaces to make sure cart actions buttons are wrapped into the next
    line when screen is narrow & short */
    .op-cart-actions > li {
        margin-right: 0 !important;
    }

    .op-cart-actions a {
        margin-right: 0.5em !important;
    }
}

@media (max-height: 400px) {
    /* Hide download csv button menu in select metadata menu when screen is short
    (browse tab) */
    #op-select-metadata-contents .op-download-csv {
        display: none !important;
    }

    /* Reduce the spaces between each item in the hamburger menu when screen is
    short */
    #op-obs-menu .dropdown-item {
        padding-top: 0.1em;
        padding-bottom: 0.1em;
    }

    /* Reduce spaces between each item in the help menu when screen is short */
    .op-help-item, #op-interpret-image-menu {
        padding-top: 0.1em !important;
        padding-bottom: 0.1em !important;
        font-size: 81%;
    }
}

@media (max-height: 500px) {
    /* Hide product type select/deselect buttons when screen is short (cart tab) */
    .op-product-types-select-btn-group {
        display: none !important;
    }

    /* Hide "Download Options" in download panel when screen is short (cart tab) */
    .op-download-options-title {
        display: none !important;
    }

    /* Make sure when "Download Options" is gone, we create some space between
    the checkbox and download buttons */
    .op-download-flat-zip-file-structure {
        margin-top: 0.25rem;
    }
}

/* Bypass .col-sm-1 breakpoint to have pretty table display in download panel
when screen is narrow (cart tab) */
@media (max-width: 576px) {
    .op-product-type-table-body .row .col-sm-1 {
        flex: 0 0 8.333333% !important;
        max-width: 8.333333% !important;
    }
}

/* Group cart actions nav buttons & download panel button together */
.op-cart-actions-group {
    display: flex;
    flex-direction: column
}

@media (max-height: 400px) {
    /* The followings are to move "Download Data" button to the same line as
    cart actions nav buttons  (cart tab) */
    .op-cart-actions-group {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }

    .op-cart-slide-download-panel i {
        display: none !important;
    }

    .op-cart-toggle-download-panel {
        padding: 0;
    }
}

@media (max-width: 768px) and (max-height: 400px) {
    /* Make observation detail area shrinkable when screen is short & narrow
    (detail tab) */
    .op-detail-metadata, .op-detail-metadata-header {
        padding-right: 1em !important;
        min-width: 100%;
    }

    /* Make observation detail area take up 70% of width and image take up 30%
    when screen is short & narrow (detail tab) */
    .op-detail-metadata-container {
        flex: 1 0 70%;
        display: grid;
    }

    /* Reduce the spaces around detail tab when screen is short & narrow */
    #detail {
        padding-top: 1em;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
    }
}

.op-referred-link {
    font-size: smaller;
    color: #707070;
    padding-left: 0.5em;
}
/* Styling for link icon in detail tab */
#detail .op-referred-link {
    padding-left: 0.2em;
    padding-right: 0.2em;
}

/* Stylings for customized tooltips */
.tooltip-templates {
    display: none;
}

/* Make sure tooltipster tooltip is not covered by popover */
.tooltipster-show {
    z-index: 2000000002 !important;
}

/* set font size and color of the tooltips contents */
.op-custom-tooltip-theme .tooltipster-content {
    font-size: 13px;
    color: #000000 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    hyphens: auto;
}

/* Styling for main tooltip box */
.op-custom-tooltip-theme .tooltipster-box{
    border-radius: 3px !important;
    border:1px solid #000000 !important;
    background:#FFFFFF !important;
}

/* Set some distances between the tooltips and left & right edges of the browser window */
.op-custom-tooltip-theme.tooltipster-top .tooltipster-box {
    margin-left: 5px !important;
    margin-right: 5px !important;
}
.op-custom-tooltip-theme.tooltipster-bottom .tooltipster-box {
    margin-left: 5px !important;
    margin-right: 5px !important;
}

/* Background of the tooltip arrow */
.op-custom-tooltip-theme.tooltipster-bottom .tooltipster-arrow-background {
    border-bottom-color: #FFFFFF !important;
    top: 1px !important;
}
.op-custom-tooltip-theme.tooltipster-left .tooltipster-arrow-background {
    border-left-color: #FFFFFF !important;
    left: -1px !important;
}
.op-custom-tooltip-theme.tooltipster-right .tooltipster-arrow-background {
    border-right-color: #FFFFFF !important;
    left: 1px !important;
}
.op-custom-tooltip-theme.tooltipster-top .tooltipster-arrow-background {
    border-top-color: #FFFFFF !important;
    top: -1px !important;
}

/* Border of the tooltip arrow */
.op-custom-tooltip-theme .tooltipster-bottom .tooltipster-arrow-border {
    border-bottom-color: #000000 !important;
}
.op-custom-tooltip-theme .tooltipster-left .tooltipster-arrow-border {
    border-left-color: #000000 !important;
}
.op-custom-tooltip-theme .tooltipster-right .tooltipster-arrow-border {
    border-right-color: #000000 !important;
}
.op-custom-tooltip-theme .tooltipster-top .tooltipster-arrow-border {
    border-top-color: #000000 !important;
}

.op-custom-tooltip-theme .tooltipster-arrow{
    height:9px !important;
}