sequenceserver 3.1.2 → 3.2.0

data/public/css/app.css

@@ -2,120 +2,803 @@
 @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;
+}
 
-/* Backported bootstrap tooltip styles */
+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;
+}
 
-.tooltip {
+.ui-tooltip-content {
+  font-size: 11px;
+  text-align: center;
+  color: #fff;
+}
+
+.arrow {
+  width: 70px;
+  height: 16px;
+  overflow: hidden;
   position: absolute;
-  z-index: 1070;
-  display: block;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.42857143;
-  line-break: auto;
-  text-align: left;
-  text-align: start;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-  white-space: normal;
-  font-size: 12px;
-  filter: alpha(opacity=0);
-  opacity: 0;
-}
-.tooltip.in {
-  filter: alpha(opacity=90);
-  opacity: 0.9;
-}
-.tooltip.top {
-  padding: 5px 0;
-  margin-top: -3px;
-}
-.tooltip.right {
-  padding: 0 5px;
-  margin-left: 3px;
-}
-.tooltip.bottom {
-  padding: 5px 0;
-  margin-top: 3px;
-}
-.tooltip.left {
-  padding: 0 5px;
-  margin-left: -3px;
-}
-.tooltip.top .tooltip-arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px 5px 0;
-  border-top-color: #000;
-}
-.tooltip.top-left .tooltip-arrow {
-  right: 5px;
-  bottom: 0;
-  margin-bottom: -5px;
-  border-width: 5px 5px 0;
-  border-top-color: #000;
-}
-.tooltip.top-right .tooltip-arrow {
-  bottom: 0;
-  left: 5px;
-  margin-bottom: -5px;
-  border-width: 5px 5px 0;
-  border-top-color: #000;
-}
-.tooltip.right .tooltip-arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  border-width: 5px 5px 5px 0;
-  border-right-color: #000;
-}
-.tooltip.left .tooltip-arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #000;
-}
-.tooltip.bottom .tooltip-arrow {
-  top: 0;
   left: 50%;
-  margin-left: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000;
-}
-.tooltip.bottom-left .tooltip-arrow {
-  top: 0;
-  right: 5px;
-  margin-top: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000;
-}
-.tooltip.bottom-right .tooltip-arrow {
-  top: 0;
-  left: 5px;
-  margin-top: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000;
-}
-.tooltip-inner {
-  max-width: 200px;
-  padding: 3px 8px;
-  color: #fff;
-  text-align: center;
-  background-color: #000;
-  border-radius: 4px;
+  margin-left: -32px;
+  bottom: -16px;
+}
+
+.arrow.top {
+  top: -16px;
+  bottom: auto;
+}
+
+.arrow.left {
+  left: 20%;
 }
-.tooltip-arrow {
+
+.arrow::after {
+  content: "";
   position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
+  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); }