/*
 * sv.shell.css
 * Styles the shell module presentation.
 *
 */

/* Table of Content
   ==================================================
   #Text Loading
   #Navigation
   #Tables
   #Tooltips */

/* #Text Loading Style
   ================================================== */

.panel-fade-out {
   -webkit-animation: fadeout .5s;
   -moz-animation: fadeout .5s; 
   -ms-animation: fadeout .5s;
   animation: fadeout .5s;
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.main-page-display {
   -webkit-animation: fadein 1s;
   -moz-animation: fadein 1s; 
   -ms-animation: fadein 1s;
   animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* #Navigation
   ================================================== */

.breadcrumbs {
    padding: 10px 0 0 0;
}

.breadcrumbs ul {
    margin: 0;
    padding: 0;
}

.breadcrumbs li {
    display: inline-block;
    list-style-type: none;
}

.breadcrumbs li::after {
    content: " / ";
    margin: 0 .5em;
}

.breadcrumbs li:last-child::after {
    content: " ";
    margin: 0;
}

.nav.nav-tabs {
    margin-bottom: 15px;
    border-bottom-color: #eee;
}

.nav-tabs>li>a {
    font-size: larger;
}

.nav-tabs>li>a {
    background-color: #eee;
}

.nav>li>a:focus, .nav>li>a:hover {
    background-color: #bbb;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    font-weight: bold;
    color: #000;
    border-color: #bbb;
    border-bottom-color: transparent;
}

.addgene-nav-list {
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
}

.addgene-nav-list>li {
    padding: 5px 0 5px 5px;
    display: inline-block;
}

.addgene-nav-list>li::after {
    content: ' | ';
    margin: 0 5px;
}

.addgene-nav-list>li:first-child::after, .addgene-nav-list>li:last-child::after {
    content: '';
    margin: 0;
}

.bold-style {
    font-weight: bold;
}

/* #Tables
   ================================================== */

.table>thead {
    background-color: #0483c8;
    color: white;
    font-weight: normal;
}

table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: white;
    opacity: 1;
}

.table>tbody>tr>td, .table>thead>tr>th {
    border: 1px solid #ccc;
}

table.dataTable {
    border-collapse: collapse !important;
}

.tab-content div > div > div > div:first-child { padding-bottom: 5px; }

dl {
    margin-top: 0;
    margin-bottom: 20px;
}

.dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-horizontal dd {
    margin-left: 180px;
}

.seq-file-list {
    margin-top: 20px;
    margin-bottom: 15px;
}

.seq-file-list li:first-child {
    font-size: 16px;
}

/* #Tooltips
   ================================================== */

.sg-tooltip {
    position: absolute;
    left: 0px;
    top: 0px;

    font: 11px Verdana, sans-serif !important;
    text-align: left;
    vertical-align: top;

    background-color:#FAFEC6;
    border:1px solid #A6A6A6;
    box-shadow: 0 0 10px 2px #AAA;

    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;

    margin-right: auto;
    margin-left: auto;

    max-width: 30%;
}

.sg-tooltip td:first-child, .sg-aa-summary {
    padding: 5px;
}

.sg-tooltip-summary {
    padding-top: 5px;
    padding-right: 2px;
    padding-bottom: 0px;
    padding-left: 2px;

    margin-bottom: 0px;
}

.sg-tooltip-recog {
    padding-bottom: 0px;

    margin-bottom: 0px;
}

.sg-tooltip-details {
    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;

    margin-top: 0px;
}

.sg-tooltip-details hr {
    padding-top: 0px;

    margin-top: 0px;
    margin-bottom: 4px;
}

.sg-tooltip-table svg {
    padding-right: 2px;
    padding-bottom: 0px;
    padding-left: 2px;

    margin-bottom: 0px;
}

.sg-map rect, .sg-map .sg-feature, 
.sg-map .sg-ruler, .sg-map .sg-orf,
.sg-sequence .sg-enzyme, .sg-sequence .sg-feature,
.sg-sequence .sg-primer, .sg-sequence .sg-ruler,
.sg-sequence .sg-background-orfs text {
    cursor: pointer;
}

#sv-sequence .sv-selector rect {
    cursor: crosshair;
}

/* Set cursor pointer for SnapGene branded logo */
.sg-map #branding_svg rect {
    cursor: pointer;
}

/* Panels
   ================================================== */

/* Loading text placement */
#sv-map-svg h3 {
    text-align: center;
}

#sv-map {
    position: relative;
}

#sv-map .sv-seq-panel-parent, #sv-sequence .sv-seq-panel-parent {
    display: none;
    position: absolute;
    width: 30%;
    z-index: 1;
}

#sv-map .btn-help, #sv-sequence .btn-help {
    box-shadow: 0 0 10px #ddd;
    padding-left: 8px;
}

#sv-map .glyphicon-info-sign, #sv-sequence .glyphicon-info-sign {
    font-size: 14px; color: #0483c8; padding: 2px;
}

.sv-seq-panel textarea {
    resize: vertical;
    cursor: copy!important;
}

/* Enzyme Tab 
   ================================================== */
#sv-enzymes-table .glyphicon-asterisk:before {
    color: #808080;
}

#sv-enzymes > div {
    margin-top: 35px;
}

#filter-row {
    display: flex;
    flex-direction: column;
}

/* BLAST Guide
   ================================================== */
#sv-blast ul li form {
    margin-bottom: 40px;
}

#sv-blast ul li form label {
    margin-top: 10px;
}

#sv-blast textarea {
    width: 830px; 
    height: 200px; 
    resize: vertical;
}

.blast-label {
    font-weight: normal; 
    width: 525px;
}

/* Analyzer Guide
   ================================================== */
.seq-analyzer-guide dt {
    font-size: medium;
    width: 100px;
}

.seq-analyzer-guide dd {
    margin-left: 120px;
    margin-bottom: 10px;
    text-align: justify;
    width: 75%;
}