.material-icons-round.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons-round.md-18 { 
    font-size: 18px; 
    vertical-align: middle;
}
.material-icons-round.md-16 { 
    font-size: 16px; 
    vertical-align: middle;
}
.ui-tooltip {padding: 4px; }
.ui-tooltip-content { font-size: 11px; }

.ui-dialog-content { 
    font-size: 12px;
    padding: 6px 0 0 6px;
}

.ui-dialog .ui-dialog-titlebar {
    font-size: 11px;
    padding:2px;
}

.cursorProgress * {
    cursor: progress !important;
}

.hidden {
    display:none !important;
}

#startForm {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

#cpdAutoComplete {
    padding-top: 6px;
    padding-left: 3px;
}

#explorer {
    min-height: 300px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    display: flex;
    flex-flow: row nowrap;
}

.mainPath {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    min-width: 1000px;
    padding-right: 4px;
}

#leftPane {
    flex: 1 1 100%;
    overflow: scroll;
    border-right: 1px solid gray;
    padding-top: 12px;
    padding-bottom: 12px;
}

#rightPane {
    width: 400px;
    background-color: #F8F7F0;
    padding-left: 10px;
    padding-bottom: 10px;
}


.cpdRow {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}

.rxnsRow {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}

.precursorsCell {
    flex: 1 1 40%;
    order:-2;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.precursorsCell > .neighborList {
    align-items: flex-end;
}

.productsCell {
    flex: 1 1 40%;
    align-self:left;
    order:2;
}

.productsCell > .neighborList {
    align-items: flex-start;
}

.horizArrowCell1 {
    width: 36px;
    order:-1;
    padding: 10px 10px 10px 5px;
    flex-shrink: 0;
}

.horizArrowCell2 {
    width: 36px;
    order:1;
    padding: 10px 10px 10px 5px;
    flex-shrink: 0;
}

.horizArrowCell1 > img, .horizArrowCell2 > img {
    width: 30px;
}

.rxnsCell {
    align-self: center;
}

.cpdCell {
    order:0;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    align-self: stretch;
}

.cpdCell > .cpdNode {
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.12);
    background-color: #F8F7F0;
}

.cpdNode {
    display: flex;
    flex-flow: row nowrap;
    max-width:300px;
    width: max-content;
    align-items: center;
    border-color: rgba(0,0,0,.12);
}

.cpdNode:first-child {
    border: 0;
}

.cpdNode:hover {
    background-color: rgba(0,0,0,.04);
}

.neighborList {
    display: flex;
    flex-flow: column nowrap;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.12);
    width: min-content;
    max-height: 240px;
    overflow-y: scroll;
}

.cpdLabel {
    padding: 4px;
    cursor: pointer;
}

.precursorsCell .cpdLabel {
    text-align: end;
}

.enzList {
    width:50%;
    flex-shrink: 1;
    padding-left: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    box-sizing: border-box;
}

.enz {
}

.rxnSides {
    width:50%;
    flex-shrink: 1;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    padding-top: 6px;
    padding-bottom: 6px;
    box-sizing: border-box;
}

.sideContents {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    justify-content: space-between;
    padding-right: 6px;
}

.sideCpds {
    padding: 0 6px;
}

.sideArrow {
    display: flex;
    flex-flow: column nowrap;
}

.vertShaft {
    width: 0;
    border-left: 2px solid #555;
    align-self: stretch;
    cursor: pointer;
}

.sideProdArrow {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}

.sideRctArrow {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
}

.rctArrowCurve {
    border-top: 2px solid #555;
    border-right: 2px solid #555;
    border-radius: 0 50px;
    min-height: 20px;
    margin-top: 7px;
    margin-right: -2px;
    padding-left: 35px;
}

.prodArrowCurve {
    border-bottom: 2px solid #555;
    border-right: 2px solid #555;
    border-radius: 0 0 50px;
    min-height: 20px;
    margin-bottom: 7px;
    margin-right: -2px;
    padding-left: 35px;
}

.triangleLeft {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 12px solid #555;
    border-bottom: 6px solid transparent;
    margin-bottom: 2px;
    margin-top: 2px;
}

.triangleDown {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-top: 12px solid #555;
    border-right: 6px solid transparent;
}

.triangleUp {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-bottom: 12px solid #555;
    border-right: 6px solid transparent;
}

.vertArrowHead {
    height:50%;
    flex-shrink: 1;
    margin-bottom: 6px;
    display: flex;
    flex-flow: column nowrap;
    min-height: 12px;
    cursor: pointer;
}

.vertArrowTail, .vertArrowTailRev {
    height:50%;
    flex-shrink: 1;
    margin-top: 6px;
    min-height: 12px;
    cursor: pointer;
}

.vertArrowTail > .vertShaft, .vertArrowTailRev > .vertShaft, .vertArrowHead > .vertShaft {
    height: 100%;
    align-self: center;
}

.vertArrowTailRev > .vertShaft {
    margin-left: 5px;
}

.otherRxns {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.12);
    padding-left: 4px;
}

#chooseRxnMenu {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    padding: 0;
    background-color: #fdfdfa;
}

.menuItem:hover {
    background-color: rgba(0,0,0,.04);
}

.menuItem {
    display:flex;
    flex-flow: row nowrap;
    margin: 6px;
}

.menuItemContent {
    padding-left: 2px;
}

.multiRxn, .multiRxn a {
    color: #82072f6b;
}

.unidirectional, .unidirectional a {
    color: mediumpurple;
}

.spontaneous, .spontaneous a {
    color: peru;
}

.pwyHole, .pwyHole a {
    color: skyblue;
}

.reversible, .reversible a {
    color: lightseagreen;
}

.neighborList .cpdLabel {
    color: rgb(0,0,0,.45);
}

.cpdControls a:hover, .otherRxns a:hover, .closeIcon a:hover {
    text-decoration: none;
}
    
#colorKey td {
    vertical-align: top;
}

.optionLabel {
    padding-left: 4px;
}

#colorKey table {
    border-collapse: collapse;
}

.cpdStructure p {
    height: 0;
    margin: 0;
}

.savedPath {
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,.12);
    padding: 3px;
    margin-bottom: 2px;
    margin-top: 2px;
    width: fit-content;
    background-color: #fdfdfd;
    cursor: pointer;
    text-align: left;
}

.savedPathContainer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
    align-items: center;
}

.buttons {
    padding-top: 6px;
}

.vertArrowTail > .closeIcon {
    margin-top: -6px;
}

.vertArrowHead > .closeIcon {
    margin-top: 6px;
    margin-bottom: -6px;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
}

div.rxnInPopup {
    padding-top: 12px;
}

.pwy a {
    color: #888888;
}

button, .cpdControls i, .otherRxns i, .closeIcon i, #optionsDiv i, .savedPathContainer i {
    cursor: pointer;
}

.loopMiddle {
    border-right: 2px solid #555;
    border-left: 2px solid transparent;
    margin-top: -2px;
}

.loopBottom {
    border-bottom: 2px solid #555;
    padding-bottom: 30px;
}

.loopTop {
    border-bottom: 2px solid #555;
}

.loopTop0 {
    margin-left: -4px;
}

#optionsDiv label {
    display: block;
}