public/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@page {
margin: 0;
}
@media print {
html, body {
width: 255mm;
}
}
/* Stop the body scrolling while a modal is open */
body:has(dialog[open]) {
overflow: hidden;
}
@layer base {
html {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
}
/* Graph */
.grapher {
@apply m-0;
}
svg text {
@apply text-[10px];
}
svg .axis path,
.axis line {
@apply fill-none stroke-[black];
shape-rendering: crispEdges;
}
.grapher.circos .caption {
@apply text-base p-0;
}
.alignment-overview.svg-container {
@apply text-center;
}
.length-distribution.svg-container,
.kablammo.svg-container {
@apply h-[150px];
}
svg .bar:hover {
@apply fill-[orangered];
}
.polygon:hover {
@apply font-bold;
}
sup {
@apply static align-super;
}
/* Pre tag */
pre.indL,
pre.seqF {
@apply bg-[#f5f5f5] p-2.5 my-2.5 break-all break-words border border-[#ccc] text-[11px] text-[#333] md:text-[13px];
}
pre.seqF {
@apply border-l-0 rounded-r-md;
}
pre.indL {
@apply rounded-l-md pr-0;
}
.side-nav.active {
@apply text-seqorange font-bold;
}
.disabled {
@apply cursor-not-allowed pointer-events-none text-gray-400;
}
li:hover .download-fasta-of-selected:not(.disabled),
li:hover .download-alignment-of-selected:not(.disabled) {
@apply bg-gray-200 text-seqorange;
}
/* Text size */
.hit-text,
.pre-text,
.search-button-text,
.side-tooltip-text {
font-size: 0.7rem;
}
/* HSP */
.pre-item {
font-size: 11px;
color: #333;
}
/* Override jQuery UI tooltip styles */
.ui-tooltip {
background-color: #000 !important;
border-radius: 8px !important;
padding: 10px !important;
box-shadow: none !important;
border: 1px solid #000 !important;
}
.ui-tooltip-content {
font-size: 11px;
text-align: center;
color: #fff;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -32px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow::after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
transform: rotate(45deg);
background-color: #000;
border: 1px solide #000;
}
.arrow.top::after {
bottom: -20px;
top: auto;
}
.tooltip-wrap {
width: 300px;
}
.tooltip-arrow-rotate {
transform: rotate(270deg);
}
/* Modal */
::backdrop {
@apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
}
/**
* See:
* http://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face
* */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src:
local('Source Sans Pro'),
local('SourceSansPro-Regular'),
url('../fonts/Source_Sans_Pro_400.woff2') format('woff2'),
url('../fonts/Source_Sans_Pro_400.woff') format('woff'),
url('../fonts/Source_Sans_Pro_400.ttf') format('truetype'),
url('../fonts/Source_Sans_Pro_400.svg') format('svg'),
url('../fonts/Source_Sans_Pro_400.eot') format('embedded-opentype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src:
local('Source Sans Pro Bold'),
local('SourceSansPro-Bold'),
url('../fonts/Source_Sans_Pro_700.woff2') format('woff2'),
url('../fonts/Source_Sans_Pro_700.woff') format('woff'),
url('../fonts/Source_Sans_Pro_700.ttf') format('truetype'),
url('../fonts/Source_Sans_Pro_700.svg') format('svg'),
url('../fonts/Source_Sans_Pro_700.eot') format('embedded-opentype');
}
/**
* These are taken from Kablammo project I think and are necessary for
* downloading functionality.
*/
svg .RdYlBu .q0-2 { fill: rgb(252, 141, 89); }
svg .RdYlBu .q1-2 { fill: rgb(255, 255, 191); }
svg .RdYlBu .q0-3 { fill: rgb(252, 141, 89); }
svg .RdYlBu .q1-3 { fill: rgb(255, 255, 191); }
svg .RdYlBu .q2-3 { fill: rgb(145, 191, 219); }
svg .RdYlBu .q0-4 { fill: rgb(215, 25, 28); }
svg .RdYlBu .q1-4 { fill: rgb(253, 174, 97); }
svg .RdYlBu .q2-4 { fill: rgb(171, 217, 233); }
svg .RdYlBu .q3-4 { fill: rgb(44, 123, 182); }
svg .RdYlBu .q0-5 { fill: rgb(215, 25, 28); }
svg .RdYlBu .q1-5 { fill: rgb(253, 174, 97); }
svg .RdYlBu .q2-5 { fill: rgb(255, 255, 191); }
svg .RdYlBu .q3-5 { fill: rgb(171, 217, 233); }
svg .RdYlBu .q4-5 { fill: rgb(44, 123, 182); }
svg .RdYlBu .q0-6 { fill: rgb(215, 48, 39); }
svg .RdYlBu .q1-6 { fill: rgb(252, 141, 89); }
svg .RdYlBu .q2-6 { fill: rgb(254, 224, 144); }
svg .RdYlBu .q3-6 { fill: rgb(224, 243, 248); }
svg .RdYlBu .q4-6 { fill: rgb(145, 191, 219); }
svg .RdYlBu .q5-6 { fill: rgb(69, 117, 180); }
svg .RdYlBu .q0-7 { fill: rgb(215, 48, 39); }
svg .RdYlBu .q1-7 { fill: rgb(252, 141, 89); }
svg .RdYlBu .q2-7 { fill: rgb(254, 224, 144); }
svg .RdYlBu .q3-7 { fill: rgb(255, 255, 191); }
svg .RdYlBu .q4-7 { fill: rgb(224, 243, 248); }
svg .RdYlBu .q5-7 { fill: rgb(145, 191, 219); }
svg .RdYlBu .q6-7 { fill: rgb(69, 117, 180); }
svg .RdYlBu .q0-8 { fill: rgb(215, 48, 39); }
svg .RdYlBu .q1-8 { fill: rgb(244, 109, 67); }
svg .RdYlBu .q2-8 { fill: rgb(253, 174, 97); }
svg .RdYlBu .q3-8 { fill: rgb(254, 224, 144); }
svg .RdYlBu .q4-8 { fill: rgb(224, 243, 248); }
svg .RdYlBu .q5-8 { fill: rgb(171, 217, 233); }
svg .RdYlBu .q6-8 { fill: rgb(116, 173, 209); }
svg .RdYlBu .q7-8 { fill: rgb(69, 117, 180); }
svg .RdYlBu .q0-9 { fill: rgb(215, 48, 39); }
svg .RdYlBu .q1-9 { fill: rgb(244, 109, 67); }
svg .RdYlBu .q2-9 { fill: rgb(253, 174, 97); }
svg .RdYlBu .q3-9 { fill: rgb(254, 224, 144); }
svg .RdYlBu .q4-9 { fill: rgb(255, 255, 191); }
svg .RdYlBu .q5-9 { fill: rgb(224, 243, 248); }
svg .RdYlBu .q6-9 { fill: rgb(171, 217, 233); }
svg .RdYlBu .q7-9 { fill: rgb(116, 173, 209); }
svg .RdYlBu .q8-9 { fill: rgb(69, 117, 180); }
svg .RdYlBu .q0-10 { fill: rgb(165, 0, 38); }
svg .RdYlBu .q1-10 { fill: rgb(215, 48, 39); }
svg .RdYlBu .q2-10 { fill: rgb(244, 109, 67); }
svg .RdYlBu .q3-10 { fill: rgb(253, 174, 97); }
svg .RdYlBu .q4-10 { fill: rgb(254, 224, 144); }
svg .RdYlBu .q5-10 { fill: rgb(224, 243, 248); }
svg .RdYlBu .q6-10 { fill: rgb(171, 217, 233); }
svg .RdYlBu .q7-10 { fill: rgb(116, 173, 209); }
svg .RdYlBu .q8-10 { fill: rgb(69, 117, 180); }
svg .RdYlBu .q9-10 { fill: rgb(49, 54, 149); }
svg .RdYlBu .q0-11 { fill: rgb(165, 0, 38); }
svg .RdYlBu .q1-11 { fill: rgb(215, 48, 39); }
svg .RdYlBu .q2-11 { fill: rgb(244, 109, 67); }
svg .RdYlBu .q3-11 { fill: rgb(253, 174, 97); }
svg .RdYlBu .q4-11 { fill: rgb(254, 224, 144); }
svg .RdYlBu .q5-11 { fill: rgb(255, 255, 191); }
svg .RdYlBu .q6-11 { fill: rgb(224, 243, 248); }
svg .RdYlBu .q7-11 { fill: rgb(171, 217, 233); }
svg .RdYlBu .q8-11 { fill: rgb(116, 173, 209); }
svg .RdYlBu .q9-11 { fill: rgb(69, 117, 180); }
svg .RdYlBu .q10-11 { fill: rgb(49, 54, 149); }
svg {
--a: #d50000;
--b: #b71c1c;
--c: #c62828;
--d: #d32f2f;
--e: #e53935;
--f: #f44336;
--g: #ff1744;
--h: #ef5350;
--i: #ff5252;
--j: #e65100;
--k: #ef6c00;
--l: #ffc107;
--m: #fbc02d;
--n: #ffd600;
--o: #fdd835;
--p: #ff0;
--q: #ffeb3b;
--r: #ffea00;
--s: #ffee58;
--t: #fff178;
--u: #fff59d;
--v: #fff9c4;
--w: #81d4fa;
--x: #4fc3f7;
--y: #64b5f6;
--z: #42a5f5;
--aa: #2196f3;
--ab: #3949ab;
--ac: #3040af;
--ad: #303f9f;
--ae: #0d47a1;
--af: #1a237e;
}
/* // Copy code from 30 to make 28.
// yellow deletes p,m,t,o,q,u,n,s
// red deletes g,f,d,h,k,i,c
// blue deletes ac,ad,ab,z,y,x */
svg .RdYlBu .q0-12 { fill: var(--a); }
svg .RdYlBu .q1-12 { fill: var(--b); }
svg .RdYlBu .q2-12 { fill: var(--e); }
svg .RdYlBu .q3-12 { fill: var(--j); }
svg .RdYlBu .q4-12 { fill: var(--l); }
svg .RdYlBu .q5-12 { fill: var(--p); }
svg .RdYlBu .q6-12 { fill: var(--r); }
svg .RdYlBu .q7-12 { fill: var(--v); }
svg .RdYlBu .q8-12 { fill: var(--w); }
svg .RdYlBu .q9-12 { fill: var(--aa); }
svg .RdYlBu .q10-12 { fill: var(--ae); }
svg .RdYlBu .q11-12 { fill: var(--af); }
svg .RdYlBu .q0-13 { fill: var(--a); }
svg .RdYlBu .q1-13 { fill: var(--b); }
svg .RdYlBu .q2-13 { fill: var(--e); }
svg .RdYlBu .q3-13 { fill: var(--j); }
svg .RdYlBu .q4-13 { fill: var(--l); }
svg .RdYlBu .q5-13 { fill: var(--n); }
svg .RdYlBu .q6-13 { fill: var(--r); }
svg .RdYlBu .q7-13 { fill: var(--s); }
svg .RdYlBu .q8-13 { fill: var(--v); }
svg .RdYlBu .q9-13 { fill: var(--w); }
svg .RdYlBu .q10-13 { fill: var(--aa); }
svg .RdYlBu .q11-13 { fill: var(--ae); }
svg .RdYlBu .q12-13 { fill: var(--af); }
svg .RdYlBu .q0-14 { fill: var(--a); }
svg .RdYlBu .q1-14 { fill: var(--b); }
svg .RdYlBu .q2-14 { fill: var(--e); }
svg .RdYlBu .q3-14 { fill: var(--j); }
svg .RdYlBu .q4-14 { fill: var(--l); }
svg .RdYlBu .q5-14 { fill: var(--n); }
svg .RdYlBu .q6-14 { fill: var(--p); }
svg .RdYlBu .q7-14 { fill: var(--r); }
svg .RdYlBu .q8-14 { fill: var(--s); }
svg .RdYlBu .q9-14 { fill: var(--v); }
svg .RdYlBu .q10-14 { fill: var(--w); }
svg .RdYlBu .q11-14 { fill: var(--aa); }
svg .RdYlBu .q12-14 { fill: var(--ae); }
svg .RdYlBu .q13-14 { fill: var(--af); }
svg .RdYlBu .q0-15 { fill: var(--a); }
svg .RdYlBu .q1-15 { fill: var(--b); }
svg .RdYlBu .q2-15 { fill: var(--c); }
svg .RdYlBu .q3-15 { fill: var(--e); }
svg .RdYlBu .q4-15 { fill: var(--j); }
svg .RdYlBu .q5-15 { fill: var(--l); }
svg .RdYlBu .q6-15 { fill: var(--n); }
svg .RdYlBu .q7-15 { fill: var(--r); }
svg .RdYlBu .q8-15 { fill: var(--s); }
svg .RdYlBu .q9-15 { fill: var(--v); }
svg .RdYlBu .q10-15 { fill: var(--w); }
svg .RdYlBu .q11-15 { fill: var(--x); }
svg .RdYlBu .q12-15 { fill: var(--aa); }
svg .RdYlBu .q13-15 { fill: var(--ae); }
svg .RdYlBu .q14-15 { fill: var(--af); }
svg .RdYlBu .q0-16 { fill: var(--a); }
svg .RdYlBu .q1-16 { fill: var(--b); }
svg .RdYlBu .q2-16 { fill: var(--c); }
svg .RdYlBu .q3-16 { fill: var(--e); }
svg .RdYlBu .q4-16 { fill: var(--j); }
svg .RdYlBu .q5-16 { fill: var(--l); }
svg .RdYlBu .q6-16 { fill: var(--n); }
svg .RdYlBu .q7-16 { fill: var(--p); }
svg .RdYlBu .q8-16 { fill: var(--r); }
svg .RdYlBu .q9-16 { fill: var(--s); }
svg .RdYlBu .q10-16 { fill: var(--v); }
svg .RdYlBu .q11-16 { fill: var(--w); }
svg .RdYlBu .q12-16 { fill: var(--x); }
svg .RdYlBu .q13-16 { fill: var(--aa); }
svg .RdYlBu .q14-16 { fill: var(--ae); }
svg .RdYlBu .q15-16 { fill: var(--af); }
svg .RdYlBu .q0-17 { fill: var(--a); }
svg .RdYlBu .q1-17 { fill: var(--b); }
svg .RdYlBu .q2-17 { fill: var(--c); }
svg .RdYlBu .q3-17 { fill: var(--e); }
svg .RdYlBu .q4-17 { fill: var(--i); }
svg .RdYlBu .q5-17 { fill: var(--j); }
svg .RdYlBu .q6-17 { fill: var(--l); }
svg .RdYlBu .q7-17 { fill: var(--n); }
svg .RdYlBu .q8-17 { fill: var(--r); }
svg .RdYlBu .q9-17 { fill: var(--s); }
svg .RdYlBu .q10-17 { fill: var(--v); }
svg .RdYlBu .q11-17 { fill: var(--w); }
svg .RdYlBu .q12-17 { fill: var(--x); }
svg .RdYlBu .q13-17 { fill: var(--y); }
svg .RdYlBu .q14-17 { fill: var(--aa); }
svg .RdYlBu .q15-17 { fill: var(--ae); }
svg .RdYlBu .q16-17 { fill: var(--af); }
svg .RdYlBu .q0-18 { fill: var(--a); }
svg .RdYlBu .q1-18 { fill: var(--b); }
svg .RdYlBu .q2-18 { fill: var(--c); }
svg .RdYlBu .q3-18 { fill: var(--e); }
svg .RdYlBu .q4-18 { fill: var(--i); }
svg .RdYlBu .q5-18 { fill: var(--j); }
svg .RdYlBu .q6-18 { fill: var(--l); }
svg .RdYlBu .q7-18 { fill: var(--n); }
svg .RdYlBu .q8-18 { fill: var(--p); }
svg .RdYlBu .q9-18 { fill: var(--r); }
svg .RdYlBu .q10-18 { fill: var(--s); }
svg .RdYlBu .q11-18 { fill: var(--v); }
svg .RdYlBu .q12-18 { fill: var(--w); }
svg .RdYlBu .q13-18 { fill: var(--x); }
svg .RdYlBu .q14-18 { fill: var(--y); }
svg .RdYlBu .q15-18 { fill: var(--aa); }
svg .RdYlBu .q16-18 { fill: var(--ae); }
svg .RdYlBu .q17-18 { fill: var(--af); }
svg .RdYlBu .q0-19 { fill: var(--a); }
svg .RdYlBu .q1-19 { fill: var(--b); }
svg .RdYlBu .q2-19 { fill: var(--c); }
svg .RdYlBu .q3-19 { fill: var(--e); }
svg .RdYlBu .q4-19 { fill: var(--i); }
svg .RdYlBu .q5-19 { fill: var(--j); }
svg .RdYlBu .q6-19 { fill: var(--k); }
svg .RdYlBu .q7-19 { fill: var(--l); }
svg .RdYlBu .q8-19 { fill: var(--n); }
svg .RdYlBu .q9-19 { fill: var(--r); }
svg .RdYlBu .q10-19 { fill: var(--s); }
svg .RdYlBu .q11-19 { fill: var(--u); }
svg .RdYlBu .q12-19 { fill: var(--v); }
svg .RdYlBu .q13-19 { fill: var(--w); }
svg .RdYlBu .q14-19 { fill: var(--x); }
svg .RdYlBu .q15-19 { fill: var(--y); }
svg .RdYlBu .q16-19 { fill: var(--aa); }
svg .RdYlBu .q17-19 { fill: var(--ae); }
svg .RdYlBu .q18-19 { fill: var(--af); }
svg .RdYlBu .q0-20 { fill: var(--a); }
svg .RdYlBu .q1-20 { fill: var(--b); }
svg .RdYlBu .q2-20 { fill: var(--c); }
svg .RdYlBu .q3-20 { fill: var(--e); }
svg .RdYlBu .q4-20 { fill: var(--i); }
svg .RdYlBu .q5-20 { fill: var(--j); }
svg .RdYlBu .q6-20 { fill: var(--k); }
svg .RdYlBu .q7-20 { fill: var(--l); }
svg .RdYlBu .q8-20 { fill: var(--n); }
svg .RdYlBu .q9-20 { fill: var(--p); }
svg .RdYlBu .q10-20 { fill: var(--r); }
svg .RdYlBu .q11-20 { fill: var(--s); }
svg .RdYlBu .q12-20 { fill: var(--u); }
svg .RdYlBu .q13-20 { fill: var(--v); }
svg .RdYlBu .q14-20 { fill: var(--w); }
svg .RdYlBu .q15-20 { fill: var(--x); }
svg .RdYlBu .q16-20 { fill: var(--y); }
svg .RdYlBu .q17-20 { fill: var(--aa); }
svg .RdYlBu .q18-20 { fill: var(--ae); }
svg .RdYlBu .q19-20 { fill: var(--af); }
svg .RdYlBu .q0-21 { fill: var(--a); }
svg .RdYlBu .q1-21 { fill: var(--b); }
svg .RdYlBu .q2-21 { fill: var(--c); }
svg .RdYlBu .q3-21 { fill: var(--e); }
svg .RdYlBu .q4-21 { fill: var(--i); }
svg .RdYlBu .q5-21 { fill: var(--j); }
svg .RdYlBu .q6-21 { fill: var(--k); }
svg .RdYlBu .q7-21 { fill: var(--l); }
svg .RdYlBu .q8-21 { fill: var(--n); }
svg .RdYlBu .q9-21 { fill: var(--o); }
svg .RdYlBu .q10-21 { fill: var(--q); }
svg .RdYlBu .q11-21 { fill: var(--r); }
svg .RdYlBu .q12-21 { fill: var(--s); }
svg .RdYlBu .q13-21 { fill: var(--u); }
svg .RdYlBu .q14-21 { fill: var(--v); }
svg .RdYlBu .q15-21 { fill: var(--w); }
svg .RdYlBu .q16-21 { fill: var(--x); }
svg .RdYlBu .q17-21 { fill: var(--y); }
svg .RdYlBu .q18-21 { fill: var(--aa); }
svg .RdYlBu .q19-21 { fill: var(--ae); }
svg .RdYlBu .q20-21 { fill: var(--af); }
svg .RdYlBu .q0-22 { fill: var(--a); }
svg .RdYlBu .q1-22 { fill: var(--b); }
svg .RdYlBu .q2-22 { fill: var(--c); }
svg .RdYlBu .q3-22 { fill: var(--e); }
svg .RdYlBu .q4-22 { fill: var(--i); }
svg .RdYlBu .q5-22 { fill: var(--j); }
svg .RdYlBu .q6-22 { fill: var(--k); }
svg .RdYlBu .q7-22 { fill: var(--l); }
svg .RdYlBu .q8-22 { fill: var(--n); }
svg .RdYlBu .q9-22 { fill: var(--o); }
svg .RdYlBu .q10-22 { fill: var(--p); }
svg .RdYlBu .q11-22 { fill: var(--q); }
svg .RdYlBu .q12-22 { fill: var(--r); }
svg .RdYlBu .q13-22 { fill: var(--s); }
svg .RdYlBu .q14-22 { fill: var(--u); }
svg .RdYlBu .q15-22 { fill: var(--v); }
svg .RdYlBu .q16-22 { fill: var(--w); }
svg .RdYlBu .q17-22 { fill: var(--x); }
svg .RdYlBu .q18-22 { fill: var(--y); }
svg .RdYlBu .q19-22 { fill: var(--aa); }
svg .RdYlBu .q20-22 { fill: var(--ae); }
svg .RdYlBu .q21-22 { fill: var(--af); }
svg .RdYlBu .q0-23 { fill: var(--a); }
svg .RdYlBu .q1-23 { fill: var(--b); }
svg .RdYlBu .q2-23 { fill: var(--c); }
svg .RdYlBu .q3-23 { fill: var(--e); }
svg .RdYlBu .q4-23 { fill: var(--i); }
svg .RdYlBu .q5-23 { fill: var(--j); }
svg .RdYlBu .q6-23 { fill: var(--k); }
svg .RdYlBu .q7-23 { fill: var(--l); }
svg .RdYlBu .q8-23 { fill: var(--m); }
svg .RdYlBu .q9-23 { fill: var(--n); }
svg .RdYlBu .q10-23 { fill: var(--o); }
svg .RdYlBu .q11-23 { fill: var(--q); }
svg .RdYlBu .q12-23 { fill: var(--r); }
svg .RdYlBu .q13-23 { fill: var(--s); }
svg .RdYlBu .q14-23 { fill: var(--t); }
svg .RdYlBu .q15-23 { fill: var(--u); }
svg .RdYlBu .q16-23 { fill: var(--v); }
svg .RdYlBu .q17-23 { fill: var(--w); }
svg .RdYlBu .q18-23 { fill: var(--x); }
svg .RdYlBu .q19-23 { fill: var(--y); }
svg .RdYlBu .q20-23 { fill: var(--aa); }
svg .RdYlBu .q21-23 { fill: var(--ae); }
svg .RdYlBu .q22-23 { fill: var(--af); }
svg .RdYlBu .q0-24 { fill: var(--a); }
svg .RdYlBu .q1-24 { fill: var(--b); }
svg .RdYlBu .q2-24 { fill: var(--c); }
svg .RdYlBu .q3-24 { fill: var(--e); }
svg .RdYlBu .q4-24 { fill: var(--i); }
svg .RdYlBu .q5-24 { fill: var(--j); }
svg .RdYlBu .q6-24 { fill: var(--k); }
svg .RdYlBu .q7-24 { fill: var(--l); }
svg .RdYlBu .q8-24 { fill: var(--m); }
svg .RdYlBu .q9-24 { fill: var(--n); }
svg .RdYlBu .q10-24 { fill: var(--o); }
svg .RdYlBu .q11-24 { fill: var(--p); }
svg .RdYlBu .q12-24 { fill: var(--q); }
svg .RdYlBu .q13-24 { fill: var(--r); }
svg .RdYlBu .q14-24 { fill: var(--s); }
svg .RdYlBu .q15-24 { fill: var(--t); }
svg .RdYlBu .q16-24 { fill: var(--u); }
svg .RdYlBu .q17-24 { fill: var(--v); }
svg .RdYlBu .q18-24 { fill: var(--w); }
svg .RdYlBu .q19-24 { fill: var(--x); }
svg .RdYlBu .q20-24 { fill: var(--y); }
svg .RdYlBu .q21-24 { fill: var(--aa); }
svg .RdYlBu .q22-24 { fill: var(--ae); }
svg .RdYlBu .q23-24 { fill: var(--af); }
svg .RdYlBu .q0-25 { fill: var(--a); }
svg .RdYlBu .q1-25 { fill: var(--b); }
svg .RdYlBu .q2-25 { fill: var(--c); }
svg .RdYlBu .q3-25 { fill: var(--e); }
svg .RdYlBu .q4-25 { fill: var(--h); }
svg .RdYlBu .q5-25 { fill: var(--i); }
svg .RdYlBu .q6-25 { fill: var(--j); }
svg .RdYlBu .q7-25 { fill: var(--k); }
svg .RdYlBu .q8-25 { fill: var(--l); }
svg .RdYlBu .q9-25 { fill: var(--m); }
svg .RdYlBu .q10-25 { fill: var(--n); }
svg .RdYlBu .q11-25 { fill: var(--o); }
svg .RdYlBu .q12-25 { fill: var(--q); }
svg .RdYlBu .q13-25 { fill: var(--r); }
svg .RdYlBu .q14-25 { fill: var(--s); }
svg .RdYlBu .q15-25 { fill: var(--t); }
svg .RdYlBu .q16-25 { fill: var(--u); }
svg .RdYlBu .q17-25 { fill: var(--v); }
svg .RdYlBu .q18-25 { fill: var(--w); }
svg .RdYlBu .q19-25 { fill: var(--x); }
svg .RdYlBu .q20-25 { fill: var(--y); }
svg .RdYlBu .q21-25 { fill: var(--z); }
svg .RdYlBu .q22-25 { fill: var(--aa); }
svg .RdYlBu .q23-25 { fill: var(--ae); }
svg .RdYlBu .q24-25 { fill: var(--af); }
svg .RdYlBu .q0-26 { fill: var(--a); }
svg .RdYlBu .q1-26 { fill: var(--b); }
svg .RdYlBu .q2-26 { fill: var(--c); }
svg .RdYlBu .q4-26 { fill: var(--e); }
svg .RdYlBu .q5-26 { fill: var(--h); }
svg .RdYlBu .q6-26 { fill: var(--i); }
svg .RdYlBu .q7-26 { fill: var(--j); }
svg .RdYlBu .q8-26 { fill: var(--k); }
svg .RdYlBu .q9-26 { fill: var(--l); }
svg .RdYlBu .q10-26 { fill: var(--m); }
svg .RdYlBu .q11-26 { fill: var(--n); }
svg .RdYlBu .q12-26 { fill: var(--o); }
svg .RdYlBu .q13-26 { fill: var(--p); }
svg .RdYlBu .q14-26 { fill: var(--q); }
svg .RdYlBu .q15-26 { fill: var(--r); }
svg .RdYlBu .q16-26 { fill: var(--s); }
svg .RdYlBu .q17-26 { fill: var(--t); }
svg .RdYlBu .q18-26 { fill: var(--u); }
svg .RdYlBu .q19-26 { fill: var(--v); }
svg .RdYlBu .q20-26 { fill: var(--w); }
svg .RdYlBu .q21-26 { fill: var(--x); }
svg .RdYlBu .q22-26 { fill: var(--y); }
svg .RdYlBu .q23-26 { fill: var(--z); }
svg .RdYlBu .q24-26 { fill: var(--aa); }
svg .RdYlBu .q26-26 { fill: var(--ae); }
svg .RdYlBu .q27-26 { fill: var(--af); }
svg .RdYlBu .q0-27 { fill: var(--a); }
svg .RdYlBu .q1-27 { fill: var(--b); }
svg .RdYlBu .q2-27 { fill: var(--c); }
svg .RdYlBu .q3-27 { fill: var(--d); }
svg .RdYlBu .q4-27 { fill: var(--e); }
svg .RdYlBu .q5-27 { fill: var(--h); }
svg .RdYlBu .q6-27 { fill: var(--i); }
svg .RdYlBu .q7-27 { fill: var(--j); }
svg .RdYlBu .q8-27 { fill: var(--k); }
svg .RdYlBu .q9-27 { fill: var(--l); }
svg .RdYlBu .q10-27 { fill: var(--m); }
svg .RdYlBu .q11-27 { fill: var(--n); }
svg .RdYlBu .q12-27 { fill: var(--o); }
svg .RdYlBu .q14-27 { fill: var(--q); }
svg .RdYlBu .q15-27 { fill: var(--r); }
svg .RdYlBu .q16-27 { fill: var(--s); }
svg .RdYlBu .q17-27 { fill: var(--t); }
svg .RdYlBu .q18-27 { fill: var(--u); }
svg .RdYlBu .q19-27 { fill: var(--v); }
svg .RdYlBu .q20-27 { fill: var(--w); }
svg .RdYlBu .q21-27 { fill: var(--x); }
svg .RdYlBu .q22-27 { fill: var(--y); }
svg .RdYlBu .q23-27 { fill: var(--z); }
svg .RdYlBu .q24-27 { fill: var(--aa); }
svg .RdYlBu .q25-27 { fill: var(--ab); }
svg .RdYlBu .q26-27 { fill: var(--ae); }
svg .RdYlBu .q27-27 { fill: var(--af); }
svg .RdYlBu .q0-28 { fill: var(--a); }
svg .RdYlBu .q1-28 { fill: var(--b); }
svg .RdYlBu .q2-28 { fill: var(--c); }
svg .RdYlBu .q3-28 { fill: var(--d); }
svg .RdYlBu .q4-28 { fill: var(--e); }
svg .RdYlBu .q5-28 { fill: var(--h); }
svg .RdYlBu .q6-28 { fill: var(--i); }
svg .RdYlBu .q7-28 { fill: var(--j); }
svg .RdYlBu .q8-28 { fill: var(--k); }
svg .RdYlBu .q9-28 { fill: var(--l); }
svg .RdYlBu .q10-28 { fill: var(--m); }
svg .RdYlBu .q11-28 { fill: var(--n); }
svg .RdYlBu .q12-28 { fill: var(--o); }
svg .RdYlBu .q13-28 { fill: var(--p); }
svg .RdYlBu .q14-28 { fill: var(--q); }
svg .RdYlBu .q15-28 { fill: var(--r); }
svg .RdYlBu .q16-28 { fill: var(--s); }
svg .RdYlBu .q17-28 { fill: var(--t); }
svg .RdYlBu .q18-28 { fill: var(--u); }
svg .RdYlBu .q19-28 { fill: var(--v); }
svg .RdYlBu .q20-28 { fill: var(--w); }
svg .RdYlBu .q21-28 { fill: var(--x); }
svg .RdYlBu .q22-28 { fill: var(--y); }
svg .RdYlBu .q23-28 { fill: var(--z); }
svg .RdYlBu .q24-28 { fill: var(--aa); }
svg .RdYlBu .q25-28 { fill: var(--ab); }
svg .RdYlBu .q26-28 { fill: var(--ae); }
svg .RdYlBu .q27-28 { fill: var(--af); }
svg .RdYlBu .q0-29 { fill: var(--a); }
svg .RdYlBu .q1-29 { fill: var(--b); }
svg .RdYlBu .q2-29 { fill: var(--c); }
svg .RdYlBu .q3-29 { fill: var(--d); }
svg .RdYlBu .q4-29 { fill: var(--e); }
svg .RdYlBu .q5-29 { fill: var(--f); }
svg .RdYlBu .q6-29 { fill: var(--h); }
svg .RdYlBu .q7-29 { fill: var(--i); }
svg .RdYlBu .q8-29 { fill: var(--j); }
svg .RdYlBu .q9-29 { fill: var(--k); }
svg .RdYlBu .q10-29 { fill: var(--l); }
svg .RdYlBu .q11-29 { fill: var(--m); }
svg .RdYlBu .q12-29 { fill: var(--n); }
svg .RdYlBu .q13-29 { fill: var(--o); }
svg .RdYlBu .q14-29 { fill: var(--q); }
svg .RdYlBu .q15-29 { fill: var(--r); }
svg .RdYlBu .q16-29 { fill: var(--s); }
svg .RdYlBu .q17-29 { fill: var(--t); }
svg .RdYlBu .q18-29 { fill: var(--u); }
svg .RdYlBu .q19-29 { fill: var(--v); }
svg .RdYlBu .q20-29 { fill: var(--w); }
svg .RdYlBu .q21-29 { fill: var(--x); }
svg .RdYlBu .q22-29 { fill: var(--y); }
svg .RdYlBu .q23-29 { fill: var(--z); }
svg .RdYlBu .q24-29 { fill: var(--aa); }
svg .RdYlBu .q25-29 { fill: var(--ab); }
svg .RdYlBu .q26-29 { fill: var(--ad); }
svg .RdYlBu .q27-29 { fill: var(--ae); }
svg .RdYlBu .q28-29 { fill: var(--af); }
svg .RdYlBu .q0-30 { fill: var(--a); }
svg .RdYlBu .q1-30 { fill: var(--b); }
svg .RdYlBu .q2-30 { fill: var(--c); }
svg .RdYlBu .q3-30 { fill: var(--d); }
svg .RdYlBu .q4-30 { fill: var(--e); }
svg .RdYlBu .q5-30 { fill: var(--f); }
svg .RdYlBu .q6-30 { fill: var(--h); }
svg .RdYlBu .q7-30 { fill: var(--i); }
svg .RdYlBu .q8-30 { fill: var(--j); }
svg .RdYlBu .q9-30 { fill: var(--k); }
svg .RdYlBu .q10-30 { fill: var(--l); }
svg .RdYlBu .q11-30 { fill: var(--m); }
svg .RdYlBu .q12-30 { fill: var(--n); }
svg .RdYlBu .q13-30 { fill: var(--o); }
svg .RdYlBu .q14-30 { fill: var(--p); }
svg .RdYlBu .q15-30 { fill: var(--q); }
svg .RdYlBu .q16-30 { fill: var(--r); }
svg .RdYlBu .q17-30 { fill: var(--s); }
svg .RdYlBu .q18-30 { fill: var(--t); }
svg .RdYlBu .q19-30 { fill: var(--u); }
svg .RdYlBu .q20-30 { fill: var(--v); }
svg .RdYlBu .q21-30 { fill: var(--w); }
svg .RdYlBu .q22-30 { fill: var(--x); }
svg .RdYlBu .q23-30 { fill: var(--y); }
svg .RdYlBu .q24-30 { fill: var(--z); }
svg .RdYlBu .q25-30 { fill: var(--aa); }
svg .RdYlBu .q26-30 { fill: var(--ab); }
svg .RdYlBu .q27-30 { fill: var(--ad); }
svg .RdYlBu .q28-30 { fill: var(--ae); }
svg .RdYlBu .q29-30 { fill: var(--af); }
svg .RdYlBu .q0-31 { fill: var(--a); }
svg .RdYlBu .q1-31 { fill: var(--b); }
svg .RdYlBu .q2-31 { fill: var(--c); }
svg .RdYlBu .q3-31 { fill: var(--d); }
svg .RdYlBu .q4-31 { fill: var(--e); }
svg .RdYlBu .q5-31 { fill: var(--f); }
svg .RdYlBu .q6-31 { fill: var(--g); }
svg .RdYlBu .q7-31 { fill: var(--h); }
svg .RdYlBu .q8-31 { fill: var(--i); }
svg .RdYlBu .q9-31 { fill: var(--j); }
svg .RdYlBu .q10-31 { fill: var(--k); }
svg .RdYlBu .q11-31 { fill: var(--l); }
svg .RdYlBu .q12-31 { fill: var(--m); }
svg .RdYlBu .q13-31 { fill: var(--n); }
svg .RdYlBu .q14-31 { fill: var(--o); }
svg .RdYlBu .q15-31 { fill: var(--q); }
svg .RdYlBu .q16-31 { fill: var(--r); }
svg .RdYlBu .q17-31 { fill: var(--s); }
svg .RdYlBu .q18-31 { fill: var(--t); }
svg .RdYlBu .q19-31 { fill: var(--u); }
svg .RdYlBu .q20-31 { fill: var(--v); }
svg .RdYlBu .q21-31 { fill: var(--w); }
svg .RdYlBu .q22-31 { fill: var(--x); }
svg .RdYlBu .q23-31 { fill: var(--y); }
svg .RdYlBu .q24-31 { fill: var(--z); }
svg .RdYlBu .q25-31 { fill: var(--aa); }
svg .RdYlBu .q26-31 { fill: var(--ab); }
svg .RdYlBu .q27-31 { fill: var(--ac); }
svg .RdYlBu .q28-31 { fill: var(--ad); }
svg .RdYlBu .q29-31 { fill: var(--ae); }
svg .RdYlBu .q30-31 { fill: var(--af); }
svg .RdYlBu .q0-32 { fill: var(--a); }
svg .RdYlBu .q1-32 { fill: var(--b); }
svg .RdYlBu .q2-32 { fill: var(--c); }
svg .RdYlBu .q3-32 { fill: var(--d); }
svg .RdYlBu .q4-32 { fill: var(--e); }
svg .RdYlBu .q5-32 { fill: var(--f); }
svg .RdYlBu .q6-32 { fill: var(--g); }
svg .RdYlBu .q7-32 { fill: var(--h); }
svg .RdYlBu .q8-32 { fill: var(--i); }
svg .RdYlBu .q9-32 { fill: var(--j); }
svg .RdYlBu .q10-32 { fill: var(--k); }
svg .RdYlBu .q11-32 { fill: var(--l); }
svg .RdYlBu .q12-32 { fill: var(--m); }
svg .RdYlBu .q13-32 { fill: var(--n); }
svg .RdYlBu .q14-32 { fill: var(--o); }
svg .RdYlBu .q15-32 { fill: var(--p); }
svg .RdYlBu .q16-32 { fill: var(--q); }
svg .RdYlBu .q17-32 { fill: var(--r); }
svg .RdYlBu .q18-32 { fill: var(--s); }
svg .RdYlBu .q19-32 { fill: var(--t); }
svg .RdYlBu .q20-32 { fill: var(--u); }
svg .RdYlBu .q21-32 { fill: var(--v); }
svg .RdYlBu .q22-32 { fill: var(--w); }
svg .RdYlBu .q23-32 { fill: var(--x); }
svg .RdYlBu .q24-32 { fill: var(--y); }
svg .RdYlBu .q25-32 { fill: var(--z); }
svg .RdYlBu .q26-32 { fill: var(--aa); }
svg .RdYlBu .q27-32 { fill: var(--ab); }
svg .RdYlBu .q28-32 { fill: var(--ac); }
svg .RdYlBu .q29-32 { fill: var(--ad); }
svg .RdYlBu .q30-32 { fill: var(--ae); }
svg .RdYlBu .q31-32 { fill: var(--af); }