/**Custom styles**/

/******** 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));
}

.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: 0;
    top: calc(var(--topbar-height));
    max-height: 0;
    min-width: 20vh;
    overflow-x: hidden;
    overflow-y: hidden;
    background: white;
    transition: all 0.5s ease-in-out;
    border: none;
    border-radius: 0 0 1vh 1vh;
    box-sizing: border-box;
    height: 0;

}

#topbar-menu-list.open {
    height: unset;
    border-bottom: .3vh solid;
    border-left: .3vh solid;
    border-bottom: .3vh solid;
    border-color: black;
    box-shadow: 1vh 1vh 2vh black;
    max-height: 100%;
    transition-property: max-height;
}

#topbar-menu-list li+li {
    border-top: .3vh solid #859187;
}

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

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

#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 {
    overflow: visible !important;
    margin: 0;
    border: 0;
    padding: 0;
    position: relative;
}

.disabledButton {
    color: grey !important;
}

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

#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);
}

/* 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: 5;
    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 */
}

.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 thead tr {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--popup-bg-color);
    line-height: 20px;
}

#ligand_mod th {
    text-align: center;
    font-family: var(--font-family);
    padding: 6px;
}

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

#ligand_mod thead tr:nth-child(2) {
    /* If both grouphead and colhead are both displayed in a sticky situation, shift one down */
    top: 1.25em;
}

#ligand_mod .ligandmod-grouphead th {
    padding-top: 0;
    padding-bottom: 0;
}

.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;
}

.suggestionPoseDetail {
    font-size: 1em;
    border: 1px solid lightgrey;
    padding: 0.5em;
    margin-bottom: 0.5em;
}

.suggestionPoseDetailHeader {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.suggestionPoseDetailHeader .slider {
    flex-grow: 1;
    padding: 0;
}

.suggestionPoseDetailHeader table {
    margin-bottom: 0;
}

#ligand_mod .suggestionPoseDetail thead th {
    text-align: right;
    padding: 0;
}

.suggestionPoseDetail tbody td > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

.suggestionPoseDetail tbody input {
    width: 4em;
    flex-grow: 1;
    text-align: end;
}

.suggestionPoseDetail tbody select {
    min-width: 4em; /* match input */
    flex-grow: 1;
}

/* 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);
    }
}