/**Custom styles**/

/* Note about z-index:
* There are a number of potentially overlapping items in the UI.
* This is an attempt to rationalize the z-index.
* 
* Items inside bfm_viewer will be stacked (lowest to highest) inside bfm_viewer:
* - Canvas
* - Tour Highlight
*     z-index: 400
* - .canvasPopup: atom tooltip, context menu, and LigandMod (find modifications results)
*     z-index: 500
* - Map selector
*     z-index: 1051 (following select2's default)
* - Tour Text box
*     z-index: 1200
* - .modalViewer: Import / Export / ModalPane (Guide, Sketcher, Dock, Save, Simulator)
*     z-index: 1500
*
* Items outside the bfm_viewer will be stacked on top of all bfm_viewer items:
* - Loading pane (.modalViewer but outside bfm_viewer)
* - Connection error pane
* - Topbar menu
*
* Here's my thinking for the order inside bfm_viewer:
* - ModalPanes should always be on top. No matter what situation,
*   if you invoke a modal pane, it be on top of everything else.
*   Tourbox is the arguable exception.
* - The tour box should be on top of Map Selector.  This is so if there's a 
*   sizing issue, the tour box won't be hidden by the map selector.
* - Map selector should be on top of popups so that LigandMod is open and you 
*   view the map selector, map selector is on top
* - Since the tour box is op top of the map selector, and map selector is on top
*   of popups, tour box is also on top of popups.  However, it would theoretically
*   be nice to have tooltips and context menu appear on top of the tour box.
* - I decided to put the tour highlighting underneath other stuff, basically so that
*   it wouldn't appear on top of LigandMod or Map Selector if they opened. Ideally
*   The tour highlighting should have the same z-index as the element it is focused.
*
* There is definitely room for awkward situations if you try to open up the LigandMod
* the tour and the map selector at the same time.
* My approach has been to treat everything as the classes above, instead of breaking
* them down into individual elements.  That would be more complicated by might allow
* avoiding some awkwardness.
*/


/******** Global Styles ********/
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
} /* to remove the top and left whitespace */

html, body {
    position:relative;
    font-size: var(--base-font-size);
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column;
    align-items: stretch;
}

:root {
    --popup-bg-color: mintcream;
    --hover-color: var(--marketing-green);
    --highlight-color: var(--topbar-bg-color);
    --mol-button-text-color: var(--marketing-green);
    --mol-button-size: var(--topbar-height);
    --mol-button-margin: 0.5vw;
    --mol-button-group-border: 0.5vh;
    --mol-button-group-width: calc(var(--mol-button-size) + var(--mol-button-margin) * 2 + var(--mol-button-group-border) * 2);
    --border-radius: 10px;
    --font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --base-font-size: calc(8px + 1vh);
}

h1, h2 {
    text-align: center;
    padding: 1em;
    font-family: var(--font-family);
}

a {
    color: var(--marketing-blue);
    text-decoration: none;
}

input, button, select {
    font-size: var(--base-font-size);
}

#app_wrapper {
    display: flex;
    position: absolute;
    top: var(--topbar-height);
    width: 100vw;
    height: calc(100vh - var(--topbar-height));
    background-color: black;
}

.fa-close:hover {
    cursor: pointer;
}

/* Mainly for buttons that are <a> tags */
.a-btn {
    color: var(--marketing-blue);
    font-family: var(--font-family);
    text-decoration: none;
    font-size: unset;
    line-height: unset;
    letter-spacing: unset; 
}
.a-btn:hover {
    cursor: pointer;
}

.bmaps-btn {
    background-color: var(--marketing-green);
    border: none;
    color: mintcream;
    font-family: var(--font-family);
    text-transform: uppercase;
    border-bottom-left-radius: var(--border-radius);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1vh 1vw;
    margin: 1vh 1vw;
    -webkit-transition: all ease 200ms;
    transition: all ease 200ms;
}

.bmaps-btn:hover {
    cursor: pointer;
    border-radius: var(--border-radius);
    background: #79a83c;
}

.link-looking-btn {
    background: unset;
    border: unset;
    padding: unset;
}

.link-looking-btn:hover {
    cursor: pointer;
}

/* Drop-down menu */
#topbar-menu-list {
    z-index: 5000;
    position: absolute;
    right: calc(var(--mol-button-group-width));
    top: calc(var(--topbar-height));
    max-height: 0;
    margin: var(--mol-button-group-border);
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: var(--border-radius);
    background: mintcream;
    transition: all 0.5s ease-in-out;
}

#topbar-menu-list.open {
    max-height: 100%;
    transition-property: max-height;
    transition: all 0.5s ease-in-out;
}

#topbar-menu-list li+li {
    border-top: 1px solid #859187;
}

#topbar-menu-list li {
    padding: 1.5vh 1vw;
}

#topbar-menu-list li a {
    display: block;
    color: black;
    text-decoration: none;
    font-family: sans-serif;
    font-size: calc(1px + 1.5vh);
    padding: 0;
    margin: 0;
}

#topbar-menu-list li a:hover {
    color: var(--hover-color);
}

/* Boltzmann Def text */
/* to get min/max font sizes 10 - 24 with viewport from 400-800*/
#boltzmannDef {
    flex: 0 1 auto;
    text-align:center;
    padding:1em;
    font-family: sans-serif;
    font-weight: bold;
    font-size: calc( 10px + (.25 * (24-10) * ( (100vw - 400px) / ( 800 - 400) )));
}

/* only for 3dmol version currently.  Contains 4 canvases with demos. */
#bfm_demos {
    position: relative;
    flex: 2 1 auto;
    overflow: auto;
    width: 100%;
}

#bfm_viewer {
    margin: 0;
    border: 0;
    padding: 0;
    z-index: 3;
    position: relative;
}

/* Molecule buttons */

/* This is the whole group of buttons. */
#moleculeButtonGroup {
    position: absolute;
    display: flex;
    height: calc(100vh - var(--topbar-height));
    margin: 0;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: right;
    top: 0;
    right: 0;
    background-color: var(--topbar-bg-color);
    /* border: 0; */
    border: var(--mol-button-group-border) solid black;
    /* Set z-index so style button drawers are on top of elements 
    at the canvas level (eg ServerInfo) */
    z-index: 1;
}

/* MS Edge has a known (by MS) bug with flex not yet fixed as of 10/2018 */
@supports (-ms-ime-align: auto) { /* non-robust hack to detect Edge only */
#moleculeButtonGroup {
        justify-content: space-around;
        /* you can also add some other adjustments to size, margins etc to get the same positioning */
}
}

.moleculeButton {
    margin: auto;
    height: var(--mol-button-size);
    width: var(--mol-button-size); /* needs to be the same as height to be square */
    border-radius: calc(var(--mol-button-size)/6);
    position: relative;
    display: flex; /* center the text in the box */
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 0.5vh solid black;
    background-color: black !important;
    color: var(--mol-button-text-color);
    font-family: var(--font-family);
    font-size: calc(2vh - 1px);
    margin: 0 var(--mol-button-margin) 0 var(--mol-button-margin);
}

.moleculeButton:hover {
    cursor: pointer;
    border-color: var(--mol-button-text-color) !important;
}

.disabledButton {
    color: grey !important;
}

.disabledButton:hover {
    cursor: default !important;
    border: none !important;
    color: grey !important;
}

/*

.buttonDrawer {
    position: absolute; 
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
}

.buttonDrawerItem {
    margin: 0 calc(var(--mol-button-margin)/2) 0 calc(var(--mol-button-margin)/2);
}

commentedOutInButtonDrawerItem {
    position: relative;
}

*/

/* .textOverlayHost {
    background-color: transparent !important;
    position: absolute; 
    top: 0;
}

.textOverlayContent {
    background-color: rgba(0,0,0,.5);
    width: 100%;
} */

#backgroundColorButtons {
    display: block;
    position: absolute;
    bottom: 0;
    padding-bottom: 0.5vh;
    left: 50%;
    transform: translate(-50%, 0);
    min-width: calc(5 * 5vh); /* 5 background buttons */
}

.backgroundColorButton {
    display: inline-block; 
    /* consider this in relation to the button sizes above */
    border-style: hidden;
    width: 4vh;
    height: 4vh;
    border-radius: 2vh;
    margin: 0 0.5vh;
}

.backgroundColorButton.selected {
    border: 0.5vmin solid #FF1493;
}

.backgroundColorButton:hover {
    cursor: pointer;
    border: 0.5vmin solid var(--hover-color);
}

#mapSelectorGroup {
    position: absolute;
    top: 10%; /* ideally this would be the size of a style button plus margin */
    left: 10%;
    right: 10%;
    z-index: 1051;
    font-family: var(--font-family);
}

/* For select2 selector (make font size variable?) */
.mapSelector_label {
    position: absolute;
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
    max-width: 100%;
    width: 100%;
    border-radius: var(--border-radius);
    /* Plausible? */
    /* 10 is the min size, 24 is the max size, 400px is the min size
       when scaling starts, 800px is where it should stop scaling.
    */
    /*font-size: calc( 10px + ((24-10) * ( (100vh - 400px) / ( 800px - 400px) )));*/
    font-size: calc(12px + 1vh);
}

/* For select2 selector title text */
#mapSelector_label_text {
    display: inherit;
    text-align: center;
}

/* Class for the Select2 container, passed into select2 intializer.  
   Might need to add !important, so it's not overridden by select2 defaults.
   We will guess that font-size + 3px is sufficient for line-height and height */
.mapSelector_container {
    /*    line-height: calc( 10px + ((24-10) * ( (100vh - 400px) / (800px - 400px) )));*/
    line-height : calc(12px + 1vh);
    /* height:      calc( 10px + ((24-10) * ( (100vh - 400px) / ( 800px - 400px) )))) !important;*/
    height: calc(20px + 1vh);
}

/* The selected protein or placeholder text */
#select2-mapSelector-container {
    padding: 4px;
    font-size: calc(8px + 1vh);
    color: gray;
}

/* Select2 is a dropdown, but we don't use it like one, so it looks better without a dropdown arrow */
.select2-selection__arrow {
    display: none;
}

/* Select2 creates spans within spans
   We need to ensure the innermost span has the line-height we want, otherwise the calculated height will be wrong */
#select2-mapSelector-container {
    line-height: inherit;
}

/* Class for Select2 dropdown list, passed into select2 initializer */
.mapSelector_dropdown {
    font-family: sans-serif;
    font-size: calc(10px + 1vh);
    color: black;
}

.mapSelectorClose {
    position: absolute;
    top: 0px;
    right: 0%;
}

/* styles for handling pasting and drag-drop of molecule data */

.ready_to_drop {
    border-color: LimeGreen;
    border-width: 8px;
    border-style: dashed;
}

.canvasPopup {
    position: fixed;
    z-index: 500;
    background-color: var(--popup-bg-color);
    color: black;
    margin-left: 20px;
    padding: 3px;
    border: 1px solid;
    cursor: default;
    font-size: 16px; /* Previous default value */
}

.canvasTooltip {
    background: none;
    border: none;
}

.modalViewer {
    z-index: 1500;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .75);
}

.modalViewer_wrapper {
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    background-color: white;
    color: black;
    font-family: var(--font-family);
    height: auto;
    top: 7vh;
    bottom: 3vh;
    left: 3vh;
    right: 3vh;
    border: 2px solid black;
    transition-property: top, bottom, left, right;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

@media only screen and (max-width: 1000px) {
    .modalViewer .modalViewer_wrapper {
        top: 5vh;
        bottom: 1vh;
        left: 1vh;
        right: 1vh;
    }
}

.modalViewer_prompt {
    /*height: 15%;*/
    color: black;
    font-family: var(--font-family);
    font-size: calc( 10px + (.25 * (24-10) * ( (100vw - 400px) / ( 800 - 400) )));
    padding: 10px;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.modalViewer_prompt * {
    margin-left: 5px;
    font-size: calc( 10px + (.25 * (24-10) * ( (100vw - 400px) / ( 800 - 400) )));
    display: inline-block;
}

#modalCompoundViewer_note {
    padding-top: 5px;
    font-style: italic;
}

#modalCompoundViewer_canvas {
    position: absolute;
    width: 100%;
    height: 80%;
    bottom: 0%;
}

.modalViewer_wrapper canvas {
    position: absolute;
    width: 100%;
    height: 85%;    
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari*/
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

#mainContextMenuWrapper {
    position: fixed;
    width: 250px;
    z-index: 10;
}

#mainContextMenu {
    position: static;
}

.menu-item {
    list-style-type: none;
}

.menu-item:hover {
    background-color: var(--highlight-color);
    cursor: pointer;
}

.menu-overflow-hidden {
    display: none;
}

.menu-grouphead {
    list-style-type: none;
    font-weight: bold;
}

.menu-separator {
    list-style-type: none;
}

.menu-overflow-toggle {
    color: blue;
    font-family: sans-serif;
    cursor: pointer;
}

.menu-overflow-toggle:hover {
    color: skyblue;
    font-family: sans-serif;
}

/* Canvas tooltip styles */
.hotspotTooltip_title {
    text-align: center;
    font-weight: bold;
    margin-bottom: .25em;
}

.hotspotTooltip_row {
    padding: 0 1em;
}

/* Exchemp Avg: First .hotspotTooltip_row, but 2nd div, including title */
div.hotspotTooltip_row:nth-of-type(2) {
    border-bottom: 1px solid;
}

/* This is the exchemp value */
.hotspotTooltip_row span:nth-of-type(2) {
    float: right;
    padding-left: 1em;
}

/* Styles for LigandMod.jsx */

#ligand_mod {
    position: absolute;
    margin-left: 0px;
    top:  calc(200px - var(--topbar-height));
    /* allow to stretch from top (200px) to the bottom of the screen */ 
    max-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
}

.ligand_mod_title {
    text-align: center;
}

.ligand_mod_caption {
    font-size: larger;
    font-weight: bold;
}

.ligand_mod_searchinfo {
    padding: 0 .4em;
    font-style: italic;
}

.ligand_mod_searchinfo button {
    margin-left: .5em;
    font-size: inherit;
}

.ligand_mod_close {
    float: right;
}

#ligand_mod .scroller {
    overflow-x: auto;
    overflow-y: auto;
}

#ligand_mod table {
    margin-bottom: 1em;
    padding-right: .25em;
    width: 100%;
}

#ligand_mod th {
    position: sticky;
    top: -3px;
    text-align: center;
    background-color: var(--popup-bg-color);
    line-height: 20px;
    font-family: var(--font-family);
    padding: 6px;
}

#ligand_mod th:hover {
    color: var(--hover-color);
    cursor: pointer;
}

.suggestionRow:hover {
    background-color: var(--highlight-color);
}

.suggestionRow  td:last-of-type {
    background-color: var(--popup-bg-color);
    color: black;
}

.suggestionRow i:hover {
    color: var(--hover-color);
    cursor: pointer;
}

.suggestion-imgTooltip {
    width: 70px;
    background-color: mintcream;
}

.suggestionRow button {
    padding: 0 .2em;
    margin-right: .2em;
}

/* Docking Pane */

#docking_pane {
    background: white;
    padding: 10px 20px;
    font-size: calc(12px + 1vh);
    overflow-y: auto;
}

#docking_pane input,
#docking_pane select {
    font-size: calc(12px + 1vh);
    padding: 5px;
    margin-right: 10px;
}

.docking_section {
    margin: 5px;
}
.docking_section_title {
    font-weight: bold;
}

.docking_option_child {
    margin-left: 20px;
}

.docking_option_child:not(:first-child) {
    margin-top: .5em;
}

.docking_counts {
    float: right;
}

.docking_credits {
    position: absolute;
    bottom: 0px;
    margin-bottom: 20px;
}

.docking_option {
    display: block;
    padding: 5px;
    margin-bottom: .5em;
}

.docking_option span {
    display: block;
}

.docking_option label:hover {    
    color: navy;
}

.docking_tips {
    margin-left: 40px;
}

/* Loading and Connection panes */

#loading_pane,
#new_loading_pane {
    font-size: calc( 6px + (1vw + 1vh) );
    color: var(--topbar-title-color);
    text-align: center;
    padding: 30vh 0;
}

#cxn_err_pane {
    z-index: 3000;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, .75);
}

#cxn_err_pane .close {
    position: absolute;
    top: 9vh;
    right: 24vw;
    color: darkred;
    z-index: 3001;
    font-size: calc(12px + 2vmin);
    padding: 1vmin;
    border: unset;
    background: unset;
}

#cxn_err_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    font-size: calc( 1vw + 1vh );
    color: var(--topbar-title-color);
    text-align: center;
    padding: 5vh 5vw;
    background-color: var(--topbar-bg-color);
    border-radius: calc( 5vw + 5vh );
    width: 50%;
    height: 50%;
    margin-top: 10vh;
}

#cxn_err_content > * {
    margin: 0;
    padding: 0;
}

#cxn_err_content h2 {
    color: var(--topbar-title-color);
}

#cxn_btn_group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    align-content: center;
}

/* The Manual (aka The Guide) */

#theManual {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: space-between;
    font-family: 'Lato', sans-serif;
    overflow: hidden;
}

#theManual_navBar {
    text-align: center;
    font-size: calc(10px + 1vh);
    transition: all 0.5s ease-in-out;
}

/* Position the Manual navigation inside the title bar for wide enough screens */
@media only screen and (min-width: 1200px) {
    #theManual_navBar {
        position: absolute;
        top: 16px; /* match vertical padding of MuiDialogTitle */
        left: 3.5em;
        right: 3.5em;
    }
}

#theManual_content {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    flex: 1 1 auto;
    overflow: hidden;
}

#theManual_page {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: calc(10px + 1vh);
    flex: 1 1 auto;
    overflow: hidden;
}

.theManual_navArrows {
    cursor: pointer;
    font-size: 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: unset;
    border: unset;
}

#theManual_checkbox {
    text-align: center;
    padding: 5px 0 0;
    background-color: white;
    flex: 0 0 auto;
    width: 100%;
}

.man-page {
    padding: 1vh 1vw;
    padding-bottom: 0;
    overflow: auto;
    line-height: 1.4em;
    width: 100%;
    flex: 1 1 auto;
}

.man-page p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.man-page ul {
    margin: 0 0 15px;
    padding: 0;
    list-style-position: outside;
}

.man-page ul li {
    margin: 0 0 6px 20px;
    list-style: none;
}

.man-page ol li {
    margin: 0 0 6px 25px;
    padding-left: 5px;
}

.man-page ul li:before {
    content: '\2022';
    float: left;
    margin: 0 0 0 -20px;
    color: var(--marketing-blue);
    vertical-align: text-top;
}

.man-page code {
    background-color: linen;
    font-weight: bold;
    padding: 2px;
    border-radius: 5px;
}

.embedded-content {
    max-width: 100%;
    display: inline-block;
    text-align: center;
}

.embedded-content * {
    max-width: 70%;
    height: auto;
}

#dockImgDiv {
    display: block;
    float: right;
    width: 30vw;
    shape-outside: ellipse();
}

#mainPage {
    margin: 1vh 1vw;
    overflow: auto;
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mainPage_links,
.mainPage_links_long {
    display: flex;
    flex-flow: row wrap;
    /* justify-content: space-evenly; */
}

.mainPage_links > *,
.mainPage_links_long > * {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    min-width: 120px;
    width: 8vw;
    height: auto;
    padding: 1%;
    text-align: center;
    cursor: pointer;
    margin: 4px;
    border: 1px solid rgba(0,0,0,0);
    background-color: #f3f4f4;
    border-radius: var(--border-radius);
}

.mainPage_links_long > * {
    min-width: 120px;
    width: calc(12vw + 4px); /* 1.5 width (accounting for margins) */
}

.mainPage_links > *:hover,
.mainPage_links_long > *:hover {
    border: 1px solid var(--marketing-blue);
}

#mainPage img {
    max-width: 100%;
    display: inline-block;
}

#mainPage .section {
    justify-content: center;
    margin-bottom: 1.5em;
}

.startTourButton {
    float: right;
    border: solid var(--marketing-green);
    border-radius: 6px;
    background-color: aliceblue;
    color: var(--marketing-blue);
    padding: 0.15em;
    cursor: pointer;
}

.startTourButton:hover {
    border-color: var(--marketing-blue);
}

#helpPane_grid {
    height: 100%;
    display: flex;
}

#help_col1, #help_col2 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#help_col1 div, #help_col2 div, #help_col1 ul, #help_col2 ul {
    flex: 1;
}

#view2dHelp, #selectHelp {
    vertical-align: bottom;
    margin-bottom: 1vh;
}

#mouseGesturesHelp li {
    list-style: none;
}

#mouseGesturesHelp li span:nth-of-type(2) {
    float: right;
    margin-left: 30px;
}

:root {
    --Col2-margin: 3vw;
}

#displayControlButtonHelp {
    margin-left: var(--Col2-margin);
}

#keyboardHelp {
    margin-left: var(--Col2-margin);
}

#keyboardHelp li {
    list-style: none;
}

#compoundHelp {
    margin-left: var(--Col2-margin);
}

#selectHelp {
    margin-left: var(--Col2-margin);
}

.help-item {
    /* Works ok for reasonable aspect ratios, but not always */
    font-size: calc(0.65vw + 0.87vh); /* assume 4 x 3 aspect ratio */
    line-height: 1.2;
    margin-top: 1vh;
    margin-left: 1vw;
}

.help-title {
    font-weight: bold;
    color: #006428;
}

.rotate-45-left:before {
    display: block;
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.rotate-45-right:before {
    display: block;
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.bmaps-control {
    border: 1px solid var(--marketing-green);
    padding: 2px 6px;
    font-weight: bold;
    white-space: nowrap;
}

/* Export Pane */

/*
#exportPane_wrapper .modalViewer_prompt {
    height: 10%;
}
*/

/* Note: for some reason, a rule for jquery ".ui-widget-content a"
was preventing this blue color for the download button only.
Chrome dev tools actually thought that blue was the one doing the overriding.
Rather than add !important here, we can keep the id-based directives for 
the download button.
*/
.link_control_parent a, .link_control_parent a:visited,
#exportPane_download a, #exportPane_download a:visited {
    color: blue !important; /* jquery-ui was overriding this in some cases */
    text-decoration: none;
}

#export_image_tab {
    font-weight: bold;
}

#export_image_tab a:visited, #export_image_tab a {
    color: darkblue;
}

#export_image_tab img {
    border: 1px solid blue;
    background: white;
}

#export_image_tab #downloadImageBtn, #downloadImageBtn:visited {
    text-decoration: none;
    color: blue;
    margin-left: 30px;
}

/*** IMPORT PANE ***/
/* This uses nested elements with display: grid to magically work. */
#import_wrapper {
    position: absolute;
}

#import_tabs, #export_tabs {
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: white;
    height: 100%;
}

.ui-tabs-panel {
    height: 100%;
    overflow: auto;
}

#export_moldata_tab {
    grid-template-rows: auto 1fr;
}

.import_explanation {
    display: block; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    right: 25%;
    color: slategray;
    text-align: center;
    font-size: calc(10px + 1vh);
}

/* Import pane tab panels also need display: grid 
 * This is assigned by the tabs() initialization in
 * info_display initImportMethod().
 */

.importForm {
    display: grid;
    grid-template-rows: 1fr auto;
    box-sizing: border-box;
    font-family: var(--font-family);
    cursor: default;
}

.importParams {
    padding-top: 10px;
}

.importParams > div {
    margin-bottom: .2em;
}

.importText, #exportPane_clipboardData {
    box-sizing: border-box;
    resize: none;
    height: 100%;
    width: 100%;
    font-family: "Courier New", Courier, monospace !important;
    font-size: .9em !important;
}   

.dialogTitle {
    font-size: calc(18px + 1vh);
    font-weight: bold;
    margin: 10px;
}

.dialogTitle > div {
    display: inline-block;
}

.dialogTitle > div:not(:first-child) {
    float: right;
}

.dialogTitle > div:not(:first-child):not(:last-child) {
    margin: 0 10px;
}

.dialogTitleControl {
    font-size: small; 
    font-weight: normal;
    color: blue;
    cursor: pointer;
}

.importForm label {
    display: inline-block;
    width: 180px;
}

.importForm input, .importFormat {
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
}

.importForm input[type=submit] {
    padding: .2em;
}

.importFormat, .importName {
    width: 20em;
    max-width: 75%;
}

.importAdvanced div {
    margin-left: 1em;
}

.importAdvanced div:first-of-type {
    margin-left: inherit;
    font-style: italic;
}

.upload_button {
    float: right;
    color: darkblue;
}

.upload_button:hover {
    color: steelblue;
}

/* Originally found here:
 * https://github.com/FortAwesome/Font-Awesome/issues/688#issuecomment-164174743
 */
.spin-reverse {
  -webkit-animation: spin-reverse 2s infinite linear;
  animation: spin-reverse 2s infinite linear;
}
@-webkit-keyframes spin-reverse {
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    0% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin-reverse {
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    0% {
    -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}