/*!
 * ResBio CSS
 */

body {
    font-family: "Lato", sans-serif;
//    color: #000000;
    font-size: 0.875rem;
    line-height:  normal;
}

thead {
    background-color: #6699cc;
    color: #FFFFFF;
}

dl {
    margin-bottom: 0;
    padding-bottom: 30px;
}

caption {
    font-family: "Oswald", sans-serif;
    font-size: 110%;
    color: #383838;
}

.mb0 {
    margin-bottom: 0;
}

.mb8 {
    margin-bottom: 8px;
}

.mb16 {
    margin-bottom: 16px;
}

.mt0 {
    margin-top: 0;
}

.mt8 {
    margin-top: 8px;
}

.mt16 {
    margin-top: 16px;
}

.panel-default > .panel-heading {
    background-color: #003366;
    border-color: #003366;
    color: #FFFFFF;
}

.panel-default {
    border-color: #003366;
}

.login-card {
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #00458b;
    -webkit-box-shadow: 10px 10px 36px -12px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 36px -12px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 36px -12px rgba(0, 0, 0, 0.75);
}

.page-header {
    margin: 15px 0 20px
}


.modal-header {
    background-color: #6699cc;
    color: #fff;
}

.modal-dialog.wide {
    width: 90%;
}

.modal-dialog.wide table.dataTable {
    width: 100% !important;


.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #ececec;
}

.table-rotated {
    padding-right: 20px;
    overflow: hidden;
}

.table-rotated#matrix_table {
    overflow: visible;
}


th.rotate {
    height: 100px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    position: relative;
    vertical-align: bottom;
    padding: 0;
    font-size: 12px;
    line-height: 0.8;
    padding-right: 0 !important;
}

th.rotate > div {
    position: relative;
    top: 0px;
    left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
    height: 100%;
    -ms-transform: skew(-45deg, 0deg);
    -moz-transform: skew(-45deg, 0deg);
    -webkit-transform: skew(-45deg, 0deg);
    -o-transform: skew(-45deg, 0deg);
    transform: skew(-45deg, 0deg);
    overflow: hidden;
    border-right: 1px solid grey;
}

th.rotate:last-of-type > div {
    border-right: none;
}

th.rotate > div > span {
    -ms-transform: skew(45deg, 0deg) rotate(315deg);
    -moz-transform: skew(45deg, 0deg) rotate(315deg);
    -webkit-transform: skew(45deg, 0deg) rotate(315deg);
    -o-transform: skew(45deg, 0deg) rotate(315deg);
    transform: skew(45deg, 0deg) rotate(315deg);
    position: absolute;
    bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
    left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
    display: inline-block;
    width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
    text-align: left;
}

.table.dataTable>thead>tr>th:not(.rotate) {
    vertical-align: top;
}

.table-rotated thead {
    background-color: #fff;
    color: #000;
}

.variantTable thead {
    background-color: #4a4a4a;
    color: #fff;
    padding: 0.4rem;
}

.variantTable th {
    font-weight: normal;
}

.table td, .table th {
    padding: 0.4rem;
}
.fa-check-circle {
    color: #21a421;
}

.fa-exclamation-circle {
    color: #478ba7;
}

.fa-chain {
    color: #478ba7;
}

.fa-plus-circle {
    color: #478ba7;
}

.btn-info:hover,
.btn-info:focus,
.btn-info.active,
.btn-info:active {
    border-color: #5d6574;
}

.btn-warning {
    background-color: #ffba00;
}

.bg-warning {
    background-color: #ffff00;
}

.graphButton {
    margin-top: 2px;
}

.variantTableCell {
 //   font-size: 85%;
}

table.dataTable thead .sorting::after {
  //  color: rgba(200, 200, 200, 1);
}

#tLength {
//    float: left;
//    width: 20%;
}

#tPager {
 //   float: left;
//    width: 60%;
}

#tPager .dataTables_paginate {
//    text-align: center;
}

#tFilter {
//    float: left;
//    width: 20%;
}

.bottom {
    border-top: 2px solid #4a4a4a;
    padding-top: 10px;
}

.bottom .dataTables_info {
//    float: left;
//    width: 50%;
}

.bottom .dataTables_paginate {
//    float: left;
//    width: 50%;
}

.x_axis {
    font-size: 8px;
}

.x2axis-stroked {
    font-size: 11px;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 5px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    font-weight: 600;
}

.x2axis-rect {
    stroke: #000;
    stroke-width: 1px;
    stroke-opacity: 1;
}

.x2axis-label {
    font-size: 11px;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 3px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    font-weight: 400;
}

.lightGrayGrad {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left, #ffffff 0%, #ededed 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ffffff 0%, #ededed 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ffffff 0%, #dbdbdb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=1); /* IE6-9 */
}

#dataTables-onTargetTable th, #dataTables-onTargetTable td {
    text-align: right;
}

.calcTable {
    border: 1px solid #dfdfdf;
    border-radius: 15px;
}

.calcTable thead {
    border-radius: 15px;
}

.calcR {
    font-weight: bold;
    text-align: right;
    border-top: 2px solid #000;
}

.capTop {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.8);
}

.smallCapTop {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    line-height: 6px;
    text-align: right;
    font-weight: bold;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.8);
    top: .15em;
}

.capBackground {
    background-color: #f3f3f3;
    text-align: center;
    color: #000;
    font-weight: bold;
}

.resBioYellow {
    background-color: #ffe402;
    color: #000;
    text-align: center;
}

.resBioRed {
    background-color: #ff0202;
    color: #000;
    text-align: center;
}

.resBioPurple {
    background-color: #652de4;
    color: #fff;
    text-align: center;
}

.resBioWhite {
    background-color: #fff;
    color: #000;
    text-align: center;
}

.resBioBlue {
    background-color: #376aab;
    color: #fff;
    text-align: center;
}

.red {
    color: #dc143c;
}

.orange {
    color: #ffa500;
}

.footnote {
    text-align: center;
    color: #aeaeae;
}

.popover {
    background-color: #fff;
    -webkit-box-shadow: 10px 10px 36px -12px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 36px -12px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 36px -12px rgba(0, 0, 0, 0.75);
}

.ar {
    text-align: right;
}

.copyright {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: #fff;
}

.box {
    font: 12px sans-serif;
}

.box line,
.box rect,
.box circle {
    fill: #98abc5;
    stroke: #000;
    stroke-width: 1px;
}

.box .center {
    stroke-dasharray: 3, 3;
}

.box line.median {
    stroke: #fff;
}

.snvHit {
    background-color: #ffe402;
}

.radioGeneDiv {
    margin-bottom: 0.3em;
}

.runDateTime {
    font-family: "Oswald", sans-serif;
    font-weight: 100;
}

.badge {
    background-color: #376aab;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

.well-inset {
    background: white;
}

.alert-popup.alert {
    border-width: thin;
    border-color: black;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 20px 50px 20px 50px;
    z-index: 10000;
}

div.dataTables_filter label {
    padding-right: 10px;
}

table.dataTable tr td.reorder {
    position: relative;
    text-align: right;
    padding-right: 45px;
}

table.dataTable td.reorder:after {
    content: '\f0c9';
    font-family: fontawesome;
    color: #666;
    right: 20px;
    position: absolute;
}

.fixed-footer {
    position: fixed;
    bottom: 0;
    width: 110%;
    width: calc(100% + 15px);
    background-color: #090;
    color: #FFF;
    text-align: center;
    font-size: 1.5em;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    z-index: 1001; // Stick it above sidebars
}

.fixed-footer .close {
    padding-top: 5px;
}

.fixed-footer .close:hover {
    cursor: pointer;
}

.tooltip-inner {
    max-width: 300px;
}

.copy-to-clipboard:hover {
    cursor: pointer;
}

.split-button-container {
    display: flex;
}

.split-button-container .dropdown-menu li a:hover {
    cursor: pointer;
}

.dropdown-menu li a.disabled {
    color: #999999;
    cursor: not-allowed;
}

table.table thead tr th {
     white-space: nowrap;
}

.panel > .dataTables_wrapper > .row:first-of-type,
.panel > .dataTables_wrapper > .row:last-of-type {
    padding: 10px;
}

.progress.tall {
    height: 30px;
}

.progress.tall .progress-bar {
    line-height: 30px;
}

.references .reference:not(:first-child) {
    margin-top: 10px;
}

.references .reference:not(:last-child) .input-group-btn .btn-remove {
     background-color: #4a4a4a;
     border-color: #4a4a4a;
}

.text-warning {
    color: #ffc107;
}

.rejected_or_failed_reason {
    display: none;
}

.laboratory_comments {
    display: none;
}

.submit {
    display: none;
}

.btn[disabled] {
  opacity: 0.25;
}

#particles-js{ position:absolute; width: 100%; height: 100%; background-color: #fff; background: url(/img/ResBioSwirl.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 50% 50%; }

#loginParticle canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#loginParticle {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.card {
    transition: all .2s;
 //   font-family: "Oswald", sans-serif; font-weight: 400;
}

.card-body {
    padding: .25em;
}

.cardHeader, .card-title {
    text-transform: uppercase;
    font-family: "Oswald", sans-serif; font-weight: 400;
    font-size: 0.88rem;
}

.cardHeader {
    display: flex;
    align-items: center;
    border-bottom-width: 1px;
    padding: 0 0.6rem 0 0.6rem;
    height: 2rem;
    background-color: #dfdfdf;
}

table.dataTable td>closed {
    background-color: #008000;
}

table.dataTable td>open {
    background-color: #cd1c18;
}