/* colour definitions for secondary metabolite types */
.PKS { background-color: sandybrown; }

.PKS a, .PKS a:link, .PKS a:visited { color: purple; }

rect.PKS { fill: sandybrown; stroke: purple; }

.PKS.active { border-color: purple; border-width: 2px; border-style: solid; }

.PKS:hover { background-color: #f7bd8b; }

.RiPP { background-color: royalblue; }

.RiPP a, .RiPP a:link, .RiPP a:visited { color: white; }

rect.RiPP { fill: royalblue; stroke: orangered; }

.RiPP.active { border-color: orangered; border-width: 2px; border-style: solid; }

.RiPP:hover { background-color: #6988e7; }

.other { background-color: midnightblue; }

.other a, .other a:link, .other a:visited { color: lightsteelblue; }

rect.other { fill: midnightblue; stroke: orangered; }

.other.active { border-color: orangered; border-width: 2px; border-style: solid; }

.other:hover { background-color: #212196; }

.arylpolyene { background-color: peru; }

.arylpolyene a, .arylpolyene a:link, .arylpolyene a:visited { color: white; }

rect.arylpolyene { fill: peru; stroke: orangered; }

.arylpolyene.active { border-color: orangered; border-width: 2px; border-style: solid; }

.arylpolyene:hover { background-color: #d69c63; }

.resorcinol { background-color: purple; }

.resorcinol a, .resorcinol a:link, .resorcinol a:visited { color: white; }

rect.resorcinol { fill: purple; stroke: orangered; }

.resorcinol.active { border-color: orangered; border-width: 2px; border-style: solid; }

.resorcinol:hover { background-color: #ae00ae; }

.ladderane { background-color: purple; }

.ladderane a, .ladderane a:link, .ladderane a:visited { color: white; }

rect.ladderane { fill: purple; stroke: orangered; }

.ladderane.active { border-color: orangered; border-width: 2px; border-style: solid; }

.ladderane:hover { background-color: #ae00ae; }

.PUFA { background-color: purple; }

.PUFA a, .PUFA a:link, .PUFA a:visited { color: white; }

rect.PUFA { fill: purple; stroke: orangered; }

.PUFA.active { border-color: orangered; border-width: 2px; border-style: solid; }

.PUFA:hover { background-color: #ae00ae; }

.NRPS { background-color: seagreen; }

.NRPS a, .NRPS a:link, .NRPS a:visited { color: white; }

rect.NRPS { fill: seagreen; stroke: orangered; }

.NRPS.active { border-color: orangered; border-width: 2px; border-style: solid; }

.NRPS:hover { background-color: #39ad6d; }

.terpene { background-color: purple; }

.terpene a, .terpene a:link, .terpene a:visited { color: white; }

rect.terpene { fill: purple; stroke: orangered; }

.terpene.active { border-color: orangered; border-width: 2px; border-style: solid; }

.terpene:hover { background-color: #ae00ae; }

.lanthipeptide-class-i { background-color: #ffff77; }

.lanthipeptide-class-i a, .lanthipeptide-class-i a:link, .lanthipeptide-class-i a:visited { color: blue; }

rect.lanthipeptide-class-i { fill: #ffff77; stroke: blue; }

.lanthipeptide-class-i.active { border-color: blue; border-width: 2px; border-style: solid; }

.lanthipeptide-class-i:hover { background-color: #ffffa5; }

.lanthipeptide-class-ii { background-color: #ffff77; }

.lanthipeptide-class-ii a, .lanthipeptide-class-ii a:link, .lanthipeptide-class-ii a:visited { color: blue; }

rect.lanthipeptide-class-ii { fill: #ffff77; stroke: blue; }

.lanthipeptide-class-ii.active { border-color: blue; border-width: 2px; border-style: solid; }

.lanthipeptide-class-ii:hover { background-color: #ffffa5; }

.lanthipeptide-class-iii { background-color: #ffff77; }

.lanthipeptide-class-iii a, .lanthipeptide-class-iii a:link, .lanthipeptide-class-iii a:visited { color: blue; }

rect.lanthipeptide-class-iii { fill: #ffff77; stroke: blue; }

.lanthipeptide-class-iii.active { border-color: blue; border-width: 2px; border-style: solid; }

.lanthipeptide-class-iii:hover { background-color: #ffffa5; }

.lanthipeptide-class-iv { background-color: #ffff77; }

.lanthipeptide-class-iv a, .lanthipeptide-class-iv a:link, .lanthipeptide-class-iv a:visited { color: blue; }

rect.lanthipeptide-class-iv { fill: #ffff77; stroke: blue; }

.lanthipeptide-class-iv.active { border-color: blue; border-width: 2px; border-style: solid; }

.lanthipeptide-class-iv:hover { background-color: #ffffa5; }

.lanthipeptide-class-v { background-color: #ffff77; }

.lanthipeptide-class-v a, .lanthipeptide-class-v a:link, .lanthipeptide-class-v a:visited { color: blue; }

rect.lanthipeptide-class-v { fill: #ffff77; stroke: blue; }

.lanthipeptide-class-v.active { border-color: blue; border-width: 2px; border-style: solid; }

.lanthipeptide-class-v:hover { background-color: #ffffa5; }

.lipolanthine { background-color: #ffff77; }

.lipolanthine a, .lipolanthine a:link, .lipolanthine a:visited { color: blue; }

rect.lipolanthine { fill: #ffff77; stroke: blue; }

.lipolanthine.active { border-color: blue; border-width: 2px; border-style: solid; }

.lipolanthine:hover { background-color: #ffffa5; }

.thiopeptide { background-color: gold; }

.thiopeptide a, .thiopeptide a:link, .thiopeptide a:visited { color: black; }

rect.thiopeptide { fill: gold; stroke: black; }

.thiopeptide.active { border-color: black; border-width: 2px; border-style: solid; }

.thiopeptide:hover { background-color: #ffde2e; }

.LAP { background-color: gold; }

.LAP a, .LAP a:link, .LAP a:visited { color: black; }

rect.LAP { fill: gold; stroke: black; }

.LAP.active { border-color: black; border-width: 2px; border-style: solid; }

.LAP:hover { background-color: #ffde2e; }

.thioamitides { background-color: gold; }

.thioamitides a, .thioamitides a:link, .thioamitides a:visited { color: black; }

rect.thioamitides { fill: gold; stroke: black; }

.thioamitides.active { border-color: black; border-width: 2px; border-style: solid; }

.thioamitides:hover { background-color: #ffde2e; }

.blactam { background-color: aliceblue; }

.blactam a, .blactam a:link, .blactam a:visited { color: black; }

rect.blactam { fill: aliceblue; stroke: black; }

.blactam.active { border-color: black; border-width: 2px; border-style: solid; }

.blactam:hover { background-color: white; }

.amglyccycl { background-color: yellowgreen; }

.amglyccycl a, .amglyccycl a:link, .amglyccycl a:visited { color: black; }

rect.amglyccycl { fill: yellowgreen; stroke: black; }

.amglyccycl.active { border-color: black; border-width: 2px; border-style: solid; }

.amglyccycl:hover { background-color: #acd657; }

.aminocoumarin { background-color: yellowgreen; }

.aminocoumarin a, .aminocoumarin a:link, .aminocoumarin a:visited { color: black; }

rect.aminocoumarin { fill: yellowgreen; stroke: black; }

.aminocoumarin.active { border-color: black; border-width: 2px; border-style: solid; }

.aminocoumarin:hover { background-color: #acd657; }

.NI-siderophore { background-color: crimson; }

.NI-siderophore a, .NI-siderophore a:link, .NI-siderophore a:visited { color: white; }

rect.NI-siderophore { fill: crimson; stroke: blue; }

.NI-siderophore.active { border-color: blue; border-width: 2px; border-style: solid; }

.NI-siderophore:hover { background-color: #ec3257; }

.NRP-metallophore { background-color: crimson; }

.NRP-metallophore a, .NRP-metallophore a:link, .NRP-metallophore a:visited { color: white; }

rect.NRP-metallophore { fill: crimson; stroke: blue; }

.NRP-metallophore.active { border-color: blue; border-width: 2px; border-style: solid; }

.NRP-metallophore:hover { background-color: #ec3257; }

.methanobactin { background-color: crimson; }

.methanobactin a, .methanobactin a:link, .methanobactin a:visited { color: white; }

rect.methanobactin { fill: crimson; stroke: blue; }

.methanobactin.active { border-color: blue; border-width: 2px; border-style: solid; }

.methanobactin:hover { background-color: #ec3257; }

.opine-like-metallophore { background-color: crimson; }

.opine-like-metallophore a, .opine-like-metallophore a:link, .opine-like-metallophore a:visited { color: white; }

rect.opine-like-metallophore { fill: crimson; stroke: blue; }

.opine-like-metallophore.active { border-color: blue; border-width: 2px; border-style: solid; }

.opine-like-metallophore:hover { background-color: #ec3257; }

.aminopolycarboxylic-acid { background-color: crimson; }

.aminopolycarboxylic-acid a, .aminopolycarboxylic-acid a:link, .aminopolycarboxylic-acid a:visited { color: white; }

rect.aminopolycarboxylic-acid { fill: crimson; stroke: blue; }

.aminopolycarboxylic-acid.active { border-color: blue; border-width: 2px; border-style: solid; }

.aminopolycarboxylic-acid:hover { background-color: #ec3257; }

.ectoine { background-color: yellowgreen; }

.ectoine a, .ectoine a:link, .ectoine a:visited { color: firebrick; }

rect.ectoine { fill: yellowgreen; stroke: firebrick; }

.ectoine.active { border-color: firebrick; border-width: 2px; border-style: solid; }

.ectoine:hover { background-color: #acd657; }

.NAGGN { background-color: yellowgreen; }

.NAGGN a, .NAGGN a:link, .NAGGN a:visited { color: firebrick; }

rect.NAGGN { fill: yellowgreen; stroke: firebrick; }

.NAGGN.active { border-color: firebrick; border-width: 2px; border-style: solid; }

.NAGGN:hover { background-color: #acd657; }

.butyrolactone { background-color: mediumpurple; }

.butyrolactone a, .butyrolactone a:link, .butyrolactone a:visited { color: white; }

rect.butyrolactone { fill: mediumpurple; stroke: orangered; }

.butyrolactone.active { border-color: orangered; border-width: 2px; border-style: solid; }

.butyrolactone:hover { background-color: #af95e4; }

.indole { background-color: peachpuff; }

.indole a, .indole a:link, .indole a:visited { color: black; }

rect.indole { fill: peachpuff; stroke: black; }

.indole.active { border-color: black; border-width: 2px; border-style: solid; }

.indole:hover { background-color: #fff2e7; }

.nucleoside { background-color: antiquewhite; }

.nucleoside a, .nucleoside a:link, .nucleoside a:visited { color: black; }

rect.nucleoside { fill: antiquewhite; stroke: black; }

.nucleoside.active { border-color: black; border-width: 2px; border-style: solid; }

.nucleoside:hover { background-color: white; }

.phosphoglycolipid { background-color: yellowgreen; }

.phosphoglycolipid a, .phosphoglycolipid a:link, .phosphoglycolipid a:visited { color: black; }

rect.phosphoglycolipid { fill: yellowgreen; stroke: black; }

.phosphoglycolipid.active { border-color: black; border-width: 2px; border-style: solid; }

.phosphoglycolipid:hover { background-color: #acd657; }

.melanin { background-color: peru; }

.melanin a, .melanin a:link, .melanin a:visited { color: white; }

rect.melanin { fill: peru; stroke: orangered; }

.melanin.active { border-color: orangered; border-width: 2px; border-style: solid; }

.melanin:hover { background-color: #d69c63; }

.oligosaccharide { background-color: burlywood; }

.oligosaccharide a, .oligosaccharide a:link, .oligosaccharide a:visited { color: black; }

rect.oligosaccharide { fill: burlywood; stroke: black; }

.oligosaccharide.active { border-color: black; border-width: 2px; border-style: solid; }

.oligosaccharide:hover { background-color: #e8cdab; }

.furan { background-color: purple; }

.furan a, .furan a:link, .furan a:visited { color: white; }

rect.furan { fill: purple; stroke: orangered; }

.furan.active { border-color: orangered; border-width: 2px; border-style: solid; }

.furan:hover { background-color: #ae00ae; }

.hserlactone { background-color: tan; }

.hserlactone a, .hserlactone a:link, .hserlactone a:visited { color: black; }

rect.hserlactone { fill: tan; stroke: black; }

.hserlactone.active { border-color: black; border-width: 2px; border-style: solid; }

.hserlactone:hover { background-color: #dfcaad; }

.acyl_amino_acids { background-color: tan; }

.acyl_amino_acids a, .acyl_amino_acids a:link, .acyl_amino_acids a:visited { color: black; }

rect.acyl_amino_acids { fill: tan; stroke: black; }

.acyl_amino_acids.active { border-color: black; border-width: 2px; border-style: solid; }

.acyl_amino_acids:hover { background-color: #dfcaad; }

.tropodithietic-acid { background-color: tan; }

.tropodithietic-acid a, .tropodithietic-acid a:link, .tropodithietic-acid a:visited { color: black; }

rect.tropodithietic-acid { fill: tan; stroke: black; }

.tropodithietic-acid.active { border-color: black; border-width: 2px; border-style: solid; }

.tropodithietic-acid:hover { background-color: #dfcaad; }

.phenazine { background-color: plum; }

.phenazine a, .phenazine a:link, .phenazine a:visited { color: black; }

rect.phenazine { fill: plum; stroke: black; }

.phenazine.active { border-color: black; border-width: 2px; border-style: solid; }

.phenazine:hover { background-color: #e9c2e9; }

.phosphonate { background-color: mediumaquamarine; }

.phosphonate a, .phosphonate a:link, .phosphonate a:visited { color: black; }

rect.phosphonate { fill: mediumaquamarine; stroke: black; }

.phosphonate.active { border-color: black; border-width: 2px; border-style: solid; }

.phosphonate:hover { background-color: #89d8bd; }

.PBDE { background-color: purple; }

.PBDE a, .PBDE a:link, .PBDE a:visited { color: white; }

rect.PBDE { fill: purple; stroke: orangered; }

.PBDE.active { border-color: orangered; border-width: 2px; border-style: solid; }

.PBDE:hover { background-color: #ae00ae; }

.betalactone { background-color: purple; }

.betalactone a, .betalactone a:link, .betalactone a:visited { color: white; }

rect.betalactone { fill: purple; stroke: orangered; }

.betalactone.active { border-color: orangered; border-width: 2px; border-style: solid; }

.betalactone:hover { background-color: #ae00ae; }

.pyrrolidine { background-color: purple; }

.pyrrolidine a, .pyrrolidine a:link, .pyrrolidine a:visited { color: white; }

rect.pyrrolidine { fill: purple; stroke: orangered; }

.pyrrolidine.active { border-color: orangered; border-width: 2px; border-style: solid; }

.pyrrolidine:hover { background-color: #ae00ae; }

.unknown { background-color: #f2f2f2; }

.unknown a, .unknown a:link, .unknown a:visited { color: black; }

rect.unknown { fill: #f2f2f2; stroke: black; }

.unknown.active { border-color: black; border-width: 2px; border-style: solid; }

.unknown:hover { background-color: white; }

.saccharide { background-color: #f2f2f2; }

.saccharide a, .saccharide a:link, .saccharide a:visited { color: black; }

rect.saccharide { fill: #f2f2f2; stroke: black; }

.saccharide.active { border-color: black; border-width: 2px; border-style: solid; }

.saccharide:hover { background-color: white; }

.fatty_acid { background-color: #f2f2f2; }

.fatty_acid a, .fatty_acid a:link, .fatty_acid a:visited { color: black; }

rect.fatty_acid { fill: #f2f2f2; stroke: black; }

.fatty_acid.active { border-color: black; border-width: 2px; border-style: solid; }

.fatty_acid:hover { background-color: white; }

.halogenated { background-color: #f2f2f2; }

.halogenated a, .halogenated a:link, .halogenated a:visited { color: black; }

rect.halogenated { fill: #f2f2f2; stroke: black; }

.halogenated.active { border-color: black; border-width: 2px; border-style: solid; }

.halogenated:hover { background-color: white; }

.hybrid { background-color: lightsteelblue; }

.hybrid a, .hybrid a:link, .hybrid a:visited { color: midnightblue; }

rect.hybrid { fill: lightsteelblue; stroke: midnightblue; }

.hybrid.active { border-color: midnightblue; border-width: 2px; border-style: solid; }

.hybrid:hover { background-color: #d0dcec; }

.serif, .tfbs-details-container .tfbs-hit-list .tfbs-svg-container * .tfbs-sequence, .ripp-body .ripp-motif .ripp-segment-sequence, .ripp-body .ripp-motif .ripp-name, .comparippson-container .comparippson-alignment .comparippson-midline, .comparippson-container .comparippson-alignment, .clusterblast-locustag, .jsdomain-orflabel, .generic-domain-orflabel, .svgene-locustag, .cc-svg-locustag { font-family: "Courier New", serif; }

body { font-family: Helvetica, Verdana, Tahoma, Sans-Serif; color: #555; background-color: white; text-align: left; margin: 0; padding: 0; }

a, .clipboard-copy, .link-like { text-decoration: none; background-color: rgba(225, 225, 225, 0.9); border-radius: 2px; color: black; cursor: pointer; padding-right: 0.3em; padding-left: 0.3em; padding-top: 0.1em; font-size: 95%; /* just enough to have background between links in text */ }

a:active, .clipboard-copy:active, .link-like:active { color: #810e15; }

a:hover, .clipboard-copy:hover, .link-like:hover { text-decoration: underline; }

a:link, .clipboard-copy:link, .link-like:link { color: #1d1414; }

a:visited, .clipboard-copy:visited, .link-like:visited { color: #1d1414; }

.regbutton a { background: none; }

dd { margin-left: 1.5em; }

.white { color: white; }

.icons { margin-top: 1em; }

.as-icon-active { box-shadow: 0 3px 6px white, inset 0 -3px 3px white; }

nav { display: flex; justify-content: space-between; padding-bottom: 0.25em; border-bottom: 2px solid #aa0000; background-image: linear-gradient(to bottom, #5e5e5e 0%, #444 100%); background-repeat: repeat-x; color: #e1e1e1; font-size: 14px; border-bottom: 4px solid #810e15; height: 50px; }

nav a { background: none; color: #e1e1e1; }

nav a:visited, nav a:link { color: #e1e1e1; }

nav a:hover { color: white; text-decoration: none; }

nav .main-link { font-size: 18px; padding-right: 15px; }

nav .main-link div { display: block; float: left; padding-left: 15px; padding-top: 9px; line-height: 200%; }

nav .ancillary-links { display: block; padding-right: 15px; padding-top: 15px; }

nav .ancillary-links .ancillary-link { display: block; position: relative; float: left; }

nav .ancillary-links .ancillary-link a { padding-left: 2em; }

nav .ancillary-links .ancillary-link a img { height: 1em; }

nav .custom-description { font-size: 90%; padding-top: 15px; line-height: 200%; }

.footer { padding-top: 0.25em; border-top: 1px solid #aa0000; display: flex; justify-content: center; }

.footer .container { display: flex; justify-content: space-between; }

.footer .container .cite-me { margin-top: 1em; margin-left: 1em; height: 1.5em; background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%); background-repeat: repeat-x; border-color: #dcdcdc; border-radius: 4px; padding: 19px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1); }

.antismash-logo { float: left; }

.antismash-title { margin: 1em 1em 0px 1em; float: left; }

.antismash-title a { color: white; font-size: 120%; font-weight: 600; }

.antismash-title a:hover { text-decoration: none; }

.arrow-left { width: 0; height: 0; cursor: pointer; border-top: 1.2em solid transparent; border-bottom: 1.2em solid transparent; border-right: 1.2em solid #810e15; }

.arrow-left:hover { border-right-color: #aa121c; }

.arrow-right { width: 0; height: 0; cursor: pointer; border-top: 1.2em solid transparent; border-bottom: 1.2em solid transparent; border-left: 1.2em solid #810e15; }

.arrow-right:hover { border-right-color: #aa121c; }

#icons { margin-top: 2em; float: left; font-size: 0.9em; min-height: 1.1em; overflow: visible; }

#downloadmenu { border: 1px solid black; background-color: white; display: none; position: absolute; width: 20%; }

#downloadoptions { list-style-type: none; padding: 0 0 0 0.2em; }

#downloadoptions li { margin: 0; }

#buttons { padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; overflow: hidden; }

#region-type { margin-left: 0.5em; }

.page { overflow: hidden; }

.page h3, .page .heading { font-size: 90%; background-color: #810e15; color: white; margin: 0.1em 0 0.4em 0.1em; padding-left: 0.5em; height: 1.55em; line-height: 1.55em; vertical-align: middle; }

.page .heading { font-weight: 600; margin-left: 0; margin-top: 0; }

.no-results { text-align: center; padding: 1em 0; font-weight: 600; background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%); background-repeat: repeat-x; border-color: #dcdcdc; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1); }

.focus-panel { display: block; border-left: 2px solid #810e15; padding-bottom: 1em; }

.sidepanel { display: block; border-left: 2px solid #810e15; }

.structure img { display: inline-block; width: 80%; height: auto; }

.modal-container { display: none; position: absolute; z-index: 2; /* keep on top of any open help tooltips */ padding-top: 5%; padding-left: 10%; padding-bottom: 100%; left: 0; top: 0; width: 90%; height: 100%; background-color: rgba(0, 0, 0, 0.4); }

.modal-container .modal-content { position: relative; }

.modal-container .smiles-canvas-modal { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; height: 80%; width: 80%; }

.structure-link { display: inline-block; text-align: center; width: 100%; }

.as-structure-warning { font-size: 90%; }

.prediction-text { font-size: 75%; margin-left: 0.5em; }

.content { display: block; }

.region-type { margin: 0 0 0 0.5em; padding: 0; }

.region-svg-container { margin: 0 2% 0 2%; }

#regionbuttons { display: flex; margin: 0 0.5em 0 0.5em; padding: 0; min-height: 1.1em; }

#regionbuttons a { background: none; }

#regionbuttons a:hover { text-decoration: none; }

#regionbuttons .regbutton { margin: 0; margin-right: 0.2em; margin-bottom: 0.2em; border-radius: 0.5em; padding: 0.25em; min-width: 3em; text-align: center; vertical-align: middle; line-height: 1.3em; height: 1.3em; }

#regionbuttons li.active { padding: 0.14em; }

.dha { font-weight: 600; color: mediumseagreen; }

.dhb { font-weight: 600; color: mediumorchid; }

.cys { font-weight: 600; color: royalblue; }

.macrolactam { font-weight: 600; color: red; }

.cut { font-weight: 600; color: purple; }

.separator-text { font-size: 80%; padding-top: 1em; }

.description-text, .alt-weight-desc, .alt-weight-n, .cluster-rules-header { font-size: 85%; }

.alt-weight-n { padding-left: 2.5em; }

.region-download { font-size: 75%; float: right; padding: 5px; margin-right: 20px; border-radius: 5px; background-color: #eee; }

.region-download a, .region-download .link-like { background-color: unset; line-height: 100%; }

.cluster-rules { font-size: 75%; display: none; border: 1px solid slategray; background-color: #ddd; }

.description-container { margin-left: 0.5em; }

.contig-edge-warning { font-size: 75%; font-weight: 600; float: right; color: black; background-color: orange; padding: 5px; margin-right: 20px; border-radius: 5px; }

table { border-collapse: collapse; }

.overview-layout { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding-left: 0.5em; }

.overview-layout .overview-switches { padding-left: 0.5em; padding-right: 0.5em; min-width: 10em; }

table.region-table { padding: 0; }

table.region-table th { margin: 0.2em 0.5em; padding: 0 0.5em; }

table.region-table .even { background-color: #f1f1f1; }

table.region-table td { margin: 0.2em 0.5em; padding: 0.2em 0.5em; }

table.region-table .digits { text-align: right; }

table.region-table .linked-row { cursor: pointer; }

.record-overview-header { background-color: #ddd; padding-top: 0.5em; }

.record-overview-details { padding-left: 1em; padding-bottom: 1em; margin-top: 0.5em; }

.tooltip, .help-container .help-tooltip, .clusterblast-tooltip, .jsdomain-tooltip, .generic-domain-tooltip { /* match style of nav */ background-image: linear-gradient(to bottom, #5e5e5e 0%, #444 100%); background-repeat: repeat-x; color: #e1e1e1; font-weight: normal; display: none; border-radius: 0.2em; width: 35vw; padding: 0.5em; /* start halfway down and keep to the left of the container */ position: absolute; top: 50%; right: 105%; z-index: 1; /* otherwise switches and other ':after' styles can display on top */ }

.similarity-text { color: #1d1414; }

.svgene-type-other { fill: gray; stroke: black; }

.svgene-type-biosynthetic { fill: #810e15; stroke: black; }

.svgene-type-biosynthetic-additional { fill: #f16d75; stroke: black; }

.svgene-type-transport { fill: cornflowerblue; stroke: black; }

.svgene-type-regulatory { fill: seagreen; stroke: black; }

.svgene-resistance { fill: #bbb; }

.svgene-tta-codon { fill: #444; }

.cluster-line, .centerline { stroke-width: 1px; stroke: #888; }

.svgene-locustag, .cc-svg-locustag { fill: #810e15; display: none; font-size: 85%; }

.svgene-locustag-background { fill: white; }

.cluster-core { stroke: black; stroke-width: 1px; fill: white; }

.svgene-border-cassis .cluster-core { stroke: black; stroke-width: 1px; fill: wheat; }

.svgene-orf, .svgene-minimap-orf { stroke-width: 0; }

.svgene-selected-orf { stroke: #000; stroke-width: 1px; }

.svgene-binding-site line { stroke: black; }

.svgene-binding-site circle { fill: black; }

.legend-items, .zoom-buttons { display: flex; justify-content: center; }

.button-like { display: flex; align-items: center; border: 1px solid lightgrey; border-radius: 0.5em; margin-left: 1em; padding: 0.5em; padding-top: 0.3em; box-shadow: inset 0 -2px 2px grey; cursor: default; font-size: 80%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.button-like:hover { background-color: #fcfcfc; box-shadow: inset 0 2px 5px grey; }

.button-like:active { background-color: #eee; box-shadow: inset 0 2px 5px grey; }

.button-like * { cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.button-like img { height: 1.5em; padding-right: 0.5em; }

.legend-selected { background-color: #eee; box-shadow: inset 0 2px 5px grey; }

.legend-selector * { cursor: default; }

.legend-selector-static { display: flex; align-items: center; border: 1px solid lightgrey; border-radius: 0.5em; margin-left: 1em; padding: 0.5em; padding-top: 0.3em; cursor: default; font-size: 80%; }

.legend-selector-static * { cursor: default; }

.legend-type-other { background-color: gray; }

.legend-type-biosynthetic { background-color: #810e15; }

.legend-type-biosynthetic-additional { background-color: #f16d75; }

.legend-type-transport { background-color: cornflowerblue; }

.legend-type-regulatory { background-color: seagreen; }

.legend-border-cassis { background-color: wheat; }

.legend-tta-codon { background-color: #444; }

.legend-resistance { background-color: #bbb; }

.legend { margin-bottom: 0.5em; margin-left: 0.5em; }

.legend h4 { margin-bottom: 0.5em; }

.legend-symbol, .legend-field { float: left; width: 1em; height: 1em; margin-right: 0.25em; }

.legend-field { border: 1px solid black; }

.legend-label { float: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.zoom-button { background-color: white; border: 1px solid lightgrey; border-radius: 0.5em; box-shadow: inset 0 -2px 2px grey; font-size: 80%; margin-left: 1em; padding: 0.5em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.zoom-button:hover { background-color: #fcfcfc; box-shadow: inset 0 2px 5px grey; }

.zoom-button:active { background-color: #eee; box-shadow: inset 0 2px 5px grey; }

.details-text { padding-bottom: 0.5em; }

.details-svg { margin: 0 2%; margin-top: 2px; }

.jsdomain-line, .generic-domain-line { stroke-width: 1px; stroke: #888; }

.jsdomain-orflabel, .generic-domain-orflabel { font-size: 75%; fill: #444; }

.jsdomain-tooltip, .generic-domain-tooltip { font-size: 90%; }

.jsdomain-text, .generic-domain-text, .jsdomain-module-lid text, .jsdomain-match { pointer-events: none; }

.jsdomain-match { font-size: 70%; }

.jsdomain-module { fill: rgba(200, 200, 200, 0.5); stroke-width: 1px; stroke: #000; }

.jsdomain-incomplete-module { stroke-dasharray: 4 4; }

.jsdomain-module-lid { opacity: 1; transition: opacity 1s; }

.jsdomain-module-lid:hover { opacity: 0; transition: opacity 0s; }

.jsdomain-module-lid .jsdomain-module-lid-body { filter: url(#inset-shadow); stroke-width: 0px; fill: #f0f0f0; }

.jsdomain-svg, .generic-domain-svg { margin-bottom: -5px; }

.jsdomain-svg-single, .generic-domain-svg-single { margin-bottom: -3px; }

.jsdomain-adenylation { stroke: #571680; fill: #bc7ff5; }

.jsdomain-transport { stroke: #0b4ec7; fill: #81bef7; }

.jsdomain-condensation, .jsdomain-epimerase { stroke: #3b3b8c; fill: #8181f7; }

.jsdomain-docking { stroke: #47479f; fill: #8080f5; }

.jsdomain-terminal { stroke: #770374; fill: #f5c4f2; }

.jsdomain-ketosynthase { stroke: #09b309; fill: #81f781; }

.jsdomain-acyltransferase { stroke: #dd0606; fill: #f78181; }

.jsdomain-mod-dh { stroke: #ba670f; fill: #f7be81; }

.jsdomain-mod-er { stroke: #0ca189; fill: #81f7f3; }

.jsdomain-mod-kr { stroke: #0aa04c; fill: #80f680; }

.jsdomain-mod-sh { stroke: gold; fill: yellow; }

.jsdomain-other { stroke: #939393; fill: #dadada; }

.generic-domain-domain { stroke: #323232; }

rect.generic-type-other { fill: #dadada; }

rect.generic-type-biosynthetic { fill: #f0a1a1; }

text.generic-type-biosynthetic { fill: #333; }

rect.generic-type-regulatory { fill: #6cbc9c; }

text.generic-type-regulatory { fill: #333; }

rect.generic-type-transport { fill: #7aaaff; }

.clusterblast-locustag { fill: #810e15; display: none; font-size: 80%; position: absolute; }

.clusterblast-tooltip { font-size: 90%; }

.clusterblast-acc, .clusterblast-desc { fill: #810e15; font-size: 80%; font-family: Verdana, Tahoma, Sans-Serif; }

.clusterblast-desc { font-size: 75%; }

.clusterborderlabel { font-size: 25%; }

#footer { border-top: 2px solid #810e15; }

#logos { float: left; padding-left: 0.5em; margin-top: 5px; }

#logos img { padding-right: 25px; }

#logo-table tr td { height: 50px; padding: 5px; }

#copyright { font-size: 60%; float: right; width: 40%; margin-right: 1.5em; padding: 0.5em; }

.collapser { border: none; display: inline; border-radius: 50%; }

.collapser:before { background-size: 1.1em 1.1em; height: 1.1em; width: 1.1em; background-repeat: no-repeat; display: inline-block; margin-left: 0.5em; content: ''; background-image: url(../images/plus-circle.svg); }

.expanded:before { background-size: 1.1em 1.1em; height: 1.1em; width: 1.1em; background-repeat: no-repeat; display: inline-block; margin-left: 0.5em; content: ''; background-image: url(../images/minus-circle.svg); }

.external-link:after { background-size: 1.1em 1.1em; height: 1.1em; width: 1.1em; background-repeat: no-repeat; display: inline-block; margin-left: 0.5em; content: ''; font-size: 75%; background-size: 1em 1em; height: 1em; width: 1em; background-image: url(../images/external-link-alt-solid.svg); }

.collapser-content { display: none; padding-left: 1em; }

.candidate-hybrid rect { fill: #282268; }

.candidate-hybrid text { fill: lightgrey; }

.candidate-interleaved rect { fill: #4b4596; }

.candidate-interleaved text { fill: lightgrey; }

.candidate-neighbouring rect { fill: #8680cc; }

.candidate-neighbouring text { fill: #ddd; }

.candidate-single rect { fill: #c6c1f5; }

.candidate-single text { fill: black; }

ul.dropdown-options { display: none; position: relative; top: -55px; padding: 70px 0 0 0; margin: 0; }

ul.dropdown-options:hover { display: block; }

ul.dropdown-options li { background-image: linear-gradient(to bottom, #5e5e5e 0%, #444 100%); background-repeat: repeat-x; padding: 10px; list-style: none; }

ul.dropdown-options li:hover { cursor: pointer; }

.dropdown-menu { text-align: right; z-index: 1; }

.dropdown-menu:active ul { display: block; }

.dropdown-menu:active #download-dropdown-link { display: block; }

.body-details-headers, .sidepanel-details-headers { display: flex; flex-wrap: wrap; margin-left: 0.5em; }

.body-details-headers .body-details-header, .body-details-headers .sidepanel-details-header, .sidepanel-details-headers .body-details-header, .sidepanel-details-headers .sidepanel-details-header { font-size: 90%; background-color: rgba(129, 14, 21, 0.6); color: white; margin-right: 0.1em; padding-left: 0.5em; padding-right: 0.5em; padding-top: 1px; /* solve edge single pixel gap */ padding-bottom: 1px; margin-bottom: -1px; border-top-left-radius: 1em; border-top-right-radius: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.body-details-headers .body-details-header:hover, .body-details-headers .sidepanel-details-header:hover, .sidepanel-details-headers .body-details-header:hover, .sidepanel-details-headers .sidepanel-details-header:hover { background-color: rgba(129, 14, 21, 0.8); }

.body-details-headers .body-details-header-active, .body-details-headers .sidepanel-details-header-active, .sidepanel-details-headers .body-details-header-active, .sidepanel-details-headers .sidepanel-details-header-active { background-color: #810e15; }

.body-details-headers .body-details-header-active:hover, .body-details-headers .sidepanel-details-header-active:hover, .sidepanel-details-headers .body-details-header-active:hover, .sidepanel-details-headers .sidepanel-details-header-active:hover { background-color: #810e15; }

.sidepanel-details-headers { margin-left: 0; }

.body-details-section { margin-left: 0.5em; }

.body-details-section * h3 { margin-top: 0; margin-left: 0; }

.sidepanel-details-section { margin-left: 0; }

.sidepanel-details-section * h3 { margin-top: 0; margin-left: 0; }

.nrps-pks-domain-buttons { display: flex; justify-content: space-around; }

.switch-container span.switch-desc { padding-right: 0.5em; }

.switch-container .switch { position: relative; display: inline-block; width: 2.5em; height: 1.5em; }

.switch-container .switch input { opacity: 0; width: 0; height: 0; }

.switch-container .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 1.5em; }

.switch-container .slider:before { position: absolute; content: ""; height: 80%; width: 50%; left: 10%; bottom: 10%; background-color: white; transition: .2s; border-radius: 50%; }

.switch-container input:checked + .slider { background-color: #810e15; }

.switch-container input:checked + .slider:before { transform: translateX(60%); }

.help-container { position: relative; display: inline; float: right; }

.help-container .help-icon { display: inline-block; float: right; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1p Y29uPSJxdWVzdGlvbi1jaXJjbGUiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1x dWVzdGlvbi1jaXJjbGUgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDov L3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0 aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01MDQgMjU2YzAgMTM2Ljk5Ny0xMTEu MDQzIDI0OC0yNDggMjQ4UzggMzkyLjk5NyA4IDI1NkM4IDExOS4wODMgMTE5LjA0 MyA4IDI1NiA4czI0OCAxMTEuMDgzIDI0OCAyNDh6TTI2Mi42NTUgOTBjLTU0LjQ5 NyAwLTg5LjI1NSAyMi45NTctMTE2LjU0OSA2My43NTgtMy41MzYgNS4yODYtMi4z NTMgMTIuNDE1IDIuNzE1IDE2LjI1OGwzNC42OTkgMjYuMzFjNS4yMDUgMy45NDcg MTIuNjIxIDMuMDA4IDE2LjY2NS0yLjEyMiAxNy44NjQtMjIuNjU4IDMwLjExMy0z NS43OTcgNTcuMzAzLTM1Ljc5NyAyMC40MjkgMCA0NS42OTggMTMuMTQ4IDQ1LjY5 OCAzMi45NTggMCAxNC45NzYtMTIuMzYzIDIyLjY2Ny0zMi41MzQgMzMuOTc2QzI0 Ny4xMjggMjM4LjUyOCAyMTYgMjU0Ljk0MSAyMTYgMjk2djRjMCA2LjYyNyA1LjM3 MyAxMiAxMiAxMmg1NmM2LjYyNyAwIDEyLTUuMzczIDEyLTEydi0xLjMzM2MwLTI4 LjQ2MiA4My4xODYtMjkuNjQ3IDgzLjE4Ni0xMDYuNjY3IDAtNTguMDAyLTYwLjE2 NS0xMDItMTE2LjUzMS0xMDJ6TTI1NiAzMzhjLTI1LjM2NSAwLTQ2IDIwLjYzNS00 NiA0NiAwIDI1LjM2NCAyMC42MzUgNDYgNDYgNDZzNDYtMjAuNjM2IDQ2LTQ2YzAt MjUuMzY1LTIwLjYzNS00Ni00Ni00NnoiPjwvcGF0aD48L3N2Zz4=") no-repeat center; /* opera, chrome, and safari */ mask: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1p Y29uPSJxdWVzdGlvbi1jaXJjbGUiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1x dWVzdGlvbi1jaXJjbGUgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDov L3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0 aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01MDQgMjU2YzAgMTM2Ljk5Ny0xMTEu MDQzIDI0OC0yNDggMjQ4UzggMzkyLjk5NyA4IDI1NkM4IDExOS4wODMgMTE5LjA0 MyA4IDI1NiA4czI0OCAxMTEuMDgzIDI0OCAyNDh6TTI2Mi42NTUgOTBjLTU0LjQ5 NyAwLTg5LjI1NSAyMi45NTctMTE2LjU0OSA2My43NTgtMy41MzYgNS4yODYtMi4z NTMgMTIuNDE1IDIuNzE1IDE2LjI1OGwzNC42OTkgMjYuMzFjNS4yMDUgMy45NDcg MTIuNjIxIDMuMDA4IDE2LjY2NS0yLjEyMiAxNy44NjQtMjIuNjU4IDMwLjExMy0z NS43OTcgNTcuMzAzLTM1Ljc5NyAyMC40MjkgMCA0NS42OTggMTMuMTQ4IDQ1LjY5 OCAzMi45NTggMCAxNC45NzYtMTIuMzYzIDIyLjY2Ny0zMi41MzQgMzMuOTc2QzI0 Ny4xMjggMjM4LjUyOCAyMTYgMjU0Ljk0MSAyMTYgMjk2djRjMCA2LjYyNyA1LjM3 MyAxMiAxMiAxMmg1NmM2LjYyNyAwIDEyLTUuMzczIDEyLTEydi0xLjMzM2MwLTI4 LjQ2MiA4My4xODYtMjkuNjQ3IDgzLjE4Ni0xMDYuNjY3IDAtNTguMDAyLTYwLjE2 NS0xMDItMTE2LjUzMS0xMDJ6TTI1NiAzMzhjLTI1LjM2NSAwLTQ2IDIwLjYzNS00 NiA0NiAwIDI1LjM2NCAyMC42MzUgNDYgNDYgNDZzNDYtMjAuNjM2IDQ2LTQ2YzAt MjUuMzY1LTIwLjYzNS00Ni00Ni00NnoiPjwvcGF0aD48L3N2Zz4=") no-repeat center; background-color: white; width: 1.3em; height: 1.3em; margin-top: 1px; margin-right: 2px; }

.help-container .help-icon:hover { background-color: #ddd; }

.help-container .help-icon:active, .help-container .help-icon.active { background-color: #bbb; }

.download-container { position: relative; display: block; float: right; }

.download-container .download-icon, .download-container .download-icon-inverse { display: inline-block; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1p Y29uPSJkb3dubG9hZCIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWRvd25sb2Fk IGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIw MDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iI2MxYzFj MSIgZD0iTTIxNiAwaDgwYzEzLjMgMCAyNCAxMC43IDI0IDI0djE2OGg4Ny43YzE3 LjggMCAyNi43IDIxLjUgMTQuMSAzNC4xTDI2OS43IDM3OC4zYy03LjUgNy41LTE5 LjggNy41LTI3LjMgMEw5MC4xIDIyNi4xYy0xMi42LTEyLjYtMy43LTM0LjEgMTQu MS0zNC4xSDE5MlYyNGMwLTEzLjMgMTAuNy0yNCAyNC0yNHptMjk2IDM3NnYxMTJj MCAxMy4zLTEwLjcgMjQtMjQgMjRIMjRjLTEzLjMgMC0yNC0xMC43LTI0LTI0VjM3 NmMwLTEzLjMgMTAuNy0yNCAyNC0yNGgxNDYuN2w0OSA0OWMyMC4xIDIwLjEgNTIu NSAyMC4xIDcyLjYgMGw0OS00OUg0ODhjMTMuMyAwIDI0IDEwLjcgMjQgMjR6bS0x MjQgODhjMC0xMS05LTIwLTIwLTIwcy0yMCA5LTIwIDIwIDkgMjAgMjAgMjAgMjAt OSAyMC0yMHptNjQgMGMwLTExLTktMjAtMjAtMjBzLTIwIDktMjAgMjAgOSAyMCAy MCAyMCAyMC05IDIwLTIweiI+PC9wYXRoPjwvc3ZnPgo=") no-repeat center; /* opera, chrome, and safari */ mask: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1p Y29uPSJkb3dubG9hZCIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWRvd25sb2Fk IGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIw MDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iI2MxYzFj MSIgZD0iTTIxNiAwaDgwYzEzLjMgMCAyNCAxMC43IDI0IDI0djE2OGg4Ny43YzE3 LjggMCAyNi43IDIxLjUgMTQuMSAzNC4xTDI2OS43IDM3OC4zYy03LjUgNy41LTE5 LjggNy41LTI3LjMgMEw5MC4xIDIyNi4xYy0xMi42LTEyLjYtMy43LTM0LjEgMTQu MS0zNC4xSDE5MlYyNGMwLTEzLjMgMTAuNy0yNCAyNC0yNHptMjk2IDM3NnYxMTJj MCAxMy4zLTEwLjcgMjQtMjQgMjRIMjRjLTEzLjMgMC0yNC0xMC43LTI0LTI0VjM3 NmMwLTEzLjMgMTAuNy0yNCAyNC0yNGgxNDYuN2w0OSA0OWMyMC4xIDIwLjEgNTIu NSAyMC4xIDcyLjYgMGw0OS00OUg0ODhjMTMuMyAwIDI0IDEwLjcgMjQgMjR6bS0x MjQgODhjMC0xMS05LTIwLTIwLTIwcy0yMCA5LTIwIDIwIDkgMjAgMjAgMjAgMjAt OSAyMC0yMHptNjQgMGMwLTExLTktMjAtMjAtMjBzLTIwIDktMjAgMjAgOSAyMCAy MCAyMCAyMC05IDIwLTIweiI+PC9wYXRoPjwvc3ZnPgo=") no-repeat center; background-color: white; width: 1.3em; height: 1.3em; margin-top: 1px; margin-right: 2px; cursor: pointer; }

.download-container .download-icon:hover, .download-container .download-icon-inverse:hover { background-color: #ddd; }

.download-container .download-icon:active, .download-container .download-icon-inverse:active, .download-container .download-icon.active, .download-container .active.download-icon-inverse { background-color: #bbb; }

.download-container .download-icon-inverse { width: 1em; height: 1em; background-color: #333; }

.download-container .download-icon-inverse:hover { background-color: #777; }

.download-container .download-icon-inverse:active, .download-container .download-icon-inverse.active { background-color: #777; }

.focus-panel-content { margin-left: 2em; margin-right: 2em; font-size: 0.8em; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: space-between; height: 95%; }

.region-grid { display: grid; grid-template-columns: 75% 25%; grid-gap: 1px; }

.table-split-left { border-right: 5px solid #f1f1f1; }

.cc-heat-table { empty-cells: show; margin-bottom: 2em; }

.cc-heat-table * .cc-heat-row:hover { background: #f0f0f0; }

.cc-heat-table * th { text-align: center; vertical-align: bottom; padding-bottom: 0.5em; }

.cc-heat-table * .cc-heat-product { writing-mode: vertical-lr; transform: rotate(180deg); text-orientation: mixed; text-align: left; cursor: pointer; }

.cc-heat-table * td { padding-left: 1em; }

.cc-heat-table * .cc-heat-cell { padding-left: 0em; width: 1.5em; height: 1.5em; }

.cc-heat-table * .cc-heat-cell span { background-color: black; display: block; }

.comparison-container { display: none; margin-top: 1em; }

.comparison-container-active { display: block; }

.comparippson-container { display: grid; grid-template-columns: 5em 20em auto; }

.comparippson-container .comparippson-info * .comparippson-link { margin-right: 2em; }

.comparippson-container * .comparippson-extra-indicator { margin-left: 1em; }

.comparippson-container * .comparippson-extra-names { width: max-content; border: 1px solid lightgrey; border-radius: 0.5em; background: #F5F5F5; padding: 0.5em; display: grid; grid-template-columns: max-content max-content; grid-column-gap: 2em; }

.comparippson-container .comparippson-alignment { display: grid; grid-template-columns: max-content max-content max-content; grid-column-gap: 1em; padding-bottom: 1em; grid-column-start: 2; grid-column-end: span 3; }

.comparippson-container .comparippson-alignment .comparippson-midline span { opacity: 0.5; }

.comparippson-container .comparippson-alignment .comparippson-midline .near-match-cycle { opacity: 1; font-weight: 600; }

.ripp-body { overflow-x: scroll; position: relative; }

.ripp-body .ripp-legend { position: absolute; top: 0px; right: 0px; background: white; border: 2px solid gray; border-radius: 5px; padding: 0.5em; }

.ripp-body .ripp-legend h4 { margin: 0px; }

.ripp-body .ripp-legend div { margin-left: 1em; }

.ripp-body .ripp-motif { display: grid; grid-template-columns: max-content max-content auto; grid-column-gap: 2em; margin-bottom: 2em; }

.ripp-body .ripp-motif .ripp-name { grid-column: 1; }

.ripp-body .ripp-motif .ripp-dehydrated span { padding-left: 0.05em; padding-right: 0.05em; }

.ripp-body .ripp-motif .ripp-segment-type { grid-column: 2; }

.ripp-body .ripp-motif .comparippson-details { grid-column-start: 1; grid-column-end: 3 span; margin-left: 3em; }

.bubble-legend-container { transform: scale(0.7); transform-origin: 0 0; }

#bubble-legend { display: grid; grid-template-columns: max-content auto; grid-column-gap: 1em; align-items: center; margin-left: 2em; }

#bubble-legend .bubble-legend-icon { justify-self: center; }

.bubble-legend-title { grid-column-start: span 2; font-weight: bold; margin-top: 1em; margin-left: 1em; }

.bubble-tooltip { width: max-content; padding-left: 20px; padding-right: 20px; z-index: 10; }

.bubble-domain-inactive { stroke-width: 2px; stroke: black; }

.bubble-module-line, .bubble-module-line-non-elongating { stroke-width: 2px; stroke: black; }

.bubble-module-line-non-elongating { stroke-dasharray: 0.5em; }

.domain-bubble-container * .bubble-module-label .bubble-module-monomer { fill: #555; }

.domain-bubble-container * .domain-group .text { fill: black; font-size: 80%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.domain-bubble-container * .bubble-gene { cursor: pointer; }

.domain-bubble-container * .bubble-gene .bubble-gene-arrow { fill: black; }

.domain-bubble-container * .bubble-gene text { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.domain-bubble-container * .bubble-domain-inactive { opacity: 60%; }

.gt-container .gt-header { display: flex; justify-content: space-evenly; padding: 1em; }

.gt-container .gt-no-hits { display: block; margin: 2em; margin-left: 20%; }

.gt-container .gt-scroll-container { overflow-y: scroll; max-height: 350px; }

.gt-container * .gt { padding: 1em; }

.gt-container * .gt * .row-odd { background-color: #f8f8f8; }

.gt-container * .gt * .row-even { background-color: #eaeaea; }

.gt-container * .gt thead { position: sticky; top: 0px; background: white; }

.gt-container * .gt thead tr { width: 100%; table-layout: fixed; }

.gt-container * .gt thead * th { text-align: center; padding-left: 0.5em; padding-right: 0.5em; }

.gt-container * .gt tbody tr { cursor: pointer; scroll-margin-top: 3em; }

.gt-container * .gt tbody tr td { padding-left: 0.5em; padding-right: 0.5em; cursor: pointer; /* the cells with hit information can have a lot of text and have a lot of verticality, so compact as much as possible while remaining readable */ }

.gt-container * .gt tbody tr td.gt-cell-link { text-align: center; }

.gt-container * .gt tbody tr td.gt-matching-cell { border-bottom: 1px solid black; background-color: #b8d2db; }

.gt-container * .gt tbody tr td .button-like { display: block; text-align: center; margin-left: 0em; }

.gt-container * .gt tbody tr td.gt-cell-match { font-size: 80%; padding: 0.5em; }

.gt-container * .gt tbody tr td.gt-cell-match ul { margin-top: 0em; margin-bottom: 0em; }

.gt-container * .gt tbody tr td.gt-cell-match ul li { padding: 0em; }

.gt-container * .gt * .gt-cell-numeric { text-align: right; margin-right: 1em; }

.colour-square { height: 1em; width: 1em; display: inline-block; border: 1px solid black; margin-right: 0.5em; vertical-align: middle; }

/* A generalised indicator for non-overview sections to show which gene is currently selected. While the object should be consistently styled, the positioning options can, and probably should, be overridden. */
.cds-selected-marker { opacity: 0; height: 3px; width: 3px; background-color: black; display: inline-block; border: 1px solid black; vertical-align: middle; margin: 0.1em; margin-right: 0.5em; }

.cds-selected-marker.active { opacity: 1; }

.tfbs-details-container .tfbs-weak-hits { padding-bottom: 1em; }

.tfbs-details-container .tfbs-section-header { font-weight: bold; }

.tfbs-details-container .tfbs-hit-list { display: grid; grid-template-columns: max-content max-content; padding-left: 2em; }

.tfbs-details-container .tfbs-hit-list .tfbs-hit-detail { display: inline-block; grid-column: 1; padding-top: 1.5em; }

.tfbs-details-container .tfbs-hit-list .tfbs-hit-detail span { font-weight: bold; }

.tfbs-details-container .tfbs-hit-list .tfbs-confidence { grid-column: 2; margin-left: auto; padding-top: 1.5em; }

.tfbs-details-container .tfbs-hit-list .tfbs-svg-container { grid-column-start: 1; grid-column-end: 3; }

.tfbs-details-container .tfbs-hit-list .tfbs-svg-container * .tfbs-nearby path, .tfbs-details-container .tfbs-hit-list .tfbs-svg-container * .tfbs-nearby .tfbs-ellipsis { fill: #c6c6c6; }

.tfbs-details-container .tfbs-hit-list .tfbs-svg-container * .tfbs-nearby line { stroke: #c6c6c6; }

.tfbs-details-container .tfbs-hit-list .tfbs-svg-container * .tfbs-hit-text-nearby { fill: #c6c6c6; }

.tfbs-details-container .tfbs-hit-list .tfbs-svg-container * .tfbs-coordinate { font-size: 80%; }

.tfbs-details-container .tfbs-hit-list .tfbs-svg-container * .tfbs-line { stroke: black; }

.tfbs-details-container .tfbs-hit-list .tfbs-svg-container * .tfbs-sequence-hit { font-weight: bold; }

.tfbs-details-container .tfbs-hit-list .tfbs-svg-container * .tfbs-gene-label { cursor: pointer; }

.tfbs-sidepanel * .tfbs-sidepanel-table { margin: 1em; }

.tfbs-sidepanel * .tfbs-sidepanel-table * th, .tfbs-sidepanel * .tfbs-sidepanel-table * td { padding: .8em 1em; }

.tfbs-sidepanel * .tfbs-sidepanel-table thead tr v { font-size: 200%; }

.tfbs-sidepanel * .tfbs-sidepanel-table tbody tr { border-bottom: 1px solid #ddd; }

.tfbs-sidepanel * .tfbs-sidepanel-table tbody tr:nth-of-type(even) { background-color: #f3f3f3; }

.tfbs-sidepanel * .tfbs-sidepanel-table tbody tr:last-of-type { border-bottom: 2px solid #444; }

.tfbs-sidepanel * .tfbs-sidepanel-table tbody tr:first-of-type { border-top: 2px solid #444; }