/* App-specific overrides — general design system lives in main.css */

.printable {
    margin: 10%;
    font-size: 18px;
}

.adminLink {
    font-size: 11px;
}

.errorMsg, .warning {
    border-radius: 6px;
    font-size: 14px;
    padding: 12px 18px;
    margin: 12px auto;
    max-width: 560px;
}

.missingCount {
    color: #CC3333;
    font-weight: 600;
}

.customConcentrations {
    display: none;
}

#searchResults {
    text-align: left;
    border: 0;
}

#searchResults .resultTitle {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 28px 0 10px;
    width: 100%;
}

#searchResults .compoundSearchResults:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.09), 0 2px 5px rgba(0,0,0,.05);
    transform: translateY(-1px);
}

#searchResults .compoundSearchResults .column1 {
    width: 18%;
    font-weight: 500;
    text-align: left;
}

#searchResults .compoundSearchResults .column2 {
    width: 56%;
    text-align: left;
}

#searchResults .compoundSearchResults .column3 {
    width: 26%;
    text-align: center;
}

#searchResults .enzymeSearchResults .reactionLink {
    color: var(--accent, #1B5FA8);
}

#searchResults .enzymeSearchResults .viewAllLink {
    color: var(--sidebar-leaf, #4D9FD6);
}

#searchResults .image img {
    border: none;
    max-height: 120px;
}

.parsedRxn, .compoundSelector, .compound, .enzyme {
    font-size: 22px;
    margin: 20px 0 14px;
    width: 100%;
}

.reactionController, .parsedRxn {
    text-align: center;
}

.reverseArrows {
    background: none;
    border: none;
    padding: 0 4px;
    margin: 0 2px;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
}

.reverseArrows:hover, .reverseArrows:focus {
    color: var(--accent, #1B5FA8);
}

.panelTitleRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panelTitleRow .resetConcBtn,
.panelTitleRow #shareBtn {
    margin: 0 0 0 auto;
}

.thermoTable td:first-child {
    width: 20%;
}

.thermoTable .fieldCell {
    width: 30%;
}

input[type="number"].invalidAbundance {
    background-color: #fbdada;
}

.staleThermo {
    opacity: 0.35;
    pointer-events: none;
}

table.compoundInfo {
    width: 100%;
}

.mui-table .column1 {
    width: 22%;
    font-weight: 500;
}

.compoundInfo .column2 {
    width: 60%;
}

.compoundInfo .column3 {
    width: 20%;
}

table.enzymeInfo {
    width: 100%;
}

.results td,
.compoundInfo td,
.speciesInfo td,
.enzymeInfo td,
.reactionInfo td,
.formationEnergyInfo td {
    padding: 10px 20px;
}

table.reactionInfo,
table.speciesInfo,
table.formationEnergyInfo {
    text-align: center;
    padding: 0;
}

.speciesSource.last td,
td.reference.border {
    border-bottom: 1px solid var(--border, #E1DDD6);
}

.refsList {
    text-align: left;
}

.refsList a {
    color: var(--sidebar-leaf, #4D9FD6);
}

#figureContainer {
    margin: 16px auto 36px;
    width: 600px;
    height: 300px;
}

#figureContainer #legendContainer {
    float: right;
}

#figureContainer #dgFigure {
    clear: both;
}

.graphLink {
    float: left;
    margin-right: 8px;
}

.graphLink img {
    width: 27px;
    height: 27px;
    vertical-align: middle;
    opacity: .55;
}

.graphLink:hover img {
    opacity: 1;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.pathwayPageTable .column1 { width: 40%; }
.pathwayPageTable .column2 { width: 15%; }
.pathwayPageTable .column3 { width: 45%; }