#main-content-area {
    background: #f0f0f0;
}

/* forms */
form label {
    display: inline;
    vertical-align: middle;
}

form select, form input[type="number"]{
    display: inline;
    margin: 10px;
    max-width: 250px;
}
form#input-pdb-residue-form select, form input[type="number"]{
    margin: 0;
    max-width: 140px;
}

form p input[type="checkbox"]
input.button-toggle {
    margin:0;
    vertical-align: middle;
}

form p {
    margin-bottom: 0px;
    vertical-align: middle;
}

form p input[type="text"], form p textarea {
    max-width: 600px;
    display: inline;
    margin: 5px;
    vertical-align: middle;
}

form#edit-reaction input, form#edit-reaction select {
    max-width: 170px;
    display: inline;
    margin: 5px;
    vertical-align: middle;
}

form p select {
    margin: 5px;
}

form select[multiple] {
	padding: 0;

}

/* stats */

.stats-description {
  transform: translateY(50%);
}

/* form table */
form table {
    width:100%;
}

form table tbody tr >*,
form table tbody {
    background-color: transparent;
}

form table.small td > * {
    max-width: 250px;
}

form table.login td > * {
    max-width: 200px !important;
}

form table td input[type="text"],
form table td select,
form table td input[type="checkbox"],
input.button-toggle,
form table td input[type="file"],
form table td textarea,
form table th
{
    margin: 0;
    vertical-align: middle;
    /*width: auto;*/
    /*max-width:50rem;*/
}
/*
form table td select[multiple] {
    height: 12rem;
}
*/
/*form table td textarea[rows] {*/
    /*height: 15rem;*/
    /*width: 40rem;*/
/*}*/

form select {
    min-height: 3rem;
}

form .button {
    margin-bottom: 0;
}

/* tables */
table th {
    background-color: #d8d8d8;
}

table tbody tr:nth-child(2n) {
        background-color: #e6e6e6;
        }

table .code, table .code.orderable  {
    background-color: unset;
    border: unset;
    padding: 0.5rem 0.625rem 0.625rem;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
}

table th.code.orderable {
    background-color: #d8d8d8;
    font-weight: bold;
}

/* */

.edit-step-table-row {
    padding: 10px;
    background-color: #f1f1f1;
    margin: 20px;
}

.edit-step-table-row h4 {
    color: black;
    text-align: center;
}

.align-middle {
    vertical-align:middle;
}


/* marvin box */

iframe.marvin-box {
    height: 800px;
    width: 780px;
    border: 1px solid darkgray;
}

.marvin-box-reaction#sketch {
    height:400px;
    width: 1170px;
    border:1px solid darkgray;
}

.marvin-box-reactant#sketch {
    height: 400px;
    width: 100%;
    border:1px solid darkgray;
}

.marvin-box-input-pdb {
    height: 600px;
    width: 100%;
    border:1px solid darkgray;
}

/* home */

#home-description {
    text-align: justify;
    margin: 1.5rem 1rem 1rem 1rem;
}

#example-notice {
    text-align:right;
    color:grey;
}


p ul li ol dd dl dt {
    padding:0 2rem 0 2rem;

}

dl dt {
    font-weight: bold;
}

dl dd {
    padding-left: 2rem;
}

#featured-entry {
  padding: 0.5rem 1rem 0.5rem 1rem;
  background-color: white;
  border-radius: 20px;
}

#featured-entry img#feature-image {
    float:right;
    width: 20rem;
    border: 2px solid lightgrey;
    border-radius: 2rem;
    padding: 1rem;
    margin: 1rem;
}

.inline {
    display:inline-block;
}

#home-side {
    text-align: justify;
}

#home-side h3 {
    margin-bottom: 0;
}

#home-side p {
    font-size:0.9rem;
}

#home-side ul {
    margin: 0;
}

#home-side ul li {
    list-style-type: none;
    float: center;
    text-align: center;
}

#home-side a, a.button-link, a.button-link-selected {
    color: black;
    display:block;
    line-height:2.5;
    outline: none;
    margin: 0.3rem;
    margin-left:1rem;
    background: white;
    width: 14rem;
    border: 1px solid lightgrey;
    border-radius: 10px;
}

a.button-link.w10, a.button-link-selected.w10 {
    width: 8rem;
    display: inline-block;

}

#home-side a:link, a.button-link:link {
    text-decoration: none;
}

#home-side a:hover, a.button-link:hover, a.button-link-selected {
    background: #006b70;
    color: white;
}

a.stats-residue-choice {
    display: inline-grid;
    width: 25rem;
}

a.stats-role-button {
    display: inline-grid;
    width: 12rem;
}

/* stats */

#role_sunburst .arc-container:last-child text {
    font-size:20px;

}

#role_sunburst svg text {
    font-size:16px;

}

#roles_buttons {
    position: relative;
    top:-550px;
    left: 300px;
}

#role_sunburst svg {
    display:block;
    margin:auto;
}

/* others */
.marvin-box, .marvin-box-reaction {
    margin-top: 5px;
}


.errorlist {
  color:red;
}

.error textarea, .error select {
  border:2px red solid;
}

.error input, .error select {
  border:2px red solid;
}


/* search body */
#search-body {
    margin:2rem 2rem 1rem 2rem;
}

#search-body #search-button {
    height: 2.5rem;
    margin: 2.5 rem;
}

#search-body #body-query {
    margin-bottom: 1rem;
}


/* search vectors */

#search-vectors li,
#exact-searches li,
li.li-toggle {
    display: inline;
    list-style-type: none;
    float:left;
    margin: 0.5rem;
}

#search-vectors li label,
#exact-searches li label,
label.label-toggle {
    border:2px solid lightgrey;
    border-radius:8px;
    background: white;
    padding:0.2rem 0.4rem 0.2rem 0.4rem;
    margin:0;
    cursor: pointer;
}

#search-vectors input[type=checkbox],
#exact-searches input[type=checkbox],
input.button-toggle {
    display:None;
}

#search-vectors input[type=checkbox]:checked ~ label,
#exact-searches input[type=checkbox]:checked ~ label,
input:checked ~ label.label-toggle
{
    border-color: #007c82;
    background:#007c82;
    color:white;
}


/* misc */
#edit-mechanism form textarea {
    margin: auto;
    width: 100%;

}

#edit-mechanism form p {
    margin: 0.7rem 0 0.7rem 0;
}

hr {
    margin: 1rem;
    color: darkgrey;
}


/* entry page */

div#entry-heading {
    margin-top: 1.5rem;
}

div#entry-description {
    margin: 1rem 0 1rem 0rem;
}

div.hide-head table th {
    display: none;
}


#litemol-div {
    height: 500px;
    position: relative;
}


#litemol-inner {
    height: 500px;
    margin: 0 25px 0 25px;
    border: black solid 1px;
    /*width: 650px;*/
    position: relative;
}

#litemol-div #show-structure {
    line-height: 400px;
    position: relative;
    background: transparent;
    color: black;
}


.litemol-buttons {
    margin: 10px;
}

#litemol-div-from-pdb {
    height: 600px;
    position: relative;
}

#litemol-div-from-pdb #litemol-inner {
    height: 550px;
    margin: 0;
    border: black solid 1px;
    /*width: 650px;*/
    position: relative;
}

/** reaction **/

#reaction-boxes, #mechanism-box {
    padding:10px 40px 10px 40px;
    margin: 10px;
    background-color: white;
    border-radius:1rem;
}

#reaction-boxes .compound-box, #reaction-boxes .symbol-box {
    text-align:center;
    padding:0;
}

#reaction-boxes .symbol-box .arrow {
    font-size: 4rem;
}

#reaction-boxes .plus {
    font-size: 2rem;
    padding: 1.5rem;
}

#reaction-boxes .arrow, #reaction-boxes .plus{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

#reaction-boxes .compound-png {
    display: table-cell;
    vertical-align: middle;
    width: inherit;
}

#reaction-boxes .symbol-box{
    width: 4rem;
    padding:0;
    text-align: center;
}

#reaction-boxes .compound-png img {
  max-height: 10rem;
}

#reaction-boxes .compound-png:hover img {
  background-color: white;
  border: grey solid 1px;
  border-radius: 1rem;
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(2);
  max-height:100%;
}

#reaction-links {
    margin-top:1.5rem;

}

/* mechanism box */
#mechanism-box .step_image {
    width:500px;
}


/* edit page */


/* icon and image links */

a.icon-link, a.img {
  border: none;
}

img.inline-icon.small {
  height: 0.5rem;
}

a.img:focus, a.img {
  outline: none;
  text-decoration: none;
}

a.img {
  border: none;
}


img.inline-icon {
    height: 1.5rem;
}

/* lightbox  */
.lb-cancel, .lb-prev, .lb-next, .lb-prev:hover, .lb-next:hover, .lb-close:hover {
  border:none;
}

/* browse page */
.res-buttons input {
    margin: 0 0 0.2rem 0;
    padding: 0.2rem;
}

.browse-chart {
    margin: -1rem 1rem -1rem 1rem;
}

#browse-button, #clear-button {
    margin-bottom:0;
}


/* documentation */
.documentation img {
    padding: 2rem 1rem 2rem 1rem;
    border: 2px solix black;

}

/* foundation */
.button.tertiary {
  background: transparent;
  border: solid black 1px;
  color: black;
}

h3 .button {
  margin: 0px;
}

table a i.icon {
  border-bottom-style: none;
}

table thead th.orderable:after {
  content: "⇳";
}

a.external-link:after {
    content:' x';
    font-family: 'EBI-Generic';
}

.button.save:before {
    content:'S ';
    font-family: 'EBI-Functional';
}

.button.remove:before {
    content:'d ';
    font-family: 'EBI-Functional';
}

a.search:after {
    content:' 1';
    font-family: 'EBI-Functional';
    font-size: 85%;
}

.button.add:before {
    content:'+ ';
    font-family: 'EBI-Functional';
}

button.button.search:before {
    content:'1 ';
    font-family: 'EBI-Functional';
}

.button.go-back:before {
    content:'< ';
    font-family: 'EBI-Functional';
}

.button.next:after {
    content:' >';
    font-family: 'EBI-Functional';
}

a.button.edit:before {
    content:'e ';
    font-family: 'EBI-Functional';
}

form.inline.big input {
    max-width: 400px;
    display: inline;
    margin: 5px;
}

.button.first:before {
    content:'[ ';
    font-family: 'EBI-Functional';
}

.button.last:after {
    content:' ]';
    font-family: 'EBI-Functional';
}

.button.down:before {
    content:'8 ';
    font-family: 'EBI-Functional';
}

.button.download:after {
    content:' =';
    font-family: 'EBI-Functional';
}
.button.download {
    top:10%;
    position:relative;
}

/*
div.table-container-overflow {
    height: 800px;
}
*/


table.homologues thead tr th:nth-of-type(-n+2),
table.homologues tbody tr td:nth-of-type(-n+2) {
    width: 180px;
    text-align: center;
}


/*
table.overflow {
    display: flex;
    flex-flow: column;
    height: 93%;
    width: 100%;
}
table.overflow thead {
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table.overflow tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table.overflow tbody tr {
    width: 100%;
}
table.overflow thead, table.overflow tbody tr {
    display: table;
    table-layout: fixed;
}
*/
.res-box.button {
    width:50px;
    padding:5px;
    font-size: 10px;
    font-weight:bold;
    margin: 0;
}

.res-box.button.success, .res-legend.success.button {
    background: rgba(24, 108, 55, 1);
}

.nvd3 text {
    font: normal 12px sans-serif !important;
}

/* scatter chart */

.nvd3.nv-scatterChart .nv-groups .nv-point {
	stroke-opacity: 0.8 !important;
    stroke-width: 1px;
    stroke: black;
}

.nvd3.nv-scatterChart .nv-groups .nv-point.hover {
    stroke-width: 2px !important;
}

.nvd3.nv-scatterChart .nv-y .nv-axis .tick.zero line {
    stroke: black;
    stroke-width: 1px;
}

.nvd3.nv-scatterChart .nv-y .nv-axis .tick.zero text {
    opacity: 0;
}

/* discrete bar */

.nvd3 .nv-discretebar .nv-groups rect.discreteBar {
    stroke: black;
    stroke-opacity: 1;
    stroke-width: 1px;
}

.nvd3 .nv-discretebar .nv-groups rect.discreteBar:hover {
    stroke-width: 2px;
}


.d3-tip {
    text-align: center;
    background: lightgrey;
    padding: 10px;
    border-radius: 10px;
}

#homologues-warning {
  margin: 0 2rem 0 2rem;
  width: auto;
}

.other-enzyme-names{
    margin: 1rem 0 1rem 0;
}


.warning-box {
    background-color:peachpuff; 
    font-size: 1.1rem;
    padding: 0.5rem;
}
/* cytoscape mechanism comparison */
#cy-mech-comparison {
  height: 600px;
  display: block;
  border: black solid 1px;
}

/* mechanism comparison captions */
.caption-dot {
  height: 12px;
  width: 12px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.ec1 { background-color: #2aa026 }
.ec2 { background-color: #d72a23 }
.ec3 { background-color: #bcbd22 }
.ec4 { background-color: #1d75b5 }
.ec5 { background-color: #ff7f00 }
.ec6 { background-color: #b62ba1 }
.ec7 { background-color: #8b4513 }

.same-ec { background-color: #0033cc }
.same-ec-subsubclass { background-color: #cc33ff }
.same-ec-class { background-color: #ff9900 }
.other-ec-class { background-color: #ff0000 }

.same-cath { background-color: #0033cc}
.other-cath { background-color: #ff0000}

/* cytoscape*/
#cy {
  height: 450px;
  display: block;
  border: black solid 1px;
}

#network-pictures object {
  height:500px;
}

.rule-panel > a {
    text-decoration: none !important;
    border:0px !important;
    outline:none;
    outline-width:0px;
}

.rule-panel {
    padding-bottom: 2rem;
}

.rule-panel svg {
    width: 100%;
    height: 100%;
}

.rule-panel svg rect {
	fill: #f5f5f5 !important;
}

.rule-arrow {
  font-size: 4rem;
  padding-top: 80px;
}

#mech-rule-arrow-network {
  font-size: 3rem;
  padding-top: 45px;
}

#rule-arrow-network {
  font-size: 3rem;
  padding-top: 45px;
  display: none;
}

#step-arrow-network {
  font-size: 3rem;
  padding-top: 250px;
  display: none;
}

#network-deleted-elements {
  height: auto;
  background-image: none;
}


#pdb-id-form {
  display: flex;
  margin: 0.2rem;
}

#pdb-id-form input {
  width: 6rem;
}

#pdb-id-form > * {
  margin: 0.2rem 0.5rem;
}

svg {
  width=100%;
}

.arrow_hover {
  outline: solid #306f6f thin !important;
}

// mech comparison lines
.lineSVG {
  position: absolute;
}