ul.mylist li {
    display: inline;
}

ul.mylist {
    text-align: center;
    margin: 0 0 1.5em 0;
}

div.emptycontainer {
    height: 500px;
}

table.display tbody tr:nth-child(even):hover td{
    background-color: #D3E2F3 !important;
}

table.display tbody tr:nth-child(odd):hover td {
    background-color: #D3E2F3 !important;
}

table.display td {
    font-size : 16px;
    border: none;
}

table#l_table {
    border: none;
}

table#l_table thead th {
    border: none;
}

table#l_table thead th.myheader {
    border-bottom: 1px solid;
}

table#l_table tfoot th {
    border: none;
}

table#l_table tfoot th.myheader {
    border-top: 1px solid;
}

table#l_table_GeneRelationship {
    border: none;
}

th.myheader {
    text-align: center;
    vertical-align: middle;
}

#invisible {
/*    text-decoration: line-through;
*/    color: #A0A0A0;
}

#invisible:hover {
    color: #D7202B;
}

/* Stats page charts */

div#texttopbar {
    text-align  : center;
    width       : 75%;
    margin      : 0 auto;
}

#myChart {
    width       : 50%;
    height      : 500px;
    font-size   : 14px;
}

#myPie {
    width       : 100%;
    height      : 620px;
    font-size   : 14px;
}

#donut_AllelicState {
    width       : 100%;
    height      : 500px;
}

#donut_OligogenicEffect {
    width       : 100%;
    height      : 500px;
}

#donut_GeneRelationship {
    width       : 100%;
    height      : 600px;
}

#table_GeneRelationship {
    width       : 100%;
    height      : 350px;
}

#myChart2 {
    width       : 100%;
    height      : 1000px;
    font-size   : 14px;
}

/* Venn diagram */

#venn {
    width: 50%;
    height: 500px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    position:relative;
}

.outer {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
}

#fam {
  top: 50px;
  left: 10%;
  /*background-color: #245A88;*/
  background: rgb(36,90,136);
  background: rgba(36,90,136,0.7);
}

#fun {
    top: 50px;
    left: 40%;
    /*background-color: #E13737;*/
    background: rgb(225,55,55);
    background: rgba(225,55,55,0.7);
}

#rel {
    top: 180px;
    left: 25%;
    /*background-color: #F0E43C;*/
    background: rgb(240,228,60);
    background: rgba(240,228,60,0.7);
}

/* Detail page CSS */

div{
    border-radius: 10px;
}

.detailHeader, .detailBody {
    width: 70%;
    margin: 0px auto;
}

.detailPictureContainer {
    float: left;
    width: 40%;
}

.detailDcContainer {
    float: left;
    width: 60%;
}

#disease{
    background-color: #245a88;
    color: white;
    /* width: 550px; */
    width: 100%;
    text-align: center;
    /* margin: 0px auto 0px auto; */
    padding: 10px 0px;
}

#pair{
    display: table;
    background-color: #245a88;
    color: white;
    width: 90%;
    height: 160px;
    text-align: center;
    margin: 0px auto;
    padding: 20px;
}

#gene{
    width: 40%;
    display: table-cell;
    background-color: #e13737;
    color: white;
    text-align: center;
    margin: 0px auto;
    vertical-align: middle;
}

div.circleBase {
    border-radius: 50%;
    width: 75px;
    heigh: 75px;
    line-height: 75px;
    background: #f0e43c;
    color: #245a88;
    margin: 0px auto;
    vertical-align: middle;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div.circleBase2 {
    border-radius: 50%;
    width: 75px;
    heigh: 75px;
    line-height: 75px;
    background: #f0e43c;
    color: #245a88;
    vertical-align: middle;
    display: inline-block;
    margin: auto 5px auto 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div.circleBox {
    width: 100%;
    margin: 20px auto;
}

div.midline {
    display: table-cell;
    vertical-align: middle;
    margin: 0px auto;
}

div.line {
    height: 5px;
    background: white;
}

#pair_id {
    background-color: transparent;
    text-align: center;
    color:white;
}

div.box {
    background-color: #245a88;
    color: white;
    font-size: 15px;
    font-weight: 700;
    margin: 20px auto 4px auto;
    text-align: center;
    padding: 15px;
}

div.box a {
    color: white;
}

div.box a:hover {
    text-decoration: underline;
}

div.description {
    width: 75%;
    margin: 20px auto 20px auto;
    padding: 15px;
}

table.single {
    width: 100%;
    border-spacing: 0px;
    font-size: 15px;
    border: none;
}

table.single td {
    border: none;
    border-width: 0 0 0 0;
    padding: 5px 5px 5px 10px;
}

td.label {
    font-weight: bold;
    width: 20%;
}

table.single td.label {
    width: 30%;
}

table.single th {
    border: none;
    border-width: 0 0 0 0;
}

table.double {
    width: 100%;
    /* border-spacing: 5px; */
    /* margin: auto auto 30px auto; */
    font-size: 15px;
    border: none;
}

table.double td {
    border: none;
    border-width: 0 0 0 0;
}

table.double th {
    border: none;
    border-width: 0 0 0 0;
}

thead.gene th.geneHeader,
thead.gene th.geneHeaderSpace {
    color: white;
    text-align:center;
    border-radius: 10px;
    border: none;
    border-width: 0 0 0 0;
    padding: 15px 0px;
}

thead.gene th.geneHeader {
    background-color:#e13737;
    width: 50%;
}

thead.gene th.geneHeader a {
    color: white;
}

thead.gene th.geneHeader a:hover {
    text-decoration: underline;
}

thead.variant th:nth-of-type(odd){
    background-color:#f0e43c;
    color:#245a88;
    padding: 15px;
    text-align:center;
    border-radius: 10px;
    border: none;
    border-width: 0 0 0 0;
}

thead.variant th.empty:nth-of-type(odd){
    background-color:transparent;
    color:transparent;
    text-align:center;
    padding: 15px;
    border-radius: 10px;
    border: none;
    border-width: 0 0 0 0;
}

thead.variant a {
    color:#245a88;
}

thead.variant a:hover {
    text-decoration: underline;
}

#p5-viz-hook {
    text-align: center;
}

#singlecolumnfilter {
    text-align: center;
}

.sColumn {
    width: 200px;
    margin: 0px 5px;
}

.externalLink {
    background: url('/wp-content/plugins/dida_plugin/link-external.svg');
    background-size: 10px 13px;
    background-repeat: no-repeat;
    padding: 0 0 0 20px;
    background-position: center left;
}

.variantSubtable {
    padding: 0px;
    border: 0px;
    margin: 0px;
}

.variantSubtable th.vsHeader {
    padding-bottom: 0px;
    text-align: center;
    width: 15%;
}

.variantSubtable td.vsValue {
    padding-top: 0px;
    text-align: center;
    width: 17%;
}

.variantSubtable th.vsTitle {
    padding-left: 0px;
    text-aling:left;
}

/*
Overriding CSS hack. Otherwise the homepage would have been divided
3/4 for the main content and only 1/4 for the sidebar. I wanted these
proportions different. Remove the lines below to restore the original
correct behavior of the theme.

I want this effect to be present only in the homepage. This is the reason
for which the 'div.grid-75' is prepended with 'body.home'. Otherwise all
page would be affected.
*/
body.home #content {
    margin: 0 auto;
    width: 75%;
}

body.home div.grid-75 {
    width: 50%;
}

body.home div.grid-25 {
    width: 50%;
}

body.home #content .widget {
    padding: 0px;
}

body.home #content table {
    border: 0px;
}

body.home #content table td {
    border: 0px;
    padding: 0px 8px;
    text-align: center;
    vertical-align: top;
    width: 50%;
}

body.home #content table td h2 {
    border-bottom: 1px #000000 solid;
}

body.home #commenthist blockquote {
    border: 0px;
    font-size: 0.9em;
    padding: 0px 0px 0px 10px;
}

body.home #myChart {
    max-height: 344px;
}

body.home #myChart tspan {
    font-size: 0.8em;
}

/*h4.widget-title {
    font-weight: bold;
}*/

.titleTable {
    border: 0px;
    margin: 0 auto;
    width: 60%;
}

.titleTable td {
    border: 0px;
    padding: 0px;
}

.titleTable .titleSubtitle {
    text-align: center;
    width: 40%;
}

.titleTable .titleDescription {
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
    width: 60%;
}

.downloadlink {
    float: right;
    border: 0px;
    padding: 5px;
    background-color: #245a88;
    color: white;
}

.downloadlink a,
.downloadlink a:active,
.downloadlink a:focus,
.downloadlink a:visited {
    color: white;
}

.downloadlink a:hover {
    color: white;
    text-decoration: underline;
}

.aboutPage {
    margin: 0px auto;
    width: 50%;
}