Plotly Color Scales
===================

Beautiful, modern color scales from Plotly for web visualizations and interactive plots.


Miscellaneous
-------------

.. raw:: html


   <div id="_82cc19f081d9479f8ec2d6d169345c6b" class="color-swatch">
       <style>
           #_82cc19f081d9479f8ec2d6d169345c6b {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
               gap: 0.5rem 1rem;
               justify-content: space-between;
               overflow: hidden;
               resize: both;
               width: min(65rem, 100%);
           }
           #_82cc19f081d9479f8ec2d6d169345c6b div {
               width: 100%;
           }
           #_82cc19f081d9479f8ec2d6d169345c6b > div.gradient {
               width: 100%;
               height: min(4rem, 100%);
               display: grid;
               gap: 0.2rem;
               grid-template-rows: 1rem auto;
           }
           #_82cc19f081d9479f8ec2d6d169345c6b .color {
               height: minmax(1.5rem, 100%);
           }
           #_82cc19f081d9479f8ec2d6d169345c6b > div.gradient > strong {
               margin: 0;
               padding: 0;
           }
           #_82cc19f081d9479f8ec2d6d169345c6b img {height: 100%;}
       </style>
       
           <div class="gradient">
       <style>
           #_50c45e0d589a416282ce68e5f11b2647 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_50c45e0d589a416282ce68e5f11b2647 div { flex: 1 1 0; }
           #_50c45e0d589a416282ce68e5f11b2647 div.color { width: 100%; height: 100%; }
           #_50c45e0d589a416282ce68e5f11b2647 div.cmap { width: 100%; height: auto; }
           #_50c45e0d589a416282ce68e5f11b2647 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>BrBG</strong>
       
       <div id="_50c45e0d589a416282ce68e5f11b2647" class="color-map">
           
                           <div>
                   <style>
       #_8a526ea70de44c2d8725442a545b4fb6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 48, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8a526ea70de44c2d8725442a545b4fb6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8a526ea70de44c2d8725442a545b4fb6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8a526ea70de44c2d8725442a545b4fb6" class="color" data-tooltip="RGBA: 84, 48, 5, 1.0
   HEXA: #543005ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5c6d6d6af6c48c6a86d3126c17dfec6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 81, 10, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5c6d6d6af6c48c6a86d3126c17dfec6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5c6d6d6af6c48c6a86d3126c17dfec6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5c6d6d6af6c48c6a86d3126c17dfec6" class="color" data-tooltip="RGBA: 140, 81, 10, 1.0
   HEXA: #8c510aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1788fc01ecca424c8bd420a819ef122e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 129, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1788fc01ecca424c8bd420a819ef122e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1788fc01ecca424c8bd420a819ef122e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1788fc01ecca424c8bd420a819ef122e" class="color" data-tooltip="RGBA: 191, 129, 45, 1.0
   HEXA: #bf812dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3bf375ba2a20408990a641f6e6ebe775 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 194, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3bf375ba2a20408990a641f6e6ebe775::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3bf375ba2a20408990a641f6e6ebe775:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3bf375ba2a20408990a641f6e6ebe775" class="color" data-tooltip="RGBA: 223, 194, 125, 1.0
   HEXA: #dfc27dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0bf369286ffa47dd9b1f9e8ead1ea1b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 232, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0bf369286ffa47dd9b1f9e8ead1ea1b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0bf369286ffa47dd9b1f9e8ead1ea1b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0bf369286ffa47dd9b1f9e8ead1ea1b5" class="color" data-tooltip="RGBA: 246, 232, 195, 1.0
   HEXA: #f6e8c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_722a6ceca2ae415394c516ae715545ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 245, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_722a6ceca2ae415394c516ae715545ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_722a6ceca2ae415394c516ae715545ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_722a6ceca2ae415394c516ae715545ee" class="color" data-tooltip="RGBA: 245, 245, 245, 1.0
   HEXA: #f5f5f5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_673cd49d6c8945ba96beafb2193252eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 234, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_673cd49d6c8945ba96beafb2193252eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_673cd49d6c8945ba96beafb2193252eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_673cd49d6c8945ba96beafb2193252eb" class="color" data-tooltip="RGBA: 199, 234, 229, 1.0
   HEXA: #c7eae5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_73d783b7c2754312b855f33626417edf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 205, 193, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_73d783b7c2754312b855f33626417edf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_73d783b7c2754312b855f33626417edf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_73d783b7c2754312b855f33626417edf" class="color" data-tooltip="RGBA: 128, 205, 193, 1.0
   HEXA: #80cdc1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_02f7c515ece6424eb798fb56e9d8414d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 151, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_02f7c515ece6424eb798fb56e9d8414d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_02f7c515ece6424eb798fb56e9d8414d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_02f7c515ece6424eb798fb56e9d8414d" class="color" data-tooltip="RGBA: 53, 151, 143, 1.0
   HEXA: #35978fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63f565b8b7754ac3ad07a6477b42d116 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 102, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63f565b8b7754ac3ad07a6477b42d116::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63f565b8b7754ac3ad07a6477b42d116:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63f565b8b7754ac3ad07a6477b42d116" class="color" data-tooltip="RGBA: 1, 102, 94, 1.0
   HEXA: #01665eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b168abc940554beb8babb67c7668fd38 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 60, 48, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b168abc940554beb8babb67c7668fd38::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b168abc940554beb8babb67c7668fd38:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b168abc940554beb8babb67c7668fd38" class="color" data-tooltip="RGBA: 0, 60, 48, 1.0
   HEXA: #003c30ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9b1bf223c7e3415188fe57dcf2c07714 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9b1bf223c7e3415188fe57dcf2c07714 div { flex: 1 1 0; }
           #_9b1bf223c7e3415188fe57dcf2c07714 div.color { width: 100%; height: 100%; }
           #_9b1bf223c7e3415188fe57dcf2c07714 div.cmap { width: 100%; height: auto; }
           #_9b1bf223c7e3415188fe57dcf2c07714 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PRGn</strong>
       
       <div id="_9b1bf223c7e3415188fe57dcf2c07714" class="color-map">
           
                           <div>
                   <style>
       #_860a3c1e62e44e1c862469aed64e7da2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 0, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_860a3c1e62e44e1c862469aed64e7da2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_860a3c1e62e44e1c862469aed64e7da2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_860a3c1e62e44e1c862469aed64e7da2" class="color" data-tooltip="RGBA: 64, 0, 75, 1.0
   HEXA: #40004bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b89e21e3f9f4a32b552fac8d5fbe524 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 42, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b89e21e3f9f4a32b552fac8d5fbe524::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b89e21e3f9f4a32b552fac8d5fbe524:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b89e21e3f9f4a32b552fac8d5fbe524" class="color" data-tooltip="RGBA: 118, 42, 131, 1.0
   HEXA: #762a83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b294b07f8a64a3785f22ca32cf56b3b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 112, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b294b07f8a64a3785f22ca32cf56b3b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b294b07f8a64a3785f22ca32cf56b3b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b294b07f8a64a3785f22ca32cf56b3b" class="color" data-tooltip="RGBA: 153, 112, 171, 1.0
   HEXA: #9970abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_22fafe1450f74f61b6ccec9ecad1d3a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 165, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22fafe1450f74f61b6ccec9ecad1d3a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22fafe1450f74f61b6ccec9ecad1d3a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22fafe1450f74f61b6ccec9ecad1d3a4" class="color" data-tooltip="RGBA: 194, 165, 207, 1.0
   HEXA: #c2a5cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9264e8d33fd34b8196c64034bf1e37ed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 212, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9264e8d33fd34b8196c64034bf1e37ed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9264e8d33fd34b8196c64034bf1e37ed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9264e8d33fd34b8196c64034bf1e37ed" class="color" data-tooltip="RGBA: 231, 212, 232, 1.0
   HEXA: #e7d4e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82ad30d83d9d45cca9fc79a2a0fb2c31 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82ad30d83d9d45cca9fc79a2a0fb2c31::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82ad30d83d9d45cca9fc79a2a0fb2c31:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82ad30d83d9d45cca9fc79a2a0fb2c31" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bc25023f25ac4585859287e7c4718f82 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 240, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc25023f25ac4585859287e7c4718f82::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc25023f25ac4585859287e7c4718f82:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc25023f25ac4585859287e7c4718f82" class="color" data-tooltip="RGBA: 217, 240, 211, 1.0
   HEXA: #d9f0d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0804e69327fb44dc85549f0e55178cc2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 219, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0804e69327fb44dc85549f0e55178cc2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0804e69327fb44dc85549f0e55178cc2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0804e69327fb44dc85549f0e55178cc2" class="color" data-tooltip="RGBA: 166, 219, 160, 1.0
   HEXA: #a6dba0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aecb7aa1f7bb4cb1bec7d265022945ed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(90, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aecb7aa1f7bb4cb1bec7d265022945ed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aecb7aa1f7bb4cb1bec7d265022945ed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aecb7aa1f7bb4cb1bec7d265022945ed" class="color" data-tooltip="RGBA: 90, 174, 97, 1.0
   HEXA: #5aae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d7e59a74751940fc9460182412b622be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 120, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d7e59a74751940fc9460182412b622be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d7e59a74751940fc9460182412b622be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d7e59a74751940fc9460182412b622be" class="color" data-tooltip="RGBA: 27, 120, 55, 1.0
   HEXA: #1b7837ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_209912d3f522411a99a0babbc1a9fa4a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_209912d3f522411a99a0babbc1a9fa4a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_209912d3f522411a99a0babbc1a9fa4a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_209912d3f522411a99a0babbc1a9fa4a" class="color" data-tooltip="RGBA: 0, 68, 27, 1.0
   HEXA: #00441bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_aca9338aa2e24646a97ad5dc17896ffa {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_aca9338aa2e24646a97ad5dc17896ffa div { flex: 1 1 0; }
           #_aca9338aa2e24646a97ad5dc17896ffa div.color { width: 100%; height: 100%; }
           #_aca9338aa2e24646a97ad5dc17896ffa div.cmap { width: 100%; height: auto; }
           #_aca9338aa2e24646a97ad5dc17896ffa div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PiYG</strong>
       
       <div id="_aca9338aa2e24646a97ad5dc17896ffa" class="color-map">
           
                           <div>
                   <style>
       #_88d110c3c3d24c42ba20c008fb744953 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 1, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_88d110c3c3d24c42ba20c008fb744953::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_88d110c3c3d24c42ba20c008fb744953:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_88d110c3c3d24c42ba20c008fb744953" class="color" data-tooltip="RGBA: 142, 1, 82, 1.0
   HEXA: #8e0152ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2358680f477e481b8a082de1a8449409 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 27, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2358680f477e481b8a082de1a8449409::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2358680f477e481b8a082de1a8449409:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2358680f477e481b8a082de1a8449409" class="color" data-tooltip="RGBA: 197, 27, 125, 1.0
   HEXA: #c51b7dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a0cc5fbf562b48a58083db4c996adf5f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 119, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a0cc5fbf562b48a58083db4c996adf5f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a0cc5fbf562b48a58083db4c996adf5f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a0cc5fbf562b48a58083db4c996adf5f" class="color" data-tooltip="RGBA: 222, 119, 174, 1.0
   HEXA: #de77aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c47d6f827230422790d4f8686a3703be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 182, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c47d6f827230422790d4f8686a3703be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c47d6f827230422790d4f8686a3703be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c47d6f827230422790d4f8686a3703be" class="color" data-tooltip="RGBA: 241, 182, 218, 1.0
   HEXA: #f1b6daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d136079f69a743d9a32276c4cbf0274e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 224, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d136079f69a743d9a32276c4cbf0274e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d136079f69a743d9a32276c4cbf0274e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d136079f69a743d9a32276c4cbf0274e" class="color" data-tooltip="RGBA: 253, 224, 239, 1.0
   HEXA: #fde0efff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c4d8c4c9fe94495e9b5c3d486b3ffd10 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c4d8c4c9fe94495e9b5c3d486b3ffd10::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c4d8c4c9fe94495e9b5c3d486b3ffd10:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c4d8c4c9fe94495e9b5c3d486b3ffd10" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_047cc5c705764128a63daf75b0011168 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 208, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_047cc5c705764128a63daf75b0011168::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_047cc5c705764128a63daf75b0011168:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_047cc5c705764128a63daf75b0011168" class="color" data-tooltip="RGBA: 230, 245, 208, 1.0
   HEXA: #e6f5d0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2114006e0fbb4109ae8303a3597a52ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(184, 225, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2114006e0fbb4109ae8303a3597a52ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2114006e0fbb4109ae8303a3597a52ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2114006e0fbb4109ae8303a3597a52ae" class="color" data-tooltip="RGBA: 184, 225, 134, 1.0
   HEXA: #b8e186ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1f1336ae45094220973f686b72d81861 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 188, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f1336ae45094220973f686b72d81861::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f1336ae45094220973f686b72d81861:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f1336ae45094220973f686b72d81861" class="color" data-tooltip="RGBA: 127, 188, 65, 1.0
   HEXA: #7fbc41ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc741751749e423bb637410ad9ce1c42 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 146, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc741751749e423bb637410ad9ce1c42::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc741751749e423bb637410ad9ce1c42:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc741751749e423bb637410ad9ce1c42" class="color" data-tooltip="RGBA: 77, 146, 33, 1.0
   HEXA: #4d9221ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_13f762fe5ec54c71a97083f30cb68305 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 100, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_13f762fe5ec54c71a97083f30cb68305::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_13f762fe5ec54c71a97083f30cb68305:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_13f762fe5ec54c71a97083f30cb68305" class="color" data-tooltip="RGBA: 39, 100, 25, 1.0
   HEXA: #276419ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c6c658c84fe346679601b31573cee5b6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c6c658c84fe346679601b31573cee5b6 div { flex: 1 1 0; }
           #_c6c658c84fe346679601b31573cee5b6 div.color { width: 100%; height: 100%; }
           #_c6c658c84fe346679601b31573cee5b6 div.cmap { width: 100%; height: auto; }
           #_c6c658c84fe346679601b31573cee5b6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PuOr</strong>
       
       <div id="_c6c658c84fe346679601b31573cee5b6" class="color-map">
           
                           <div>
                   <style>
       #_c5f02c7cba634e41961575f19831c2fd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 59, 8, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c5f02c7cba634e41961575f19831c2fd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c5f02c7cba634e41961575f19831c2fd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c5f02c7cba634e41961575f19831c2fd" class="color" data-tooltip="RGBA: 127, 59, 8, 1.0
   HEXA: #7f3b08ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a75b6e0805f547b79d59d07387cbba49 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 88, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a75b6e0805f547b79d59d07387cbba49::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a75b6e0805f547b79d59d07387cbba49:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a75b6e0805f547b79d59d07387cbba49" class="color" data-tooltip="RGBA: 179, 88, 6, 1.0
   HEXA: #b35806ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_139e0981059a46afa5c6efe689342d1c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 130, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_139e0981059a46afa5c6efe689342d1c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_139e0981059a46afa5c6efe689342d1c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_139e0981059a46afa5c6efe689342d1c" class="color" data-tooltip="RGBA: 224, 130, 20, 1.0
   HEXA: #e08214ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b77a4821de734094a48eb6eace37eb0b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 184, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b77a4821de734094a48eb6eace37eb0b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b77a4821de734094a48eb6eace37eb0b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b77a4821de734094a48eb6eace37eb0b" class="color" data-tooltip="RGBA: 253, 184, 99, 1.0
   HEXA: #fdb863ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8321fd66ee984782b285f42ff7f936bc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 182, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8321fd66ee984782b285f42ff7f936bc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8321fd66ee984782b285f42ff7f936bc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8321fd66ee984782b285f42ff7f936bc" class="color" data-tooltip="RGBA: 254, 224, 182, 1.0
   HEXA: #fee0b6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_85e335bea86e4edb84d7a31f56f8680f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_85e335bea86e4edb84d7a31f56f8680f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_85e335bea86e4edb84d7a31f56f8680f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_85e335bea86e4edb84d7a31f56f8680f" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c008570638a841289b737b441ea49ed4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 218, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c008570638a841289b737b441ea49ed4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c008570638a841289b737b441ea49ed4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c008570638a841289b737b441ea49ed4" class="color" data-tooltip="RGBA: 216, 218, 235, 1.0
   HEXA: #d8daebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_413d8bb915ba4ef8a5c3baacfcd82f74 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 171, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_413d8bb915ba4ef8a5c3baacfcd82f74::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_413d8bb915ba4ef8a5c3baacfcd82f74:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_413d8bb915ba4ef8a5c3baacfcd82f74" class="color" data-tooltip="RGBA: 178, 171, 210, 1.0
   HEXA: #b2abd2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_883cea1366d546a988453df21f5a5b0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 115, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_883cea1366d546a988453df21f5a5b0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_883cea1366d546a988453df21f5a5b0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_883cea1366d546a988453df21f5a5b0d" class="color" data-tooltip="RGBA: 128, 115, 172, 1.0
   HEXA: #8073acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1fbfcdb15d8e448aa6bad112c723ec5c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 39, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1fbfcdb15d8e448aa6bad112c723ec5c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1fbfcdb15d8e448aa6bad112c723ec5c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1fbfcdb15d8e448aa6bad112c723ec5c" class="color" data-tooltip="RGBA: 84, 39, 136, 1.0
   HEXA: #542788ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c4e401b0e8f40a58711c3904a3c5648 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(45, 0, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c4e401b0e8f40a58711c3904a3c5648::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c4e401b0e8f40a58711c3904a3c5648:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c4e401b0e8f40a58711c3904a3c5648" class="color" data-tooltip="RGBA: 45, 0, 75, 1.0
   HEXA: #2d004bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_56d1b90416794afbb839ca083de7c6e4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_56d1b90416794afbb839ca083de7c6e4 div { flex: 1 1 0; }
           #_56d1b90416794afbb839ca083de7c6e4 div.color { width: 100%; height: 100%; }
           #_56d1b90416794afbb839ca083de7c6e4 div.cmap { width: 100%; height: auto; }
           #_56d1b90416794afbb839ca083de7c6e4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdBu</strong>
       
       <div id="_56d1b90416794afbb839ca083de7c6e4" class="color-map">
           
                           <div>
                   <style>
       #_d8b7b0abf0194350bae6c24509e85723 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 10, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d8b7b0abf0194350bae6c24509e85723::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d8b7b0abf0194350bae6c24509e85723:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d8b7b0abf0194350bae6c24509e85723" class="color" data-tooltip="RGBA: 5, 10, 172, 1.0
   HEXA: #050aacff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5e4ddaf1550a41a58263eaf6d25bd37f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 137, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5e4ddaf1550a41a58263eaf6d25bd37f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5e4ddaf1550a41a58263eaf6d25bd37f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5e4ddaf1550a41a58263eaf6d25bd37f" class="color" data-tooltip="RGBA: 106, 137, 247, 1.0
   HEXA: #6a89f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f5850c70fc4f49529f4911ef5d8d5dfd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 190, 190, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f5850c70fc4f49529f4911ef5d8d5dfd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f5850c70fc4f49529f4911ef5d8d5dfd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f5850c70fc4f49529f4911ef5d8d5dfd" class="color" data-tooltip="RGBA: 190, 190, 190, 1.0
   HEXA: #bebebeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_11945a345a994e19949d272524382884 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 170, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_11945a345a994e19949d272524382884::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_11945a345a994e19949d272524382884:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_11945a345a994e19949d272524382884" class="color" data-tooltip="RGBA: 220, 170, 132, 1.0
   HEXA: #dcaa84ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b1edd62d10544397a5b51537e6c5110f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 145, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b1edd62d10544397a5b51537e6c5110f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b1edd62d10544397a5b51537e6c5110f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b1edd62d10544397a5b51537e6c5110f" class="color" data-tooltip="RGBA: 230, 145, 90, 1.0
   HEXA: #e6915aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f0f170a1f5b149df94fe3a76a8a40910 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 10, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f0f170a1f5b149df94fe3a76a8a40910::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f0f170a1f5b149df94fe3a76a8a40910:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f0f170a1f5b149df94fe3a76a8a40910" class="color" data-tooltip="RGBA: 178, 10, 28, 1.0
   HEXA: #b20a1cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_810d1bd6a5a64aa0b7eb6c168c38b1ff {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_810d1bd6a5a64aa0b7eb6c168c38b1ff div { flex: 1 1 0; }
           #_810d1bd6a5a64aa0b7eb6c168c38b1ff div.color { width: 100%; height: 100%; }
           #_810d1bd6a5a64aa0b7eb6c168c38b1ff div.cmap { width: 100%; height: auto; }
           #_810d1bd6a5a64aa0b7eb6c168c38b1ff div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdGy</strong>
       
       <div id="_810d1bd6a5a64aa0b7eb6c168c38b1ff" class="color-map">
           
                           <div>
                   <style>
       #_025289cdc9d749c28185dec8264d2e47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_025289cdc9d749c28185dec8264d2e47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_025289cdc9d749c28185dec8264d2e47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_025289cdc9d749c28185dec8264d2e47" class="color" data-tooltip="RGBA: 103, 0, 31, 1.0
   HEXA: #67001fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2fa14dcfde2a41e19c7f213c408288c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 24, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2fa14dcfde2a41e19c7f213c408288c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2fa14dcfde2a41e19c7f213c408288c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2fa14dcfde2a41e19c7f213c408288c9" class="color" data-tooltip="RGBA: 178, 24, 43, 1.0
   HEXA: #b2182bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b2fb73e0adc64a449989b21615d80f8f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 96, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b2fb73e0adc64a449989b21615d80f8f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b2fb73e0adc64a449989b21615d80f8f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b2fb73e0adc64a449989b21615d80f8f" class="color" data-tooltip="RGBA: 214, 96, 77, 1.0
   HEXA: #d6604dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc7404beae524f1b95cb633d6446dd6e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 165, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc7404beae524f1b95cb633d6446dd6e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc7404beae524f1b95cb633d6446dd6e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc7404beae524f1b95cb633d6446dd6e" class="color" data-tooltip="RGBA: 244, 165, 130, 1.0
   HEXA: #f4a582ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f491bb8dde09499ba68301e1ce9ad34a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 219, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f491bb8dde09499ba68301e1ce9ad34a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f491bb8dde09499ba68301e1ce9ad34a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f491bb8dde09499ba68301e1ce9ad34a" class="color" data-tooltip="RGBA: 253, 219, 199, 1.0
   HEXA: #fddbc7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_32e1ce60a5f248d3893b5100c47960e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_32e1ce60a5f248d3893b5100c47960e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_32e1ce60a5f248d3893b5100c47960e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_32e1ce60a5f248d3893b5100c47960e0" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b64ca97c90144cbb8865dab9ff857ec4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 224, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b64ca97c90144cbb8865dab9ff857ec4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b64ca97c90144cbb8865dab9ff857ec4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b64ca97c90144cbb8865dab9ff857ec4" class="color" data-tooltip="RGBA: 224, 224, 224, 1.0
   HEXA: #e0e0e0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9b3a3474a9dc4edcb4573b63b3ffccf2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 186, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9b3a3474a9dc4edcb4573b63b3ffccf2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9b3a3474a9dc4edcb4573b63b3ffccf2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9b3a3474a9dc4edcb4573b63b3ffccf2" class="color" data-tooltip="RGBA: 186, 186, 186, 1.0
   HEXA: #bababaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b6eca74c34f34524b8aadfb58e54a110 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 135, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b6eca74c34f34524b8aadfb58e54a110::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b6eca74c34f34524b8aadfb58e54a110:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b6eca74c34f34524b8aadfb58e54a110" class="color" data-tooltip="RGBA: 135, 135, 135, 1.0
   HEXA: #878787ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_75406dbcd72a4abc9c4c70d4bb35fb24 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 77, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75406dbcd72a4abc9c4c70d4bb35fb24::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75406dbcd72a4abc9c4c70d4bb35fb24:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75406dbcd72a4abc9c4c70d4bb35fb24" class="color" data-tooltip="RGBA: 77, 77, 77, 1.0
   HEXA: #4d4d4dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_49c78520caf34a30b306c964aed8605c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 26, 26, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_49c78520caf34a30b306c964aed8605c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_49c78520caf34a30b306c964aed8605c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_49c78520caf34a30b306c964aed8605c" class="color" data-tooltip="RGBA: 26, 26, 26, 1.0
   HEXA: #1a1a1aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4e405a2800534e23a3c1fb77cbbf1f57 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4e405a2800534e23a3c1fb77cbbf1f57 div { flex: 1 1 0; }
           #_4e405a2800534e23a3c1fb77cbbf1f57 div.color { width: 100%; height: 100%; }
           #_4e405a2800534e23a3c1fb77cbbf1f57 div.cmap { width: 100%; height: auto; }
           #_4e405a2800534e23a3c1fb77cbbf1f57 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdYlBu</strong>
       
       <div id="_4e405a2800534e23a3c1fb77cbbf1f57" class="color-map">
           
                           <div>
                   <style>
       #_f0976cff1ee44029ac925d250371eff1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f0976cff1ee44029ac925d250371eff1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f0976cff1ee44029ac925d250371eff1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f0976cff1ee44029ac925d250371eff1" class="color" data-tooltip="RGBA: 165, 0, 38, 1.0
   HEXA: #a50026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_38a9fc34f5af4399895d2b00232afeb9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 48, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38a9fc34f5af4399895d2b00232afeb9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38a9fc34f5af4399895d2b00232afeb9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38a9fc34f5af4399895d2b00232afeb9" class="color" data-tooltip="RGBA: 215, 48, 39, 1.0
   HEXA: #d73027ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fa5ed645a82e4f9eadcba053e7912302 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 109, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fa5ed645a82e4f9eadcba053e7912302::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fa5ed645a82e4f9eadcba053e7912302:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fa5ed645a82e4f9eadcba053e7912302" class="color" data-tooltip="RGBA: 244, 109, 67, 1.0
   HEXA: #f46d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45e032183c794a339e3316aeb67e82aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45e032183c794a339e3316aeb67e82aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45e032183c794a339e3316aeb67e82aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45e032183c794a339e3316aeb67e82aa" class="color" data-tooltip="RGBA: 253, 174, 97, 1.0
   HEXA: #fdae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95c33cbf4de7405eb277725f7a50e9fc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95c33cbf4de7405eb277725f7a50e9fc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95c33cbf4de7405eb277725f7a50e9fc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95c33cbf4de7405eb277725f7a50e9fc" class="color" data-tooltip="RGBA: 254, 224, 144, 1.0
   HEXA: #fee090ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57bf15b854804e4fb1e1ff3661eadf13 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57bf15b854804e4fb1e1ff3661eadf13::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57bf15b854804e4fb1e1ff3661eadf13:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57bf15b854804e4fb1e1ff3661eadf13" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b5324b2d5cad4a738f67e826721b9345 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 243, 248, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b5324b2d5cad4a738f67e826721b9345::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b5324b2d5cad4a738f67e826721b9345:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b5324b2d5cad4a738f67e826721b9345" class="color" data-tooltip="RGBA: 224, 243, 248, 1.0
   HEXA: #e0f3f8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c129266e9fd647968f7f18b5807b405a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 217, 233, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c129266e9fd647968f7f18b5807b405a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c129266e9fd647968f7f18b5807b405a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c129266e9fd647968f7f18b5807b405a" class="color" data-tooltip="RGBA: 171, 217, 233, 1.0
   HEXA: #abd9e9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_10c410cfc56d40a69093876ab3bbb103 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 173, 209, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_10c410cfc56d40a69093876ab3bbb103::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_10c410cfc56d40a69093876ab3bbb103:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_10c410cfc56d40a69093876ab3bbb103" class="color" data-tooltip="RGBA: 116, 173, 209, 1.0
   HEXA: #74add1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_00a736c3ee554b1f8a9b4b0a1cf252c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 117, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_00a736c3ee554b1f8a9b4b0a1cf252c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_00a736c3ee554b1f8a9b4b0a1cf252c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_00a736c3ee554b1f8a9b4b0a1cf252c6" class="color" data-tooltip="RGBA: 69, 117, 180, 1.0
   HEXA: #4575b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_30010129c00845c496179e52eb2bf9a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 54, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30010129c00845c496179e52eb2bf9a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30010129c00845c496179e52eb2bf9a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30010129c00845c496179e52eb2bf9a9" class="color" data-tooltip="RGBA: 49, 54, 149, 1.0
   HEXA: #313695ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1c512b6f7ebb4581aeb5fa3420f67dd2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1c512b6f7ebb4581aeb5fa3420f67dd2 div { flex: 1 1 0; }
           #_1c512b6f7ebb4581aeb5fa3420f67dd2 div.color { width: 100%; height: 100%; }
           #_1c512b6f7ebb4581aeb5fa3420f67dd2 div.cmap { width: 100%; height: auto; }
           #_1c512b6f7ebb4581aeb5fa3420f67dd2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdYlGn</strong>
       
       <div id="_1c512b6f7ebb4581aeb5fa3420f67dd2" class="color-map">
           
                           <div>
                   <style>
       #_57557e40f6854fc4aad3c9eb0c6bf783 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57557e40f6854fc4aad3c9eb0c6bf783::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57557e40f6854fc4aad3c9eb0c6bf783:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57557e40f6854fc4aad3c9eb0c6bf783" class="color" data-tooltip="RGBA: 165, 0, 38, 1.0
   HEXA: #a50026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_49ab3898a64f4885bc38548ec33fdefa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 48, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_49ab3898a64f4885bc38548ec33fdefa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_49ab3898a64f4885bc38548ec33fdefa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_49ab3898a64f4885bc38548ec33fdefa" class="color" data-tooltip="RGBA: 215, 48, 39, 1.0
   HEXA: #d73027ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_42f486f1f45c44c094ab0b2dc3351d00 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 109, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_42f486f1f45c44c094ab0b2dc3351d00::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_42f486f1f45c44c094ab0b2dc3351d00:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_42f486f1f45c44c094ab0b2dc3351d00" class="color" data-tooltip="RGBA: 244, 109, 67, 1.0
   HEXA: #f46d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bcb6118d6ec64ca48bd207a97221f1f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bcb6118d6ec64ca48bd207a97221f1f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bcb6118d6ec64ca48bd207a97221f1f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bcb6118d6ec64ca48bd207a97221f1f3" class="color" data-tooltip="RGBA: 253, 174, 97, 1.0
   HEXA: #fdae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d9bd8a90c8e4c49994a07569a964f3e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d9bd8a90c8e4c49994a07569a964f3e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d9bd8a90c8e4c49994a07569a964f3e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d9bd8a90c8e4c49994a07569a964f3e" class="color" data-tooltip="RGBA: 254, 224, 139, 1.0
   HEXA: #fee08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_22e59ed674454d369326ade76353dcf0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22e59ed674454d369326ade76353dcf0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22e59ed674454d369326ade76353dcf0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22e59ed674454d369326ade76353dcf0" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_388a035797704967b1608887438708ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 239, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_388a035797704967b1608887438708ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_388a035797704967b1608887438708ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_388a035797704967b1608887438708ae" class="color" data-tooltip="RGBA: 217, 239, 139, 1.0
   HEXA: #d9ef8bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_234d2e1bc9e84b9d91ad0a3312140798 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 217, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_234d2e1bc9e84b9d91ad0a3312140798::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_234d2e1bc9e84b9d91ad0a3312140798:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_234d2e1bc9e84b9d91ad0a3312140798" class="color" data-tooltip="RGBA: 166, 217, 106, 1.0
   HEXA: #a6d96aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a2218e76be524af399f6c7a94a1e9835 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 189, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a2218e76be524af399f6c7a94a1e9835::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a2218e76be524af399f6c7a94a1e9835:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a2218e76be524af399f6c7a94a1e9835" class="color" data-tooltip="RGBA: 102, 189, 99, 1.0
   HEXA: #66bd63ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0b7da0adfb7f47e7b89b31cb4b61bbac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 152, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0b7da0adfb7f47e7b89b31cb4b61bbac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0b7da0adfb7f47e7b89b31cb4b61bbac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0b7da0adfb7f47e7b89b31cb4b61bbac" class="color" data-tooltip="RGBA: 26, 152, 80, 1.0
   HEXA: #1a9850ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1dbdc446a7044adab0df023c73230b6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 104, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1dbdc446a7044adab0df023c73230b6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1dbdc446a7044adab0df023c73230b6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1dbdc446a7044adab0df023c73230b6" class="color" data-tooltip="RGBA: 0, 104, 55, 1.0
   HEXA: #006837ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_601e147a317f421c913b583baa725f9a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_601e147a317f421c913b583baa725f9a div { flex: 1 1 0; }
           #_601e147a317f421c913b583baa725f9a div.color { width: 100%; height: 100%; }
           #_601e147a317f421c913b583baa725f9a div.cmap { width: 100%; height: auto; }
           #_601e147a317f421c913b583baa725f9a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Spectral</strong>
       
       <div id="_601e147a317f421c913b583baa725f9a" class="color-map">
           
                           <div>
                   <style>
       #_2d82fe5f5475483db726e1e7c6cb64ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 1, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2d82fe5f5475483db726e1e7c6cb64ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2d82fe5f5475483db726e1e7c6cb64ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2d82fe5f5475483db726e1e7c6cb64ff" class="color" data-tooltip="RGBA: 158, 1, 66, 1.0
   HEXA: #9e0142ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_12e2d5cf30bd4eefbfb36cf2667af323 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 62, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_12e2d5cf30bd4eefbfb36cf2667af323::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_12e2d5cf30bd4eefbfb36cf2667af323:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_12e2d5cf30bd4eefbfb36cf2667af323" class="color" data-tooltip="RGBA: 213, 62, 79, 1.0
   HEXA: #d53e4fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aead83862e58413cae3311eba05ed1c4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 109, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aead83862e58413cae3311eba05ed1c4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aead83862e58413cae3311eba05ed1c4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aead83862e58413cae3311eba05ed1c4" class="color" data-tooltip="RGBA: 244, 109, 67, 1.0
   HEXA: #f46d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97cd0c2545514facaefae1c4b0806605 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97cd0c2545514facaefae1c4b0806605::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97cd0c2545514facaefae1c4b0806605:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97cd0c2545514facaefae1c4b0806605" class="color" data-tooltip="RGBA: 253, 174, 97, 1.0
   HEXA: #fdae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_30dfe7d42fa04672944a8916e9fedf22 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30dfe7d42fa04672944a8916e9fedf22::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30dfe7d42fa04672944a8916e9fedf22:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30dfe7d42fa04672944a8916e9fedf22" class="color" data-tooltip="RGBA: 254, 224, 139, 1.0
   HEXA: #fee08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b970b55ab47b4372b67aaa84cb273f32 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b970b55ab47b4372b67aaa84cb273f32::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b970b55ab47b4372b67aaa84cb273f32:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b970b55ab47b4372b67aaa84cb273f32" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_009af79b59844f2d9e10e92119c8ab53 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_009af79b59844f2d9e10e92119c8ab53::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_009af79b59844f2d9e10e92119c8ab53:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_009af79b59844f2d9e10e92119c8ab53" class="color" data-tooltip="RGBA: 230, 245, 152, 1.0
   HEXA: #e6f598ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_93a27c563f3a48fdace9e101acdfefdf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 221, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93a27c563f3a48fdace9e101acdfefdf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93a27c563f3a48fdace9e101acdfefdf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93a27c563f3a48fdace9e101acdfefdf" class="color" data-tooltip="RGBA: 171, 221, 164, 1.0
   HEXA: #abdda4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b6c46f43c3c24f529625b244676d6bcb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 194, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b6c46f43c3c24f529625b244676d6bcb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b6c46f43c3c24f529625b244676d6bcb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b6c46f43c3c24f529625b244676d6bcb" class="color" data-tooltip="RGBA: 102, 194, 165, 1.0
   HEXA: #66c2a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c23a0891a47496e970cc5bf74105087 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 136, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c23a0891a47496e970cc5bf74105087::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c23a0891a47496e970cc5bf74105087:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c23a0891a47496e970cc5bf74105087" class="color" data-tooltip="RGBA: 50, 136, 189, 1.0
   HEXA: #3288bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7230bbc1d1b74cb7bc8db8041a5bb604 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 79, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7230bbc1d1b74cb7bc8db8041a5bb604::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7230bbc1d1b74cb7bc8db8041a5bb604:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7230bbc1d1b74cb7bc8db8041a5bb604" class="color" data-tooltip="RGBA: 94, 79, 162, 1.0
   HEXA: #5e4fa2ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_904a56ee9c3d4bf195fd36c9a1841958 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_904a56ee9c3d4bf195fd36c9a1841958 div { flex: 1 1 0; }
           #_904a56ee9c3d4bf195fd36c9a1841958 div.color { width: 100%; height: 100%; }
           #_904a56ee9c3d4bf195fd36c9a1841958 div.cmap { width: 100%; height: auto; }
           #_904a56ee9c3d4bf195fd36c9a1841958 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Set1</strong>
       
       <div id="_904a56ee9c3d4bf195fd36c9a1841958" class="color-map">
           
                           <div>
                   <style>
       #_3c8893a9e0be4be9a08508a84ba18623 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 26, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c8893a9e0be4be9a08508a84ba18623::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c8893a9e0be4be9a08508a84ba18623:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c8893a9e0be4be9a08508a84ba18623" class="color" data-tooltip="RGBA: 228, 26, 28, 1.0
   HEXA: #e41a1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64a5d4d142ab478182b75b221abcb7e9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(55, 126, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64a5d4d142ab478182b75b221abcb7e9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64a5d4d142ab478182b75b221abcb7e9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64a5d4d142ab478182b75b221abcb7e9" class="color" data-tooltip="RGBA: 55, 126, 184, 1.0
   HEXA: #377eb8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fe093d70e5c34d55ab6a8ad3faf6defb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 175, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe093d70e5c34d55ab6a8ad3faf6defb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe093d70e5c34d55ab6a8ad3faf6defb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe093d70e5c34d55ab6a8ad3faf6defb" class="color" data-tooltip="RGBA: 77, 175, 74, 1.0
   HEXA: #4daf4aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_afcdf0e241a445ca9507c11c12b8d0fa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 78, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_afcdf0e241a445ca9507c11c12b8d0fa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_afcdf0e241a445ca9507c11c12b8d0fa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_afcdf0e241a445ca9507c11c12b8d0fa" class="color" data-tooltip="RGBA: 152, 78, 163, 1.0
   HEXA: #984ea3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_689af91da1b543448cc16befd3a1308d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_689af91da1b543448cc16befd3a1308d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_689af91da1b543448cc16befd3a1308d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_689af91da1b543448cc16befd3a1308d" class="color" data-tooltip="RGBA: 255, 127, 0, 1.0
   HEXA: #ff7f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_daa737d8bcab402aa3e62b0e5f2c278d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_daa737d8bcab402aa3e62b0e5f2c278d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_daa737d8bcab402aa3e62b0e5f2c278d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_daa737d8bcab402aa3e62b0e5f2c278d" class="color" data-tooltip="RGBA: 255, 255, 51, 1.0
   HEXA: #ffff33ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8585c15c9c8d4480a8e77ce1fa8960d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 86, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8585c15c9c8d4480a8e77ce1fa8960d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8585c15c9c8d4480a8e77ce1fa8960d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8585c15c9c8d4480a8e77ce1fa8960d9" class="color" data-tooltip="RGBA: 166, 86, 40, 1.0
   HEXA: #a65628ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4ebb1e6a17604dbe9d2afa4d920fbafd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 129, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4ebb1e6a17604dbe9d2afa4d920fbafd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4ebb1e6a17604dbe9d2afa4d920fbafd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4ebb1e6a17604dbe9d2afa4d920fbafd" class="color" data-tooltip="RGBA: 247, 129, 191, 1.0
   HEXA: #f781bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e2dda0a4026427287b7c649b692775f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e2dda0a4026427287b7c649b692775f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e2dda0a4026427287b7c649b692775f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e2dda0a4026427287b7c649b692775f" class="color" data-tooltip="RGBA: 153, 153, 153, 1.0
   HEXA: #999999ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_e7984e6d7960467b93e1204ee20b563a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_e7984e6d7960467b93e1204ee20b563a div { flex: 1 1 0; }
           #_e7984e6d7960467b93e1204ee20b563a div.color { width: 100%; height: 100%; }
           #_e7984e6d7960467b93e1204ee20b563a div.cmap { width: 100%; height: auto; }
           #_e7984e6d7960467b93e1204ee20b563a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Pastel1</strong>
       
       <div id="_e7984e6d7960467b93e1204ee20b563a" class="color-map">
           
                           <div>
                   <style>
       #_0847da0bc41d41828f4bdbc1275c3336 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 180, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0847da0bc41d41828f4bdbc1275c3336::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0847da0bc41d41828f4bdbc1275c3336:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0847da0bc41d41828f4bdbc1275c3336" class="color" data-tooltip="RGBA: 251, 180, 174, 1.0
   HEXA: #fbb4aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_971e2f6f56474d89aa7567616a05a438 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 205, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_971e2f6f56474d89aa7567616a05a438::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_971e2f6f56474d89aa7567616a05a438:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_971e2f6f56474d89aa7567616a05a438" class="color" data-tooltip="RGBA: 179, 205, 227, 1.0
   HEXA: #b3cde3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce800a0f614c4ef8b210d8e5aed2806b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 235, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce800a0f614c4ef8b210d8e5aed2806b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce800a0f614c4ef8b210d8e5aed2806b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce800a0f614c4ef8b210d8e5aed2806b" class="color" data-tooltip="RGBA: 204, 235, 197, 1.0
   HEXA: #ccebc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68ff8cb11d8c45209232b9542cadaf5d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 203, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68ff8cb11d8c45209232b9542cadaf5d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68ff8cb11d8c45209232b9542cadaf5d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68ff8cb11d8c45209232b9542cadaf5d" class="color" data-tooltip="RGBA: 222, 203, 228, 1.0
   HEXA: #decbe4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_47badc6aa77b4f5f9a7fcd6c0eb51736 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 217, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_47badc6aa77b4f5f9a7fcd6c0eb51736::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_47badc6aa77b4f5f9a7fcd6c0eb51736:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_47badc6aa77b4f5f9a7fcd6c0eb51736" class="color" data-tooltip="RGBA: 254, 217, 166, 1.0
   HEXA: #fed9a6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1da725fadc9e46baaf0fa3247f7c2922 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1da725fadc9e46baaf0fa3247f7c2922::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1da725fadc9e46baaf0fa3247f7c2922:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1da725fadc9e46baaf0fa3247f7c2922" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7ee90ee882414b268d5a452402f9e735 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 216, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7ee90ee882414b268d5a452402f9e735::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7ee90ee882414b268d5a452402f9e735:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7ee90ee882414b268d5a452402f9e735" class="color" data-tooltip="RGBA: 229, 216, 189, 1.0
   HEXA: #e5d8bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_681198a5b74847e3aaa1d26975880a55 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 218, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_681198a5b74847e3aaa1d26975880a55::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_681198a5b74847e3aaa1d26975880a55:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_681198a5b74847e3aaa1d26975880a55" class="color" data-tooltip="RGBA: 253, 218, 236, 1.0
   HEXA: #fddaecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dae735cd92d04893bfbc37f477622476 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 242, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dae735cd92d04893bfbc37f477622476::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dae735cd92d04893bfbc37f477622476:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dae735cd92d04893bfbc37f477622476" class="color" data-tooltip="RGBA: 242, 242, 242, 1.0
   HEXA: #f2f2f2ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f732f97d621640cea0b94044ad5d51b6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f732f97d621640cea0b94044ad5d51b6 div { flex: 1 1 0; }
           #_f732f97d621640cea0b94044ad5d51b6 div.color { width: 100%; height: 100%; }
           #_f732f97d621640cea0b94044ad5d51b6 div.cmap { width: 100%; height: auto; }
           #_f732f97d621640cea0b94044ad5d51b6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Dark2</strong>
       
       <div id="_f732f97d621640cea0b94044ad5d51b6" class="color-map">
           
                           <div>
                   <style>
       #_f2bac749699b4933a85615778953e5b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 158, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f2bac749699b4933a85615778953e5b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f2bac749699b4933a85615778953e5b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f2bac749699b4933a85615778953e5b5" class="color" data-tooltip="RGBA: 27, 158, 119, 1.0
   HEXA: #1b9e77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f443829c2d874794b9ecc06b71654baf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 95, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f443829c2d874794b9ecc06b71654baf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f443829c2d874794b9ecc06b71654baf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f443829c2d874794b9ecc06b71654baf" class="color" data-tooltip="RGBA: 217, 95, 2, 1.0
   HEXA: #d95f02ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_751ece362ea54abb8403109bdacb009b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 112, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_751ece362ea54abb8403109bdacb009b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_751ece362ea54abb8403109bdacb009b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_751ece362ea54abb8403109bdacb009b" class="color" data-tooltip="RGBA: 117, 112, 179, 1.0
   HEXA: #7570b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_488b2d4bb4414e6c8aeabd77373272bd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 41, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_488b2d4bb4414e6c8aeabd77373272bd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_488b2d4bb4414e6c8aeabd77373272bd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_488b2d4bb4414e6c8aeabd77373272bd" class="color" data-tooltip="RGBA: 231, 41, 138, 1.0
   HEXA: #e7298aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45f16c6ecaec41c8a5d52ad6d50c79d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 166, 30, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45f16c6ecaec41c8a5d52ad6d50c79d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45f16c6ecaec41c8a5d52ad6d50c79d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45f16c6ecaec41c8a5d52ad6d50c79d4" class="color" data-tooltip="RGBA: 102, 166, 30, 1.0
   HEXA: #66a61eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce8726119bed4cb58945a9bcdcf59546 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 171, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce8726119bed4cb58945a9bcdcf59546::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce8726119bed4cb58945a9bcdcf59546:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce8726119bed4cb58945a9bcdcf59546" class="color" data-tooltip="RGBA: 230, 171, 2, 1.0
   HEXA: #e6ab02ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b5753a279c804a488c3ff40b8df6b6c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 118, 29, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b5753a279c804a488c3ff40b8df6b6c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b5753a279c804a488c3ff40b8df6b6c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b5753a279c804a488c3ff40b8df6b6c6" class="color" data-tooltip="RGBA: 166, 118, 29, 1.0
   HEXA: #a6761dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2a7ddccb5748489296c3943becfe2e4e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2a7ddccb5748489296c3943becfe2e4e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2a7ddccb5748489296c3943becfe2e4e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2a7ddccb5748489296c3943becfe2e4e" class="color" data-tooltip="RGBA: 102, 102, 102, 1.0
   HEXA: #666666ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_98143c0f8b49408ba1653f6bd65a9709 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_98143c0f8b49408ba1653f6bd65a9709 div { flex: 1 1 0; }
           #_98143c0f8b49408ba1653f6bd65a9709 div.color { width: 100%; height: 100%; }
           #_98143c0f8b49408ba1653f6bd65a9709 div.cmap { width: 100%; height: auto; }
           #_98143c0f8b49408ba1653f6bd65a9709 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Set2</strong>
       
       <div id="_98143c0f8b49408ba1653f6bd65a9709" class="color-map">
           
                           <div>
                   <style>
       #_bd80aed50d09435488cce3b237dcd0a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 194, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd80aed50d09435488cce3b237dcd0a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd80aed50d09435488cce3b237dcd0a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd80aed50d09435488cce3b237dcd0a3" class="color" data-tooltip="RGBA: 102, 194, 165, 1.0
   HEXA: #66c2a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ce4984b84634a90b4ffcfcabfff424b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 141, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ce4984b84634a90b4ffcfcabfff424b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ce4984b84634a90b4ffcfcabfff424b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ce4984b84634a90b4ffcfcabfff424b" class="color" data-tooltip="RGBA: 252, 141, 98, 1.0
   HEXA: #fc8d62ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_58a451128098405193a3457843fe343b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 160, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_58a451128098405193a3457843fe343b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_58a451128098405193a3457843fe343b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_58a451128098405193a3457843fe343b" class="color" data-tooltip="RGBA: 141, 160, 203, 1.0
   HEXA: #8da0cbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_097d137811d048afb555e3986995f599 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 138, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_097d137811d048afb555e3986995f599::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_097d137811d048afb555e3986995f599:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_097d137811d048afb555e3986995f599" class="color" data-tooltip="RGBA: 231, 138, 195, 1.0
   HEXA: #e78ac3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_384e3643b5f74a2d84bd046cbd814ab4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 216, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_384e3643b5f74a2d84bd046cbd814ab4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_384e3643b5f74a2d84bd046cbd814ab4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_384e3643b5f74a2d84bd046cbd814ab4" class="color" data-tooltip="RGBA: 166, 216, 84, 1.0
   HEXA: #a6d854ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e4abcffb6734433fa4bbf392068738bc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 217, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e4abcffb6734433fa4bbf392068738bc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e4abcffb6734433fa4bbf392068738bc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e4abcffb6734433fa4bbf392068738bc" class="color" data-tooltip="RGBA: 255, 217, 47, 1.0
   HEXA: #ffd92fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6ef8ce4c67d8483b81905c4a91f8d08c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 196, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ef8ce4c67d8483b81905c4a91f8d08c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ef8ce4c67d8483b81905c4a91f8d08c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ef8ce4c67d8483b81905c4a91f8d08c" class="color" data-tooltip="RGBA: 229, 196, 148, 1.0
   HEXA: #e5c494ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b39663b0ca474186a51f0d558a9a9685 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 179, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b39663b0ca474186a51f0d558a9a9685::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b39663b0ca474186a51f0d558a9a9685:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b39663b0ca474186a51f0d558a9a9685" class="color" data-tooltip="RGBA: 179, 179, 179, 1.0
   HEXA: #b3b3b3ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6f159cf74e494cea8e9ca89c119206b2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6f159cf74e494cea8e9ca89c119206b2 div { flex: 1 1 0; }
           #_6f159cf74e494cea8e9ca89c119206b2 div.color { width: 100%; height: 100%; }
           #_6f159cf74e494cea8e9ca89c119206b2 div.cmap { width: 100%; height: auto; }
           #_6f159cf74e494cea8e9ca89c119206b2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Pastel2</strong>
       
       <div id="_6f159cf74e494cea8e9ca89c119206b2" class="color-map">
           
                           <div>
                   <style>
       #_3087f5c5b04048f6b67f94b900d74fe0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 226, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3087f5c5b04048f6b67f94b900d74fe0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3087f5c5b04048f6b67f94b900d74fe0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3087f5c5b04048f6b67f94b900d74fe0" class="color" data-tooltip="RGBA: 179, 226, 205, 1.0
   HEXA: #b3e2cdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_02cd0e8c7bbc408ab1447a755b14fbec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 205, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_02cd0e8c7bbc408ab1447a755b14fbec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_02cd0e8c7bbc408ab1447a755b14fbec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_02cd0e8c7bbc408ab1447a755b14fbec" class="color" data-tooltip="RGBA: 253, 205, 172, 1.0
   HEXA: #fdcdacff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_69793a660cb74c62b4f8ab97eba84e5d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 213, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_69793a660cb74c62b4f8ab97eba84e5d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_69793a660cb74c62b4f8ab97eba84e5d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_69793a660cb74c62b4f8ab97eba84e5d" class="color" data-tooltip="RGBA: 203, 213, 232, 1.0
   HEXA: #cbd5e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_85723a70f77246dbb51c1e375ee513f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 202, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_85723a70f77246dbb51c1e375ee513f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_85723a70f77246dbb51c1e375ee513f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_85723a70f77246dbb51c1e375ee513f6" class="color" data-tooltip="RGBA: 244, 202, 228, 1.0
   HEXA: #f4cae4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_28d9705f4d254465bbe056189ecf60d7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_28d9705f4d254465bbe056189ecf60d7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_28d9705f4d254465bbe056189ecf60d7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_28d9705f4d254465bbe056189ecf60d7" class="color" data-tooltip="RGBA: 230, 245, 201, 1.0
   HEXA: #e6f5c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8fc5eae881847059a26f6645f2cbae6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 242, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8fc5eae881847059a26f6645f2cbae6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8fc5eae881847059a26f6645f2cbae6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8fc5eae881847059a26f6645f2cbae6" class="color" data-tooltip="RGBA: 255, 242, 174, 1.0
   HEXA: #fff2aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_78b85f7bf0194f6eb3f759eb64e68ddd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 226, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_78b85f7bf0194f6eb3f759eb64e68ddd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_78b85f7bf0194f6eb3f759eb64e68ddd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_78b85f7bf0194f6eb3f759eb64e68ddd" class="color" data-tooltip="RGBA: 241, 226, 204, 1.0
   HEXA: #f1e2ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d81d50888bd4b05aa0aceccbff6fae5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 204, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d81d50888bd4b05aa0aceccbff6fae5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d81d50888bd4b05aa0aceccbff6fae5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d81d50888bd4b05aa0aceccbff6fae5" class="color" data-tooltip="RGBA: 204, 204, 204, 1.0
   HEXA: #ccccccff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_aeca36a2f8484479b2b3e5487d96bb2b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_aeca36a2f8484479b2b3e5487d96bb2b div { flex: 1 1 0; }
           #_aeca36a2f8484479b2b3e5487d96bb2b div.color { width: 100%; height: 100%; }
           #_aeca36a2f8484479b2b3e5487d96bb2b div.cmap { width: 100%; height: auto; }
           #_aeca36a2f8484479b2b3e5487d96bb2b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Set3</strong>
       
       <div id="_aeca36a2f8484479b2b3e5487d96bb2b" class="color-map">
           
                           <div>
                   <style>
       #_30881b04edd44f0e9af5a8b7c02e68a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 211, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30881b04edd44f0e9af5a8b7c02e68a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30881b04edd44f0e9af5a8b7c02e68a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30881b04edd44f0e9af5a8b7c02e68a5" class="color" data-tooltip="RGBA: 141, 211, 199, 1.0
   HEXA: #8dd3c7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8222a5356dcc4614b040189ca3ba7d08 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8222a5356dcc4614b040189ca3ba7d08::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8222a5356dcc4614b040189ca3ba7d08:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8222a5356dcc4614b040189ca3ba7d08" class="color" data-tooltip="RGBA: 255, 255, 179, 1.0
   HEXA: #ffffb3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_800a6418b1644c5190a8aa597398b067 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 186, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_800a6418b1644c5190a8aa597398b067::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_800a6418b1644c5190a8aa597398b067:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_800a6418b1644c5190a8aa597398b067" class="color" data-tooltip="RGBA: 190, 186, 218, 1.0
   HEXA: #bebadaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d4b1e738aa634fc182cac12d442d1b9c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 128, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d4b1e738aa634fc182cac12d442d1b9c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d4b1e738aa634fc182cac12d442d1b9c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d4b1e738aa634fc182cac12d442d1b9c" class="color" data-tooltip="RGBA: 251, 128, 114, 1.0
   HEXA: #fb8072ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3499e364ff4842e7a38e72a1819b7cff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 177, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3499e364ff4842e7a38e72a1819b7cff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3499e364ff4842e7a38e72a1819b7cff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3499e364ff4842e7a38e72a1819b7cff" class="color" data-tooltip="RGBA: 128, 177, 211, 1.0
   HEXA: #80b1d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_92b1540fdd97458c80a43b823b402e3e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 180, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_92b1540fdd97458c80a43b823b402e3e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_92b1540fdd97458c80a43b823b402e3e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_92b1540fdd97458c80a43b823b402e3e" class="color" data-tooltip="RGBA: 253, 180, 98, 1.0
   HEXA: #fdb462ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fcbbc26351154acfad2aeaf3694a6ef5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 222, 105, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fcbbc26351154acfad2aeaf3694a6ef5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fcbbc26351154acfad2aeaf3694a6ef5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fcbbc26351154acfad2aeaf3694a6ef5" class="color" data-tooltip="RGBA: 179, 222, 105, 1.0
   HEXA: #b3de69ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b492cb071a4d48f1a6373a82a7605e36 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 205, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b492cb071a4d48f1a6373a82a7605e36::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b492cb071a4d48f1a6373a82a7605e36:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b492cb071a4d48f1a6373a82a7605e36" class="color" data-tooltip="RGBA: 252, 205, 229, 1.0
   HEXA: #fccde5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8ba47edc02d4f439264fa584979454d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 217, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8ba47edc02d4f439264fa584979454d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8ba47edc02d4f439264fa584979454d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8ba47edc02d4f439264fa584979454d" class="color" data-tooltip="RGBA: 217, 217, 217, 1.0
   HEXA: #d9d9d9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1a5c8a000ff246208b49b1590ecc6bd7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 128, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a5c8a000ff246208b49b1590ecc6bd7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a5c8a000ff246208b49b1590ecc6bd7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a5c8a000ff246208b49b1590ecc6bd7" class="color" data-tooltip="RGBA: 188, 128, 189, 1.0
   HEXA: #bc80bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5196cb4f20aa41a8a91a90cb92ba1310 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 235, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5196cb4f20aa41a8a91a90cb92ba1310::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5196cb4f20aa41a8a91a90cb92ba1310:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5196cb4f20aa41a8a91a90cb92ba1310" class="color" data-tooltip="RGBA: 204, 235, 197, 1.0
   HEXA: #ccebc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc210d63adba4275b56419a678d75c64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 237, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc210d63adba4275b56419a678d75c64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc210d63adba4275b56419a678d75c64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc210d63adba4275b56419a678d75c64" class="color" data-tooltip="RGBA: 255, 237, 111, 1.0
   HEXA: #ffed6fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_bb15ebe16ca94f05b8288162519d7788 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_bb15ebe16ca94f05b8288162519d7788 div { flex: 1 1 0; }
           #_bb15ebe16ca94f05b8288162519d7788 div.color { width: 100%; height: 100%; }
           #_bb15ebe16ca94f05b8288162519d7788 div.cmap { width: 100%; height: auto; }
           #_bb15ebe16ca94f05b8288162519d7788 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Accent</strong>
       
       <div id="_bb15ebe16ca94f05b8288162519d7788" class="color-map">
           
                           <div>
                   <style>
       #_68940ed1b80743758f212230bd7e9fac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 201, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68940ed1b80743758f212230bd7e9fac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68940ed1b80743758f212230bd7e9fac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68940ed1b80743758f212230bd7e9fac" class="color" data-tooltip="RGBA: 127, 201, 127, 1.0
   HEXA: #7fc97fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_efdd5695660f43ea9a52a0aac5b659d5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 174, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_efdd5695660f43ea9a52a0aac5b659d5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_efdd5695660f43ea9a52a0aac5b659d5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_efdd5695660f43ea9a52a0aac5b659d5" class="color" data-tooltip="RGBA: 190, 174, 212, 1.0
   HEXA: #beaed4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a15e138213e5418f8743dad4e32ca46b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 192, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a15e138213e5418f8743dad4e32ca46b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a15e138213e5418f8743dad4e32ca46b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a15e138213e5418f8743dad4e32ca46b" class="color" data-tooltip="RGBA: 253, 192, 134, 1.0
   HEXA: #fdc086ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a0f7acf7f7314724bf0c1c957bcc6848 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a0f7acf7f7314724bf0c1c957bcc6848::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a0f7acf7f7314724bf0c1c957bcc6848:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a0f7acf7f7314724bf0c1c957bcc6848" class="color" data-tooltip="RGBA: 255, 255, 153, 1.0
   HEXA: #ffff99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9798c9a899024edfa0eeee5d11ac5831 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 108, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9798c9a899024edfa0eeee5d11ac5831::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9798c9a899024edfa0eeee5d11ac5831:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9798c9a899024edfa0eeee5d11ac5831" class="color" data-tooltip="RGBA: 56, 108, 176, 1.0
   HEXA: #386cb0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_933bf013d198499396d917a9c6e2d4c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 2, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_933bf013d198499396d917a9c6e2d4c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_933bf013d198499396d917a9c6e2d4c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_933bf013d198499396d917a9c6e2d4c1" class="color" data-tooltip="RGBA: 240, 2, 127, 1.0
   HEXA: #f0027fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c731217f5972464ca4009f2b99175912 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 91, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c731217f5972464ca4009f2b99175912::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c731217f5972464ca4009f2b99175912:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c731217f5972464ca4009f2b99175912" class="color" data-tooltip="RGBA: 191, 91, 23, 1.0
   HEXA: #bf5b17ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f3cb3dd2efd749e0af9740d2fd379b82 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f3cb3dd2efd749e0af9740d2fd379b82::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f3cb3dd2efd749e0af9740d2fd379b82:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f3cb3dd2efd749e0af9740d2fd379b82" class="color" data-tooltip="RGBA: 102, 102, 102, 1.0
   HEXA: #666666ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b329f26cfad84cd382026ecc408c177a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b329f26cfad84cd382026ecc408c177a div { flex: 1 1 0; }
           #_b329f26cfad84cd382026ecc408c177a div.color { width: 100%; height: 100%; }
           #_b329f26cfad84cd382026ecc408c177a div.cmap { width: 100%; height: auto; }
           #_b329f26cfad84cd382026ecc408c177a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Paired</strong>
       
       <div id="_b329f26cfad84cd382026ecc408c177a" class="color-map">
           
                           <div>
                   <style>
       #_b7ca4bca646a4418ab5034143d5d1c47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 206, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b7ca4bca646a4418ab5034143d5d1c47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b7ca4bca646a4418ab5034143d5d1c47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b7ca4bca646a4418ab5034143d5d1c47" class="color" data-tooltip="RGBA: 166, 206, 227, 1.0
   HEXA: #a6cee3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57d9e4b523a4496c97866e9a9cd02b30 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 120, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57d9e4b523a4496c97866e9a9cd02b30::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57d9e4b523a4496c97866e9a9cd02b30:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57d9e4b523a4496c97866e9a9cd02b30" class="color" data-tooltip="RGBA: 31, 120, 180, 1.0
   HEXA: #1f78b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8e68f5e3b0342f7bb13a1463db48291 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 223, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8e68f5e3b0342f7bb13a1463db48291::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8e68f5e3b0342f7bb13a1463db48291:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8e68f5e3b0342f7bb13a1463db48291" class="color" data-tooltip="RGBA: 178, 223, 138, 1.0
   HEXA: #b2df8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d52e27d6abdf45058829256ac3de0e07 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 160, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d52e27d6abdf45058829256ac3de0e07::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d52e27d6abdf45058829256ac3de0e07:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d52e27d6abdf45058829256ac3de0e07" class="color" data-tooltip="RGBA: 51, 160, 44, 1.0
   HEXA: #33a02cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_23baafd49a9447f88c87ff5f2334be4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 154, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23baafd49a9447f88c87ff5f2334be4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23baafd49a9447f88c87ff5f2334be4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23baafd49a9447f88c87ff5f2334be4d" class="color" data-tooltip="RGBA: 251, 154, 153, 1.0
   HEXA: #fb9a99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_54f6cd00d9b447c39d89cc8fe177c5e4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 26, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_54f6cd00d9b447c39d89cc8fe177c5e4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_54f6cd00d9b447c39d89cc8fe177c5e4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_54f6cd00d9b447c39d89cc8fe177c5e4" class="color" data-tooltip="RGBA: 227, 26, 28, 1.0
   HEXA: #e31a1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a9cc6df90441430da1489253e5bd0bf3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 191, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a9cc6df90441430da1489253e5bd0bf3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a9cc6df90441430da1489253e5bd0bf3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a9cc6df90441430da1489253e5bd0bf3" class="color" data-tooltip="RGBA: 253, 191, 111, 1.0
   HEXA: #fdbf6fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c0754c8043484b56a5e0f407fd9ad3d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c0754c8043484b56a5e0f407fd9ad3d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c0754c8043484b56a5e0f407fd9ad3d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c0754c8043484b56a5e0f407fd9ad3d1" class="color" data-tooltip="RGBA: 255, 127, 0, 1.0
   HEXA: #ff7f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7b340b2e002b417387960b1a0f8b0345 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 178, 214, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7b340b2e002b417387960b1a0f8b0345::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7b340b2e002b417387960b1a0f8b0345:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7b340b2e002b417387960b1a0f8b0345" class="color" data-tooltip="RGBA: 202, 178, 214, 1.0
   HEXA: #cab2d6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2524bbd2309849eba1ad8644009d1b7e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 61, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2524bbd2309849eba1ad8644009d1b7e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2524bbd2309849eba1ad8644009d1b7e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2524bbd2309849eba1ad8644009d1b7e" class="color" data-tooltip="RGBA: 106, 61, 154, 1.0
   HEXA: #6a3d9aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c7abc3d8c9d44288312851387e23bd0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c7abc3d8c9d44288312851387e23bd0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c7abc3d8c9d44288312851387e23bd0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c7abc3d8c9d44288312851387e23bd0" class="color" data-tooltip="RGBA: 255, 255, 153, 1.0
   HEXA: #ffff99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b12e2b4418e64911bdd35522c78595c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 89, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b12e2b4418e64911bdd35522c78595c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b12e2b4418e64911bdd35522c78595c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b12e2b4418e64911bdd35522c78595c8" class="color" data-tooltip="RGBA: 177, 89, 40, 1.0
   HEXA: #b15928ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_34f6b631d39543e18324af5b0aed6e3a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_34f6b631d39543e18324af5b0aed6e3a div { flex: 1 1 0; }
           #_34f6b631d39543e18324af5b0aed6e3a div.color { width: 100%; height: 100%; }
           #_34f6b631d39543e18324af5b0aed6e3a div.cmap { width: 100%; height: auto; }
           #_34f6b631d39543e18324af5b0aed6e3a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Blues</strong>
       
       <div id="_34f6b631d39543e18324af5b0aed6e3a" class="color-map">
           
                           <div>
                   <style>
       #_d8ca2cd96d8c485faaf5a5523fd164b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 10, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d8ca2cd96d8c485faaf5a5523fd164b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d8ca2cd96d8c485faaf5a5523fd164b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d8ca2cd96d8c485faaf5a5523fd164b3" class="color" data-tooltip="RGBA: 5, 10, 172, 1.0
   HEXA: #050aacff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_387ab41b2da7452aa24ba15fee95a0a8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 60, 190, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_387ab41b2da7452aa24ba15fee95a0a8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_387ab41b2da7452aa24ba15fee95a0a8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_387ab41b2da7452aa24ba15fee95a0a8" class="color" data-tooltip="RGBA: 40, 60, 190, 1.0
   HEXA: #283cbeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_39c96791d4db46659ad6be442a1563f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 100, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_39c96791d4db46659ad6be442a1563f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_39c96791d4db46659ad6be442a1563f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_39c96791d4db46659ad6be442a1563f6" class="color" data-tooltip="RGBA: 70, 100, 245, 1.0
   HEXA: #4664f5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60b03daa52b84a2e8771995220f8f1ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(90, 120, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60b03daa52b84a2e8771995220f8f1ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60b03daa52b84a2e8771995220f8f1ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60b03daa52b84a2e8771995220f8f1ea" class="color" data-tooltip="RGBA: 90, 120, 245, 1.0
   HEXA: #5a78f5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ef56f1b5da745a8a660fdab432ff404 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 137, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ef56f1b5da745a8a660fdab432ff404::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ef56f1b5da745a8a660fdab432ff404:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ef56f1b5da745a8a660fdab432ff404" class="color" data-tooltip="RGBA: 106, 137, 247, 1.0
   HEXA: #6a89f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_df3e16ef710c477294256466c16f1bf3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 220, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_df3e16ef710c477294256466c16f1bf3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_df3e16ef710c477294256466c16f1bf3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_df3e16ef710c477294256466c16f1bf3" class="color" data-tooltip="RGBA: 220, 220, 220, 1.0
   HEXA: #dcdcdcff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4388edc0bedd4bb28164e23416230e90 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4388edc0bedd4bb28164e23416230e90 div { flex: 1 1 0; }
           #_4388edc0bedd4bb28164e23416230e90 div.color { width: 100%; height: 100%; }
           #_4388edc0bedd4bb28164e23416230e90 div.cmap { width: 100%; height: auto; }
           #_4388edc0bedd4bb28164e23416230e90 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>BuGn</strong>
       
       <div id="_4388edc0bedd4bb28164e23416230e90" class="color-map">
           
                           <div>
                   <style>
       #_9cf66f313e414d98ace81b42398adc03 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9cf66f313e414d98ace81b42398adc03::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9cf66f313e414d98ace81b42398adc03:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9cf66f313e414d98ace81b42398adc03" class="color" data-tooltip="RGBA: 247, 252, 253, 1.0
   HEXA: #f7fcfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eeaa516e79c04331b19953c8e3154ac4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 245, 249, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eeaa516e79c04331b19953c8e3154ac4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eeaa516e79c04331b19953c8e3154ac4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eeaa516e79c04331b19953c8e3154ac4" class="color" data-tooltip="RGBA: 229, 245, 249, 1.0
   HEXA: #e5f5f9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0df6d9992902419383ba1c69e52e894a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 236, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0df6d9992902419383ba1c69e52e894a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0df6d9992902419383ba1c69e52e894a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0df6d9992902419383ba1c69e52e894a" class="color" data-tooltip="RGBA: 204, 236, 230, 1.0
   HEXA: #ccece6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6c462adf235f4666a44fe119a78f71d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 216, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c462adf235f4666a44fe119a78f71d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c462adf235f4666a44fe119a78f71d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c462adf235f4666a44fe119a78f71d2" class="color" data-tooltip="RGBA: 153, 216, 201, 1.0
   HEXA: #99d8c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60a9446595004874b33ac8febb1cc155 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 194, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60a9446595004874b33ac8febb1cc155::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60a9446595004874b33ac8febb1cc155:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60a9446595004874b33ac8febb1cc155" class="color" data-tooltip="RGBA: 102, 194, 164, 1.0
   HEXA: #66c2a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_804f4725e33f4b76a652f106167e956e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 174, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_804f4725e33f4b76a652f106167e956e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_804f4725e33f4b76a652f106167e956e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_804f4725e33f4b76a652f106167e956e" class="color" data-tooltip="RGBA: 65, 174, 118, 1.0
   HEXA: #41ae76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0903ebdda95149a7be7716ca1a0d7b52 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 139, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0903ebdda95149a7be7716ca1a0d7b52::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0903ebdda95149a7be7716ca1a0d7b52:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0903ebdda95149a7be7716ca1a0d7b52" class="color" data-tooltip="RGBA: 35, 139, 69, 1.0
   HEXA: #238b45ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f8fc754aa684ff2a66858b99d4683be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 109, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f8fc754aa684ff2a66858b99d4683be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f8fc754aa684ff2a66858b99d4683be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f8fc754aa684ff2a66858b99d4683be" class="color" data-tooltip="RGBA: 0, 109, 44, 1.0
   HEXA: #006d2cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d4059bbca89b47b5baba1d8e1df416a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d4059bbca89b47b5baba1d8e1df416a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d4059bbca89b47b5baba1d8e1df416a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d4059bbca89b47b5baba1d8e1df416a6" class="color" data-tooltip="RGBA: 0, 68, 27, 1.0
   HEXA: #00441bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_bab512108f824fafa4812c8f5f556784 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_bab512108f824fafa4812c8f5f556784 div { flex: 1 1 0; }
           #_bab512108f824fafa4812c8f5f556784 div.color { width: 100%; height: 100%; }
           #_bab512108f824fafa4812c8f5f556784 div.cmap { width: 100%; height: auto; }
           #_bab512108f824fafa4812c8f5f556784 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>BuPu</strong>
       
       <div id="_bab512108f824fafa4812c8f5f556784" class="color-map">
           
                           <div>
                   <style>
       #_4b6a27ebba184f809ef8eceba491dbe3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b6a27ebba184f809ef8eceba491dbe3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b6a27ebba184f809ef8eceba491dbe3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b6a27ebba184f809ef8eceba491dbe3" class="color" data-tooltip="RGBA: 247, 252, 253, 1.0
   HEXA: #f7fcfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9840c67a7c414eb0b3ab96d5f3c8d8bb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 236, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9840c67a7c414eb0b3ab96d5f3c8d8bb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9840c67a7c414eb0b3ab96d5f3c8d8bb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9840c67a7c414eb0b3ab96d5f3c8d8bb" class="color" data-tooltip="RGBA: 224, 236, 244, 1.0
   HEXA: #e0ecf4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_af5d2c50c9214e60a70d509e4855a11f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 211, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_af5d2c50c9214e60a70d509e4855a11f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_af5d2c50c9214e60a70d509e4855a11f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_af5d2c50c9214e60a70d509e4855a11f" class="color" data-tooltip="RGBA: 191, 211, 230, 1.0
   HEXA: #bfd3e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd2d1df05ae547c69459268461faf427 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 188, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd2d1df05ae547c69459268461faf427::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd2d1df05ae547c69459268461faf427:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd2d1df05ae547c69459268461faf427" class="color" data-tooltip="RGBA: 158, 188, 218, 1.0
   HEXA: #9ebcdaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66e2b593d29541299c10268f69a79fde { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 150, 198, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66e2b593d29541299c10268f69a79fde::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66e2b593d29541299c10268f69a79fde:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66e2b593d29541299c10268f69a79fde" class="color" data-tooltip="RGBA: 140, 150, 198, 1.0
   HEXA: #8c96c6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eacb58009b42475291be78d21f96595c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 107, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eacb58009b42475291be78d21f96595c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eacb58009b42475291be78d21f96595c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eacb58009b42475291be78d21f96595c" class="color" data-tooltip="RGBA: 140, 107, 177, 1.0
   HEXA: #8c6bb1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_010e67b36a274f88aba1c93fa1b9dc3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 65, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_010e67b36a274f88aba1c93fa1b9dc3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_010e67b36a274f88aba1c93fa1b9dc3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_010e67b36a274f88aba1c93fa1b9dc3d" class="color" data-tooltip="RGBA: 136, 65, 157, 1.0
   HEXA: #88419dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_456e48b0af104813a165cbe4934ffb97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 15, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_456e48b0af104813a165cbe4934ffb97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_456e48b0af104813a165cbe4934ffb97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_456e48b0af104813a165cbe4934ffb97" class="color" data-tooltip="RGBA: 129, 15, 124, 1.0
   HEXA: #810f7cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cdaaee8b93c64c9fbe13f6b840a3d1b1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 0, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cdaaee8b93c64c9fbe13f6b840a3d1b1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cdaaee8b93c64c9fbe13f6b840a3d1b1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cdaaee8b93c64c9fbe13f6b840a3d1b1" class="color" data-tooltip="RGBA: 77, 0, 75, 1.0
   HEXA: #4d004bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_89fbe5cf6c67451cb95c469fda1bcc57 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_89fbe5cf6c67451cb95c469fda1bcc57 div { flex: 1 1 0; }
           #_89fbe5cf6c67451cb95c469fda1bcc57 div.color { width: 100%; height: 100%; }
           #_89fbe5cf6c67451cb95c469fda1bcc57 div.cmap { width: 100%; height: auto; }
           #_89fbe5cf6c67451cb95c469fda1bcc57 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>GnBu</strong>
       
       <div id="_89fbe5cf6c67451cb95c469fda1bcc57" class="color-map">
           
                           <div>
                   <style>
       #_9538bbd6529d43e28f6dceeff07d82b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9538bbd6529d43e28f6dceeff07d82b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9538bbd6529d43e28f6dceeff07d82b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9538bbd6529d43e28f6dceeff07d82b4" class="color" data-tooltip="RGBA: 247, 252, 240, 1.0
   HEXA: #f7fcf0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7ebbaa3e4dba4763b8924bc1c22c18f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 243, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7ebbaa3e4dba4763b8924bc1c22c18f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7ebbaa3e4dba4763b8924bc1c22c18f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7ebbaa3e4dba4763b8924bc1c22c18f3" class="color" data-tooltip="RGBA: 224, 243, 219, 1.0
   HEXA: #e0f3dbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05714697d5bd476ba37ed7f1693f5ce1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 235, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05714697d5bd476ba37ed7f1693f5ce1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05714697d5bd476ba37ed7f1693f5ce1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05714697d5bd476ba37ed7f1693f5ce1" class="color" data-tooltip="RGBA: 204, 235, 197, 1.0
   HEXA: #ccebc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e72909f390f4426bc0eb1cd747587c3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 221, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e72909f390f4426bc0eb1cd747587c3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e72909f390f4426bc0eb1cd747587c3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e72909f390f4426bc0eb1cd747587c3" class="color" data-tooltip="RGBA: 168, 221, 181, 1.0
   HEXA: #a8ddb5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea77d88a82e745fe80689fc4502f283d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 204, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea77d88a82e745fe80689fc4502f283d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea77d88a82e745fe80689fc4502f283d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea77d88a82e745fe80689fc4502f283d" class="color" data-tooltip="RGBA: 123, 204, 196, 1.0
   HEXA: #7bccc4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d42a1169b5c4880ae20249375f18a49 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(78, 179, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d42a1169b5c4880ae20249375f18a49::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d42a1169b5c4880ae20249375f18a49:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d42a1169b5c4880ae20249375f18a49" class="color" data-tooltip="RGBA: 78, 179, 211, 1.0
   HEXA: #4eb3d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_11c7970c154d4094a9df58dffbdc61be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(43, 140, 190, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_11c7970c154d4094a9df58dffbdc61be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_11c7970c154d4094a9df58dffbdc61be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_11c7970c154d4094a9df58dffbdc61be" class="color" data-tooltip="RGBA: 43, 140, 190, 1.0
   HEXA: #2b8cbeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5770d8518536404380ec86ced576c1d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 104, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5770d8518536404380ec86ced576c1d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5770d8518536404380ec86ced576c1d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5770d8518536404380ec86ced576c1d3" class="color" data-tooltip="RGBA: 8, 104, 172, 1.0
   HEXA: #0868acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1095b66fbbc04b00be936c7cdd61a424 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 64, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1095b66fbbc04b00be936c7cdd61a424::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1095b66fbbc04b00be936c7cdd61a424:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1095b66fbbc04b00be936c7cdd61a424" class="color" data-tooltip="RGBA: 8, 64, 129, 1.0
   HEXA: #084081ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2ec2a2ff43384e68868857b290c80c79 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2ec2a2ff43384e68868857b290c80c79 div { flex: 1 1 0; }
           #_2ec2a2ff43384e68868857b290c80c79 div.color { width: 100%; height: 100%; }
           #_2ec2a2ff43384e68868857b290c80c79 div.cmap { width: 100%; height: auto; }
           #_2ec2a2ff43384e68868857b290c80c79 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Greens</strong>
       
       <div id="_2ec2a2ff43384e68868857b290c80c79" class="color-map">
           
                           <div>
                   <style>
       #_8e0416a88aa94abeb44419188555ba63 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e0416a88aa94abeb44419188555ba63::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e0416a88aa94abeb44419188555ba63:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e0416a88aa94abeb44419188555ba63" class="color" data-tooltip="RGBA: 0, 68, 27, 1.0
   HEXA: #00441bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d94d274c48514a9da49b5f47c85fd28f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 109, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d94d274c48514a9da49b5f47c85fd28f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d94d274c48514a9da49b5f47c85fd28f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d94d274c48514a9da49b5f47c85fd28f" class="color" data-tooltip="RGBA: 0, 109, 44, 1.0
   HEXA: #006d2cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f1f2e4c21e04dc89c12752a3887840a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 139, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f1f2e4c21e04dc89c12752a3887840a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f1f2e4c21e04dc89c12752a3887840a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f1f2e4c21e04dc89c12752a3887840a" class="color" data-tooltip="RGBA: 35, 139, 69, 1.0
   HEXA: #238b45ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5b939e0f3a1456cad0991f9487e766c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 171, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5b939e0f3a1456cad0991f9487e766c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5b939e0f3a1456cad0991f9487e766c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5b939e0f3a1456cad0991f9487e766c" class="color" data-tooltip="RGBA: 65, 171, 93, 1.0
   HEXA: #41ab5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9f1cc22c2a894d51861f80c028cd91b0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 196, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9f1cc22c2a894d51861f80c028cd91b0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9f1cc22c2a894d51861f80c028cd91b0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9f1cc22c2a894d51861f80c028cd91b0" class="color" data-tooltip="RGBA: 116, 196, 118, 1.0
   HEXA: #74c476ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8d7f815d12844602b8c817b3a58730d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 217, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8d7f815d12844602b8c817b3a58730d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8d7f815d12844602b8c817b3a58730d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8d7f815d12844602b8c817b3a58730d1" class="color" data-tooltip="RGBA: 161, 217, 155, 1.0
   HEXA: #a1d99bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5e5d0000ca894c03a9ed3bbe81447de6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 233, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5e5d0000ca894c03a9ed3bbe81447de6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5e5d0000ca894c03a9ed3bbe81447de6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5e5d0000ca894c03a9ed3bbe81447de6" class="color" data-tooltip="RGBA: 199, 233, 192, 1.0
   HEXA: #c7e9c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_529aa3269b474c1390330b1c661d9778 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 245, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_529aa3269b474c1390330b1c661d9778::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_529aa3269b474c1390330b1c661d9778:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_529aa3269b474c1390330b1c661d9778" class="color" data-tooltip="RGBA: 229, 245, 224, 1.0
   HEXA: #e5f5e0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e5beced79e334673b49cf3505534699f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e5beced79e334673b49cf3505534699f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e5beced79e334673b49cf3505534699f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e5beced79e334673b49cf3505534699f" class="color" data-tooltip="RGBA: 247, 252, 245, 1.0
   HEXA: #f7fcf5ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a9f71df022974377931600c9bbaf8f94 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a9f71df022974377931600c9bbaf8f94 div { flex: 1 1 0; }
           #_a9f71df022974377931600c9bbaf8f94 div.color { width: 100%; height: 100%; }
           #_a9f71df022974377931600c9bbaf8f94 div.cmap { width: 100%; height: auto; }
           #_a9f71df022974377931600c9bbaf8f94 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Greys</strong>
       
       <div id="_a9f71df022974377931600c9bbaf8f94" class="color-map">
           
                           <div>
                   <style>
       #_76a1b2f16e974c3babf1902ce117d384 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_76a1b2f16e974c3babf1902ce117d384::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_76a1b2f16e974c3babf1902ce117d384:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_76a1b2f16e974c3babf1902ce117d384" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e792700f028f4142bf01e535d8520aa3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e792700f028f4142bf01e535d8520aa3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e792700f028f4142bf01e535d8520aa3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e792700f028f4142bf01e535d8520aa3" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b47ffe521de842299e1b3dbc39f95612 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b47ffe521de842299e1b3dbc39f95612 div { flex: 1 1 0; }
           #_b47ffe521de842299e1b3dbc39f95612 div.color { width: 100%; height: 100%; }
           #_b47ffe521de842299e1b3dbc39f95612 div.cmap { width: 100%; height: auto; }
           #_b47ffe521de842299e1b3dbc39f95612 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>OrRd</strong>
       
       <div id="_b47ffe521de842299e1b3dbc39f95612" class="color-map">
           
                           <div>
                   <style>
       #_4eb2e60378b54078a68accba4ab4278d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4eb2e60378b54078a68accba4ab4278d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4eb2e60378b54078a68accba4ab4278d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4eb2e60378b54078a68accba4ab4278d" class="color" data-tooltip="RGBA: 255, 247, 236, 1.0
   HEXA: #fff7ecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db716817587e4e62b8ea8ad6e8206bef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 232, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db716817587e4e62b8ea8ad6e8206bef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db716817587e4e62b8ea8ad6e8206bef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db716817587e4e62b8ea8ad6e8206bef" class="color" data-tooltip="RGBA: 254, 232, 200, 1.0
   HEXA: #fee8c8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9c14238861e1441d97088cec14cd3527 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 212, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9c14238861e1441d97088cec14cd3527::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9c14238861e1441d97088cec14cd3527:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9c14238861e1441d97088cec14cd3527" class="color" data-tooltip="RGBA: 253, 212, 158, 1.0
   HEXA: #fdd49eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7180781d7e1e4bef8cc4ea70bb4b483d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 187, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7180781d7e1e4bef8cc4ea70bb4b483d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7180781d7e1e4bef8cc4ea70bb4b483d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7180781d7e1e4bef8cc4ea70bb4b483d" class="color" data-tooltip="RGBA: 253, 187, 132, 1.0
   HEXA: #fdbb84ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6ed1335bd144a5ba9dc24dea42c0935 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 141, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6ed1335bd144a5ba9dc24dea42c0935::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6ed1335bd144a5ba9dc24dea42c0935:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6ed1335bd144a5ba9dc24dea42c0935" class="color" data-tooltip="RGBA: 252, 141, 89, 1.0
   HEXA: #fc8d59ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b662f42e47c9413aa06fcf79444b1d5b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 101, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b662f42e47c9413aa06fcf79444b1d5b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b662f42e47c9413aa06fcf79444b1d5b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b662f42e47c9413aa06fcf79444b1d5b" class="color" data-tooltip="RGBA: 239, 101, 72, 1.0
   HEXA: #ef6548ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_37765715d8334319bfbd4c63afce5096 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 48, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_37765715d8334319bfbd4c63afce5096::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_37765715d8334319bfbd4c63afce5096:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_37765715d8334319bfbd4c63afce5096" class="color" data-tooltip="RGBA: 215, 48, 31, 1.0
   HEXA: #d7301fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cb85d56af59247d39ab329f058165beb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cb85d56af59247d39ab329f058165beb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cb85d56af59247d39ab329f058165beb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cb85d56af59247d39ab329f058165beb" class="color" data-tooltip="RGBA: 179, 0, 0, 1.0
   HEXA: #b30000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d01bc1b386f8426e87fcaa1b8b67b9d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d01bc1b386f8426e87fcaa1b8b67b9d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d01bc1b386f8426e87fcaa1b8b67b9d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d01bc1b386f8426e87fcaa1b8b67b9d4" class="color" data-tooltip="RGBA: 127, 0, 0, 1.0
   HEXA: #7f0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_784728b832ed41f181b17420cbef336a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_784728b832ed41f181b17420cbef336a div { flex: 1 1 0; }
           #_784728b832ed41f181b17420cbef336a div.color { width: 100%; height: 100%; }
           #_784728b832ed41f181b17420cbef336a div.cmap { width: 100%; height: auto; }
           #_784728b832ed41f181b17420cbef336a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Oranges</strong>
       
       <div id="_784728b832ed41f181b17420cbef336a" class="color-map">
           
                           <div>
                   <style>
       #_fe8a8c3ee6cd42caae724a7b6df5c22c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 245, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe8a8c3ee6cd42caae724a7b6df5c22c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe8a8c3ee6cd42caae724a7b6df5c22c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe8a8c3ee6cd42caae724a7b6df5c22c" class="color" data-tooltip="RGBA: 255, 245, 235, 1.0
   HEXA: #fff5ebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3591127bdf4444aea059fdf6ba99e5f0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 230, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3591127bdf4444aea059fdf6ba99e5f0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3591127bdf4444aea059fdf6ba99e5f0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3591127bdf4444aea059fdf6ba99e5f0" class="color" data-tooltip="RGBA: 254, 230, 206, 1.0
   HEXA: #fee6ceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a9d0b36f8235441382794d3c417608c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 208, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a9d0b36f8235441382794d3c417608c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a9d0b36f8235441382794d3c417608c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a9d0b36f8235441382794d3c417608c1" class="color" data-tooltip="RGBA: 253, 208, 162, 1.0
   HEXA: #fdd0a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_55b82d28a3ed404c8d16447060fde312 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_55b82d28a3ed404c8d16447060fde312::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_55b82d28a3ed404c8d16447060fde312:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_55b82d28a3ed404c8d16447060fde312" class="color" data-tooltip="RGBA: 253, 174, 107, 1.0
   HEXA: #fdae6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ee7f085ebff4b80ae89d508f19bfcbe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 141, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ee7f085ebff4b80ae89d508f19bfcbe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ee7f085ebff4b80ae89d508f19bfcbe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ee7f085ebff4b80ae89d508f19bfcbe" class="color" data-tooltip="RGBA: 253, 141, 60, 1.0
   HEXA: #fd8d3cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ca33dc73d2f7447085e34ed9717d2baf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 105, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ca33dc73d2f7447085e34ed9717d2baf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ca33dc73d2f7447085e34ed9717d2baf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ca33dc73d2f7447085e34ed9717d2baf" class="color" data-tooltip="RGBA: 241, 105, 19, 1.0
   HEXA: #f16913ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5534eafe95f24618be1302f1939b3ebf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 72, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5534eafe95f24618be1302f1939b3ebf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5534eafe95f24618be1302f1939b3ebf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5534eafe95f24618be1302f1939b3ebf" class="color" data-tooltip="RGBA: 217, 72, 1, 1.0
   HEXA: #d94801ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_335715a4acf84d71a6f0892c2f38e940 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 54, 3, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_335715a4acf84d71a6f0892c2f38e940::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_335715a4acf84d71a6f0892c2f38e940:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_335715a4acf84d71a6f0892c2f38e940" class="color" data-tooltip="RGBA: 166, 54, 3, 1.0
   HEXA: #a63603ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_39c975f052884bd791457d1d8b4a62a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 39, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_39c975f052884bd791457d1d8b4a62a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_39c975f052884bd791457d1d8b4a62a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_39c975f052884bd791457d1d8b4a62a2" class="color" data-tooltip="RGBA: 127, 39, 4, 1.0
   HEXA: #7f2704ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2db793b540424f0d9567162471dbd016 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2db793b540424f0d9567162471dbd016 div { flex: 1 1 0; }
           #_2db793b540424f0d9567162471dbd016 div.color { width: 100%; height: 100%; }
           #_2db793b540424f0d9567162471dbd016 div.cmap { width: 100%; height: auto; }
           #_2db793b540424f0d9567162471dbd016 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PuBu</strong>
       
       <div id="_2db793b540424f0d9567162471dbd016" class="color-map">
           
                           <div>
                   <style>
       #_ef9b0bf355754aa0884fd9dc51f7a8df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef9b0bf355754aa0884fd9dc51f7a8df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef9b0bf355754aa0884fd9dc51f7a8df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef9b0bf355754aa0884fd9dc51f7a8df" class="color" data-tooltip="RGBA: 255, 247, 251, 1.0
   HEXA: #fff7fbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee459925a7454b2895fb751c0a349a48 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 231, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee459925a7454b2895fb751c0a349a48::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee459925a7454b2895fb751c0a349a48:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee459925a7454b2895fb751c0a349a48" class="color" data-tooltip="RGBA: 236, 231, 242, 1.0
   HEXA: #ece7f2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4c1b6a026fa4194b5d9617fa979cf8a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 209, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4c1b6a026fa4194b5d9617fa979cf8a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4c1b6a026fa4194b5d9617fa979cf8a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4c1b6a026fa4194b5d9617fa979cf8a" class="color" data-tooltip="RGBA: 208, 209, 230, 1.0
   HEXA: #d0d1e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f746b1e8a8bf4721b7a5763d83ba8724 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 189, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f746b1e8a8bf4721b7a5763d83ba8724::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f746b1e8a8bf4721b7a5763d83ba8724:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f746b1e8a8bf4721b7a5763d83ba8724" class="color" data-tooltip="RGBA: 166, 189, 219, 1.0
   HEXA: #a6bddbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2a2f2703bf17417cbafe95f94d4a3808 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 169, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2a2f2703bf17417cbafe95f94d4a3808::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2a2f2703bf17417cbafe95f94d4a3808:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2a2f2703bf17417cbafe95f94d4a3808" class="color" data-tooltip="RGBA: 116, 169, 207, 1.0
   HEXA: #74a9cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ceef962732c742e4b0584036f4dfa55a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 144, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ceef962732c742e4b0584036f4dfa55a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ceef962732c742e4b0584036f4dfa55a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ceef962732c742e4b0584036f4dfa55a" class="color" data-tooltip="RGBA: 54, 144, 192, 1.0
   HEXA: #3690c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dd12a8f9d1c548f4807a3abb390b8895 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 112, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dd12a8f9d1c548f4807a3abb390b8895::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dd12a8f9d1c548f4807a3abb390b8895:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dd12a8f9d1c548f4807a3abb390b8895" class="color" data-tooltip="RGBA: 5, 112, 176, 1.0
   HEXA: #0570b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7fc0ed5a7dbe442dbf55c1d17f11938b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 90, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7fc0ed5a7dbe442dbf55c1d17f11938b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7fc0ed5a7dbe442dbf55c1d17f11938b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7fc0ed5a7dbe442dbf55c1d17f11938b" class="color" data-tooltip="RGBA: 4, 90, 141, 1.0
   HEXA: #045a8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c3180a08c1a449c8921afabcbe7a953 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(2, 56, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c3180a08c1a449c8921afabcbe7a953::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c3180a08c1a449c8921afabcbe7a953:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c3180a08c1a449c8921afabcbe7a953" class="color" data-tooltip="RGBA: 2, 56, 88, 1.0
   HEXA: #023858ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9678ae58ec9541088886b908534b0bd2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9678ae58ec9541088886b908534b0bd2 div { flex: 1 1 0; }
           #_9678ae58ec9541088886b908534b0bd2 div.color { width: 100%; height: 100%; }
           #_9678ae58ec9541088886b908534b0bd2 div.cmap { width: 100%; height: auto; }
           #_9678ae58ec9541088886b908534b0bd2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PuBuGn</strong>
       
       <div id="_9678ae58ec9541088886b908534b0bd2" class="color-map">
           
                           <div>
                   <style>
       #_f566b5ee69be4cc0907ebc46b2e92521 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f566b5ee69be4cc0907ebc46b2e92521::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f566b5ee69be4cc0907ebc46b2e92521:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f566b5ee69be4cc0907ebc46b2e92521" class="color" data-tooltip="RGBA: 255, 247, 251, 1.0
   HEXA: #fff7fbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8cb330f1fd5e42128ec56909d8d0fdc7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 226, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8cb330f1fd5e42128ec56909d8d0fdc7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8cb330f1fd5e42128ec56909d8d0fdc7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8cb330f1fd5e42128ec56909d8d0fdc7" class="color" data-tooltip="RGBA: 236, 226, 240, 1.0
   HEXA: #ece2f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_272575b89b6540ddabbf836a4a7739bd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 209, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_272575b89b6540ddabbf836a4a7739bd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_272575b89b6540ddabbf836a4a7739bd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_272575b89b6540ddabbf836a4a7739bd" class="color" data-tooltip="RGBA: 208, 209, 230, 1.0
   HEXA: #d0d1e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d37ee17de813472fb145eb918ba32a59 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 189, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d37ee17de813472fb145eb918ba32a59::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d37ee17de813472fb145eb918ba32a59:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d37ee17de813472fb145eb918ba32a59" class="color" data-tooltip="RGBA: 166, 189, 219, 1.0
   HEXA: #a6bddbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3fa536fca5a64f0d899a9ce10fa1ddec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 169, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3fa536fca5a64f0d899a9ce10fa1ddec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3fa536fca5a64f0d899a9ce10fa1ddec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3fa536fca5a64f0d899a9ce10fa1ddec" class="color" data-tooltip="RGBA: 103, 169, 207, 1.0
   HEXA: #67a9cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_379953a3866649c49a17fb78da5d3079 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 144, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_379953a3866649c49a17fb78da5d3079::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_379953a3866649c49a17fb78da5d3079:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_379953a3866649c49a17fb78da5d3079" class="color" data-tooltip="RGBA: 54, 144, 192, 1.0
   HEXA: #3690c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_41a93ebed03040ffab5818312704b6c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(2, 129, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_41a93ebed03040ffab5818312704b6c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_41a93ebed03040ffab5818312704b6c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_41a93ebed03040ffab5818312704b6c9" class="color" data-tooltip="RGBA: 2, 129, 138, 1.0
   HEXA: #02818aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ad6edb1ae6764e1f8305e0ac2244885b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 108, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ad6edb1ae6764e1f8305e0ac2244885b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ad6edb1ae6764e1f8305e0ac2244885b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ad6edb1ae6764e1f8305e0ac2244885b" class="color" data-tooltip="RGBA: 1, 108, 89, 1.0
   HEXA: #016c59ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3ff4294512f04c4594c0c3e0e19a1c7d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 70, 54, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3ff4294512f04c4594c0c3e0e19a1c7d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3ff4294512f04c4594c0c3e0e19a1c7d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3ff4294512f04c4594c0c3e0e19a1c7d" class="color" data-tooltip="RGBA: 1, 70, 54, 1.0
   HEXA: #014636ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_17dbf884186544fda0399cdaa5a1d79e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_17dbf884186544fda0399cdaa5a1d79e div { flex: 1 1 0; }
           #_17dbf884186544fda0399cdaa5a1d79e div.color { width: 100%; height: 100%; }
           #_17dbf884186544fda0399cdaa5a1d79e div.cmap { width: 100%; height: auto; }
           #_17dbf884186544fda0399cdaa5a1d79e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PuRd</strong>
       
       <div id="_17dbf884186544fda0399cdaa5a1d79e" class="color-map">
           
                           <div>
                   <style>
       #_3e8e76897f344629b63a47e25da28c56 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 244, 249, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e8e76897f344629b63a47e25da28c56::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e8e76897f344629b63a47e25da28c56:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e8e76897f344629b63a47e25da28c56" class="color" data-tooltip="RGBA: 247, 244, 249, 1.0
   HEXA: #f7f4f9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d23ce59a653f4e6ca63309411c5af404 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 225, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d23ce59a653f4e6ca63309411c5af404::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d23ce59a653f4e6ca63309411c5af404:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d23ce59a653f4e6ca63309411c5af404" class="color" data-tooltip="RGBA: 231, 225, 239, 1.0
   HEXA: #e7e1efff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_12d4ab546c7045468abfe8376315f64d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 185, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_12d4ab546c7045468abfe8376315f64d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_12d4ab546c7045468abfe8376315f64d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_12d4ab546c7045468abfe8376315f64d" class="color" data-tooltip="RGBA: 212, 185, 218, 1.0
   HEXA: #d4b9daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9eef13d864cf487482318b7a50c544ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 148, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9eef13d864cf487482318b7a50c544ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9eef13d864cf487482318b7a50c544ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9eef13d864cf487482318b7a50c544ab" class="color" data-tooltip="RGBA: 201, 148, 199, 1.0
   HEXA: #c994c7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1b571e6d96544b81b308aa395c81f8dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 101, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1b571e6d96544b81b308aa395c81f8dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1b571e6d96544b81b308aa395c81f8dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1b571e6d96544b81b308aa395c81f8dd" class="color" data-tooltip="RGBA: 223, 101, 176, 1.0
   HEXA: #df65b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4164bf01fc084bafa83ddfedd2ff09ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 41, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4164bf01fc084bafa83ddfedd2ff09ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4164bf01fc084bafa83ddfedd2ff09ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4164bf01fc084bafa83ddfedd2ff09ca" class="color" data-tooltip="RGBA: 231, 41, 138, 1.0
   HEXA: #e7298aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f769a91c65246ebb14093aac42c584c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 18, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f769a91c65246ebb14093aac42c584c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f769a91c65246ebb14093aac42c584c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f769a91c65246ebb14093aac42c584c" class="color" data-tooltip="RGBA: 206, 18, 86, 1.0
   HEXA: #ce1256ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ed7b43933a194c7fa7af0157f90ccf29 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 0, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ed7b43933a194c7fa7af0157f90ccf29::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ed7b43933a194c7fa7af0157f90ccf29:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ed7b43933a194c7fa7af0157f90ccf29" class="color" data-tooltip="RGBA: 152, 0, 67, 1.0
   HEXA: #980043ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_694066ff57424794bbca1e0a97339d4e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_694066ff57424794bbca1e0a97339d4e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_694066ff57424794bbca1e0a97339d4e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_694066ff57424794bbca1e0a97339d4e" class="color" data-tooltip="RGBA: 103, 0, 31, 1.0
   HEXA: #67001fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4b7c256bbbfa4cd9b0c9a0367852e59a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4b7c256bbbfa4cd9b0c9a0367852e59a div { flex: 1 1 0; }
           #_4b7c256bbbfa4cd9b0c9a0367852e59a div.color { width: 100%; height: 100%; }
           #_4b7c256bbbfa4cd9b0c9a0367852e59a div.cmap { width: 100%; height: auto; }
           #_4b7c256bbbfa4cd9b0c9a0367852e59a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Purples</strong>
       
       <div id="_4b7c256bbbfa4cd9b0c9a0367852e59a" class="color-map">
           
                           <div>
                   <style>
       #_d44c94359d4b44d0b8cca12626f4adba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 251, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d44c94359d4b44d0b8cca12626f4adba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d44c94359d4b44d0b8cca12626f4adba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d44c94359d4b44d0b8cca12626f4adba" class="color" data-tooltip="RGBA: 252, 251, 253, 1.0
   HEXA: #fcfbfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0fa9d88571f407990b9051f3a0f236d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 237, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0fa9d88571f407990b9051f3a0f236d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0fa9d88571f407990b9051f3a0f236d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0fa9d88571f407990b9051f3a0f236d" class="color" data-tooltip="RGBA: 239, 237, 245, 1.0
   HEXA: #efedf5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc92e05621674501b4b2713156857cbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 218, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc92e05621674501b4b2713156857cbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc92e05621674501b4b2713156857cbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc92e05621674501b4b2713156857cbd" class="color" data-tooltip="RGBA: 218, 218, 235, 1.0
   HEXA: #dadaebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d39ef4888b2474984b8c67cc324e569 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 189, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d39ef4888b2474984b8c67cc324e569::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d39ef4888b2474984b8c67cc324e569:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d39ef4888b2474984b8c67cc324e569" class="color" data-tooltip="RGBA: 188, 189, 220, 1.0
   HEXA: #bcbddcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1b231cfae1ac4d39b07fb8b967de9228 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 154, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1b231cfae1ac4d39b07fb8b967de9228::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1b231cfae1ac4d39b07fb8b967de9228:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1b231cfae1ac4d39b07fb8b967de9228" class="color" data-tooltip="RGBA: 158, 154, 200, 1.0
   HEXA: #9e9ac8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e93c6cdd92246fd8199fd7f6b679fe6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 125, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e93c6cdd92246fd8199fd7f6b679fe6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e93c6cdd92246fd8199fd7f6b679fe6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e93c6cdd92246fd8199fd7f6b679fe6" class="color" data-tooltip="RGBA: 128, 125, 186, 1.0
   HEXA: #807dbaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef866b8bb5a146d3801b70d9e578c2ed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 81, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef866b8bb5a146d3801b70d9e578c2ed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef866b8bb5a146d3801b70d9e578c2ed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef866b8bb5a146d3801b70d9e578c2ed" class="color" data-tooltip="RGBA: 106, 81, 163, 1.0
   HEXA: #6a51a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d1005badde6546a7a50a818c6707e151 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 39, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d1005badde6546a7a50a818c6707e151::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d1005badde6546a7a50a818c6707e151:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d1005badde6546a7a50a818c6707e151" class="color" data-tooltip="RGBA: 84, 39, 143, 1.0
   HEXA: #54278fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a0a6289926c4ce3b9da19cccd94f458 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 0, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a0a6289926c4ce3b9da19cccd94f458::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a0a6289926c4ce3b9da19cccd94f458:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a0a6289926c4ce3b9da19cccd94f458" class="color" data-tooltip="RGBA: 63, 0, 125, 1.0
   HEXA: #3f007dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_13dd102fa1ab48259b1359a9a1b26191 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_13dd102fa1ab48259b1359a9a1b26191 div { flex: 1 1 0; }
           #_13dd102fa1ab48259b1359a9a1b26191 div.color { width: 100%; height: 100%; }
           #_13dd102fa1ab48259b1359a9a1b26191 div.cmap { width: 100%; height: auto; }
           #_13dd102fa1ab48259b1359a9a1b26191 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdPu</strong>
       
       <div id="_13dd102fa1ab48259b1359a9a1b26191" class="color-map">
           
                           <div>
                   <style>
       #_2a159d53ffa847229b5ec3cf287e6d5f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 243, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2a159d53ffa847229b5ec3cf287e6d5f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2a159d53ffa847229b5ec3cf287e6d5f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2a159d53ffa847229b5ec3cf287e6d5f" class="color" data-tooltip="RGBA: 255, 247, 243, 1.0
   HEXA: #fff7f3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9a5aef18584141198cd4d7cfce3518cb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 224, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a5aef18584141198cd4d7cfce3518cb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a5aef18584141198cd4d7cfce3518cb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a5aef18584141198cd4d7cfce3518cb" class="color" data-tooltip="RGBA: 253, 224, 221, 1.0
   HEXA: #fde0ddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_370ae71f6d9c4f1495ccd726e1342744 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 197, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_370ae71f6d9c4f1495ccd726e1342744::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_370ae71f6d9c4f1495ccd726e1342744:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_370ae71f6d9c4f1495ccd726e1342744" class="color" data-tooltip="RGBA: 252, 197, 192, 1.0
   HEXA: #fcc5c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cdeb9156deaa49799d4a40be3546c4c3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 159, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cdeb9156deaa49799d4a40be3546c4c3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cdeb9156deaa49799d4a40be3546c4c3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cdeb9156deaa49799d4a40be3546c4c3" class="color" data-tooltip="RGBA: 250, 159, 181, 1.0
   HEXA: #fa9fb5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_11fcc24a20bb499a96ef46a28f0d8cbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 104, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_11fcc24a20bb499a96ef46a28f0d8cbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_11fcc24a20bb499a96ef46a28f0d8cbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_11fcc24a20bb499a96ef46a28f0d8cbd" class="color" data-tooltip="RGBA: 247, 104, 161, 1.0
   HEXA: #f768a1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9a36d6808bbf4618810ced4560331d17 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 52, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a36d6808bbf4618810ced4560331d17::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a36d6808bbf4618810ced4560331d17:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a36d6808bbf4618810ced4560331d17" class="color" data-tooltip="RGBA: 221, 52, 151, 1.0
   HEXA: #dd3497ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_396ee987ef714c26a9eaa6fd64df9747 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 1, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_396ee987ef714c26a9eaa6fd64df9747::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_396ee987ef714c26a9eaa6fd64df9747:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_396ee987ef714c26a9eaa6fd64df9747" class="color" data-tooltip="RGBA: 174, 1, 126, 1.0
   HEXA: #ae017eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_273b992e27cc4a7c8583a674c50507b6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(122, 1, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_273b992e27cc4a7c8583a674c50507b6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_273b992e27cc4a7c8583a674c50507b6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_273b992e27cc4a7c8583a674c50507b6" class="color" data-tooltip="RGBA: 122, 1, 119, 1.0
   HEXA: #7a0177ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_604ffe86db5a41aba5fc21c2e242a638 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(73, 0, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_604ffe86db5a41aba5fc21c2e242a638::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_604ffe86db5a41aba5fc21c2e242a638:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_604ffe86db5a41aba5fc21c2e242a638" class="color" data-tooltip="RGBA: 73, 0, 106, 1.0
   HEXA: #49006aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1644407a604d419bbab6253f8162a8e3 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1644407a604d419bbab6253f8162a8e3 div { flex: 1 1 0; }
           #_1644407a604d419bbab6253f8162a8e3 div.color { width: 100%; height: 100%; }
           #_1644407a604d419bbab6253f8162a8e3 div.cmap { width: 100%; height: auto; }
           #_1644407a604d419bbab6253f8162a8e3 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Reds</strong>
       
       <div id="_1644407a604d419bbab6253f8162a8e3" class="color-map">
           
                           <div>
                   <style>
       #_e43e854ac84c461093824de4fa23af72 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 220, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e43e854ac84c461093824de4fa23af72::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e43e854ac84c461093824de4fa23af72:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e43e854ac84c461093824de4fa23af72" class="color" data-tooltip="RGBA: 220, 220, 220, 1.0
   HEXA: #dcdcdcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ed2cfeb6480d44f1bea54dd787da1582 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 195, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ed2cfeb6480d44f1bea54dd787da1582::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ed2cfeb6480d44f1bea54dd787da1582:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ed2cfeb6480d44f1bea54dd787da1582" class="color" data-tooltip="RGBA: 245, 195, 157, 1.0
   HEXA: #f5c39dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_523271aac78348a59ee57cde01b75f1a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 160, 105, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_523271aac78348a59ee57cde01b75f1a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_523271aac78348a59ee57cde01b75f1a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_523271aac78348a59ee57cde01b75f1a" class="color" data-tooltip="RGBA: 245, 160, 105, 1.0
   HEXA: #f5a069ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9fd70b9ca3874b90aee62832f8a2782b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 10, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9fd70b9ca3874b90aee62832f8a2782b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9fd70b9ca3874b90aee62832f8a2782b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9fd70b9ca3874b90aee62832f8a2782b" class="color" data-tooltip="RGBA: 178, 10, 28, 1.0
   HEXA: #b20a1cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6a36877303f543ca8da8cb02b526706a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6a36877303f543ca8da8cb02b526706a div { flex: 1 1 0; }
           #_6a36877303f543ca8da8cb02b526706a div.color { width: 100%; height: 100%; }
           #_6a36877303f543ca8da8cb02b526706a div.cmap { width: 100%; height: auto; }
           #_6a36877303f543ca8da8cb02b526706a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>YlGn</strong>
       
       <div id="_6a36877303f543ca8da8cb02b526706a" class="color-map">
           
                           <div>
                   <style>
       #_7cbc884223cc45aa9269504d8a5f08ce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7cbc884223cc45aa9269504d8a5f08ce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7cbc884223cc45aa9269504d8a5f08ce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7cbc884223cc45aa9269504d8a5f08ce" class="color" data-tooltip="RGBA: 255, 255, 229, 1.0
   HEXA: #ffffe5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e987d4df93274154b5950a5229b4c56f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e987d4df93274154b5950a5229b4c56f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e987d4df93274154b5950a5229b4c56f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e987d4df93274154b5950a5229b4c56f" class="color" data-tooltip="RGBA: 247, 252, 185, 1.0
   HEXA: #f7fcb9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b6172dc619714479964cd933448d949f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 240, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b6172dc619714479964cd933448d949f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b6172dc619714479964cd933448d949f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b6172dc619714479964cd933448d949f" class="color" data-tooltip="RGBA: 217, 240, 163, 1.0
   HEXA: #d9f0a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2d58fd1c04d4a19a766d155d06818eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 221, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2d58fd1c04d4a19a766d155d06818eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2d58fd1c04d4a19a766d155d06818eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2d58fd1c04d4a19a766d155d06818eb" class="color" data-tooltip="RGBA: 173, 221, 142, 1.0
   HEXA: #addd8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eee7165480444bdca6a7d1473092df24 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 198, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eee7165480444bdca6a7d1473092df24::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eee7165480444bdca6a7d1473092df24:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eee7165480444bdca6a7d1473092df24" class="color" data-tooltip="RGBA: 120, 198, 121, 1.0
   HEXA: #78c679ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e27a035949c3437885ae8f8669da1d76 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 171, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e27a035949c3437885ae8f8669da1d76::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e27a035949c3437885ae8f8669da1d76:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e27a035949c3437885ae8f8669da1d76" class="color" data-tooltip="RGBA: 65, 171, 93, 1.0
   HEXA: #41ab5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_91774967e7e3404bb60878e9d0efb785 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 132, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_91774967e7e3404bb60878e9d0efb785::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_91774967e7e3404bb60878e9d0efb785:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_91774967e7e3404bb60878e9d0efb785" class="color" data-tooltip="RGBA: 35, 132, 67, 1.0
   HEXA: #238443ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_857e1d55ba8e442cb60fb42c3ceab5e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 104, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_857e1d55ba8e442cb60fb42c3ceab5e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_857e1d55ba8e442cb60fb42c3ceab5e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_857e1d55ba8e442cb60fb42c3ceab5e0" class="color" data-tooltip="RGBA: 0, 104, 55, 1.0
   HEXA: #006837ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_244a3f7772ea4baaadbdd10a86860da9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 69, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_244a3f7772ea4baaadbdd10a86860da9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_244a3f7772ea4baaadbdd10a86860da9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_244a3f7772ea4baaadbdd10a86860da9" class="color" data-tooltip="RGBA: 0, 69, 41, 1.0
   HEXA: #004529ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_04b50e5a331c4af9ac3b54be9fe8b373 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_04b50e5a331c4af9ac3b54be9fe8b373 div { flex: 1 1 0; }
           #_04b50e5a331c4af9ac3b54be9fe8b373 div.color { width: 100%; height: 100%; }
           #_04b50e5a331c4af9ac3b54be9fe8b373 div.cmap { width: 100%; height: auto; }
           #_04b50e5a331c4af9ac3b54be9fe8b373 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>YlGnBu</strong>
       
       <div id="_04b50e5a331c4af9ac3b54be9fe8b373" class="color-map">
           
                           <div>
                   <style>
       #_d63062529f084eabb5c23e561dd15549 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 29, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d63062529f084eabb5c23e561dd15549::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d63062529f084eabb5c23e561dd15549:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d63062529f084eabb5c23e561dd15549" class="color" data-tooltip="RGBA: 8, 29, 88, 1.0
   HEXA: #081d58ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_231af586423343af8db9211f320351a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 52, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_231af586423343af8db9211f320351a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_231af586423343af8db9211f320351a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_231af586423343af8db9211f320351a0" class="color" data-tooltip="RGBA: 37, 52, 148, 1.0
   HEXA: #253494ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0750dba63766423498a97fa536748322 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 94, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0750dba63766423498a97fa536748322::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0750dba63766423498a97fa536748322:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0750dba63766423498a97fa536748322" class="color" data-tooltip="RGBA: 34, 94, 168, 1.0
   HEXA: #225ea8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_414da7978c9444c79bfa1f65a67cab76 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 145, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_414da7978c9444c79bfa1f65a67cab76::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_414da7978c9444c79bfa1f65a67cab76:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_414da7978c9444c79bfa1f65a67cab76" class="color" data-tooltip="RGBA: 29, 145, 192, 1.0
   HEXA: #1d91c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3f9bb1b16fe644978596e9bd5a03321d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 182, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3f9bb1b16fe644978596e9bd5a03321d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3f9bb1b16fe644978596e9bd5a03321d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3f9bb1b16fe644978596e9bd5a03321d" class="color" data-tooltip="RGBA: 65, 182, 196, 1.0
   HEXA: #41b6c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05b03da89d1b404c970664a4c3744e3e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 205, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05b03da89d1b404c970664a4c3744e3e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05b03da89d1b404c970664a4c3744e3e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05b03da89d1b404c970664a4c3744e3e" class="color" data-tooltip="RGBA: 127, 205, 187, 1.0
   HEXA: #7fcdbbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_24f594f09da3491aad5ca5df55fdb9a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 233, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_24f594f09da3491aad5ca5df55fdb9a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_24f594f09da3491aad5ca5df55fdb9a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_24f594f09da3491aad5ca5df55fdb9a1" class="color" data-tooltip="RGBA: 199, 233, 180, 1.0
   HEXA: #c7e9b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d4277d5c99b4d66bf63231fb60875a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 248, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d4277d5c99b4d66bf63231fb60875a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d4277d5c99b4d66bf63231fb60875a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d4277d5c99b4d66bf63231fb60875a0" class="color" data-tooltip="RGBA: 237, 248, 217, 1.0
   HEXA: #edf8d9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1676fe69f5034440833e9cf543a42f39 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1676fe69f5034440833e9cf543a42f39::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1676fe69f5034440833e9cf543a42f39:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1676fe69f5034440833e9cf543a42f39" class="color" data-tooltip="RGBA: 255, 255, 217, 1.0
   HEXA: #ffffd9ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f5708eb2b5db4827bb6d81694ebf4790 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f5708eb2b5db4827bb6d81694ebf4790 div { flex: 1 1 0; }
           #_f5708eb2b5db4827bb6d81694ebf4790 div.color { width: 100%; height: 100%; }
           #_f5708eb2b5db4827bb6d81694ebf4790 div.cmap { width: 100%; height: auto; }
           #_f5708eb2b5db4827bb6d81694ebf4790 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>YlOrBr</strong>
       
       <div id="_f5708eb2b5db4827bb6d81694ebf4790" class="color-map">
           
                           <div>
                   <style>
       #_23595492cf1445cda148041a0a2139a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23595492cf1445cda148041a0a2139a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23595492cf1445cda148041a0a2139a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23595492cf1445cda148041a0a2139a2" class="color" data-tooltip="RGBA: 255, 255, 229, 1.0
   HEXA: #ffffe5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b66f77c9f0b4ef1b1748d202f746ba1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b66f77c9f0b4ef1b1748d202f746ba1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b66f77c9f0b4ef1b1748d202f746ba1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b66f77c9f0b4ef1b1748d202f746ba1" class="color" data-tooltip="RGBA: 255, 247, 188, 1.0
   HEXA: #fff7bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60ba026cf4c6409a88291a59604f589a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 227, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60ba026cf4c6409a88291a59604f589a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60ba026cf4c6409a88291a59604f589a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60ba026cf4c6409a88291a59604f589a" class="color" data-tooltip="RGBA: 254, 227, 145, 1.0
   HEXA: #fee391ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0bb4bf3143c54e2cb945585d0db934ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 196, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0bb4bf3143c54e2cb945585d0db934ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0bb4bf3143c54e2cb945585d0db934ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0bb4bf3143c54e2cb945585d0db934ff" class="color" data-tooltip="RGBA: 254, 196, 79, 1.0
   HEXA: #fec44fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15cf9e750e7442e3b9a963c100a111cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 153, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15cf9e750e7442e3b9a963c100a111cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15cf9e750e7442e3b9a963c100a111cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15cf9e750e7442e3b9a963c100a111cd" class="color" data-tooltip="RGBA: 254, 153, 41, 1.0
   HEXA: #fe9929ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b2d81d8836a64f34abf9262d3338558a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 112, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b2d81d8836a64f34abf9262d3338558a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b2d81d8836a64f34abf9262d3338558a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b2d81d8836a64f34abf9262d3338558a" class="color" data-tooltip="RGBA: 236, 112, 20, 1.0
   HEXA: #ec7014ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd730b94e8d2449bb558f763ea69a6c0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 76, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd730b94e8d2449bb558f763ea69a6c0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd730b94e8d2449bb558f763ea69a6c0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd730b94e8d2449bb558f763ea69a6c0" class="color" data-tooltip="RGBA: 204, 76, 2, 1.0
   HEXA: #cc4c02ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_52987ed051494c8296a315f58cebe683 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 52, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_52987ed051494c8296a315f58cebe683::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_52987ed051494c8296a315f58cebe683:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_52987ed051494c8296a315f58cebe683" class="color" data-tooltip="RGBA: 153, 52, 4, 1.0
   HEXA: #993404ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a251346bdbf1480f9994fa4d44c43ee2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 37, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a251346bdbf1480f9994fa4d44c43ee2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a251346bdbf1480f9994fa4d44c43ee2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a251346bdbf1480f9994fa4d44c43ee2" class="color" data-tooltip="RGBA: 102, 37, 6, 1.0
   HEXA: #662506ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_da46b42daa75489ba82718e219af7ca4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_da46b42daa75489ba82718e219af7ca4 div { flex: 1 1 0; }
           #_da46b42daa75489ba82718e219af7ca4 div.color { width: 100%; height: 100%; }
           #_da46b42daa75489ba82718e219af7ca4 div.cmap { width: 100%; height: auto; }
           #_da46b42daa75489ba82718e219af7ca4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>YlOrRd</strong>
       
       <div id="_da46b42daa75489ba82718e219af7ca4" class="color-map">
           
                           <div>
                   <style>
       #_edc9208e39eb445e84f338e65744869b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_edc9208e39eb445e84f338e65744869b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_edc9208e39eb445e84f338e65744869b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_edc9208e39eb445e84f338e65744869b" class="color" data-tooltip="RGBA: 128, 0, 38, 1.0
   HEXA: #800026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e579b36cc182490098da2891847c3827 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e579b36cc182490098da2891847c3827::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e579b36cc182490098da2891847c3827:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e579b36cc182490098da2891847c3827" class="color" data-tooltip="RGBA: 189, 0, 38, 1.0
   HEXA: #bd0026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_654e8a5a9daa44a69ef5b4a0ea6cc133 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 26, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_654e8a5a9daa44a69ef5b4a0ea6cc133::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_654e8a5a9daa44a69ef5b4a0ea6cc133:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_654e8a5a9daa44a69ef5b4a0ea6cc133" class="color" data-tooltip="RGBA: 227, 26, 28, 1.0
   HEXA: #e31a1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0128871f69ea48b0883773f781ba31eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 78, 42, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0128871f69ea48b0883773f781ba31eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0128871f69ea48b0883773f781ba31eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0128871f69ea48b0883773f781ba31eb" class="color" data-tooltip="RGBA: 252, 78, 42, 1.0
   HEXA: #fc4e2aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0b501401b9ff4ef3a0ddd1b046aa30e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 141, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0b501401b9ff4ef3a0ddd1b046aa30e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0b501401b9ff4ef3a0ddd1b046aa30e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0b501401b9ff4ef3a0ddd1b046aa30e0" class="color" data-tooltip="RGBA: 253, 141, 60, 1.0
   HEXA: #fd8d3cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6cb13295dbe84500ae5b0910f3a2b5b2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 178, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6cb13295dbe84500ae5b0910f3a2b5b2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6cb13295dbe84500ae5b0910f3a2b5b2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6cb13295dbe84500ae5b0910f3a2b5b2" class="color" data-tooltip="RGBA: 254, 178, 76, 1.0
   HEXA: #feb24cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fd23889169f54f5bba23620e2dca783d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 217, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fd23889169f54f5bba23620e2dca783d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fd23889169f54f5bba23620e2dca783d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fd23889169f54f5bba23620e2dca783d" class="color" data-tooltip="RGBA: 254, 217, 118, 1.0
   HEXA: #fed976ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d3c559d7695f4fafa05631603c5f3a8c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 237, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d3c559d7695f4fafa05631603c5f3a8c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d3c559d7695f4fafa05631603c5f3a8c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d3c559d7695f4fafa05631603c5f3a8c" class="color" data-tooltip="RGBA: 255, 237, 160, 1.0
   HEXA: #ffeda0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d128688547e041dd8445d00d8ca0b0b1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d128688547e041dd8445d00d8ca0b0b1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d128688547e041dd8445d00d8ca0b0b1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d128688547e041dd8445d00d8ca0b0b1" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a26408a73d8a4c4c897631b45c1a863f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a26408a73d8a4c4c897631b45c1a863f div { flex: 1 1 0; }
           #_a26408a73d8a4c4c897631b45c1a863f div.color { width: 100%; height: 100%; }
           #_a26408a73d8a4c4c897631b45c1a863f div.cmap { width: 100%; height: auto; }
           #_a26408a73d8a4c4c897631b45c1a863f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Burg</strong>
       
       <div id="_a26408a73d8a4c4c897631b45c1a863f" class="color-map">
           
                           <div>
                   <style>
       #_5edb3f697ba14f69a49c6f883ac06e83 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 198, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5edb3f697ba14f69a49c6f883ac06e83::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5edb3f697ba14f69a49c6f883ac06e83:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5edb3f697ba14f69a49c6f883ac06e83" class="color" data-tooltip="RGBA: 255, 198, 196, 1.0
   HEXA: #ffc6c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d77c98fe666849c78ee99a2c7748b619 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 163, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d77c98fe666849c78ee99a2c7748b619::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d77c98fe666849c78ee99a2c7748b619:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d77c98fe666849c78ee99a2c7748b619" class="color" data-tooltip="RGBA: 244, 163, 168, 1.0
   HEXA: #f4a3a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2df764f4bb004b409ee3c5b269299261 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 129, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2df764f4bb004b409ee3c5b269299261::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2df764f4bb004b409ee3c5b269299261:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2df764f4bb004b409ee3c5b269299261" class="color" data-tooltip="RGBA: 227, 129, 145, 1.0
   HEXA: #e38191ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b310a21702c243c0b81188c4a757d1aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 96, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b310a21702c243c0b81188c4a757d1aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b310a21702c243c0b81188c4a757d1aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b310a21702c243c0b81188c4a757d1aa" class="color" data-tooltip="RGBA: 204, 96, 125, 1.0
   HEXA: #cc607dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a0b9c73b12a0478e8b153b3880438c4f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 70, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a0b9c73b12a0478e8b153b3880438c4f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a0b9c73b12a0478e8b153b3880438c4f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a0b9c73b12a0478e8b153b3880438c4f" class="color" data-tooltip="RGBA: 173, 70, 108, 1.0
   HEXA: #ad466cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b5a8c9eef482435f9373880df120421e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 48, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b5a8c9eef482435f9373880df120421e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b5a8c9eef482435f9373880df120421e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b5a8c9eef482435f9373880df120421e" class="color" data-tooltip="RGBA: 139, 48, 88, 1.0
   HEXA: #8b3058ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f98f48333f43408a988dcf588264ee17 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 32, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f98f48333f43408a988dcf588264ee17::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f98f48333f43408a988dcf588264ee17:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f98f48333f43408a988dcf588264ee17" class="color" data-tooltip="RGBA: 103, 32, 68, 1.0
   HEXA: #672044ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_11aec41308d74a55973662f16a7dd59a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_11aec41308d74a55973662f16a7dd59a div { flex: 1 1 0; }
           #_11aec41308d74a55973662f16a7dd59a div.color { width: 100%; height: 100%; }
           #_11aec41308d74a55973662f16a7dd59a div.cmap { width: 100%; height: auto; }
           #_11aec41308d74a55973662f16a7dd59a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Burgyl</strong>
       
       <div id="_11aec41308d74a55973662f16a7dd59a" class="color-map">
           
                           <div>
                   <style>
       #_01443b3c154c4d2e9de5e7fe4779af1f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 230, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_01443b3c154c4d2e9de5e7fe4779af1f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_01443b3c154c4d2e9de5e7fe4779af1f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_01443b3c154c4d2e9de5e7fe4779af1f" class="color" data-tooltip="RGBA: 251, 230, 197, 1.0
   HEXA: #fbe6c5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ed17697bdf90449f9a6a0635f226751d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 186, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ed17697bdf90449f9a6a0635f226751d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ed17697bdf90449f9a6a0635f226751d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ed17697bdf90449f9a6a0635f226751d" class="color" data-tooltip="RGBA: 245, 186, 152, 1.0
   HEXA: #f5ba98ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_349dd6070d8d46d6bf7631259cf08238 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 138, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_349dd6070d8d46d6bf7631259cf08238::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_349dd6070d8d46d6bf7631259cf08238:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_349dd6070d8d46d6bf7631259cf08238" class="color" data-tooltip="RGBA: 238, 138, 130, 1.0
   HEXA: #ee8a82ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a222fea853464a3097a160bc0166e651 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 113, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a222fea853464a3097a160bc0166e651::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a222fea853464a3097a160bc0166e651:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a222fea853464a3097a160bc0166e651" class="color" data-tooltip="RGBA: 220, 113, 118, 1.0
   HEXA: #dc7176ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_14772041fd234103bdf21e6c9f8289d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 88, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_14772041fd234103bdf21e6c9f8289d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_14772041fd234103bdf21e6c9f8289d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_14772041fd234103bdf21e6c9f8289d2" class="color" data-tooltip="RGBA: 200, 88, 108, 1.0
   HEXA: #c8586cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_93f93b58ecc942fd9a0202ebf42aedb1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 63, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93f93b58ecc942fd9a0202ebf42aedb1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93f93b58ecc942fd9a0202ebf42aedb1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93f93b58ecc942fd9a0202ebf42aedb1" class="color" data-tooltip="RGBA: 156, 63, 93, 1.0
   HEXA: #9c3f5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d84fcfa176d3477d9e3982bbb9291317 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(112, 40, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d84fcfa176d3477d9e3982bbb9291317::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d84fcfa176d3477d9e3982bbb9291317:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d84fcfa176d3477d9e3982bbb9291317" class="color" data-tooltip="RGBA: 112, 40, 74, 1.0
   HEXA: #70284aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_3fd8f54aa0974736a2cf51e085aeb9ee {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_3fd8f54aa0974736a2cf51e085aeb9ee div { flex: 1 1 0; }
           #_3fd8f54aa0974736a2cf51e085aeb9ee div.color { width: 100%; height: 100%; }
           #_3fd8f54aa0974736a2cf51e085aeb9ee div.cmap { width: 100%; height: auto; }
           #_3fd8f54aa0974736a2cf51e085aeb9ee div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Redor</strong>
       
       <div id="_3fd8f54aa0974736a2cf51e085aeb9ee" class="color-map">
           
                           <div>
                   <style>
       #_872f64b7c26d4c42ba5351c10b0e34c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 210, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_872f64b7c26d4c42ba5351c10b0e34c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_872f64b7c26d4c42ba5351c10b0e34c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_872f64b7c26d4c42ba5351c10b0e34c1" class="color" data-tooltip="RGBA: 246, 210, 169, 1.0
   HEXA: #f6d2a9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b4906ee8212d4f04b194cf61dd553b8d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 183, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b4906ee8212d4f04b194cf61dd553b8d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b4906ee8212d4f04b194cf61dd553b8d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b4906ee8212d4f04b194cf61dd553b8d" class="color" data-tooltip="RGBA: 245, 183, 142, 1.0
   HEXA: #f5b78eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d53445de511c435082f713626f42132e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 156, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d53445de511c435082f713626f42132e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d53445de511c435082f713626f42132e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d53445de511c435082f713626f42132e" class="color" data-tooltip="RGBA: 241, 156, 124, 1.0
   HEXA: #f19c7cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c3a635ab17eb41a7b8d68362461a032e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 129, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c3a635ab17eb41a7b8d68362461a032e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c3a635ab17eb41a7b8d68362461a032e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c3a635ab17eb41a7b8d68362461a032e" class="color" data-tooltip="RGBA: 234, 129, 113, 1.0
   HEXA: #ea8171ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95df177a53af4204a151531c74a05ba8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 104, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95df177a53af4204a151531c74a05ba8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95df177a53af4204a151531c74a05ba8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95df177a53af4204a151531c74a05ba8" class="color" data-tooltip="RGBA: 221, 104, 108, 1.0
   HEXA: #dd686cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5dd0f723b2e3441090b07ecc9b5c2915 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 82, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5dd0f723b2e3441090b07ecc9b5c2915::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5dd0f723b2e3441090b07ecc9b5c2915:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5dd0f723b2e3441090b07ecc9b5c2915" class="color" data-tooltip="RGBA: 202, 82, 104, 1.0
   HEXA: #ca5268ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2403ab33802c471b88092e79311290df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 63, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2403ab33802c471b88092e79311290df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2403ab33802c471b88092e79311290df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2403ab33802c471b88092e79311290df" class="color" data-tooltip="RGBA: 177, 63, 100, 1.0
   HEXA: #b13f64ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_cdeed0b79a114a26949ad07ef642df6a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_cdeed0b79a114a26949ad07ef642df6a div { flex: 1 1 0; }
           #_cdeed0b79a114a26949ad07ef642df6a div.color { width: 100%; height: 100%; }
           #_cdeed0b79a114a26949ad07ef642df6a div.cmap { width: 100%; height: auto; }
           #_cdeed0b79a114a26949ad07ef642df6a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Oryel</strong>
       
       <div id="_cdeed0b79a114a26949ad07ef642df6a" class="color-map">
           
                           <div>
                   <style>
       #_db39a4920c234955b0cdb48da42941c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 218, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db39a4920c234955b0cdb48da42941c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db39a4920c234955b0cdb48da42941c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db39a4920c234955b0cdb48da42941c8" class="color" data-tooltip="RGBA: 236, 218, 154, 1.0
   HEXA: #ecda9aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44a3d50d70d54da99af8c62708a9c41a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 196, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44a3d50d70d54da99af8c62708a9c41a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44a3d50d70d54da99af8c62708a9c41a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44a3d50d70d54da99af8c62708a9c41a" class="color" data-tooltip="RGBA: 239, 196, 126, 1.0
   HEXA: #efc47eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e20980ab00c9410b95718a32e43c9056 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 173, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e20980ab00c9410b95718a32e43c9056::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e20980ab00c9410b95718a32e43c9056:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e20980ab00c9410b95718a32e43c9056" class="color" data-tooltip="RGBA: 243, 173, 106, 1.0
   HEXA: #f3ad6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_488fcb03bd204d34b962579da95d857a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 148, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_488fcb03bd204d34b962579da95d857a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_488fcb03bd204d34b962579da95d857a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_488fcb03bd204d34b962579da95d857a" class="color" data-tooltip="RGBA: 247, 148, 93, 1.0
   HEXA: #f7945dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_89f1125a29d549e5873f3661cb75e5eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 123, 87, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_89f1125a29d549e5873f3661cb75e5eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_89f1125a29d549e5873f3661cb75e5eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_89f1125a29d549e5873f3661cb75e5eb" class="color" data-tooltip="RGBA: 249, 123, 87, 1.0
   HEXA: #f97b57ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ac8c1c0f2b141b2ac51d6ad1d0a7400 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 99, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ac8c1c0f2b141b2ac51d6ad1d0a7400::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ac8c1c0f2b141b2ac51d6ad1d0a7400:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ac8c1c0f2b141b2ac51d6ad1d0a7400" class="color" data-tooltip="RGBA: 246, 99, 86, 1.0
   HEXA: #f66356ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6120ac081820483aa37b884a29e5aecb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 77, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6120ac081820483aa37b884a29e5aecb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6120ac081820483aa37b884a29e5aecb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6120ac081820483aa37b884a29e5aecb" class="color" data-tooltip="RGBA: 238, 77, 90, 1.0
   HEXA: #ee4d5aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_7ac768b597484e3fa1a64c0c01ac201c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_7ac768b597484e3fa1a64c0c01ac201c div { flex: 1 1 0; }
           #_7ac768b597484e3fa1a64c0c01ac201c div.color { width: 100%; height: 100%; }
           #_7ac768b597484e3fa1a64c0c01ac201c div.cmap { width: 100%; height: auto; }
           #_7ac768b597484e3fa1a64c0c01ac201c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Peach</strong>
       
       <div id="_7ac768b597484e3fa1a64c0c01ac201c" class="color-map">
           
                           <div>
                   <style>
       #_55f37c0cedfa41938ad6f5b59693cf7d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 224, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_55f37c0cedfa41938ad6f5b59693cf7d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_55f37c0cedfa41938ad6f5b59693cf7d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_55f37c0cedfa41938ad6f5b59693cf7d" class="color" data-tooltip="RGBA: 253, 224, 197, 1.0
   HEXA: #fde0c5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0a95d1127dbb441cad62a85d4182cb19 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 203, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0a95d1127dbb441cad62a85d4182cb19::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0a95d1127dbb441cad62a85d4182cb19:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0a95d1127dbb441cad62a85d4182cb19" class="color" data-tooltip="RGBA: 250, 203, 166, 1.0
   HEXA: #facba6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1f7abd987b6e4005900781ba228a5e67 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 181, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f7abd987b6e4005900781ba228a5e67::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f7abd987b6e4005900781ba228a5e67:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f7abd987b6e4005900781ba228a5e67" class="color" data-tooltip="RGBA: 248, 181, 139, 1.0
   HEXA: #f8b58bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e43198f3726b4ecf9515bc40c1256549 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 158, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e43198f3726b4ecf9515bc40c1256549::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e43198f3726b4ecf9515bc40c1256549:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e43198f3726b4ecf9515bc40c1256549" class="color" data-tooltip="RGBA: 245, 158, 114, 1.0
   HEXA: #f59e72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ae95346d8f844e0f94d19b37ae48b746 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 133, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ae95346d8f844e0f94d19b37ae48b746::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ae95346d8f844e0f94d19b37ae48b746:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ae95346d8f844e0f94d19b37ae48b746" class="color" data-tooltip="RGBA: 242, 133, 93, 1.0
   HEXA: #f2855dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0fa9da30d2c24dba81dfe3614ddb5faa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 106, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0fa9da30d2c24dba81dfe3614ddb5faa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0fa9da30d2c24dba81dfe3614ddb5faa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0fa9da30d2c24dba81dfe3614ddb5faa" class="color" data-tooltip="RGBA: 239, 106, 76, 1.0
   HEXA: #ef6a4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86ba0a28b02042948e876f6b27238368 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 74, 64, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86ba0a28b02042948e876f6b27238368::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86ba0a28b02042948e876f6b27238368:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86ba0a28b02042948e876f6b27238368" class="color" data-tooltip="RGBA: 235, 74, 64, 1.0
   HEXA: #eb4a40ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_fe4602d99ed5432a95d2253975ade185 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_fe4602d99ed5432a95d2253975ade185 div { flex: 1 1 0; }
           #_fe4602d99ed5432a95d2253975ade185 div.color { width: 100%; height: 100%; }
           #_fe4602d99ed5432a95d2253975ade185 div.cmap { width: 100%; height: auto; }
           #_fe4602d99ed5432a95d2253975ade185 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Pinkyl</strong>
       
       <div id="_fe4602d99ed5432a95d2253975ade185" class="color-map">
           
                           <div>
                   <style>
       #_12fedea1b8974185824a5ed77f46d872 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 246, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_12fedea1b8974185824a5ed77f46d872::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_12fedea1b8974185824a5ed77f46d872:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_12fedea1b8974185824a5ed77f46d872" class="color" data-tooltip="RGBA: 254, 246, 181, 1.0
   HEXA: #fef6b5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_87d401a002a449fab9a6015d6fbf4aad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 221, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_87d401a002a449fab9a6015d6fbf4aad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_87d401a002a449fab9a6015d6fbf4aad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_87d401a002a449fab9a6015d6fbf4aad" class="color" data-tooltip="RGBA: 255, 221, 154, 1.0
   HEXA: #ffdd9aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b5a9e16979246bcbc33dc241801c8ad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 194, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b5a9e16979246bcbc33dc241801c8ad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b5a9e16979246bcbc33dc241801c8ad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b5a9e16979246bcbc33dc241801c8ad" class="color" data-tooltip="RGBA: 255, 194, 133, 1.0
   HEXA: #ffc285ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_73876426f11241f2aeb8a216e6b6a4b1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 166, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_73876426f11241f2aeb8a216e6b6a4b1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_73876426f11241f2aeb8a216e6b6a4b1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_73876426f11241f2aeb8a216e6b6a4b1" class="color" data-tooltip="RGBA: 255, 166, 121, 1.0
   HEXA: #ffa679ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d58b3a1d967d4ad4a71ef0a8cd79dad5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 138, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d58b3a1d967d4ad4a71ef0a8cd79dad5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d58b3a1d967d4ad4a71ef0a8cd79dad5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d58b3a1d967d4ad4a71ef0a8cd79dad5" class="color" data-tooltip="RGBA: 250, 138, 118, 1.0
   HEXA: #fa8a76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e94cd6a601cc450eac234d2bafd3504b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 109, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e94cd6a601cc450eac234d2bafd3504b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e94cd6a601cc450eac234d2bafd3504b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e94cd6a601cc450eac234d2bafd3504b" class="color" data-tooltip="RGBA: 241, 109, 122, 1.0
   HEXA: #f16d7aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c20fd0ec86014536bb87e85deb1856c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 83, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c20fd0ec86014536bb87e85deb1856c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c20fd0ec86014536bb87e85deb1856c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c20fd0ec86014536bb87e85deb1856c1" class="color" data-tooltip="RGBA: 225, 83, 131, 1.0
   HEXA: #e15383ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_36fb19c7c4c540ec8675bfa9eb329913 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_36fb19c7c4c540ec8675bfa9eb329913 div { flex: 1 1 0; }
           #_36fb19c7c4c540ec8675bfa9eb329913 div.color { width: 100%; height: 100%; }
           #_36fb19c7c4c540ec8675bfa9eb329913 div.cmap { width: 100%; height: auto; }
           #_36fb19c7c4c540ec8675bfa9eb329913 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Mint</strong>
       
       <div id="_36fb19c7c4c540ec8675bfa9eb329913" class="color-map">
           
                           <div>
                   <style>
       #_3f5af46295d24781b49e575696204713 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 241, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3f5af46295d24781b49e575696204713::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3f5af46295d24781b49e575696204713:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3f5af46295d24781b49e575696204713" class="color" data-tooltip="RGBA: 228, 241, 225, 1.0
   HEXA: #e4f1e1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e6bf4f6976544eaa1a04270d2e53c9e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 217, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e6bf4f6976544eaa1a04270d2e53c9e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e6bf4f6976544eaa1a04270d2e53c9e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e6bf4f6976544eaa1a04270d2e53c9e" class="color" data-tooltip="RGBA: 180, 217, 204, 1.0
   HEXA: #b4d9ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_28eff8cdd98e4b1688563ce95df74b51 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 192, 182, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_28eff8cdd98e4b1688563ce95df74b51::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_28eff8cdd98e4b1688563ce95df74b51:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_28eff8cdd98e4b1688563ce95df74b51" class="color" data-tooltip="RGBA: 137, 192, 182, 1.0
   HEXA: #89c0b6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba305468fafd477fbe46f058bea75e20 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 166, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba305468fafd477fbe46f058bea75e20::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba305468fafd477fbe46f058bea75e20:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba305468fafd477fbe46f058bea75e20" class="color" data-tooltip="RGBA: 99, 166, 160, 1.0
   HEXA: #63a6a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_10c6ade062064e9ebc4576ae727e5cac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 140, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_10c6ade062064e9ebc4576ae727e5cac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_10c6ade062064e9ebc4576ae727e5cac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_10c6ade062064e9ebc4576ae727e5cac" class="color" data-tooltip="RGBA: 68, 140, 138, 1.0
   HEXA: #448c8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2d17fc2a50f243d586972c7fdecb3407 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 114, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2d17fc2a50f243d586972c7fdecb3407::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2d17fc2a50f243d586972c7fdecb3407:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2d17fc2a50f243d586972c7fdecb3407" class="color" data-tooltip="RGBA: 40, 114, 116, 1.0
   HEXA: #287274ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b28ba664a6f04b63b740a35111bedd9a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 88, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b28ba664a6f04b63b740a35111bedd9a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b28ba664a6f04b63b740a35111bedd9a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b28ba664a6f04b63b740a35111bedd9a" class="color" data-tooltip="RGBA: 13, 88, 95, 1.0
   HEXA: #0d585fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4659e616bee24ac6b5d1e365c32c1f94 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4659e616bee24ac6b5d1e365c32c1f94 div { flex: 1 1 0; }
           #_4659e616bee24ac6b5d1e365c32c1f94 div.color { width: 100%; height: 100%; }
           #_4659e616bee24ac6b5d1e365c32c1f94 div.cmap { width: 100%; height: auto; }
           #_4659e616bee24ac6b5d1e365c32c1f94 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Blugrn</strong>
       
       <div id="_4659e616bee24ac6b5d1e365c32c1f94" class="color-map">
           
                           <div>
                   <style>
       #_742bb406fac1453a8d83de5180e0452a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 230, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_742bb406fac1453a8d83de5180e0452a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_742bb406fac1453a8d83de5180e0452a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_742bb406fac1453a8d83de5180e0452a" class="color" data-tooltip="RGBA: 196, 230, 195, 1.0
   HEXA: #c4e6c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8326016df3ab457b8dd2fa2ce6edbea3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 210, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8326016df3ab457b8dd2fa2ce6edbea3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8326016df3ab457b8dd2fa2ce6edbea3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8326016df3ab457b8dd2fa2ce6edbea3" class="color" data-tooltip="RGBA: 150, 210, 164, 1.0
   HEXA: #96d2a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_512fb58099ba4eba8a22acb4a141e610 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 188, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_512fb58099ba4eba8a22acb4a141e610::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_512fb58099ba4eba8a22acb4a141e610:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_512fb58099ba4eba8a22acb4a141e610" class="color" data-tooltip="RGBA: 109, 188, 144, 1.0
   HEXA: #6dbc90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2486bdb89d5a45c0a4a1f5503f2dd672 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 162, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2486bdb89d5a45c0a4a1f5503f2dd672::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2486bdb89d5a45c0a4a1f5503f2dd672:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2486bdb89d5a45c0a4a1f5503f2dd672" class="color" data-tooltip="RGBA: 77, 162, 132, 1.0
   HEXA: #4da284ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd8b39abcea942229df31ca66d973346 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 135, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd8b39abcea942229df31ca66d973346::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd8b39abcea942229df31ca66d973346:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd8b39abcea942229df31ca66d973346" class="color" data-tooltip="RGBA: 54, 135, 122, 1.0
   HEXA: #36877aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_683b2f74b94447c2a4c1d2ba5a4c4836 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 107, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_683b2f74b94447c2a4c1d2ba5a4c4836::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_683b2f74b94447c2a4c1d2ba5a4c4836:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_683b2f74b94447c2a4c1d2ba5a4c4836" class="color" data-tooltip="RGBA: 38, 107, 110, 1.0
   HEXA: #266b6eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_84beba62643c4317b9b4c774dc9e0f69 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 79, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_84beba62643c4317b9b4c774dc9e0f69::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_84beba62643c4317b9b4c774dc9e0f69:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_84beba62643c4317b9b4c774dc9e0f69" class="color" data-tooltip="RGBA: 29, 79, 96, 1.0
   HEXA: #1d4f60ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ad165b939c4340559f400f30532d058d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ad165b939c4340559f400f30532d058d div { flex: 1 1 0; }
           #_ad165b939c4340559f400f30532d058d div.color { width: 100%; height: 100%; }
           #_ad165b939c4340559f400f30532d058d div.cmap { width: 100%; height: auto; }
           #_ad165b939c4340559f400f30532d058d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Darkmint</strong>
       
       <div id="_ad165b939c4340559f400f30532d058d" class="color-map">
           
                           <div>
                   <style>
       #_59f9366b1e3e4afbbba7f92534fb3de0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 251, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59f9366b1e3e4afbbba7f92534fb3de0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59f9366b1e3e4afbbba7f92534fb3de0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59f9366b1e3e4afbbba7f92534fb3de0" class="color" data-tooltip="RGBA: 210, 251, 212, 1.0
   HEXA: #d2fbd4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf9045c82f164b19a82966c8ef895cfa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 219, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf9045c82f164b19a82966c8ef895cfa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf9045c82f164b19a82966c8ef895cfa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf9045c82f164b19a82966c8ef895cfa" class="color" data-tooltip="RGBA: 165, 219, 194, 1.0
   HEXA: #a5dbc2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_296b05b0016544039c8e1b5ad0f79c45 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 188, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_296b05b0016544039c8e1b5ad0f79c45::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_296b05b0016544039c8e1b5ad0f79c45:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_296b05b0016544039c8e1b5ad0f79c45" class="color" data-tooltip="RGBA: 123, 188, 176, 1.0
   HEXA: #7bbcb0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_da2d2414296e44dcac420fe00039b094 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(85, 156, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_da2d2414296e44dcac420fe00039b094::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_da2d2414296e44dcac420fe00039b094:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_da2d2414296e44dcac420fe00039b094" class="color" data-tooltip="RGBA: 85, 156, 158, 1.0
   HEXA: #559c9eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5e9fcf837e9f42c19a2824fc4c4a8073 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 124, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5e9fcf837e9f42c19a2824fc4c4a8073::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5e9fcf837e9f42c19a2824fc4c4a8073:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5e9fcf837e9f42c19a2824fc4c4a8073" class="color" data-tooltip="RGBA: 58, 124, 137, 1.0
   HEXA: #3a7c89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f0fe4a3d2864b70801dd0ca7d216163 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 93, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f0fe4a3d2864b70801dd0ca7d216163::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f0fe4a3d2864b70801dd0ca7d216163:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f0fe4a3d2864b70801dd0ca7d216163" class="color" data-tooltip="RGBA: 35, 93, 114, 1.0
   HEXA: #235d72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_850bc9cc235048388745d81b9e438b59 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 63, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_850bc9cc235048388745d81b9e438b59::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_850bc9cc235048388745d81b9e438b59:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_850bc9cc235048388745d81b9e438b59" class="color" data-tooltip="RGBA: 18, 63, 90, 1.0
   HEXA: #123f5aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b2e064ca0df1481fb34369dc014962d0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b2e064ca0df1481fb34369dc014962d0 div { flex: 1 1 0; }
           #_b2e064ca0df1481fb34369dc014962d0 div.color { width: 100%; height: 100%; }
           #_b2e064ca0df1481fb34369dc014962d0 div.cmap { width: 100%; height: auto; }
           #_b2e064ca0df1481fb34369dc014962d0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Emrld</strong>
       
       <div id="_b2e064ca0df1481fb34369dc014962d0" class="color-map">
           
                           <div>
                   <style>
       #_f8d70d3d4822492e9a751ce3d47bbea3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 242, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f8d70d3d4822492e9a751ce3d47bbea3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f8d70d3d4822492e9a751ce3d47bbea3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f8d70d3d4822492e9a751ce3d47bbea3" class="color" data-tooltip="RGBA: 211, 242, 163, 1.0
   HEXA: #d3f2a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0527ace7615942c59ff9bc77537abe33 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 225, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0527ace7615942c59ff9bc77537abe33::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0527ace7615942c59ff9bc77537abe33:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0527ace7615942c59ff9bc77537abe33" class="color" data-tooltip="RGBA: 151, 225, 150, 1.0
   HEXA: #97e196ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5115957fb614a72bab92cb7a0c3a88f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 192, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5115957fb614a72bab92cb7a0c3a88f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5115957fb614a72bab92cb7a0c3a88f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5115957fb614a72bab92cb7a0c3a88f" class="color" data-tooltip="RGBA: 108, 192, 139, 1.0
   HEXA: #6cc08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_32f6de13dedb407baf278a92999ac905 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 155, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_32f6de13dedb407baf278a92999ac905::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_32f6de13dedb407baf278a92999ac905:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_32f6de13dedb407baf278a92999ac905" class="color" data-tooltip="RGBA: 76, 155, 130, 1.0
   HEXA: #4c9b82ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5434b2a10a044a53a6c07537783ee7af { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 122, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5434b2a10a044a53a6c07537783ee7af::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5434b2a10a044a53a6c07537783ee7af:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5434b2a10a044a53a6c07537783ee7af" class="color" data-tooltip="RGBA: 33, 122, 121, 1.0
   HEXA: #217a79ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_89cab426bbcf453b8a0bc178e136aefa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 89, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_89cab426bbcf453b8a0bc178e136aefa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_89cab426bbcf453b8a0bc178e136aefa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_89cab426bbcf453b8a0bc178e136aefa" class="color" data-tooltip="RGBA: 16, 89, 101, 1.0
   HEXA: #105965ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_447b6a35b4c74ebb850bfad6440dfed1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 64, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_447b6a35b4c74ebb850bfad6440dfed1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_447b6a35b4c74ebb850bfad6440dfed1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_447b6a35b4c74ebb850bfad6440dfed1" class="color" data-tooltip="RGBA: 7, 64, 80, 1.0
   HEXA: #074050ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d32629c9da714e6e9fce9df0e5867dea {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d32629c9da714e6e9fce9df0e5867dea div { flex: 1 1 0; }
           #_d32629c9da714e6e9fce9df0e5867dea div.color { width: 100%; height: 100%; }
           #_d32629c9da714e6e9fce9df0e5867dea div.cmap { width: 100%; height: auto; }
           #_d32629c9da714e6e9fce9df0e5867dea div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Aggrnyl</strong>
       
       <div id="_d32629c9da714e6e9fce9df0e5867dea" class="color-map">
           
                           <div>
                   <style>
       #_9183988f3258451dae092bef052bff17 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 86, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9183988f3258451dae092bef052bff17::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9183988f3258451dae092bef052bff17:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9183988f3258451dae092bef052bff17" class="color" data-tooltip="RGBA: 36, 86, 104, 1.0
   HEXA: #245668ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6bbe32d4cfc9452d9529e7c88d886a2c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 114, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6bbe32d4cfc9452d9529e7c88d886a2c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6bbe32d4cfc9452d9529e7c88d886a2c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6bbe32d4cfc9452d9529e7c88d886a2c" class="color" data-tooltip="RGBA: 15, 114, 121, 1.0
   HEXA: #0f7279ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf135c002d904b3fbfcad38ab773abd3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 143, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf135c002d904b3fbfcad38ab773abd3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf135c002d904b3fbfcad38ab773abd3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf135c002d904b3fbfcad38ab773abd3" class="color" data-tooltip="RGBA: 13, 143, 129, 1.0
   HEXA: #0d8f81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95cfded959e64f6d813be1e776c69ef2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 171, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95cfded959e64f6d813be1e776c69ef2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95cfded959e64f6d813be1e776c69ef2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95cfded959e64f6d813be1e776c69ef2" class="color" data-tooltip="RGBA: 57, 171, 126, 1.0
   HEXA: #39ab7eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_abd052455cf740cc8733e850bc8c1076 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 197, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_abd052455cf740cc8733e850bc8c1076::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_abd052455cf740cc8733e850bc8c1076:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_abd052455cf740cc8733e850bc8c1076" class="color" data-tooltip="RGBA: 110, 197, 116, 1.0
   HEXA: #6ec574ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b8d7aa0be0554c2784075955e8acf134 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(169, 220, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b8d7aa0be0554c2784075955e8acf134::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b8d7aa0be0554c2784075955e8acf134:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b8d7aa0be0554c2784075955e8acf134" class="color" data-tooltip="RGBA: 169, 220, 103, 1.0
   HEXA: #a9dc67ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_35ae3d508c534de7aef78e9a462e86af { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 239, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_35ae3d508c534de7aef78e9a462e86af::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_35ae3d508c534de7aef78e9a462e86af:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_35ae3d508c534de7aef78e9a462e86af" class="color" data-tooltip="RGBA: 237, 239, 93, 1.0
   HEXA: #edef5dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a73ceffff75c41d8bd5278b2eb7699f6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a73ceffff75c41d8bd5278b2eb7699f6 div { flex: 1 1 0; }
           #_a73ceffff75c41d8bd5278b2eb7699f6 div.color { width: 100%; height: 100%; }
           #_a73ceffff75c41d8bd5278b2eb7699f6 div.cmap { width: 100%; height: auto; }
           #_a73ceffff75c41d8bd5278b2eb7699f6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Bluyl</strong>
       
       <div id="_a73ceffff75c41d8bd5278b2eb7699f6" class="color-map">
           
                           <div>
                   <style>
       #_74c061c2396f4287aa351e8e236d7cef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 254, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_74c061c2396f4287aa351e8e236d7cef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_74c061c2396f4287aa351e8e236d7cef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_74c061c2396f4287aa351e8e236d7cef" class="color" data-tooltip="RGBA: 247, 254, 174, 1.0
   HEXA: #f7feaeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc971959a9694793806e001730edfba6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(183, 230, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc971959a9694793806e001730edfba6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc971959a9694793806e001730edfba6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc971959a9694793806e001730edfba6" class="color" data-tooltip="RGBA: 183, 230, 165, 1.0
   HEXA: #b7e6a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_edacb67baf9140ada247abc9a0d9ff9d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 203, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_edacb67baf9140ada247abc9a0d9ff9d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_edacb67baf9140ada247abc9a0d9ff9d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_edacb67baf9140ada247abc9a0d9ff9d" class="color" data-tooltip="RGBA: 124, 203, 162, 1.0
   HEXA: #7ccba2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_38b3e033d4cc4885bacde90ea3a38063 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 174, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38b3e033d4cc4885bacde90ea3a38063::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38b3e033d4cc4885bacde90ea3a38063:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38b3e033d4cc4885bacde90ea3a38063" class="color" data-tooltip="RGBA: 70, 174, 160, 1.0
   HEXA: #46aea0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be7a6a712aec407a871aef8912f751c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 144, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be7a6a712aec407a871aef8912f751c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be7a6a712aec407a871aef8912f751c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be7a6a712aec407a871aef8912f751c1" class="color" data-tooltip="RGBA: 8, 144, 153, 1.0
   HEXA: #089099ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57bcd0915e9c43f7bd24f86fc4a50e40 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 113, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57bcd0915e9c43f7bd24f86fc4a50e40::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57bcd0915e9c43f7bd24f86fc4a50e40:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57bcd0915e9c43f7bd24f86fc4a50e40" class="color" data-tooltip="RGBA: 0, 113, 139, 1.0
   HEXA: #00718bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_28b0b03eaaba42e0924895c22159310a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 82, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_28b0b03eaaba42e0924895c22159310a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_28b0b03eaaba42e0924895c22159310a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_28b0b03eaaba42e0924895c22159310a" class="color" data-tooltip="RGBA: 4, 82, 117, 1.0
   HEXA: #045275ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_16a6eb535d8d46f5841a975bd2501ff0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_16a6eb535d8d46f5841a975bd2501ff0 div { flex: 1 1 0; }
           #_16a6eb535d8d46f5841a975bd2501ff0 div.color { width: 100%; height: 100%; }
           #_16a6eb535d8d46f5841a975bd2501ff0 div.cmap { width: 100%; height: auto; }
           #_16a6eb535d8d46f5841a975bd2501ff0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Teal</strong>
       
       <div id="_16a6eb535d8d46f5841a975bd2501ff0" class="color-map">
           
                           <div>
                   <style>
       #_61697cdf51a34243947614c9784fea64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 238, 234, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61697cdf51a34243947614c9784fea64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61697cdf51a34243947614c9784fea64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61697cdf51a34243947614c9784fea64" class="color" data-tooltip="RGBA: 209, 238, 234, 1.0
   HEXA: #d1eeeaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_28c2c6a1925f4d01af211dc662bb37ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 219, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_28c2c6a1925f4d01af211dc662bb37ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_28c2c6a1925f4d01af211dc662bb37ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_28c2c6a1925f4d01af211dc662bb37ac" class="color" data-tooltip="RGBA: 168, 219, 217, 1.0
   HEXA: #a8dbd9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b21e3f4fa133456abec02ba3b48867d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 196, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b21e3f4fa133456abec02ba3b48867d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b21e3f4fa133456abec02ba3b48867d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b21e3f4fa133456abec02ba3b48867d3" class="color" data-tooltip="RGBA: 133, 196, 201, 1.0
   HEXA: #85c4c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a5207f13003f49a9a74e4c4907c7f57e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 171, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a5207f13003f49a9a74e4c4907c7f57e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a5207f13003f49a9a74e4c4907c7f57e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a5207f13003f49a9a74e4c4907c7f57e" class="color" data-tooltip="RGBA: 104, 171, 184, 1.0
   HEXA: #68abb8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eaefbd6aba5c4aa3ac971fa631660ff9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(79, 144, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eaefbd6aba5c4aa3ac971fa631660ff9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eaefbd6aba5c4aa3ac971fa631660ff9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eaefbd6aba5c4aa3ac971fa631660ff9" class="color" data-tooltip="RGBA: 79, 144, 166, 1.0
   HEXA: #4f90a6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7eb3c344ab794acd89689327f5963042 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 115, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7eb3c344ab794acd89689327f5963042::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7eb3c344ab794acd89689327f5963042:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7eb3c344ab794acd89689327f5963042" class="color" data-tooltip="RGBA: 59, 115, 143, 1.0
   HEXA: #3b738fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_379146ffaa3142c6a8a48d7601733bc2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 86, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_379146ffaa3142c6a8a48d7601733bc2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_379146ffaa3142c6a8a48d7601733bc2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_379146ffaa3142c6a8a48d7601733bc2" class="color" data-tooltip="RGBA: 42, 86, 116, 1.0
   HEXA: #2a5674ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_50055d2d6d9b42cd8ec0b6cc19f0f473 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_50055d2d6d9b42cd8ec0b6cc19f0f473 div { flex: 1 1 0; }
           #_50055d2d6d9b42cd8ec0b6cc19f0f473 div.color { width: 100%; height: 100%; }
           #_50055d2d6d9b42cd8ec0b6cc19f0f473 div.cmap { width: 100%; height: auto; }
           #_50055d2d6d9b42cd8ec0b6cc19f0f473 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Tealgrn</strong>
       
       <div id="_50055d2d6d9b42cd8ec0b6cc19f0f473" class="color-map">
           
                           <div>
                   <style>
       #_47d715a966de4fd3bdb0573577634269 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(176, 242, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_47d715a966de4fd3bdb0573577634269::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_47d715a966de4fd3bdb0573577634269:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_47d715a966de4fd3bdb0573577634269" class="color" data-tooltip="RGBA: 176, 242, 188, 1.0
   HEXA: #b0f2bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66da7d395ce14c549b9f816124be8efe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 232, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66da7d395ce14c549b9f816124be8efe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66da7d395ce14c549b9f816124be8efe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66da7d395ce14c549b9f816124be8efe" class="color" data-tooltip="RGBA: 137, 232, 172, 1.0
   HEXA: #89e8acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c6fce9de0da4431bdddf45498078439 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 219, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c6fce9de0da4431bdddf45498078439::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c6fce9de0da4431bdddf45498078439:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c6fce9de0da4431bdddf45498078439" class="color" data-tooltip="RGBA: 103, 219, 165, 1.0
   HEXA: #67dba5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5fca15e0f1b348db811ae3ffa885980b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 200, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5fca15e0f1b348db811ae3ffa885980b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5fca15e0f1b348db811ae3ffa885980b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5fca15e0f1b348db811ae3ffa885980b" class="color" data-tooltip="RGBA: 76, 200, 163, 1.0
   HEXA: #4cc8a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c8b90cff595b443e8723174da0770b23 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 178, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c8b90cff595b443e8723174da0770b23::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c8b90cff595b443e8723174da0770b23:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c8b90cff595b443e8723174da0770b23" class="color" data-tooltip="RGBA: 56, 178, 163, 1.0
   HEXA: #38b2a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_799b79d21993445b9a8be118d6d7e7b0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 152, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_799b79d21993445b9a8be118d6d7e7b0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_799b79d21993445b9a8be118d6d7e7b0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_799b79d21993445b9a8be118d6d7e7b0" class="color" data-tooltip="RGBA: 44, 152, 160, 1.0
   HEXA: #2c98a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d4408369735c4cbe81d10eda5fc279bb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 125, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d4408369735c4cbe81d10eda5fc279bb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d4408369735c4cbe81d10eda5fc279bb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d4408369735c4cbe81d10eda5fc279bb" class="color" data-tooltip="RGBA: 37, 125, 152, 1.0
   HEXA: #257d98ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_e901f20613e6433fba311b2e8775061c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_e901f20613e6433fba311b2e8775061c div { flex: 1 1 0; }
           #_e901f20613e6433fba311b2e8775061c div.color { width: 100%; height: 100%; }
           #_e901f20613e6433fba311b2e8775061c div.cmap { width: 100%; height: auto; }
           #_e901f20613e6433fba311b2e8775061c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Purp</strong>
       
       <div id="_e901f20613e6433fba311b2e8775061c" class="color-map">
           
                           <div>
                   <style>
       #_73d94c89995c4e769a33e9d3dfda22ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 224, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_73d94c89995c4e769a33e9d3dfda22ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_73d94c89995c4e769a33e9d3dfda22ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_73d94c89995c4e769a33e9d3dfda22ca" class="color" data-tooltip="RGBA: 243, 224, 247, 1.0
   HEXA: #f3e0f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64eecb96031942a7a624eb38d0570461 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 199, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64eecb96031942a7a624eb38d0570461::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64eecb96031942a7a624eb38d0570461:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64eecb96031942a7a624eb38d0570461" class="color" data-tooltip="RGBA: 228, 199, 241, 1.0
   HEXA: #e4c7f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e87f1f5a1944d81b043747d36820deb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 175, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e87f1f5a1944d81b043747d36820deb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e87f1f5a1944d81b043747d36820deb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e87f1f5a1944d81b043747d36820deb" class="color" data-tooltip="RGBA: 209, 175, 232, 1.0
   HEXA: #d1afe8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_af4ce80b624047e79d8c306e55167c86 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 152, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_af4ce80b624047e79d8c306e55167c86::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_af4ce80b624047e79d8c306e55167c86:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_af4ce80b624047e79d8c306e55167c86" class="color" data-tooltip="RGBA: 185, 152, 221, 1.0
   HEXA: #b998ddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1971332a95f2499bacbd2e8f56dc5496 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(159, 130, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1971332a95f2499bacbd2e8f56dc5496::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1971332a95f2499bacbd2e8f56dc5496:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1971332a95f2499bacbd2e8f56dc5496" class="color" data-tooltip="RGBA: 159, 130, 206, 1.0
   HEXA: #9f82ceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_18757894186449588085f979ecda67c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 109, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_18757894186449588085f979ecda67c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_18757894186449588085f979ecda67c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_18757894186449588085f979ecda67c6" class="color" data-tooltip="RGBA: 130, 109, 186, 1.0
   HEXA: #826dbaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3efe075efcd049dca8bdd27e241dbd6b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 88, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3efe075efcd049dca8bdd27e241dbd6b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3efe075efcd049dca8bdd27e241dbd6b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3efe075efcd049dca8bdd27e241dbd6b" class="color" data-tooltip="RGBA: 99, 88, 159, 1.0
   HEXA: #63589fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1d7b1ff6065444a0b35eb8a79f37f1cf {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1d7b1ff6065444a0b35eb8a79f37f1cf div { flex: 1 1 0; }
           #_1d7b1ff6065444a0b35eb8a79f37f1cf div.color { width: 100%; height: 100%; }
           #_1d7b1ff6065444a0b35eb8a79f37f1cf div.cmap { width: 100%; height: auto; }
           #_1d7b1ff6065444a0b35eb8a79f37f1cf div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Purpor</strong>
       
       <div id="_1d7b1ff6065444a0b35eb8a79f37f1cf" class="color-map">
           
                           <div>
                   <style>
       #_7fae5fc34ddc4c0299ef40cf1b5f8bb8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 221, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7fae5fc34ddc4c0299ef40cf1b5f8bb8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7fae5fc34ddc4c0299ef40cf1b5f8bb8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7fae5fc34ddc4c0299ef40cf1b5f8bb8" class="color" data-tooltip="RGBA: 249, 221, 218, 1.0
   HEXA: #f9dddaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_29691757face4c6bb775b16fdd771edd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 185, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_29691757face4c6bb775b16fdd771edd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_29691757face4c6bb775b16fdd771edd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_29691757face4c6bb775b16fdd771edd" class="color" data-tooltip="RGBA: 242, 185, 196, 1.0
   HEXA: #f2b9c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_39c9b41d296e43d091a46d383b5d0516 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 151, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_39c9b41d296e43d091a46d383b5d0516::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_39c9b41d296e43d091a46d383b5d0516:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_39c9b41d296e43d091a46d383b5d0516" class="color" data-tooltip="RGBA: 229, 151, 185, 1.0
   HEXA: #e597b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2ba02629e71431cb5a0f970ba912412 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 120, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2ba02629e71431cb5a0f970ba912412::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2ba02629e71431cb5a0f970ba912412:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2ba02629e71431cb5a0f970ba912412" class="color" data-tooltip="RGBA: 206, 120, 179, 1.0
   HEXA: #ce78b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac456d4dbbd84e31b9b8523b597ece93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 95, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac456d4dbbd84e31b9b8523b597ece93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac456d4dbbd84e31b9b8523b597ece93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac456d4dbbd84e31b9b8523b597ece93" class="color" data-tooltip="RGBA: 173, 95, 173, 1.0
   HEXA: #ad5fadff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95d28d9b360e4b9a99bb1a6c76cccd29 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 75, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95d28d9b360e4b9a99bb1a6c76cccd29::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95d28d9b360e4b9a99bb1a6c76cccd29:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95d28d9b360e4b9a99bb1a6c76cccd29" class="color" data-tooltip="RGBA: 131, 75, 160, 1.0
   HEXA: #834ba0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6ae6f66e5168429192ee5cc514ae34df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 59, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ae6f66e5168429192ee5cc514ae34df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ae6f66e5168429192ee5cc514ae34df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ae6f66e5168429192ee5cc514ae34df" class="color" data-tooltip="RGBA: 87, 59, 136, 1.0
   HEXA: #573b88ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b2af52e4a06a44a7b3f1a9d22f439fc0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b2af52e4a06a44a7b3f1a9d22f439fc0 div { flex: 1 1 0; }
           #_b2af52e4a06a44a7b3f1a9d22f439fc0 div.color { width: 100%; height: 100%; }
           #_b2af52e4a06a44a7b3f1a9d22f439fc0 div.cmap { width: 100%; height: auto; }
           #_b2af52e4a06a44a7b3f1a9d22f439fc0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Sunset</strong>
       
       <div id="_b2af52e4a06a44a7b3f1a9d22f439fc0" class="color-map">
           
                           <div>
                   <style>
       #_34e031e8458c4986bb8c3f168970031d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 231, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34e031e8458c4986bb8c3f168970031d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34e031e8458c4986bb8c3f168970031d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34e031e8458c4986bb8c3f168970031d" class="color" data-tooltip="RGBA: 243, 231, 155, 1.0
   HEXA: #f3e79bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b40bd3e0469044ef8d50b73c70d8d682 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 196, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b40bd3e0469044ef8d50b73c70d8d682::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b40bd3e0469044ef8d50b73c70d8d682:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b40bd3e0469044ef8d50b73c70d8d682" class="color" data-tooltip="RGBA: 250, 196, 132, 1.0
   HEXA: #fac484ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b020036c384548deb8b1d8cdf25f1c7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 160, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b020036c384548deb8b1d8cdf25f1c7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b020036c384548deb8b1d8cdf25f1c7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b020036c384548deb8b1d8cdf25f1c7b" class="color" data-tooltip="RGBA: 248, 160, 126, 1.0
   HEXA: #f8a07eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b54fb8afae8c45e2a89d1f0b9b3352e9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 127, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b54fb8afae8c45e2a89d1f0b9b3352e9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b54fb8afae8c45e2a89d1f0b9b3352e9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b54fb8afae8c45e2a89d1f0b9b3352e9" class="color" data-tooltip="RGBA: 235, 127, 134, 1.0
   HEXA: #eb7f86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c871242865c4f8d8965051caacf5c97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 102, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c871242865c4f8d8965051caacf5c97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c871242865c4f8d8965051caacf5c97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c871242865c4f8d8965051caacf5c97" class="color" data-tooltip="RGBA: 206, 102, 147, 1.0
   HEXA: #ce6693ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4f2f18a47f814cb0b7fe7522970ca59a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 89, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4f2f18a47f814cb0b7fe7522970ca59a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4f2f18a47f814cb0b7fe7522970ca59a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4f2f18a47f814cb0b7fe7522970ca59a" class="color" data-tooltip="RGBA: 160, 89, 160, 1.0
   HEXA: #a059a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fe72c807526048fc87a410306b592c4e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(92, 83, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe72c807526048fc87a410306b592c4e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe72c807526048fc87a410306b592c4e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe72c807526048fc87a410306b592c4e" class="color" data-tooltip="RGBA: 92, 83, 165, 1.0
   HEXA: #5c53a5ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4667ead8cc7e4de8bb63553c25c8ace6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4667ead8cc7e4de8bb63553c25c8ace6 div { flex: 1 1 0; }
           #_4667ead8cc7e4de8bb63553c25c8ace6 div.color { width: 100%; height: 100%; }
           #_4667ead8cc7e4de8bb63553c25c8ace6 div.cmap { width: 100%; height: auto; }
           #_4667ead8cc7e4de8bb63553c25c8ace6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Magenta</strong>
       
       <div id="_4667ead8cc7e4de8bb63553c25c8ace6" class="color-map">
           
                           <div>
                   <style>
       #_06017c844b7a430889bbbb627489ea22 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 203, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_06017c844b7a430889bbbb627489ea22::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_06017c844b7a430889bbbb627489ea22:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_06017c844b7a430889bbbb627489ea22" class="color" data-tooltip="RGBA: 243, 203, 211, 1.0
   HEXA: #f3cbd3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9775494aa07c416486480ccbeaeb1338 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 169, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9775494aa07c416486480ccbeaeb1338::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9775494aa07c416486480ccbeaeb1338:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9775494aa07c416486480ccbeaeb1338" class="color" data-tooltip="RGBA: 234, 169, 189, 1.0
   HEXA: #eaa9bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_040da545996c41499092489509073490 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 136, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_040da545996c41499092489509073490::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_040da545996c41499092489509073490:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_040da545996c41499092489509073490" class="color" data-tooltip="RGBA: 221, 136, 172, 1.0
   HEXA: #dd88acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_895964f61990461c92e3697fd9c7dc83 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 105, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_895964f61990461c92e3697fd9c7dc83::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_895964f61990461c92e3697fd9c7dc83:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_895964f61990461c92e3697fd9c7dc83" class="color" data-tooltip="RGBA: 202, 105, 157, 1.0
   HEXA: #ca699dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d3ff5e65a605464b812ec50b961c7e5f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 77, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d3ff5e65a605464b812ec50b961c7e5f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d3ff5e65a605464b812ec50b961c7e5f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d3ff5e65a605464b812ec50b961c7e5f" class="color" data-tooltip="RGBA: 177, 77, 142, 1.0
   HEXA: #b14d8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_59841145236e40fd808161bc97f97be0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(145, 53, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59841145236e40fd808161bc97f97be0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59841145236e40fd808161bc97f97be0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59841145236e40fd808161bc97f97be0" class="color" data-tooltip="RGBA: 145, 53, 125, 1.0
   HEXA: #91357dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80e391cd579840a58b38efd085bc7fa4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 33, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80e391cd579840a58b38efd085bc7fa4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80e391cd579840a58b38efd085bc7fa4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80e391cd579840a58b38efd085bc7fa4" class="color" data-tooltip="RGBA: 108, 33, 103, 1.0
   HEXA: #6c2167ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f7a67a28dfbc4db19bb427dc6b43ea1e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f7a67a28dfbc4db19bb427dc6b43ea1e div { flex: 1 1 0; }
           #_f7a67a28dfbc4db19bb427dc6b43ea1e div.color { width: 100%; height: 100%; }
           #_f7a67a28dfbc4db19bb427dc6b43ea1e div.cmap { width: 100%; height: auto; }
           #_f7a67a28dfbc4db19bb427dc6b43ea1e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Sunsetdark</strong>
       
       <div id="_f7a67a28dfbc4db19bb427dc6b43ea1e" class="color-map">
           
                           <div>
                   <style>
       #_427ef87a72b644efb2dfb23571697ffe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 222, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_427ef87a72b644efb2dfb23571697ffe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_427ef87a72b644efb2dfb23571697ffe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_427ef87a72b644efb2dfb23571697ffe" class="color" data-tooltip="RGBA: 252, 222, 156, 1.0
   HEXA: #fcde9cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8f0a83dbec7c45919838cb20fa14851d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 164, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8f0a83dbec7c45919838cb20fa14851d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8f0a83dbec7c45919838cb20fa14851d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8f0a83dbec7c45919838cb20fa14851d" class="color" data-tooltip="RGBA: 250, 164, 118, 1.0
   HEXA: #faa476ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2461aacd17744ccbba7b7d59360299d0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 116, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2461aacd17744ccbba7b7d59360299d0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2461aacd17744ccbba7b7d59360299d0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2461aacd17744ccbba7b7d59360299d0" class="color" data-tooltip="RGBA: 240, 116, 110, 1.0
   HEXA: #f0746eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1cf7ae4d20cd4756a404e502626fa5be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 79, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1cf7ae4d20cd4756a404e502626fa5be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1cf7ae4d20cd4756a404e502626fa5be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1cf7ae4d20cd4756a404e502626fa5be" class="color" data-tooltip="RGBA: 227, 79, 111, 1.0
   HEXA: #e34f6fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2cab4284815a4cbf826a7c2bc1622946 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 57, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2cab4284815a4cbf826a7c2bc1622946::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2cab4284815a4cbf826a7c2bc1622946:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2cab4284815a4cbf826a7c2bc1622946" class="color" data-tooltip="RGBA: 220, 57, 119, 1.0
   HEXA: #dc3977ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7376cd988a3949839f6e730d121b6691 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 37, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7376cd988a3949839f6e730d121b6691::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7376cd988a3949839f6e730d121b6691:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7376cd988a3949839f6e730d121b6691" class="color" data-tooltip="RGBA: 185, 37, 122, 1.0
   HEXA: #b9257aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0b24e7269dbb405b9433abd5042929f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 29, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0b24e7269dbb405b9433abd5042929f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0b24e7269dbb405b9433abd5042929f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0b24e7269dbb405b9433abd5042929f5" class="color" data-tooltip="RGBA: 124, 29, 111, 1.0
   HEXA: #7c1d6fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f780155bb76546f9a0240129c504ff4f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f780155bb76546f9a0240129c504ff4f div { flex: 1 1 0; }
           #_f780155bb76546f9a0240129c504ff4f div.color { width: 100%; height: 100%; }
           #_f780155bb76546f9a0240129c504ff4f div.cmap { width: 100%; height: auto; }
           #_f780155bb76546f9a0240129c504ff4f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Agsunset</strong>
       
       <div id="_f780155bb76546f9a0240129c504ff4f" class="color-map">
           
                           <div>
                   <style>
       #_03e743a11f2f4f9cb6a94058b7b4feaa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(75, 41, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_03e743a11f2f4f9cb6a94058b7b4feaa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_03e743a11f2f4f9cb6a94058b7b4feaa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_03e743a11f2f4f9cb6a94058b7b4feaa" class="color" data-tooltip="RGBA: 75, 41, 145, 1.0
   HEXA: #4b2991ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2428c8c9180c44148bf05fbf2acd5af7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 44, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2428c8c9180c44148bf05fbf2acd5af7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2428c8c9180c44148bf05fbf2acd5af7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2428c8c9180c44148bf05fbf2acd5af7" class="color" data-tooltip="RGBA: 135, 44, 162, 1.0
   HEXA: #872ca2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_666bf0e6f28c4f25b88456f48b26acf7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 54, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_666bf0e6f28c4f25b88456f48b26acf7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_666bf0e6f28c4f25b88456f48b26acf7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_666bf0e6f28c4f25b88456f48b26acf7" class="color" data-tooltip="RGBA: 192, 54, 157, 1.0
   HEXA: #c0369dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c7675d3555f24c89927abed23bcb2ad2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 79, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c7675d3555f24c89927abed23bcb2ad2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c7675d3555f24c89927abed23bcb2ad2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c7675d3555f24c89927abed23bcb2ad2" class="color" data-tooltip="RGBA: 234, 79, 136, 1.0
   HEXA: #ea4f88ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e46c21f24b9646f498116483e81bb5e6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 120, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e46c21f24b9646f498116483e81bb5e6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e46c21f24b9646f498116483e81bb5e6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e46c21f24b9646f498116483e81bb5e6" class="color" data-tooltip="RGBA: 250, 120, 118, 1.0
   HEXA: #fa7876ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_152ec757ce2b4187a9ce1c1f01e6ba1a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 169, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_152ec757ce2b4187a9ce1c1f01e6ba1a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_152ec757ce2b4187a9ce1c1f01e6ba1a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_152ec757ce2b4187a9ce1c1f01e6ba1a" class="color" data-tooltip="RGBA: 246, 169, 122, 1.0
   HEXA: #f6a97aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4acf8b5a721a4bc89d4c1e803644e71a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 217, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4acf8b5a721a4bc89d4c1e803644e71a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4acf8b5a721a4bc89d4c1e803644e71a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4acf8b5a721a4bc89d4c1e803644e71a" class="color" data-tooltip="RGBA: 237, 217, 163, 1.0
   HEXA: #edd9a3ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_98efe3c9db154e4da21c016b5e552c63 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_98efe3c9db154e4da21c016b5e552c63 div { flex: 1 1 0; }
           #_98efe3c9db154e4da21c016b5e552c63 div.color { width: 100%; height: 100%; }
           #_98efe3c9db154e4da21c016b5e552c63 div.cmap { width: 100%; height: auto; }
           #_98efe3c9db154e4da21c016b5e552c63 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Brwnyl</strong>
       
       <div id="_98efe3c9db154e4da21c016b5e552c63" class="color-map">
           
                           <div>
                   <style>
       #_fa1540e60abf4148b91aea41657ccc79 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 229, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fa1540e60abf4148b91aea41657ccc79::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fa1540e60abf4148b91aea41657ccc79:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fa1540e60abf4148b91aea41657ccc79" class="color" data-tooltip="RGBA: 237, 229, 207, 1.0
   HEXA: #ede5cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c8cb091da5b4d39be9791fa53eb0523 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 194, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c8cb091da5b4d39be9791fa53eb0523::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c8cb091da5b4d39be9791fa53eb0523:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c8cb091da5b4d39be9791fa53eb0523" class="color" data-tooltip="RGBA: 224, 194, 162, 1.0
   HEXA: #e0c2a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_04aed05d67494fc48516b82da9cc7274 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 156, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_04aed05d67494fc48516b82da9cc7274::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_04aed05d67494fc48516b82da9cc7274:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_04aed05d67494fc48516b82da9cc7274" class="color" data-tooltip="RGBA: 211, 156, 131, 1.0
   HEXA: #d39c83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_74707117c83e43b7a09f9004d9e0ce92 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 118, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_74707117c83e43b7a09f9004d9e0ce92::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_74707117c83e43b7a09f9004d9e0ce92:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_74707117c83e43b7a09f9004d9e0ce92" class="color" data-tooltip="RGBA: 193, 118, 111, 1.0
   HEXA: #c1766fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab9a69263e614cdbbf0ed5c6f2f039c0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 84, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab9a69263e614cdbbf0ed5c6f2f039c0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab9a69263e614cdbbf0ed5c6f2f039c0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab9a69263e614cdbbf0ed5c6f2f039c0" class="color" data-tooltip="RGBA: 166, 84, 97, 1.0
   HEXA: #a65461ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ede43079144244a6847616f770583e63 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 55, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ede43079144244a6847616f770583e63::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ede43079144244a6847616f770583e63:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ede43079144244a6847616f770583e63" class="color" data-tooltip="RGBA: 129, 55, 83, 1.0
   HEXA: #813753ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0b32537affaf415c92c605f7f0b82f80 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 31, 63, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0b32537affaf415c92c605f7f0b82f80::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0b32537affaf415c92c605f7f0b82f80:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0b32537affaf415c92c605f7f0b82f80" class="color" data-tooltip="RGBA: 84, 31, 63, 1.0
   HEXA: #541f3fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f4f31186a93f4ab280ef28c53f4a4711 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f4f31186a93f4ab280ef28c53f4a4711 div { flex: 1 1 0; }
           #_f4f31186a93f4ab280ef28c53f4a4711 div.color { width: 100%; height: 100%; }
           #_f4f31186a93f4ab280ef28c53f4a4711 div.cmap { width: 100%; height: auto; }
           #_f4f31186a93f4ab280ef28c53f4a4711 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Armyrose</strong>
       
       <div id="_f4f31186a93f4ab280ef28c53f4a4711" class="color-map">
           
                           <div>
                   <style>
       #_4f50f748ba144f8785a27b2de99f02b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 130, 52, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4f50f748ba144f8785a27b2de99f02b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4f50f748ba144f8785a27b2de99f02b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4f50f748ba144f8785a27b2de99f02b5" class="color" data-tooltip="RGBA: 121, 130, 52, 1.0
   HEXA: #798234ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db6195ccc02c4a23951f5596838b48a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(163, 173, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db6195ccc02c4a23951f5596838b48a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db6195ccc02c4a23951f5596838b48a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db6195ccc02c4a23951f5596838b48a9" class="color" data-tooltip="RGBA: 163, 173, 98, 1.0
   HEXA: #a3ad62ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1a748f1467cc4a1a93068c5dc3bf6429 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 211, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a748f1467cc4a1a93068c5dc3bf6429::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a748f1467cc4a1a93068c5dc3bf6429:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a748f1467cc4a1a93068c5dc3bf6429" class="color" data-tooltip="RGBA: 208, 211, 162, 1.0
   HEXA: #d0d3a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81562a82387c43bd85941a7bdad68757 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 251, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81562a82387c43bd85941a7bdad68757::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81562a82387c43bd85941a7bdad68757:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81562a82387c43bd85941a7bdad68757" class="color" data-tooltip="RGBA: 253, 251, 228, 1.0
   HEXA: #fdfbe4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1071ad3d2be4cb0854cb86385ef05dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 198, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1071ad3d2be4cb0854cb86385ef05dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1071ad3d2be4cb0854cb86385ef05dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1071ad3d2be4cb0854cb86385ef05dd" class="color" data-tooltip="RGBA: 240, 198, 195, 1.0
   HEXA: #f0c6c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_484d764f8f89408e8f45503888fa6271 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 145, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_484d764f8f89408e8f45503888fa6271::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_484d764f8f89408e8f45503888fa6271:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_484d764f8f89408e8f45503888fa6271" class="color" data-tooltip="RGBA: 223, 145, 163, 1.0
   HEXA: #df91a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6c7e0bf1d8aa4555be3bb735f1a995d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 103, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c7e0bf1d8aa4555be3bb735f1a995d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c7e0bf1d8aa4555be3bb735f1a995d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c7e0bf1d8aa4555be3bb735f1a995d2" class="color" data-tooltip="RGBA: 212, 103, 128, 1.0
   HEXA: #d46780ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_01dfb4216c454fcaabae5d6c0644a717 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_01dfb4216c454fcaabae5d6c0644a717 div { flex: 1 1 0; }
           #_01dfb4216c454fcaabae5d6c0644a717 div.color { width: 100%; height: 100%; }
           #_01dfb4216c454fcaabae5d6c0644a717 div.cmap { width: 100%; height: auto; }
           #_01dfb4216c454fcaabae5d6c0644a717 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Fall</strong>
       
       <div id="_01dfb4216c454fcaabae5d6c0644a717" class="color-map">
           
                           <div>
                   <style>
       #_cdd65c95236b4ace845124e7783901e6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(61, 89, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cdd65c95236b4ace845124e7783901e6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cdd65c95236b4ace845124e7783901e6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cdd65c95236b4ace845124e7783901e6" class="color" data-tooltip="RGBA: 61, 89, 65, 1.0
   HEXA: #3d5941ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_963334d6716149508ca1d9444532b233 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 136, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_963334d6716149508ca1d9444532b233::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_963334d6716149508ca1d9444532b233:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_963334d6716149508ca1d9444532b233" class="color" data-tooltip="RGBA: 119, 136, 104, 1.0
   HEXA: #778868ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc261a3c029a467c83fb3452b48befae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 185, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc261a3c029a467c83fb3452b48befae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc261a3c029a467c83fb3452b48befae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc261a3c029a467c83fb3452b48befae" class="color" data-tooltip="RGBA: 181, 185, 145, 1.0
   HEXA: #b5b991ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0f982e89211444395ce63362d3c4d62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 237, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0f982e89211444395ce63362d3c4d62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0f982e89211444395ce63362d3c4d62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0f982e89211444395ce63362d3c4d62" class="color" data-tooltip="RGBA: 246, 237, 189, 1.0
   HEXA: #f6edbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_23a876a44b714524b7350c8524c934f9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 187, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23a876a44b714524b7350c8524c934f9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23a876a44b714524b7350c8524c934f9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23a876a44b714524b7350c8524c934f9" class="color" data-tooltip="RGBA: 237, 187, 138, 1.0
   HEXA: #edbb8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1b883b1bb70742f7b19167795370e3a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 138, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1b883b1bb70742f7b19167795370e3a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1b883b1bb70742f7b19167795370e3a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1b883b1bb70742f7b19167795370e3a1" class="color" data-tooltip="RGBA: 222, 138, 90, 1.0
   HEXA: #de8a5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53fac05aff2b4aec8dbcea76b0c6e0c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 86, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53fac05aff2b4aec8dbcea76b0c6e0c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53fac05aff2b4aec8dbcea76b0c6e0c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53fac05aff2b4aec8dbcea76b0c6e0c1" class="color" data-tooltip="RGBA: 202, 86, 44, 1.0
   HEXA: #ca562cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_12dd204d1ade4abd90b675434192315b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_12dd204d1ade4abd90b675434192315b div { flex: 1 1 0; }
           #_12dd204d1ade4abd90b675434192315b div.color { width: 100%; height: 100%; }
           #_12dd204d1ade4abd90b675434192315b div.cmap { width: 100%; height: auto; }
           #_12dd204d1ade4abd90b675434192315b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Geyser</strong>
       
       <div id="_12dd204d1ade4abd90b675434192315b" class="color-map">
           
                           <div>
                   <style>
       #_c66f6c7cdc5041f9aa95300929cb96dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 128, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c66f6c7cdc5041f9aa95300929cb96dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c66f6c7cdc5041f9aa95300929cb96dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c66f6c7cdc5041f9aa95300929cb96dd" class="color" data-tooltip="RGBA: 0, 128, 128, 1.0
   HEXA: #008080ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2ba785061494cbda6f089494efb73a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(112, 164, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2ba785061494cbda6f089494efb73a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2ba785061494cbda6f089494efb73a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2ba785061494cbda6f089494efb73a7" class="color" data-tooltip="RGBA: 112, 164, 148, 1.0
   HEXA: #70a494ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_20145f8c4c1e45d9a381ac9f4c318161 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 200, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_20145f8c4c1e45d9a381ac9f4c318161::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_20145f8c4c1e45d9a381ac9f4c318161:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_20145f8c4c1e45d9a381ac9f4c318161" class="color" data-tooltip="RGBA: 180, 200, 168, 1.0
   HEXA: #b4c8a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_39424d4d73924a2085aa01bcdebf1522 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 237, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_39424d4d73924a2085aa01bcdebf1522::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_39424d4d73924a2085aa01bcdebf1522:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_39424d4d73924a2085aa01bcdebf1522" class="color" data-tooltip="RGBA: 246, 237, 189, 1.0
   HEXA: #f6edbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eafdca563faf4fa99afe90174876059e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 187, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eafdca563faf4fa99afe90174876059e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eafdca563faf4fa99afe90174876059e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eafdca563faf4fa99afe90174876059e" class="color" data-tooltip="RGBA: 237, 187, 138, 1.0
   HEXA: #edbb8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a594c7cb3546446893d4ca8fdaa9e662 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 138, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a594c7cb3546446893d4ca8fdaa9e662::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a594c7cb3546446893d4ca8fdaa9e662:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a594c7cb3546446893d4ca8fdaa9e662" class="color" data-tooltip="RGBA: 222, 138, 90, 1.0
   HEXA: #de8a5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6425d335bf849dca92aa5c1267871de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 86, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6425d335bf849dca92aa5c1267871de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6425d335bf849dca92aa5c1267871de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6425d335bf849dca92aa5c1267871de" class="color" data-tooltip="RGBA: 202, 86, 44, 1.0
   HEXA: #ca562cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_97ac1dd1aa9345d38b7b0369b0cf0c25 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_97ac1dd1aa9345d38b7b0369b0cf0c25 div { flex: 1 1 0; }
           #_97ac1dd1aa9345d38b7b0369b0cf0c25 div.color { width: 100%; height: 100%; }
           #_97ac1dd1aa9345d38b7b0369b0cf0c25 div.cmap { width: 100%; height: auto; }
           #_97ac1dd1aa9345d38b7b0369b0cf0c25 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Temps</strong>
       
       <div id="_97ac1dd1aa9345d38b7b0369b0cf0c25" class="color-map">
           
                           <div>
                   <style>
       #_1855aec84a8741cfa19d3b9e7438b375 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 147, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1855aec84a8741cfa19d3b9e7438b375::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1855aec84a8741cfa19d3b9e7438b375:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1855aec84a8741cfa19d3b9e7438b375" class="color" data-tooltip="RGBA: 0, 147, 146, 1.0
   HEXA: #009392ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f85b36f96bae4f268a9f263fec6ece99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 177, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f85b36f96bae4f268a9f263fec6ece99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f85b36f96bae4f268a9f263fec6ece99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f85b36f96bae4f268a9f263fec6ece99" class="color" data-tooltip="RGBA: 57, 177, 133, 1.0
   HEXA: #39b185ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_72cb8eb4c55144cbb2e1dd406498902e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 203, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_72cb8eb4c55144cbb2e1dd406498902e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_72cb8eb4c55144cbb2e1dd406498902e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_72cb8eb4c55144cbb2e1dd406498902e" class="color" data-tooltip="RGBA: 156, 203, 134, 1.0
   HEXA: #9ccb86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a154b38ef57443baad837655cb86487c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(233, 226, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a154b38ef57443baad837655cb86487c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a154b38ef57443baad837655cb86487c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a154b38ef57443baad837655cb86487c" class="color" data-tooltip="RGBA: 233, 226, 156, 1.0
   HEXA: #e9e29cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9fb15668a6f54bf1b988dbcca1a7ddbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 180, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9fb15668a6f54bf1b988dbcca1a7ddbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9fb15668a6f54bf1b988dbcca1a7ddbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9fb15668a6f54bf1b988dbcca1a7ddbd" class="color" data-tooltip="RGBA: 238, 180, 121, 1.0
   HEXA: #eeb479ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b4efb017a2894359a792475f8629ed23 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 132, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b4efb017a2894359a792475f8629ed23::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b4efb017a2894359a792475f8629ed23:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b4efb017a2894359a792475f8629ed23" class="color" data-tooltip="RGBA: 232, 132, 113, 1.0
   HEXA: #e88471ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1e3dfe0720ac4cfabe3c37f86f19b90c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 89, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e3dfe0720ac4cfabe3c37f86f19b90c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e3dfe0720ac4cfabe3c37f86f19b90c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e3dfe0720ac4cfabe3c37f86f19b90c" class="color" data-tooltip="RGBA: 207, 89, 126, 1.0
   HEXA: #cf597eff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_781e57d336de4ae3ae3f74f3ef2885d1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_781e57d336de4ae3ae3f74f3ef2885d1 div { flex: 1 1 0; }
           #_781e57d336de4ae3ae3f74f3ef2885d1 div.color { width: 100%; height: 100%; }
           #_781e57d336de4ae3ae3f74f3ef2885d1 div.cmap { width: 100%; height: auto; }
           #_781e57d336de4ae3ae3f74f3ef2885d1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Tealrose</strong>
       
       <div id="_781e57d336de4ae3ae3f74f3ef2885d1" class="color-map">
           
                           <div>
                   <style>
       #_13cdbe15baf04e1a8db4220e7edc970e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 147, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_13cdbe15baf04e1a8db4220e7edc970e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_13cdbe15baf04e1a8db4220e7edc970e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_13cdbe15baf04e1a8db4220e7edc970e" class="color" data-tooltip="RGBA: 0, 147, 146, 1.0
   HEXA: #009392ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db294d5853a048768c3982b400a35900 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 170, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db294d5853a048768c3982b400a35900::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db294d5853a048768c3982b400a35900:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db294d5853a048768c3982b400a35900" class="color" data-tooltip="RGBA: 114, 170, 161, 1.0
   HEXA: #72aaa1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_171ae43e911e453a86d8cc0843453ae5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 199, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_171ae43e911e453a86d8cc0843453ae5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_171ae43e911e453a86d8cc0843453ae5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_171ae43e911e453a86d8cc0843453ae5" class="color" data-tooltip="RGBA: 177, 199, 179, 1.0
   HEXA: #b1c7b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_98f721c0f4f84c939b4e8d6cdb169515 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 234, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_98f721c0f4f84c939b4e8d6cdb169515::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_98f721c0f4f84c939b4e8d6cdb169515:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_98f721c0f4f84c939b4e8d6cdb169515" class="color" data-tooltip="RGBA: 241, 234, 200, 1.0
   HEXA: #f1eac8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7879b0d1d3b46298b7766a34361f3e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 185, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7879b0d1d3b46298b7766a34361f3e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7879b0d1d3b46298b7766a34361f3e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7879b0d1d3b46298b7766a34361f3e8" class="color" data-tooltip="RGBA: 229, 185, 173, 1.0
   HEXA: #e5b9adff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_91acd5f578a249c09617d5c9ebe10ff3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 137, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_91acd5f578a249c09617d5c9ebe10ff3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_91acd5f578a249c09617d5c9ebe10ff3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_91acd5f578a249c09617d5c9ebe10ff3" class="color" data-tooltip="RGBA: 217, 137, 148, 1.0
   HEXA: #d98994ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f15622afe3514673aa6d30e2beab34f4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 88, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f15622afe3514673aa6d30e2beab34f4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f15622afe3514673aa6d30e2beab34f4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f15622afe3514673aa6d30e2beab34f4" class="color" data-tooltip="RGBA: 208, 88, 126, 1.0
   HEXA: #d0587eff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_02d4172268f34f63a18366136a2f83eb {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_02d4172268f34f63a18366136a2f83eb div { flex: 1 1 0; }
           #_02d4172268f34f63a18366136a2f83eb div.color { width: 100%; height: 100%; }
           #_02d4172268f34f63a18366136a2f83eb div.cmap { width: 100%; height: auto; }
           #_02d4172268f34f63a18366136a2f83eb div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Tropic</strong>
       
       <div id="_02d4172268f34f63a18366136a2f83eb" class="color-map">
           
                           <div>
                   <style>
       #_30e273afb4bf4440a818f7e636db18f7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 155, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30e273afb4bf4440a818f7e636db18f7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30e273afb4bf4440a818f7e636db18f7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30e273afb4bf4440a818f7e636db18f7" class="color" data-tooltip="RGBA: 0, 155, 158, 1.0
   HEXA: #009b9eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5d41570f289249b6b56f482b74cee215 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 183, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5d41570f289249b6b56f482b74cee215::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5d41570f289249b6b56f482b74cee215:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5d41570f289249b6b56f482b74cee215" class="color" data-tooltip="RGBA: 66, 183, 185, 1.0
   HEXA: #42b7b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44b928db67f54230b3df725933bc6276 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 211, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44b928db67f54230b3df725933bc6276::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44b928db67f54230b3df725933bc6276:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44b928db67f54230b3df725933bc6276" class="color" data-tooltip="RGBA: 167, 211, 212, 1.0
   HEXA: #a7d3d4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fea29787a77945bda18cf9919b59b77e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 241, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fea29787a77945bda18cf9919b59b77e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fea29787a77945bda18cf9919b59b77e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fea29787a77945bda18cf9919b59b77e" class="color" data-tooltip="RGBA: 241, 241, 241, 1.0
   HEXA: #f1f1f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dfca6447e09b464e8907109a31695352 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 193, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dfca6447e09b464e8907109a31695352::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dfca6447e09b464e8907109a31695352:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dfca6447e09b464e8907109a31695352" class="color" data-tooltip="RGBA: 228, 193, 217, 1.0
   HEXA: #e4c1d9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_33d3ad01012b4ae491493b0fc8821c89 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 145, 193, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_33d3ad01012b4ae491493b0fc8821c89::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_33d3ad01012b4ae491493b0fc8821c89:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_33d3ad01012b4ae491493b0fc8821c89" class="color" data-tooltip="RGBA: 214, 145, 193, 1.0
   HEXA: #d691c1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7250fa589a9c42f487f78cc411850a38 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 93, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7250fa589a9c42f487f78cc411850a38::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7250fa589a9c42f487f78cc411850a38:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7250fa589a9c42f487f78cc411850a38" class="color" data-tooltip="RGBA: 199, 93, 171, 1.0
   HEXA: #c75dabff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_69b002f231ba41418870e1d964a6c4a6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_69b002f231ba41418870e1d964a6c4a6 div { flex: 1 1 0; }
           #_69b002f231ba41418870e1d964a6c4a6 div.color { width: 100%; height: 100%; }
           #_69b002f231ba41418870e1d964a6c4a6 div.cmap { width: 100%; height: auto; }
           #_69b002f231ba41418870e1d964a6c4a6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Earth</strong>
       
       <div id="_69b002f231ba41418870e1d964a6c4a6" class="color-map">
           
                           <div>
                   <style>
       #_703ae6f15277402e9ad39d8fb78c8402 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_703ae6f15277402e9ad39d8fb78c8402::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_703ae6f15277402e9ad39d8fb78c8402:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_703ae6f15277402e9ad39d8fb78c8402" class="color" data-tooltip="RGBA: 0, 0, 130, 1.0
   HEXA: #000082ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63b017667c1648dc8561bd22e82f3acc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 180, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63b017667c1648dc8561bd22e82f3acc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63b017667c1648dc8561bd22e82f3acc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63b017667c1648dc8561bd22e82f3acc" class="color" data-tooltip="RGBA: 0, 180, 180, 1.0
   HEXA: #00b4b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_35eecf9a430b48808a8acc2739a6db9b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 210, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_35eecf9a430b48808a8acc2739a6db9b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_35eecf9a430b48808a8acc2739a6db9b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_35eecf9a430b48808a8acc2739a6db9b" class="color" data-tooltip="RGBA: 40, 210, 40, 1.0
   HEXA: #28d228ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3abfe0e61a3d4570aab17b30c1289474 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 230, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3abfe0e61a3d4570aab17b30c1289474::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3abfe0e61a3d4570aab17b30c1289474:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3abfe0e61a3d4570aab17b30c1289474" class="color" data-tooltip="RGBA: 230, 230, 50, 1.0
   HEXA: #e6e632ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_21650bd298de472cb100bf895614282f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 70, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_21650bd298de472cb100bf895614282f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_21650bd298de472cb100bf895614282f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_21650bd298de472cb100bf895614282f" class="color" data-tooltip="RGBA: 120, 70, 20, 1.0
   HEXA: #784614ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_043258c018284b979b470fa15d542f4c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_043258c018284b979b470fa15d542f4c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_043258c018284b979b470fa15d542f4c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_043258c018284b979b470fa15d542f4c" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d3713539fe3d41428e3b9591ac8753c1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d3713539fe3d41428e3b9591ac8753c1 div { flex: 1 1 0; }
           #_d3713539fe3d41428e3b9591ac8753c1 div.color { width: 100%; height: 100%; }
           #_d3713539fe3d41428e3b9591ac8753c1 div.cmap { width: 100%; height: auto; }
           #_d3713539fe3d41428e3b9591ac8753c1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Antique</strong>
       
       <div id="_d3713539fe3d41428e3b9591ac8753c1" class="color-map">
           
                           <div>
                   <style>
       #_23c03e372d3b4b9ebaeb626a86cd0051 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 92, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23c03e372d3b4b9ebaeb626a86cd0051::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23c03e372d3b4b9ebaeb626a86cd0051:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23c03e372d3b4b9ebaeb626a86cd0051" class="color" data-tooltip="RGBA: 133, 92, 117, 1.0
   HEXA: #855c75ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9cb0022f6b5748b1a4bd1b09754c3543 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 175, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9cb0022f6b5748b1a4bd1b09754c3543::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9cb0022f6b5748b1a4bd1b09754c3543:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9cb0022f6b5748b1a4bd1b09754c3543" class="color" data-tooltip="RGBA: 217, 175, 107, 1.0
   HEXA: #d9af6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5631afa7a80e4a4d81647426007480e3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(175, 100, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5631afa7a80e4a4d81647426007480e3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5631afa7a80e4a4d81647426007480e3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5631afa7a80e4a4d81647426007480e3" class="color" data-tooltip="RGBA: 175, 100, 88, 1.0
   HEXA: #af6458ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a9a2b42f05442b7beb0757eb33e2719 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 111, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a9a2b42f05442b7beb0757eb33e2719::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a9a2b42f05442b7beb0757eb33e2719:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a9a2b42f05442b7beb0757eb33e2719" class="color" data-tooltip="RGBA: 115, 111, 76, 1.0
   HEXA: #736f4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f5214581e26c49b3b0a6a365763cabdf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 106, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f5214581e26c49b3b0a6a365763cabdf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f5214581e26c49b3b0a6a365763cabdf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f5214581e26c49b3b0a6a365763cabdf" class="color" data-tooltip="RGBA: 82, 106, 131, 1.0
   HEXA: #526a83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46ded8b1655946ceb1b25ba4ea60cd50 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(98, 83, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46ded8b1655946ceb1b25ba4ea60cd50::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46ded8b1655946ceb1b25ba4ea60cd50:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46ded8b1655946ceb1b25ba4ea60cd50" class="color" data-tooltip="RGBA: 98, 83, 119, 1.0
   HEXA: #625377ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab66f1633bfd4352be3063e38567a01e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 133, 92, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab66f1633bfd4352be3063e38567a01e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab66f1633bfd4352be3063e38567a01e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab66f1633bfd4352be3063e38567a01e" class="color" data-tooltip="RGBA: 104, 133, 92, 1.0
   HEXA: #68855cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_71433c3e9cf2495dac3ce663fff11ec3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 156, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_71433c3e9cf2495dac3ce663fff11ec3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_71433c3e9cf2495dac3ce663fff11ec3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_71433c3e9cf2495dac3ce663fff11ec3" class="color" data-tooltip="RGBA: 156, 156, 94, 1.0
   HEXA: #9c9c5eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_447055196db543b89dec431a0cee0d63 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 97, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_447055196db543b89dec431a0cee0d63::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_447055196db543b89dec431a0cee0d63:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_447055196db543b89dec431a0cee0d63" class="color" data-tooltip="RGBA: 160, 97, 119, 1.0
   HEXA: #a06177ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0584e5c965374797a130dd01244e1523 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 120, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0584e5c965374797a130dd01244e1523::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0584e5c965374797a130dd01244e1523:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0584e5c965374797a130dd01244e1523" class="color" data-tooltip="RGBA: 140, 120, 93, 1.0
   HEXA: #8c785dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e60857ba6a384d9c8a36d81ce84cd94e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 124, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e60857ba6a384d9c8a36d81ce84cd94e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e60857ba6a384d9c8a36d81ce84cd94e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e60857ba6a384d9c8a36d81ce84cd94e" class="color" data-tooltip="RGBA: 124, 124, 124, 1.0
   HEXA: #7c7c7cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_38c02fa0902e42608c0a234ac4b9aa50 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_38c02fa0902e42608c0a234ac4b9aa50 div { flex: 1 1 0; }
           #_38c02fa0902e42608c0a234ac4b9aa50 div.color { width: 100%; height: 100%; }
           #_38c02fa0902e42608c0a234ac4b9aa50 div.cmap { width: 100%; height: auto; }
           #_38c02fa0902e42608c0a234ac4b9aa50 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Bold</strong>
       
       <div id="_38c02fa0902e42608c0a234ac4b9aa50" class="color-map">
           
                           <div>
                   <style>
       #_003a261310894f71ba1c2648f4e71545 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 60, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_003a261310894f71ba1c2648f4e71545::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_003a261310894f71ba1c2648f4e71545:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_003a261310894f71ba1c2648f4e71545" class="color" data-tooltip="RGBA: 127, 60, 141, 1.0
   HEXA: #7f3c8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3a0acab56ad44543949ca05e413fd648 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 165, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3a0acab56ad44543949ca05e413fd648::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3a0acab56ad44543949ca05e413fd648:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3a0acab56ad44543949ca05e413fd648" class="color" data-tooltip="RGBA: 17, 165, 121, 1.0
   HEXA: #11a579ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_031a9bb1dc644ba08dfdebe0fc783c89 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 105, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_031a9bb1dc644ba08dfdebe0fc783c89::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_031a9bb1dc644ba08dfdebe0fc783c89:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_031a9bb1dc644ba08dfdebe0fc783c89" class="color" data-tooltip="RGBA: 57, 105, 172, 1.0
   HEXA: #3969acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_735b43370a734e34ba08f2892ae0859f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 183, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_735b43370a734e34ba08f2892ae0859f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_735b43370a734e34ba08f2892ae0859f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_735b43370a734e34ba08f2892ae0859f" class="color" data-tooltip="RGBA: 242, 183, 1, 1.0
   HEXA: #f2b701ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4814169d73e843738e0ac05189dfe5de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 63, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4814169d73e843738e0ac05189dfe5de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4814169d73e843738e0ac05189dfe5de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4814169d73e843738e0ac05189dfe5de" class="color" data-tooltip="RGBA: 231, 63, 116, 1.0
   HEXA: #e73f74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2a8dcb67e5c42ca9657a6c29bea271c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 186, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2a8dcb67e5c42ca9657a6c29bea271c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2a8dcb67e5c42ca9657a6c29bea271c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2a8dcb67e5c42ca9657a6c29bea271c" class="color" data-tooltip="RGBA: 128, 186, 90, 1.0
   HEXA: #80ba5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0cd46883fa854da4a538a13a80a7f015 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 131, 16, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0cd46883fa854da4a538a13a80a7f015::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0cd46883fa854da4a538a13a80a7f015:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0cd46883fa854da4a538a13a80a7f015" class="color" data-tooltip="RGBA: 230, 131, 16, 1.0
   HEXA: #e68310ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5e4233563cc64b6b9d6fbf90cf8607c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 134, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5e4233563cc64b6b9d6fbf90cf8607c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5e4233563cc64b6b9d6fbf90cf8607c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5e4233563cc64b6b9d6fbf90cf8607c1" class="color" data-tooltip="RGBA: 0, 134, 149, 1.0
   HEXA: #008695ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc6073defc44421d83cf4734ce3b6020 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 28, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc6073defc44421d83cf4734ce3b6020::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc6073defc44421d83cf4734ce3b6020:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc6073defc44421d83cf4734ce3b6020" class="color" data-tooltip="RGBA: 207, 28, 144, 1.0
   HEXA: #cf1c90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_25bb9630981740aa9b21e62346879a4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 123, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_25bb9630981740aa9b21e62346879a4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_25bb9630981740aa9b21e62346879a4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_25bb9630981740aa9b21e62346879a4d" class="color" data-tooltip="RGBA: 249, 123, 114, 1.0
   HEXA: #f97b72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc378c25563b4a4c8625ea997fa20c4c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 170, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc378c25563b4a4c8625ea997fa20c4c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc378c25563b4a4c8625ea997fa20c4c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc378c25563b4a4c8625ea997fa20c4c" class="color" data-tooltip="RGBA: 165, 170, 153, 1.0
   HEXA: #a5aa99ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9034aa701fb94f63b7eebc06c876f1f7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9034aa701fb94f63b7eebc06c876f1f7 div { flex: 1 1 0; }
           #_9034aa701fb94f63b7eebc06c876f1f7 div.color { width: 100%; height: 100%; }
           #_9034aa701fb94f63b7eebc06c876f1f7 div.cmap { width: 100%; height: auto; }
           #_9034aa701fb94f63b7eebc06c876f1f7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Pastel</strong>
       
       <div id="_9034aa701fb94f63b7eebc06c876f1f7" class="color-map">
           
                           <div>
                   <style>
       #_666009ca2fa24795a61a2f6a1bad9cb4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 197, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_666009ca2fa24795a61a2f6a1bad9cb4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_666009ca2fa24795a61a2f6a1bad9cb4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_666009ca2fa24795a61a2f6a1bad9cb4" class="color" data-tooltip="RGBA: 102, 197, 204, 1.0
   HEXA: #66c5ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d013cfc6010c418390f8d4f09dea9e2a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 207, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d013cfc6010c418390f8d4f09dea9e2a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d013cfc6010c418390f8d4f09dea9e2a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d013cfc6010c418390f8d4f09dea9e2a" class="color" data-tooltip="RGBA: 246, 207, 113, 1.0
   HEXA: #f6cf71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a26ff53d44ef418084a482aa92591729 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 156, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a26ff53d44ef418084a482aa92591729::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a26ff53d44ef418084a482aa92591729:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a26ff53d44ef418084a482aa92591729" class="color" data-tooltip="RGBA: 248, 156, 116, 1.0
   HEXA: #f89c74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1c5c2f4ae7174cceaef1a7ba430f105f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 176, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c5c2f4ae7174cceaef1a7ba430f105f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c5c2f4ae7174cceaef1a7ba430f105f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c5c2f4ae7174cceaef1a7ba430f105f" class="color" data-tooltip="RGBA: 220, 176, 242, 1.0
   HEXA: #dcb0f2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_70f4af8a440a471181d1a285a35a2796 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 197, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_70f4af8a440a471181d1a285a35a2796::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_70f4af8a440a471181d1a285a35a2796:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_70f4af8a440a471181d1a285a35a2796" class="color" data-tooltip="RGBA: 135, 197, 95, 1.0
   HEXA: #87c55fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1de848314ba2457f96a6a989b0e368ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 185, 243, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1de848314ba2457f96a6a989b0e368ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1de848314ba2457f96a6a989b0e368ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1de848314ba2457f96a6a989b0e368ea" class="color" data-tooltip="RGBA: 158, 185, 243, 1.0
   HEXA: #9eb9f3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05a8444f0d4c4572a2d5d8c1a7cc2f6e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 136, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05a8444f0d4c4572a2d5d8c1a7cc2f6e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05a8444f0d4c4572a2d5d8c1a7cc2f6e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05a8444f0d4c4572a2d5d8c1a7cc2f6e" class="color" data-tooltip="RGBA: 254, 136, 177, 1.0
   HEXA: #fe88b1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82f0106c2cdb4ab2a3b25883db11eea5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 219, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82f0106c2cdb4ab2a3b25883db11eea5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82f0106c2cdb4ab2a3b25883db11eea5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82f0106c2cdb4ab2a3b25883db11eea5" class="color" data-tooltip="RGBA: 201, 219, 116, 1.0
   HEXA: #c9db74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44f7c387107344a896b84b9292382c7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 224, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44f7c387107344a896b84b9292382c7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44f7c387107344a896b84b9292382c7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44f7c387107344a896b84b9292382c7b" class="color" data-tooltip="RGBA: 139, 224, 164, 1.0
   HEXA: #8be0a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_956513d395b4485f8aaf8aca2c028f15 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 151, 231, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_956513d395b4485f8aaf8aca2c028f15::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_956513d395b4485f8aaf8aca2c028f15:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_956513d395b4485f8aaf8aca2c028f15" class="color" data-tooltip="RGBA: 180, 151, 231, 1.0
   HEXA: #b497e7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b921345d902d48c39c1d90d687693847 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 179, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b921345d902d48c39c1d90d687693847::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b921345d902d48c39c1d90d687693847:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b921345d902d48c39c1d90d687693847" class="color" data-tooltip="RGBA: 179, 179, 179, 1.0
   HEXA: #b3b3b3ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_96724cbe00004783839d40c1d12dfc3a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_96724cbe00004783839d40c1d12dfc3a div { flex: 1 1 0; }
           #_96724cbe00004783839d40c1d12dfc3a div.color { width: 100%; height: 100%; }
           #_96724cbe00004783839d40c1d12dfc3a div.cmap { width: 100%; height: auto; }
           #_96724cbe00004783839d40c1d12dfc3a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Prism</strong>
       
       <div id="_96724cbe00004783839d40c1d12dfc3a" class="color-map">
           
                           <div>
                   <style>
       #_806df05f196e4f7faaf0dcef043d43ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 70, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_806df05f196e4f7faaf0dcef043d43ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_806df05f196e4f7faaf0dcef043d43ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_806df05f196e4f7faaf0dcef043d43ff" class="color" data-tooltip="RGBA: 95, 70, 144, 1.0
   HEXA: #5f4690ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1146f3edbaea4d80b6ed70b9ab8d1171 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 105, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1146f3edbaea4d80b6ed70b9ab8d1171::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1146f3edbaea4d80b6ed70b9ab8d1171:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1146f3edbaea4d80b6ed70b9ab8d1171" class="color" data-tooltip="RGBA: 29, 105, 150, 1.0
   HEXA: #1d6996ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eddd2c9676b24fc5bef69a03578e4431 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 166, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eddd2c9676b24fc5bef69a03578e4431::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eddd2c9676b24fc5bef69a03578e4431:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eddd2c9676b24fc5bef69a03578e4431" class="color" data-tooltip="RGBA: 56, 166, 165, 1.0
   HEXA: #38a6a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_400c3209ccb14542bfa225c7855eb89c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 133, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_400c3209ccb14542bfa225c7855eb89c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_400c3209ccb14542bfa225c7855eb89c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_400c3209ccb14542bfa225c7855eb89c" class="color" data-tooltip="RGBA: 15, 133, 84, 1.0
   HEXA: #0f8554ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c9964a96bf1e448ea4888b1a9d4a5861 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 175, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9964a96bf1e448ea4888b1a9d4a5861::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9964a96bf1e448ea4888b1a9d4a5861:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9964a96bf1e448ea4888b1a9d4a5861" class="color" data-tooltip="RGBA: 115, 175, 72, 1.0
   HEXA: #73af48ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0b66df39e7447a38de304dbff2a3135 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 173, 8, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0b66df39e7447a38de304dbff2a3135::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0b66df39e7447a38de304dbff2a3135:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0b66df39e7447a38de304dbff2a3135" class="color" data-tooltip="RGBA: 237, 173, 8, 1.0
   HEXA: #edad08ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db88c779ed2644318470e73a3de32df2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 124, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db88c779ed2644318470e73a3de32df2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db88c779ed2644318470e73a3de32df2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db88c779ed2644318470e73a3de32df2" class="color" data-tooltip="RGBA: 225, 124, 5, 1.0
   HEXA: #e17c05ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_190f52ce526a4c91ad0bb94ca80edace { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 80, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_190f52ce526a4c91ad0bb94ca80edace::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_190f52ce526a4c91ad0bb94ca80edace:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_190f52ce526a4c91ad0bb94ca80edace" class="color" data-tooltip="RGBA: 204, 80, 62, 1.0
   HEXA: #cc503eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6cce67a48524efb8638d87de7de6905 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(148, 52, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6cce67a48524efb8638d87de7de6905::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6cce67a48524efb8638d87de7de6905:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6cce67a48524efb8638d87de7de6905" class="color" data-tooltip="RGBA: 148, 52, 110, 1.0
   HEXA: #94346eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_328fb9a9309d49ac814cc2ba488c17c5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 64, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_328fb9a9309d49ac814cc2ba488c17c5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_328fb9a9309d49ac814cc2ba488c17c5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_328fb9a9309d49ac814cc2ba488c17c5" class="color" data-tooltip="RGBA: 111, 64, 112, 1.0
   HEXA: #6f4070ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_17dbe35c7a66413bae7da19b520b7514 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_17dbe35c7a66413bae7da19b520b7514::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_17dbe35c7a66413bae7da19b520b7514:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_17dbe35c7a66413bae7da19b520b7514" class="color" data-tooltip="RGBA: 102, 102, 102, 1.0
   HEXA: #666666ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4b0fd46c123445b69e1252820e5c435b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4b0fd46c123445b69e1252820e5c435b div { flex: 1 1 0; }
           #_4b0fd46c123445b69e1252820e5c435b div.color { width: 100%; height: 100%; }
           #_4b0fd46c123445b69e1252820e5c435b div.cmap { width: 100%; height: auto; }
           #_4b0fd46c123445b69e1252820e5c435b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Safe</strong>
       
       <div id="_4b0fd46c123445b69e1252820e5c435b" class="color-map">
           
                           <div>
                   <style>
       #_b71e406e2ebe4ba18d09cace251e5be9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 204, 238, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b71e406e2ebe4ba18d09cace251e5be9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b71e406e2ebe4ba18d09cace251e5be9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b71e406e2ebe4ba18d09cace251e5be9" class="color" data-tooltip="RGBA: 136, 204, 238, 1.0
   HEXA: #88cceeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7da56b6a7daf43b4841cebffc00efd55 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 102, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7da56b6a7daf43b4841cebffc00efd55::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7da56b6a7daf43b4841cebffc00efd55:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7da56b6a7daf43b4841cebffc00efd55" class="color" data-tooltip="RGBA: 204, 102, 119, 1.0
   HEXA: #cc6677ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0786f970e2e347238699929a8b98b41d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 204, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0786f970e2e347238699929a8b98b41d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0786f970e2e347238699929a8b98b41d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0786f970e2e347238699929a8b98b41d" class="color" data-tooltip="RGBA: 221, 204, 119, 1.0
   HEXA: #ddcc77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac226c275f2a413592965dc8b0f938eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 119, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac226c275f2a413592965dc8b0f938eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac226c275f2a413592965dc8b0f938eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac226c275f2a413592965dc8b0f938eb" class="color" data-tooltip="RGBA: 17, 119, 51, 1.0
   HEXA: #117733ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa8b29d285fa4d3ab494e1c1d0a93b5a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 34, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa8b29d285fa4d3ab494e1c1d0a93b5a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa8b29d285fa4d3ab494e1c1d0a93b5a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa8b29d285fa4d3ab494e1c1d0a93b5a" class="color" data-tooltip="RGBA: 51, 34, 136, 1.0
   HEXA: #332288ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2ec3eaf6241440595a54527606e5f70 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 68, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2ec3eaf6241440595a54527606e5f70::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2ec3eaf6241440595a54527606e5f70:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2ec3eaf6241440595a54527606e5f70" class="color" data-tooltip="RGBA: 170, 68, 153, 1.0
   HEXA: #aa4499ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d5562ab078248e78a561656db2c1af1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 170, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d5562ab078248e78a561656db2c1af1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d5562ab078248e78a561656db2c1af1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d5562ab078248e78a561656db2c1af1" class="color" data-tooltip="RGBA: 68, 170, 153, 1.0
   HEXA: #44aa99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_24dc4eb16b8d4952a067b10df46e0b42 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_24dc4eb16b8d4952a067b10df46e0b42::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_24dc4eb16b8d4952a067b10df46e0b42:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_24dc4eb16b8d4952a067b10df46e0b42" class="color" data-tooltip="RGBA: 153, 153, 51, 1.0
   HEXA: #999933ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab148103878148dfbe2c3b2a64dd841e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 34, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab148103878148dfbe2c3b2a64dd841e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab148103878148dfbe2c3b2a64dd841e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab148103878148dfbe2c3b2a64dd841e" class="color" data-tooltip="RGBA: 136, 34, 85, 1.0
   HEXA: #882255ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1a65842462b4b1b9a84c493b730b8a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 17, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1a65842462b4b1b9a84c493b730b8a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1a65842462b4b1b9a84c493b730b8a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1a65842462b4b1b9a84c493b730b8a1" class="color" data-tooltip="RGBA: 102, 17, 0, 1.0
   HEXA: #661100ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2bbcb0f152c04abe9d1ff90886b4e02a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 136, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2bbcb0f152c04abe9d1ff90886b4e02a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2bbcb0f152c04abe9d1ff90886b4e02a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2bbcb0f152c04abe9d1ff90886b4e02a" class="color" data-tooltip="RGBA: 136, 136, 136, 1.0
   HEXA: #888888ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_21f59ff9fa124972a0b0607cf73c9af9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_21f59ff9fa124972a0b0607cf73c9af9 div { flex: 1 1 0; }
           #_21f59ff9fa124972a0b0607cf73c9af9 div.color { width: 100%; height: 100%; }
           #_21f59ff9fa124972a0b0607cf73c9af9 div.cmap { width: 100%; height: auto; }
           #_21f59ff9fa124972a0b0607cf73c9af9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Vivid</strong>
       
       <div id="_21f59ff9fa124972a0b0607cf73c9af9" class="color-map">
           
                           <div>
                   <style>
       #_941e5ec2963b4306af8aedf09982941f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 134, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_941e5ec2963b4306af8aedf09982941f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_941e5ec2963b4306af8aedf09982941f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_941e5ec2963b4306af8aedf09982941f" class="color" data-tooltip="RGBA: 229, 134, 6, 1.0
   HEXA: #e58606ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_24dae4e21e30427bb4a749b4d238037d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(93, 105, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_24dae4e21e30427bb4a749b4d238037d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_24dae4e21e30427bb4a749b4d238037d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_24dae4e21e30427bb4a749b4d238037d" class="color" data-tooltip="RGBA: 93, 105, 177, 1.0
   HEXA: #5d69b1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac396737ffe444cf8a6ad90d46b3a3f9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 188, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac396737ffe444cf8a6ad90d46b3a3f9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac396737ffe444cf8a6ad90d46b3a3f9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac396737ffe444cf8a6ad90d46b3a3f9" class="color" data-tooltip="RGBA: 82, 188, 163, 1.0
   HEXA: #52bca3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9a54e2884b5c45c384762295935f5cd3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 201, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a54e2884b5c45c384762295935f5cd3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a54e2884b5c45c384762295935f5cd3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a54e2884b5c45c384762295935f5cd3" class="color" data-tooltip="RGBA: 153, 201, 69, 1.0
   HEXA: #99c945ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7ccbdc4fd934aa49b7ecf3467cfb1df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 97, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7ccbdc4fd934aa49b7ecf3467cfb1df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7ccbdc4fd934aa49b7ecf3467cfb1df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7ccbdc4fd934aa49b7ecf3467cfb1df" class="color" data-tooltip="RGBA: 204, 97, 176, 1.0
   HEXA: #cc61b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b1b1493bbb954c98a721a3ab089b6465 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 121, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b1b1493bbb954c98a721a3ab089b6465::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b1b1493bbb954c98a721a3ab089b6465:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b1b1493bbb954c98a721a3ab089b6465" class="color" data-tooltip="RGBA: 36, 121, 108, 1.0
   HEXA: #24796cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac21b1be393742198a9b349fc57f8da8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 165, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac21b1be393742198a9b349fc57f8da8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac21b1be393742198a9b349fc57f8da8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac21b1be393742198a9b349fc57f8da8" class="color" data-tooltip="RGBA: 218, 165, 27, 1.0
   HEXA: #daa51bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6a2902f5b4234140bd86b54bc8291b6e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 138, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6a2902f5b4234140bd86b54bc8291b6e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6a2902f5b4234140bd86b54bc8291b6e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6a2902f5b4234140bd86b54bc8291b6e" class="color" data-tooltip="RGBA: 47, 138, 196, 1.0
   HEXA: #2f8ac4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53cf00a4dd4b4218bf6b9855c319da58 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 78, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53cf00a4dd4b4218bf6b9855c319da58::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53cf00a4dd4b4218bf6b9855c319da58:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53cf00a4dd4b4218bf6b9855c319da58" class="color" data-tooltip="RGBA: 118, 78, 159, 1.0
   HEXA: #764e9fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3bffe75c3e394caaa2a55d43a143bce6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 100, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3bffe75c3e394caaa2a55d43a143bce6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3bffe75c3e394caaa2a55d43a143bce6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3bffe75c3e394caaa2a55d43a143bce6" class="color" data-tooltip="RGBA: 237, 100, 90, 1.0
   HEXA: #ed645aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82337bd2cc434d2b968cb3936fdc2eea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 170, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82337bd2cc434d2b968cb3936fdc2eea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82337bd2cc434d2b968cb3936fdc2eea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82337bd2cc434d2b968cb3936fdc2eea" class="color" data-tooltip="RGBA: 165, 170, 153, 1.0
   HEXA: #a5aa99ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_287779def72545c7835e7644487012f1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_287779def72545c7835e7644487012f1 div { flex: 1 1 0; }
           #_287779def72545c7835e7644487012f1 div.color { width: 100%; height: 100%; }
           #_287779def72545c7835e7644487012f1 div.cmap { width: 100%; height: auto; }
           #_287779def72545c7835e7644487012f1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Blackbody</strong>
       
       <div id="_287779def72545c7835e7644487012f1" class="color-map">
           
                           <div>
                   <style>
       #_2d23de494c5a49ab8eeba35c807549ec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2d23de494c5a49ab8eeba35c807549ec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2d23de494c5a49ab8eeba35c807549ec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2d23de494c5a49ab8eeba35c807549ec" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_973f19ab0b064dacb1d3c49c849b370f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_973f19ab0b064dacb1d3c49c849b370f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_973f19ab0b064dacb1d3c49c849b370f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_973f19ab0b064dacb1d3c49c849b370f" class="color" data-tooltip="RGBA: 230, 0, 0, 1.0
   HEXA: #e60000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d280bed133ef45ffb042c750715b13b1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 210, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d280bed133ef45ffb042c750715b13b1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d280bed133ef45ffb042c750715b13b1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d280bed133ef45ffb042c750715b13b1" class="color" data-tooltip="RGBA: 230, 210, 0, 1.0
   HEXA: #e6d200ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6ff94d7c179f4fef9f9d15d024903bc8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ff94d7c179f4fef9f9d15d024903bc8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ff94d7c179f4fef9f9d15d024903bc8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ff94d7c179f4fef9f9d15d024903bc8" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6c0aae502ce4443c9bbca77179151390 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 200, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c0aae502ce4443c9bbca77179151390::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c0aae502ce4443c9bbca77179151390:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c0aae502ce4443c9bbca77179151390" class="color" data-tooltip="RGBA: 160, 200, 255, 1.0
   HEXA: #a0c8ffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0e36d795cb844415bddbef0ce941b8c7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0e36d795cb844415bddbef0ce941b8c7 div { flex: 1 1 0; }
           #_0e36d795cb844415bddbef0ce941b8c7 div.color { width: 100%; height: 100%; }
           #_0e36d795cb844415bddbef0ce941b8c7 div.cmap { width: 100%; height: auto; }
           #_0e36d795cb844415bddbef0ce941b8c7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Bluered</strong>
       
       <div id="_0e36d795cb844415bddbef0ce941b8c7" class="color-map">
           
                           <div>
                   <style>
       #_1a45034caf534d96aa9d9eea5988f39c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a45034caf534d96aa9d9eea5988f39c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a45034caf534d96aa9d9eea5988f39c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a45034caf534d96aa9d9eea5988f39c" class="color" data-tooltip="RGBA: 0, 0, 255, 1.0
   HEXA: #0000ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1d0090d524e460299a13fbd9c9fc4f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1d0090d524e460299a13fbd9c9fc4f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1d0090d524e460299a13fbd9c9fc4f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1d0090d524e460299a13fbd9c9fc4f5" class="color" data-tooltip="RGBA: 255, 0, 0, 1.0
   HEXA: #ff0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_72890d6dc01b4a858297ecefbac97f5f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_72890d6dc01b4a858297ecefbac97f5f div { flex: 1 1 0; }
           #_72890d6dc01b4a858297ecefbac97f5f div.color { width: 100%; height: 100%; }
           #_72890d6dc01b4a858297ecefbac97f5f div.cmap { width: 100%; height: auto; }
           #_72890d6dc01b4a858297ecefbac97f5f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Cividis</strong>
       
       <div id="_72890d6dc01b4a858297ecefbac97f5f" class="color-map">
           
                           <div>
                   <style>
       #_f640eebf59c24572b8c02e8c11935150 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 32, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f640eebf59c24572b8c02e8c11935150::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f640eebf59c24572b8c02e8c11935150:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f640eebf59c24572b8c02e8c11935150" class="color" data-tooltip="RGBA: 0, 32, 76, 1.0
   HEXA: #00204cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3877207dbba74e5eac961d8e737bdf45 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 42, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3877207dbba74e5eac961d8e737bdf45::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3877207dbba74e5eac961d8e737bdf45:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3877207dbba74e5eac961d8e737bdf45" class="color" data-tooltip="RGBA: 0, 42, 102, 1.0
   HEXA: #002a66ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dbbbd1548a554e84b150308f09125e7a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 52, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dbbbd1548a554e84b150308f09125e7a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dbbbd1548a554e84b150308f09125e7a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dbbbd1548a554e84b150308f09125e7a" class="color" data-tooltip="RGBA: 0, 52, 110, 1.0
   HEXA: #00346eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ae9a157a4e694a5d8d45cc03e0c6d3c3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 63, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ae9a157a4e694a5d8d45cc03e0c6d3c3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ae9a157a4e694a5d8d45cc03e0c6d3c3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ae9a157a4e694a5d8d45cc03e0c6d3c3" class="color" data-tooltip="RGBA: 39, 63, 108, 1.0
   HEXA: #273f6cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa347bc6783d43f2b318b8b13741d340 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 74, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa347bc6783d43f2b318b8b13741d340::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa347bc6783d43f2b318b8b13741d340:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa347bc6783d43f2b318b8b13741d340" class="color" data-tooltip="RGBA: 60, 74, 107, 1.0
   HEXA: #3c4a6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c7045b4c1e694a9f967a896dbabed280 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 85, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c7045b4c1e694a9f967a896dbabed280::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c7045b4c1e694a9f967a896dbabed280:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c7045b4c1e694a9f967a896dbabed280" class="color" data-tooltip="RGBA: 76, 85, 107, 1.0
   HEXA: #4c556bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1284c19a3179426ea2d46b10f79a16a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(91, 95, 109, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1284c19a3179426ea2d46b10f79a16a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1284c19a3179426ea2d46b10f79a16a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1284c19a3179426ea2d46b10f79a16a5" class="color" data-tooltip="RGBA: 91, 95, 109, 1.0
   HEXA: #5b5f6dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_069afe51673e43699196282ed2968888 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 106, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_069afe51673e43699196282ed2968888::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_069afe51673e43699196282ed2968888:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_069afe51673e43699196282ed2968888" class="color" data-tooltip="RGBA: 104, 106, 112, 1.0
   HEXA: #686a70ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7087c624e3b44f1eab4e3ed8c56e38d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 117, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7087c624e3b44f1eab4e3ed8c56e38d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7087c624e3b44f1eab4e3ed8c56e38d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7087c624e3b44f1eab4e3ed8c56e38d9" class="color" data-tooltip="RGBA: 117, 117, 117, 1.0
   HEXA: #757575ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a42914b760e04140b28c12dbcce28794 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 129, 120, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a42914b760e04140b28c12dbcce28794::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a42914b760e04140b28c12dbcce28794:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a42914b760e04140b28c12dbcce28794" class="color" data-tooltip="RGBA: 131, 129, 120, 1.0
   HEXA: #838178ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44584523e23849d88bd5c9cd98d0da46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 140, 120, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44584523e23849d88bd5c9cd98d0da46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44584523e23849d88bd5c9cd98d0da46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44584523e23849d88bd5c9cd98d0da46" class="color" data-tooltip="RGBA: 146, 140, 120, 1.0
   HEXA: #928c78ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90dfa90fe6464bd89746a2507aff6ade { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 152, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90dfa90fe6464bd89746a2507aff6ade::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90dfa90fe6464bd89746a2507aff6ade:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90dfa90fe6464bd89746a2507aff6ade" class="color" data-tooltip="RGBA: 161, 152, 118, 1.0
   HEXA: #a19876ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1227f75ee5274f17acbe24f9f1529443 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(176, 165, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1227f75ee5274f17acbe24f9f1529443::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1227f75ee5274f17acbe24f9f1529443:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1227f75ee5274f17acbe24f9f1529443" class="color" data-tooltip="RGBA: 176, 165, 114, 1.0
   HEXA: #b0a572ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0faeac61a17e4bf6a6896d290625baee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 177, 109, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0faeac61a17e4bf6a6896d290625baee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0faeac61a17e4bf6a6896d290625baee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0faeac61a17e4bf6a6896d290625baee" class="color" data-tooltip="RGBA: 192, 177, 109, 1.0
   HEXA: #c0b16dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_01888f14793749f384441d2181c4fd54 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 191, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_01888f14793749f384441d2181c4fd54::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_01888f14793749f384441d2181c4fd54:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_01888f14793749f384441d2181c4fd54" class="color" data-tooltip="RGBA: 209, 191, 102, 1.0
   HEXA: #d1bf66ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ed415adbf75149c299a94daf6a36bb61 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 204, 92, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ed415adbf75149c299a94daf6a36bb61::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ed415adbf75149c299a94daf6a36bb61:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ed415adbf75149c299a94daf6a36bb61" class="color" data-tooltip="RGBA: 225, 204, 92, 1.0
   HEXA: #e1cc5cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c3d4f318441a468cb9d1e201589ec2cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 219, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c3d4f318441a468cb9d1e201589ec2cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c3d4f318441a468cb9d1e201589ec2cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c3d4f318441a468cb9d1e201589ec2cc" class="color" data-tooltip="RGBA: 243, 219, 79, 1.0
   HEXA: #f3db4fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6a4a7cfc1ec8498fa00f8e67df4986ed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 233, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6a4a7cfc1ec8498fa00f8e67df4986ed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6a4a7cfc1ec8498fa00f8e67df4986ed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6a4a7cfc1ec8498fa00f8e67df4986ed" class="color" data-tooltip="RGBA: 255, 233, 69, 1.0
   HEXA: #ffe945ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9bc57ac326bd4527ade7281c2058bfa1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9bc57ac326bd4527ade7281c2058bfa1 div { flex: 1 1 0; }
           #_9bc57ac326bd4527ade7281c2058bfa1 div.color { width: 100%; height: 100%; }
           #_9bc57ac326bd4527ade7281c2058bfa1 div.cmap { width: 100%; height: auto; }
           #_9bc57ac326bd4527ade7281c2058bfa1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Electric</strong>
       
       <div id="_9bc57ac326bd4527ade7281c2058bfa1" class="color-map">
           
                           <div>
                   <style>
       #_48bb06a0f88847e981b3362f12790060 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48bb06a0f88847e981b3362f12790060::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48bb06a0f88847e981b3362f12790060:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48bb06a0f88847e981b3362f12790060" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a893c0bc024c4df5964272c92646d05f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(30, 0, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a893c0bc024c4df5964272c92646d05f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a893c0bc024c4df5964272c92646d05f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a893c0bc024c4df5964272c92646d05f" class="color" data-tooltip="RGBA: 30, 0, 100, 1.0
   HEXA: #1e0064ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_efdceda2706042cda776b12ecd22bce7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 0, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_efdceda2706042cda776b12ecd22bce7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_efdceda2706042cda776b12ecd22bce7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_efdceda2706042cda776b12ecd22bce7" class="color" data-tooltip="RGBA: 120, 0, 100, 1.0
   HEXA: #780064ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_75ce61513d1c46d89f04b37b12156fe0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 90, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75ce61513d1c46d89f04b37b12156fe0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75ce61513d1c46d89f04b37b12156fe0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75ce61513d1c46d89f04b37b12156fe0" class="color" data-tooltip="RGBA: 160, 90, 0, 1.0
   HEXA: #a05a00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2a35b0991cf24eee9872227e5940083c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 200, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2a35b0991cf24eee9872227e5940083c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2a35b0991cf24eee9872227e5940083c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2a35b0991cf24eee9872227e5940083c" class="color" data-tooltip="RGBA: 230, 200, 0, 1.0
   HEXA: #e6c800ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b1c92c8464d4914bfb9a2ec66c8bff2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 250, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b1c92c8464d4914bfb9a2ec66c8bff2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b1c92c8464d4914bfb9a2ec66c8bff2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b1c92c8464d4914bfb9a2ec66c8bff2" class="color" data-tooltip="RGBA: 255, 250, 220, 1.0
   HEXA: #fffadcff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_cae4fbaf5f6a432d94365ddee9ea72b5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_cae4fbaf5f6a432d94365ddee9ea72b5 div { flex: 1 1 0; }
           #_cae4fbaf5f6a432d94365ddee9ea72b5 div.color { width: 100%; height: 100%; }
           #_cae4fbaf5f6a432d94365ddee9ea72b5 div.cmap { width: 100%; height: auto; }
           #_cae4fbaf5f6a432d94365ddee9ea72b5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Hot</strong>
       
       <div id="_cae4fbaf5f6a432d94365ddee9ea72b5" class="color-map">
           
                           <div>
                   <style>
       #_38650808d3974eaca6e099f2b66cd15d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38650808d3974eaca6e099f2b66cd15d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38650808d3974eaca6e099f2b66cd15d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38650808d3974eaca6e099f2b66cd15d" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5ac366a353c8497095bbb379de9ab2d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5ac366a353c8497095bbb379de9ab2d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5ac366a353c8497095bbb379de9ab2d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5ac366a353c8497095bbb379de9ab2d8" class="color" data-tooltip="RGBA: 230, 0, 0, 1.0
   HEXA: #e60000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d137d923623b46fcac49d3068f464c2f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 210, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d137d923623b46fcac49d3068f464c2f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d137d923623b46fcac49d3068f464c2f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d137d923623b46fcac49d3068f464c2f" class="color" data-tooltip="RGBA: 255, 210, 0, 1.0
   HEXA: #ffd200ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5310e040b3de40e5a3921bd48ab429f7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5310e040b3de40e5a3921bd48ab429f7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5310e040b3de40e5a3921bd48ab429f7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5310e040b3de40e5a3921bd48ab429f7" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8d96bd41aeb5484b96d435d9eb49bec4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8d96bd41aeb5484b96d435d9eb49bec4 div { flex: 1 1 0; }
           #_8d96bd41aeb5484b96d435d9eb49bec4 div.color { width: 100%; height: 100%; }
           #_8d96bd41aeb5484b96d435d9eb49bec4 div.cmap { width: 100%; height: auto; }
           #_8d96bd41aeb5484b96d435d9eb49bec4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Jet</strong>
       
       <div id="_8d96bd41aeb5484b96d435d9eb49bec4" class="color-map">
           
                           <div>
                   <style>
       #_07ef65406abb41db9db7e813faabc011 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_07ef65406abb41db9db7e813faabc011::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_07ef65406abb41db9db7e813faabc011:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_07ef65406abb41db9db7e813faabc011" class="color" data-tooltip="RGBA: 0, 0, 131, 1.0
   HEXA: #000083ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d9f0b078c2cc45f6b2d4d7f57a7a2b45 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 60, 170, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d9f0b078c2cc45f6b2d4d7f57a7a2b45::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d9f0b078c2cc45f6b2d4d7f57a7a2b45:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d9f0b078c2cc45f6b2d4d7f57a7a2b45" class="color" data-tooltip="RGBA: 0, 60, 170, 1.0
   HEXA: #003caaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4064e4ad32ba45218bc39b1a4aa438f0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4064e4ad32ba45218bc39b1a4aa438f0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4064e4ad32ba45218bc39b1a4aa438f0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4064e4ad32ba45218bc39b1a4aa438f0" class="color" data-tooltip="RGBA: 5, 255, 255, 1.0
   HEXA: #05ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c30722ba5024eb5b4353abbdaf5aeda { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c30722ba5024eb5b4353abbdaf5aeda::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c30722ba5024eb5b4353abbdaf5aeda:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c30722ba5024eb5b4353abbdaf5aeda" class="color" data-tooltip="RGBA: 255, 255, 0, 1.0
   HEXA: #ffff00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6290234556f24893b5505887b0327938 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6290234556f24893b5505887b0327938::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6290234556f24893b5505887b0327938:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6290234556f24893b5505887b0327938" class="color" data-tooltip="RGBA: 250, 0, 0, 1.0
   HEXA: #fa0000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b5d73bc7a9854018af1a6f16d8958d75 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b5d73bc7a9854018af1a6f16d8958d75::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b5d73bc7a9854018af1a6f16d8958d75:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b5d73bc7a9854018af1a6f16d8958d75" class="color" data-tooltip="RGBA: 128, 0, 0, 1.0
   HEXA: #800000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_bf6679a5845a494391742fbbfe5484c4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_bf6679a5845a494391742fbbfe5484c4 div { flex: 1 1 0; }
           #_bf6679a5845a494391742fbbfe5484c4 div.color { width: 100%; height: 100%; }
           #_bf6679a5845a494391742fbbfe5484c4 div.cmap { width: 100%; height: auto; }
           #_bf6679a5845a494391742fbbfe5484c4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Picnic</strong>
       
       <div id="_bf6679a5845a494391742fbbfe5484c4" class="color-map">
           
                           <div>
                   <style>
       #_e990a61a20024da8a36e9bb10e9bfe74 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e990a61a20024da8a36e9bb10e9bfe74::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e990a61a20024da8a36e9bb10e9bfe74:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e990a61a20024da8a36e9bb10e9bfe74" class="color" data-tooltip="RGBA: 0, 0, 255, 1.0
   HEXA: #0000ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a05d544a35154451959d4d435d8bf166 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 153, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a05d544a35154451959d4d435d8bf166::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a05d544a35154451959d4d435d8bf166:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a05d544a35154451959d4d435d8bf166" class="color" data-tooltip="RGBA: 51, 153, 255, 1.0
   HEXA: #3399ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_babd884d95994ce9b9a6f690a9cb2631 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_babd884d95994ce9b9a6f690a9cb2631::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_babd884d95994ce9b9a6f690a9cb2631:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_babd884d95994ce9b9a6f690a9cb2631" class="color" data-tooltip="RGBA: 102, 204, 255, 1.0
   HEXA: #66ccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8dfe6f30873544849307cc4042b2805b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8dfe6f30873544849307cc4042b2805b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8dfe6f30873544849307cc4042b2805b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8dfe6f30873544849307cc4042b2805b" class="color" data-tooltip="RGBA: 153, 204, 255, 1.0
   HEXA: #99ccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce51f0b71c0d4c3bbbb12ea12f9e7125 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce51f0b71c0d4c3bbbb12ea12f9e7125::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce51f0b71c0d4c3bbbb12ea12f9e7125:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce51f0b71c0d4c3bbbb12ea12f9e7125" class="color" data-tooltip="RGBA: 204, 204, 255, 1.0
   HEXA: #ccccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1f0b9dad903042c9ae6782489e4ebf56 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f0b9dad903042c9ae6782489e4ebf56::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f0b9dad903042c9ae6782489e4ebf56:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f0b9dad903042c9ae6782489e4ebf56" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c6797077aeea46b5b004730f28a7118d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c6797077aeea46b5b004730f28a7118d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c6797077aeea46b5b004730f28a7118d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c6797077aeea46b5b004730f28a7118d" class="color" data-tooltip="RGBA: 255, 204, 255, 1.0
   HEXA: #ffccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6ca69e915e2944f7aa97a8e53dda8305 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 153, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ca69e915e2944f7aa97a8e53dda8305::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ca69e915e2944f7aa97a8e53dda8305:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ca69e915e2944f7aa97a8e53dda8305" class="color" data-tooltip="RGBA: 255, 153, 255, 1.0
   HEXA: #ff99ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e44fe2c579404b668f08b4bc3e0508c4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 102, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e44fe2c579404b668f08b4bc3e0508c4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e44fe2c579404b668f08b4bc3e0508c4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e44fe2c579404b668f08b4bc3e0508c4" class="color" data-tooltip="RGBA: 255, 102, 204, 1.0
   HEXA: #ff66ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68601b72afeb4006b639b5798bd794fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68601b72afeb4006b639b5798bd794fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68601b72afeb4006b639b5798bd794fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68601b72afeb4006b639b5798bd794fe" class="color" data-tooltip="RGBA: 255, 102, 102, 1.0
   HEXA: #ff6666ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b8e79599dcb8447792165273b5cc1631 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b8e79599dcb8447792165273b5cc1631::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b8e79599dcb8447792165273b5cc1631:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b8e79599dcb8447792165273b5cc1631" class="color" data-tooltip="RGBA: 255, 0, 0, 1.0
   HEXA: #ff0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9aa5387424d2433288da90e4336c7173 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9aa5387424d2433288da90e4336c7173 div { flex: 1 1 0; }
           #_9aa5387424d2433288da90e4336c7173 div.color { width: 100%; height: 100%; }
           #_9aa5387424d2433288da90e4336c7173 div.cmap { width: 100%; height: auto; }
           #_9aa5387424d2433288da90e4336c7173 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Portland</strong>
       
       <div id="_9aa5387424d2433288da90e4336c7173" class="color-map">
           
                           <div>
                   <style>
       #_fda6f2c63631424c8c65839e4ff0e129 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(12, 51, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fda6f2c63631424c8c65839e4ff0e129::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fda6f2c63631424c8c65839e4ff0e129:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fda6f2c63631424c8c65839e4ff0e129" class="color" data-tooltip="RGBA: 12, 51, 131, 1.0
   HEXA: #0c3383ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a212c9ebefa488890a3963414d05300 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(10, 136, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a212c9ebefa488890a3963414d05300::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a212c9ebefa488890a3963414d05300:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a212c9ebefa488890a3963414d05300" class="color" data-tooltip="RGBA: 10, 136, 186, 1.0
   HEXA: #0a88baff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dff2a3524c9540c79048573e05c31d8f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 211, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dff2a3524c9540c79048573e05c31d8f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dff2a3524c9540c79048573e05c31d8f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dff2a3524c9540c79048573e05c31d8f" class="color" data-tooltip="RGBA: 242, 211, 56, 1.0
   HEXA: #f2d338ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f6ab7175971c4635acc1473ecf2c5e7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 143, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f6ab7175971c4635acc1473ecf2c5e7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f6ab7175971c4635acc1473ecf2c5e7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f6ab7175971c4635acc1473ecf2c5e7b" class="color" data-tooltip="RGBA: 242, 143, 56, 1.0
   HEXA: #f28f38ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3e2896a29cd40f5ae2e1aa5518baf6d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 30, 30, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3e2896a29cd40f5ae2e1aa5518baf6d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3e2896a29cd40f5ae2e1aa5518baf6d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3e2896a29cd40f5ae2e1aa5518baf6d" class="color" data-tooltip="RGBA: 217, 30, 30, 1.0
   HEXA: #d91e1eff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_78a7238816fa4e3fb747009c0c0345ed {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_78a7238816fa4e3fb747009c0c0345ed div { flex: 1 1 0; }
           #_78a7238816fa4e3fb747009c0c0345ed div.color { width: 100%; height: 100%; }
           #_78a7238816fa4e3fb747009c0c0345ed div.cmap { width: 100%; height: auto; }
           #_78a7238816fa4e3fb747009c0c0345ed div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Rainbow</strong>
       
       <div id="_78a7238816fa4e3fb747009c0c0345ed" class="color-map">
           
                           <div>
                   <style>
       #_36974199f0fb4a0b8e74fa71c548e75d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 0, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36974199f0fb4a0b8e74fa71c548e75d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36974199f0fb4a0b8e74fa71c548e75d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36974199f0fb4a0b8e74fa71c548e75d" class="color" data-tooltip="RGBA: 150, 0, 90, 1.0
   HEXA: #96005aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bbdbd212403f4784b7846f491d6de25f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bbdbd212403f4784b7846f491d6de25f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bbdbd212403f4784b7846f491d6de25f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bbdbd212403f4784b7846f491d6de25f" class="color" data-tooltip="RGBA: 0, 0, 200, 1.0
   HEXA: #0000c8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_805701a33a19418e96080ec63cb33ed7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 25, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_805701a33a19418e96080ec63cb33ed7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_805701a33a19418e96080ec63cb33ed7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_805701a33a19418e96080ec63cb33ed7" class="color" data-tooltip="RGBA: 0, 25, 255, 1.0
   HEXA: #0019ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b04b1236927f45449c8a73634eb045dc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 152, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b04b1236927f45449c8a73634eb045dc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b04b1236927f45449c8a73634eb045dc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b04b1236927f45449c8a73634eb045dc" class="color" data-tooltip="RGBA: 0, 152, 255, 1.0
   HEXA: #0098ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0a719c2b486041bf868316e01c80ad91 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 255, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0a719c2b486041bf868316e01c80ad91::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0a719c2b486041bf868316e01c80ad91:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0a719c2b486041bf868316e01c80ad91" class="color" data-tooltip="RGBA: 44, 255, 150, 1.0
   HEXA: #2cff96ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_605769615bd64dc6a88f6f612fe5b33a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 255, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_605769615bd64dc6a88f6f612fe5b33a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_605769615bd64dc6a88f6f612fe5b33a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_605769615bd64dc6a88f6f612fe5b33a" class="color" data-tooltip="RGBA: 151, 255, 0, 1.0
   HEXA: #97ff00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6a73a477d824cb896a677a5952e21e9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 234, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6a73a477d824cb896a677a5952e21e9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6a73a477d824cb896a677a5952e21e9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6a73a477d824cb896a677a5952e21e9" class="color" data-tooltip="RGBA: 255, 234, 0, 1.0
   HEXA: #ffea00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c0c15e00a5b40a682c333790e157d12 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 111, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c0c15e00a5b40a682c333790e157d12::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c0c15e00a5b40a682c333790e157d12:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c0c15e00a5b40a682c333790e157d12" class="color" data-tooltip="RGBA: 255, 111, 0, 1.0
   HEXA: #ff6f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2d4793c1f60d45108da758fa28323bdd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2d4793c1f60d45108da758fa28323bdd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2d4793c1f60d45108da758fa28323bdd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2d4793c1f60d45108da758fa28323bdd" class="color" data-tooltip="RGBA: 255, 0, 0, 1.0
   HEXA: #ff0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c6b31c3ab413493491d25c0441e8f29d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c6b31c3ab413493491d25c0441e8f29d div { flex: 1 1 0; }
           #_c6b31c3ab413493491d25c0441e8f29d div.color { width: 100%; height: 100%; }
           #_c6b31c3ab413493491d25c0441e8f29d div.cmap { width: 100%; height: auto; }
           #_c6b31c3ab413493491d25c0441e8f29d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Viridis</strong>
       
       <div id="_c6b31c3ab413493491d25c0441e8f29d" class="color-map">
           
                           <div>
                   <style>
       #_4629b42bcafb4dd7981d2e916ac0491a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 1, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4629b42bcafb4dd7981d2e916ac0491a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4629b42bcafb4dd7981d2e916ac0491a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4629b42bcafb4dd7981d2e916ac0491a" class="color" data-tooltip="RGBA: 68, 1, 84, 1.0
   HEXA: #440154ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f74e458fd7545c4bc52a5e5ade9d865 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(72, 24, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f74e458fd7545c4bc52a5e5ade9d865::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f74e458fd7545c4bc52a5e5ade9d865:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f74e458fd7545c4bc52a5e5ade9d865" class="color" data-tooltip="RGBA: 72, 24, 106, 1.0
   HEXA: #48186aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1e39798efb9e41aabccd6d33a00aff63 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(71, 45, 123, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e39798efb9e41aabccd6d33a00aff63::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e39798efb9e41aabccd6d33a00aff63:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e39798efb9e41aabccd6d33a00aff63" class="color" data-tooltip="RGBA: 71, 45, 123, 1.0
   HEXA: #472d7bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9121beb943a44f84b01db844650e902d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 64, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9121beb943a44f84b01db844650e902d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9121beb943a44f84b01db844650e902d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9121beb943a44f84b01db844650e902d" class="color" data-tooltip="RGBA: 66, 64, 134, 1.0
   HEXA: #424086ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa4e43fd16d24b109ee86b8e9318111f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 82, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa4e43fd16d24b109ee86b8e9318111f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa4e43fd16d24b109ee86b8e9318111f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa4e43fd16d24b109ee86b8e9318111f" class="color" data-tooltip="RGBA: 59, 82, 139, 1.0
   HEXA: #3b528bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac4be7d3364347eb970e8161b728510e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 99, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac4be7d3364347eb970e8161b728510e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac4be7d3364347eb970e8161b728510e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac4be7d3364347eb970e8161b728510e" class="color" data-tooltip="RGBA: 51, 99, 141, 1.0
   HEXA: #33638dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_04b057db5ba744db8db2ab8948a068fc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 114, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_04b057db5ba744db8db2ab8948a068fc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_04b057db5ba744db8db2ab8948a068fc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_04b057db5ba744db8db2ab8948a068fc" class="color" data-tooltip="RGBA: 44, 114, 142, 1.0
   HEXA: #2c728eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2dd85e14d310403193e953eba4336404 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 130, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2dd85e14d310403193e953eba4336404::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2dd85e14d310403193e953eba4336404:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2dd85e14d310403193e953eba4336404" class="color" data-tooltip="RGBA: 38, 130, 142, 1.0
   HEXA: #26828eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_656ef7e75b634aa99fdb1a92870c1519 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 145, 140, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_656ef7e75b634aa99fdb1a92870c1519::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_656ef7e75b634aa99fdb1a92870c1519:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_656ef7e75b634aa99fdb1a92870c1519" class="color" data-tooltip="RGBA: 33, 145, 140, 1.0
   HEXA: #21918cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e06f4667f7dd4f909223a039005a3592 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 160, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e06f4667f7dd4f909223a039005a3592::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e06f4667f7dd4f909223a039005a3592:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e06f4667f7dd4f909223a039005a3592" class="color" data-tooltip="RGBA: 31, 160, 136, 1.0
   HEXA: #1fa088ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d436dffe558f4059b4c969b842d8affc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 174, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d436dffe558f4059b4c969b842d8affc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d436dffe558f4059b4c969b842d8affc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d436dffe558f4059b4c969b842d8affc" class="color" data-tooltip="RGBA: 40, 174, 128, 1.0
   HEXA: #28ae80ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_056faa8cbcdd46d68734bae6ff5f1bd3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 188, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_056faa8cbcdd46d68734bae6ff5f1bd3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_056faa8cbcdd46d68734bae6ff5f1bd3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_056faa8cbcdd46d68734bae6ff5f1bd3" class="color" data-tooltip="RGBA: 63, 188, 115, 1.0
   HEXA: #3fbc73ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_19fec63fba704c699f9378b617521707 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 201, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19fec63fba704c699f9378b617521707::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19fec63fba704c699f9378b617521707:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19fec63fba704c699f9378b617521707" class="color" data-tooltip="RGBA: 94, 201, 98, 1.0
   HEXA: #5ec962ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46104b97e8ae4249b9659f86fbe82bc2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(132, 212, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46104b97e8ae4249b9659f86fbe82bc2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46104b97e8ae4249b9659f86fbe82bc2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46104b97e8ae4249b9659f86fbe82bc2" class="color" data-tooltip="RGBA: 132, 212, 75, 1.0
   HEXA: #84d44bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_32e43c100c39401a9aa0cd2ff8be3f66 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 220, 48, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_32e43c100c39401a9aa0cd2ff8be3f66::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_32e43c100c39401a9aa0cd2ff8be3f66:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_32e43c100c39401a9aa0cd2ff8be3f66" class="color" data-tooltip="RGBA: 173, 220, 48, 1.0
   HEXA: #addc30ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8048bd39b02145449c21a6a311432596 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 226, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8048bd39b02145449c21a6a311432596::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8048bd39b02145449c21a6a311432596:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8048bd39b02145449c21a6a311432596" class="color" data-tooltip="RGBA: 216, 226, 25, 1.0
   HEXA: #d8e219ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1795caf5bdf4ff092771558b251f70f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 231, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1795caf5bdf4ff092771558b251f70f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1795caf5bdf4ff092771558b251f70f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1795caf5bdf4ff092771558b251f70f" class="color" data-tooltip="RGBA: 253, 231, 37, 1.0
   HEXA: #fde725ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_fdf892b6b4dc44d5887dfeae64b8cae5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_fdf892b6b4dc44d5887dfeae64b8cae5 div { flex: 1 1 0; }
           #_fdf892b6b4dc44d5887dfeae64b8cae5 div.color { width: 100%; height: 100%; }
           #_fdf892b6b4dc44d5887dfeae64b8cae5 div.cmap { width: 100%; height: auto; }
           #_fdf892b6b4dc44d5887dfeae64b8cae5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>turbid</strong>
       
       <div id="_fdf892b6b4dc44d5887dfeae64b8cae5" class="color-map">
           
                           <div>
                   <style>
       #_03218aaef69c405088be3e1e8a092425 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 245, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_03218aaef69c405088be3e1e8a092425::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_03218aaef69c405088be3e1e8a092425:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_03218aaef69c405088be3e1e8a092425" class="color" data-tooltip="RGBA: 232, 245, 171, 1.0
   HEXA: #e8f5abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_37aabee756574edfb6ffd80135da55d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 219, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_37aabee756574edfb6ffd80135da55d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_37aabee756574edfb6ffd80135da55d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_37aabee756574edfb6ffd80135da55d8" class="color" data-tooltip="RGBA: 220, 219, 137, 1.0
   HEXA: #dcdb89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b67a47146c44752b8a4a483a2572d99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 193, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b67a47146c44752b8a4a483a2572d99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b67a47146c44752b8a4a483a2572d99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b67a47146c44752b8a4a483a2572d99" class="color" data-tooltip="RGBA: 209, 193, 107, 1.0
   HEXA: #d1c16bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8812bd3957cb4dafa2d1b6564262c2b8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 168, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8812bd3957cb4dafa2d1b6564262c2b8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8812bd3957cb4dafa2d1b6564262c2b8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8812bd3957cb4dafa2d1b6564262c2b8" class="color" data-tooltip="RGBA: 199, 168, 83, 1.0
   HEXA: #c7a853ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ed368c75f61a416a904e4bf2ec8bcd91 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 143, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ed368c75f61a416a904e4bf2ec8bcd91::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ed368c75f61a416a904e4bf2ec8bcd91:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ed368c75f61a416a904e4bf2ec8bcd91" class="color" data-tooltip="RGBA: 186, 143, 66, 1.0
   HEXA: #ba8f42ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_36f0d30353f34e4483c4c103249e1905 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 121, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36f0d30353f34e4483c4c103249e1905::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36f0d30353f34e4483c4c103249e1905:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36f0d30353f34e4483c4c103249e1905" class="color" data-tooltip="RGBA: 170, 121, 60, 1.0
   HEXA: #aa793cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d76b1d18255b4a9596751b06039b6150 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 103, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d76b1d18255b4a9596751b06039b6150::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d76b1d18255b4a9596751b06039b6150:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d76b1d18255b4a9596751b06039b6150" class="color" data-tooltip="RGBA: 151, 103, 58, 1.0
   HEXA: #97673aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1097dbed09c74f5fa46af22c812a153f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 87, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1097dbed09c74f5fa46af22c812a153f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1097dbed09c74f5fa46af22c812a153f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1097dbed09c74f5fa46af22c812a153f" class="color" data-tooltip="RGBA: 129, 87, 56, 1.0
   HEXA: #815738ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9ccb0076cc74f23a27a654dc15ba744 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 72, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9ccb0076cc74f23a27a654dc15ba744::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9ccb0076cc74f23a27a654dc15ba744:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9ccb0076cc74f23a27a654dc15ba744" class="color" data-tooltip="RGBA: 104, 72, 53, 1.0
   HEXA: #684835ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_452570e099f94bc1af7e418b04c8253a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 59, 46, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_452570e099f94bc1af7e418b04c8253a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_452570e099f94bc1af7e418b04c8253a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_452570e099f94bc1af7e418b04c8253a" class="color" data-tooltip="RGBA: 80, 59, 46, 1.0
   HEXA: #503b2eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c059eaf6ff74af9b2cce942c1944d12 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 45, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c059eaf6ff74af9b2cce942c1944d12::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c059eaf6ff74af9b2cce942c1944d12:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c059eaf6ff74af9b2cce942c1944d12" class="color" data-tooltip="RGBA: 57, 45, 37, 1.0
   HEXA: #392d25ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b4bf527aa9654323b651856b9bbdac2d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 30, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b4bf527aa9654323b651856b9bbdac2d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b4bf527aa9654323b651856b9bbdac2d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b4bf527aa9654323b651856b9bbdac2d" class="color" data-tooltip="RGBA: 34, 30, 27, 1.0
   HEXA: #221e1bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9a75f43553af4535b9579ab700bfdd9d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9a75f43553af4535b9579ab700bfdd9d div { flex: 1 1 0; }
           #_9a75f43553af4535b9579ab700bfdd9d div.color { width: 100%; height: 100%; }
           #_9a75f43553af4535b9579ab700bfdd9d div.cmap { width: 100%; height: auto; }
           #_9a75f43553af4535b9579ab700bfdd9d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>thermal</strong>
       
       <div id="_9a75f43553af4535b9579ab700bfdd9d" class="color-map">
           
                           <div>
                   <style>
       #_68710c9399f44ed483f3fe47b258702b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(3, 35, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68710c9399f44ed483f3fe47b258702b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68710c9399f44ed483f3fe47b258702b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68710c9399f44ed483f3fe47b258702b" class="color" data-tooltip="RGBA: 3, 35, 51, 1.0
   HEXA: #032333ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e387e37f9f694e6ab39536bfd6fb1cd3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 48, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e387e37f9f694e6ab39536bfd6fb1cd3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e387e37f9f694e6ab39536bfd6fb1cd3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e387e37f9f694e6ab39536bfd6fb1cd3" class="color" data-tooltip="RGBA: 13, 48, 100, 1.0
   HEXA: #0d3064ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_06855190d0354a7f95c11c0b1d95fbfd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 50, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_06855190d0354a7f95c11c0b1d95fbfd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_06855190d0354a7f95c11c0b1d95fbfd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_06855190d0354a7f95c11c0b1d95fbfd" class="color" data-tooltip="RGBA: 53, 50, 155, 1.0
   HEXA: #35329bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5aa24d3325244750abb9aa7a4e0aac32 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(93, 62, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5aa24d3325244750abb9aa7a4e0aac32::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5aa24d3325244750abb9aa7a4e0aac32:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5aa24d3325244750abb9aa7a4e0aac32" class="color" data-tooltip="RGBA: 93, 62, 153, 1.0
   HEXA: #5d3e99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d30b0d44379547e5a77666a3835ae3ce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(126, 77, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d30b0d44379547e5a77666a3835ae3ce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d30b0d44379547e5a77666a3835ae3ce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d30b0d44379547e5a77666a3835ae3ce" class="color" data-tooltip="RGBA: 126, 77, 143, 1.0
   HEXA: #7e4d8fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d892fd6f597a47dda48205d97a6d6cb6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 89, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d892fd6f597a47dda48205d97a6d6cb6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d892fd6f597a47dda48205d97a6d6cb6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d892fd6f597a47dda48205d97a6d6cb6" class="color" data-tooltip="RGBA: 158, 89, 135, 1.0
   HEXA: #9e5987ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_96f7fc08e265432b9f25e4dc7b963f3e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 100, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_96f7fc08e265432b9f25e4dc7b963f3e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_96f7fc08e265432b9f25e4dc7b963f3e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_96f7fc08e265432b9f25e4dc7b963f3e" class="color" data-tooltip="RGBA: 193, 100, 121, 1.0
   HEXA: #c16479ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea1c465b58484c2ea8a31372902a1683 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 113, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea1c465b58484c2ea8a31372902a1683::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea1c465b58484c2ea8a31372902a1683:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea1c465b58484c2ea8a31372902a1683" class="color" data-tooltip="RGBA: 225, 113, 97, 1.0
   HEXA: #e17161ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b530a1853aec45b9a10ebd198af186b9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 139, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b530a1853aec45b9a10ebd198af186b9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b530a1853aec45b9a10ebd198af186b9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b530a1853aec45b9a10ebd198af186b9" class="color" data-tooltip="RGBA: 246, 139, 69, 1.0
   HEXA: #f68b45ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2a103a94d6e74fc88bd64130456b414f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 173, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2a103a94d6e74fc88bd64130456b414f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2a103a94d6e74fc88bd64130456b414f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2a103a94d6e74fc88bd64130456b414f" class="color" data-tooltip="RGBA: 251, 173, 60, 1.0
   HEXA: #fbad3cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_181c5f1efe7947348577406a1c63ff9c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 211, 70, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_181c5f1efe7947348577406a1c63ff9c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_181c5f1efe7947348577406a1c63ff9c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_181c5f1efe7947348577406a1c63ff9c" class="color" data-tooltip="RGBA: 246, 211, 70, 1.0
   HEXA: #f6d346ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3ef6358c81748679b754f44f6681fb5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 250, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3ef6358c81748679b754f44f6681fb5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3ef6358c81748679b754f44f6681fb5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3ef6358c81748679b754f44f6681fb5" class="color" data-tooltip="RGBA: 231, 250, 90, 1.0
   HEXA: #e7fa5aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b529bc07724f40d0bd6d5f120814e713 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b529bc07724f40d0bd6d5f120814e713 div { flex: 1 1 0; }
           #_b529bc07724f40d0bd6d5f120814e713 div.color { width: 100%; height: 100%; }
           #_b529bc07724f40d0bd6d5f120814e713 div.cmap { width: 100%; height: auto; }
           #_b529bc07724f40d0bd6d5f120814e713 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>haline</strong>
       
       <div id="_b529bc07724f40d0bd6d5f120814e713" class="color-map">
           
                           <div>
                   <style>
       #_939e36877a824e189d8cc126dfcba3d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 24, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_939e36877a824e189d8cc126dfcba3d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_939e36877a824e189d8cc126dfcba3d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_939e36877a824e189d8cc126dfcba3d8" class="color" data-tooltip="RGBA: 41, 24, 107, 1.0
   HEXA: #29186bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef196e5734974caa8b7118069af5ae6e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 35, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef196e5734974caa8b7118069af5ae6e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef196e5734974caa8b7118069af5ae6e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef196e5734974caa8b7118069af5ae6e" class="color" data-tooltip="RGBA: 42, 35, 160, 1.0
   HEXA: #2a23a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0412b7ff6d84ac3897270a2da1c3ff7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 71, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0412b7ff6d84ac3897270a2da1c3ff7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0412b7ff6d84ac3897270a2da1c3ff7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0412b7ff6d84ac3897270a2da1c3ff7" class="color" data-tooltip="RGBA: 15, 71, 153, 1.0
   HEXA: #0f4799ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_35a743457f1f45929f7faa40e4ac02d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 95, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_35a743457f1f45929f7faa40e4ac02d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_35a743457f1f45929f7faa40e4ac02d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_35a743457f1f45929f7faa40e4ac02d9" class="color" data-tooltip="RGBA: 18, 95, 142, 1.0
   HEXA: #125f8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_479565d9199044c78c04aea4c9b6c1f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 116, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_479565d9199044c78c04aea4c9b6c1f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_479565d9199044c78c04aea4c9b6c1f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_479565d9199044c78c04aea4c9b6c1f8" class="color" data-tooltip="RGBA: 38, 116, 137, 1.0
   HEXA: #267489ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_602224eef17946439e44b75ac4235599 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 136, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_602224eef17946439e44b75ac4235599::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_602224eef17946439e44b75ac4235599:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_602224eef17946439e44b75ac4235599" class="color" data-tooltip="RGBA: 53, 136, 136, 1.0
   HEXA: #358888ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_26d19680d1ab408eb565dcdcd90c090c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 157, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26d19680d1ab408eb565dcdcd90c090c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26d19680d1ab408eb565dcdcd90c090c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26d19680d1ab408eb565dcdcd90c090c" class="color" data-tooltip="RGBA: 65, 157, 133, 1.0
   HEXA: #419d85ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2491513ef6cd4fc88a722051b104d5d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(81, 178, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2491513ef6cd4fc88a722051b104d5d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2491513ef6cd4fc88a722051b104d5d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2491513ef6cd4fc88a722051b104d5d2" class="color" data-tooltip="RGBA: 81, 178, 124, 1.0
   HEXA: #51b27cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_efeae177e841412e8bcdb6ef35cc2531 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 198, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_efeae177e841412e8bcdb6ef35cc2531::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_efeae177e841412e8bcdb6ef35cc2531:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_efeae177e841412e8bcdb6ef35cc2531" class="color" data-tooltip="RGBA: 111, 198, 107, 1.0
   HEXA: #6fc66bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_666125b1139249d7ae62e66026fc96a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 214, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_666125b1139249d7ae62e66026fc96a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_666125b1139249d7ae62e66026fc96a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_666125b1139249d7ae62e66026fc96a3" class="color" data-tooltip="RGBA: 160, 214, 91, 1.0
   HEXA: #a0d65bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef2948783e6f473b8d4c6a8ea1cfae9c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 225, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef2948783e6f473b8d4c6a8ea1cfae9c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef2948783e6f473b8d4c6a8ea1cfae9c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef2948783e6f473b8d4c6a8ea1cfae9c" class="color" data-tooltip="RGBA: 212, 225, 112, 1.0
   HEXA: #d4e170ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_22aee4a33dbe43e58517504797d8d39b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 238, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22aee4a33dbe43e58517504797d8d39b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22aee4a33dbe43e58517504797d8d39b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22aee4a33dbe43e58517504797d8d39b" class="color" data-tooltip="RGBA: 253, 238, 153, 1.0
   HEXA: #fdee99ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_58a57afccfd9488db00ccf0789b36113 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_58a57afccfd9488db00ccf0789b36113 div { flex: 1 1 0; }
           #_58a57afccfd9488db00ccf0789b36113 div.color { width: 100%; height: 100%; }
           #_58a57afccfd9488db00ccf0789b36113 div.cmap { width: 100%; height: auto; }
           #_58a57afccfd9488db00ccf0789b36113 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>solar</strong>
       
       <div id="_58a57afccfd9488db00ccf0789b36113" class="color-map">
           
                           <div>
                   <style>
       #_e532aacadc1c4a2ca8726ad7d0abe9d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 19, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e532aacadc1c4a2ca8726ad7d0abe9d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e532aacadc1c4a2ca8726ad7d0abe9d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e532aacadc1c4a2ca8726ad7d0abe9d4" class="color" data-tooltip="RGBA: 51, 19, 23, 1.0
   HEXA: #331317ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bfb6261d9dbb4f77a45627d276108851 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(79, 28, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bfb6261d9dbb4f77a45627d276108851::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bfb6261d9dbb4f77a45627d276108851:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bfb6261d9dbb4f77a45627d276108851" class="color" data-tooltip="RGBA: 79, 28, 33, 1.0
   HEXA: #4f1c21ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97c175b8fe0a4034946a3f756320aa46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 36, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97c175b8fe0a4034946a3f756320aa46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97c175b8fe0a4034946a3f756320aa46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97c175b8fe0a4034946a3f756320aa46" class="color" data-tooltip="RGBA: 108, 36, 36, 1.0
   HEXA: #6c2424ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_098f0faf26094fadbf1770ad2a9a337c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 47, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_098f0faf26094fadbf1770ad2a9a337c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_098f0faf26094fadbf1770ad2a9a337c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_098f0faf26094fadbf1770ad2a9a337c" class="color" data-tooltip="RGBA: 135, 47, 32, 1.0
   HEXA: #872f20ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f139ccdd40e74acdb477072036b01846 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(157, 66, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f139ccdd40e74acdb477072036b01846::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f139ccdd40e74acdb477072036b01846:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f139ccdd40e74acdb477072036b01846" class="color" data-tooltip="RGBA: 157, 66, 25, 1.0
   HEXA: #9d4219ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1e98924dcf2f4edf9563b931ec52a39d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 88, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e98924dcf2f4edf9563b931ec52a39d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e98924dcf2f4edf9563b931ec52a39d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e98924dcf2f4edf9563b931ec52a39d" class="color" data-tooltip="RGBA: 174, 88, 20, 1.0
   HEXA: #ae5814ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8414948c3bcf4c16bba842762fb8be4c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 111, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8414948c3bcf4c16bba842762fb8be4c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8414948c3bcf4c16bba842762fb8be4c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8414948c3bcf4c16bba842762fb8be4c" class="color" data-tooltip="RGBA: 188, 111, 19, 1.0
   HEXA: #bc6f13ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1c17e6b3e53346799a4ca8712e56b9e1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 137, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c17e6b3e53346799a4ca8712e56b9e1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c17e6b3e53346799a4ca8712e56b9e1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c17e6b3e53346799a4ca8712e56b9e1" class="color" data-tooltip="RGBA: 199, 137, 22, 1.0
   HEXA: #c78916ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8ba17d3e1aa14ff69c43d1aaee0c938d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 164, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8ba17d3e1aa14ff69c43d1aaee0c938d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8ba17d3e1aa14ff69c43d1aaee0c938d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8ba17d3e1aa14ff69c43d1aaee0c938d" class="color" data-tooltip="RGBA: 209, 164, 32, 1.0
   HEXA: #d1a420ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_78c7c48f877843199c6c02088d855530 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 192, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_78c7c48f877843199c6c02088d855530::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_78c7c48f877843199c6c02088d855530:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_78c7c48f877843199c6c02088d855530" class="color" data-tooltip="RGBA: 217, 192, 44, 1.0
   HEXA: #d9c02cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_da3275c15dba42f5a1f5a9fd50aa203c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 222, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_da3275c15dba42f5a1f5a9fd50aa203c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_da3275c15dba42f5a1f5a9fd50aa203c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_da3275c15dba42f5a1f5a9fd50aa203c" class="color" data-tooltip="RGBA: 222, 222, 59, 1.0
   HEXA: #dede3bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_98e6852ca9d646dcb38809a8f151327a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 253, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_98e6852ca9d646dcb38809a8f151327a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_98e6852ca9d646dcb38809a8f151327a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_98e6852ca9d646dcb38809a8f151327a" class="color" data-tooltip="RGBA: 224, 253, 74, 1.0
   HEXA: #e0fd4aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_bfc8fcf78c564d6fa63f6ea26a1fa129 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_bfc8fcf78c564d6fa63f6ea26a1fa129 div { flex: 1 1 0; }
           #_bfc8fcf78c564d6fa63f6ea26a1fa129 div.color { width: 100%; height: 100%; }
           #_bfc8fcf78c564d6fa63f6ea26a1fa129 div.cmap { width: 100%; height: auto; }
           #_bfc8fcf78c564d6fa63f6ea26a1fa129 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>ice</strong>
       
       <div id="_bfc8fcf78c564d6fa63f6ea26a1fa129" class="color-map">
           
                           <div>
                   <style>
       #_172ecb9b75ee4a2c9e92fea900ce889e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(3, 5, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_172ecb9b75ee4a2c9e92fea900ce889e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_172ecb9b75ee4a2c9e92fea900ce889e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_172ecb9b75ee4a2c9e92fea900ce889e" class="color" data-tooltip="RGBA: 3, 5, 18, 1.0
   HEXA: #030512ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e70dbd47b0ff49799b97b12f9f27808c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 25, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e70dbd47b0ff49799b97b12f9f27808c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e70dbd47b0ff49799b97b12f9f27808c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e70dbd47b0ff49799b97b12f9f27808c" class="color" data-tooltip="RGBA: 25, 25, 51, 1.0
   HEXA: #191933ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3844f063721f40fb98ee55b5b1fdd296 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 42, 87, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3844f063721f40fb98ee55b5b1fdd296::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3844f063721f40fb98ee55b5b1fdd296:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3844f063721f40fb98ee55b5b1fdd296" class="color" data-tooltip="RGBA: 44, 42, 87, 1.0
   HEXA: #2c2a57ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7932b10ee05049b9bfe84241920ab790 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 60, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7932b10ee05049b9bfe84241920ab790::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7932b10ee05049b9bfe84241920ab790:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7932b10ee05049b9bfe84241920ab790" class="color" data-tooltip="RGBA: 58, 60, 125, 1.0
   HEXA: #3a3c7dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9f7cd0b33bfd402882bcc249d10c887a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 83, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9f7cd0b33bfd402882bcc249d10c887a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9f7cd0b33bfd402882bcc249d10c887a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9f7cd0b33bfd402882bcc249d10c887a" class="color" data-tooltip="RGBA: 62, 83, 160, 1.0
   HEXA: #3e53a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f126e099f85644e8adae62039d964f67 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 109, 178, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f126e099f85644e8adae62039d964f67::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f126e099f85644e8adae62039d964f67:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f126e099f85644e8adae62039d964f67" class="color" data-tooltip="RGBA: 62, 109, 178, 1.0
   HEXA: #3e6db2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e18f5fcc58674a02b0955b4a4559fb7f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(72, 134, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e18f5fcc58674a02b0955b4a4559fb7f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e18f5fcc58674a02b0955b4a4559fb7f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e18f5fcc58674a02b0955b4a4559fb7f" class="color" data-tooltip="RGBA: 72, 134, 187, 1.0
   HEXA: #4886bbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8828cbb066f54593bdd373d4849bc66e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 159, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8828cbb066f54593bdd373d4849bc66e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8828cbb066f54593bdd373d4849bc66e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8828cbb066f54593bdd373d4849bc66e" class="color" data-tooltip="RGBA: 89, 159, 196, 1.0
   HEXA: #599fc4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be066c8987b74fc1957199ceaaa718cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 184, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be066c8987b74fc1957199ceaaa718cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be066c8987b74fc1957199ceaaa718cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be066c8987b74fc1957199ceaaa718cc" class="color" data-tooltip="RGBA: 114, 184, 205, 1.0
   HEXA: #72b8cdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9365b49c9842408c946fa37f90954e47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(149, 207, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9365b49c9842408c946fa37f90954e47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9365b49c9842408c946fa37f90954e47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9365b49c9842408c946fa37f90954e47" class="color" data-tooltip="RGBA: 149, 207, 216, 1.0
   HEXA: #95cfd8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8551ceb0433b4049a582af3e0a9c890b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 229, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8551ceb0433b4049a582af3e0a9c890b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8551ceb0433b4049a582af3e0a9c890b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8551ceb0433b4049a582af3e0a9c890b" class="color" data-tooltip="RGBA: 192, 229, 232, 1.0
   HEXA: #c0e5e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a492df9e19f3424cbb930cd39375d47f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 252, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a492df9e19f3424cbb930cd39375d47f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a492df9e19f3424cbb930cd39375d47f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a492df9e19f3424cbb930cd39375d47f" class="color" data-tooltip="RGBA: 234, 252, 253, 1.0
   HEXA: #eafcfdff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_04beff4ff2904eb8b450a1bcf6f51fba {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_04beff4ff2904eb8b450a1bcf6f51fba div { flex: 1 1 0; }
           #_04beff4ff2904eb8b450a1bcf6f51fba div.color { width: 100%; height: 100%; }
           #_04beff4ff2904eb8b450a1bcf6f51fba div.cmap { width: 100%; height: auto; }
           #_04beff4ff2904eb8b450a1bcf6f51fba div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>gray</strong>
       
       <div id="_04beff4ff2904eb8b450a1bcf6f51fba" class="color-map">
           
                           <div>
                   <style>
       #_1f1429bdde5544aba8e7ccdfcb09a5a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f1429bdde5544aba8e7ccdfcb09a5a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f1429bdde5544aba8e7ccdfcb09a5a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f1429bdde5544aba8e7ccdfcb09a5a6" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_35685de1edf149a988d66e1e2663c392 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 16, 16, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_35685de1edf149a988d66e1e2663c392::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_35685de1edf149a988d66e1e2663c392:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_35685de1edf149a988d66e1e2663c392" class="color" data-tooltip="RGBA: 16, 16, 16, 1.0
   HEXA: #101010ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_187c5aab79d54539b5a65b497a30b60d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 38, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_187c5aab79d54539b5a65b497a30b60d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_187c5aab79d54539b5a65b497a30b60d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_187c5aab79d54539b5a65b497a30b60d" class="color" data-tooltip="RGBA: 38, 38, 38, 1.0
   HEXA: #262626ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7728f1a4edaf4cb09de29ad5cdb0d177 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 59, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7728f1a4edaf4cb09de29ad5cdb0d177::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7728f1a4edaf4cb09de29ad5cdb0d177:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7728f1a4edaf4cb09de29ad5cdb0d177" class="color" data-tooltip="RGBA: 59, 59, 59, 1.0
   HEXA: #3b3b3bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_83ebb8b7f9fa4915bbd353b8359386dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(81, 80, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_83ebb8b7f9fa4915bbd353b8359386dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_83ebb8b7f9fa4915bbd353b8359386dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_83ebb8b7f9fa4915bbd353b8359386dd" class="color" data-tooltip="RGBA: 81, 80, 80, 1.0
   HEXA: #515050ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2cdc051e4fbe4c77b9e0cf74fd8d1245 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 101, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2cdc051e4fbe4c77b9e0cf74fd8d1245::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2cdc051e4fbe4c77b9e0cf74fd8d1245:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2cdc051e4fbe4c77b9e0cf74fd8d1245" class="color" data-tooltip="RGBA: 102, 101, 101, 1.0
   HEXA: #666565ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2152f1aed7ea47398cff6385fb0ba621 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 123, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2152f1aed7ea47398cff6385fb0ba621::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2152f1aed7ea47398cff6385fb0ba621:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2152f1aed7ea47398cff6385fb0ba621" class="color" data-tooltip="RGBA: 124, 123, 122, 1.0
   HEXA: #7c7b7aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e5df289042d442aaa23af7cd004609f4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 146, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e5df289042d442aaa23af7cd004609f4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e5df289042d442aaa23af7cd004609f4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e5df289042d442aaa23af7cd004609f4" class="color" data-tooltip="RGBA: 146, 146, 145, 1.0
   HEXA: #929291ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2cba9a63134e44c49b04a4257b61cded { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 171, 170, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2cba9a63134e44c49b04a4257b61cded::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2cba9a63134e44c49b04a4257b61cded:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2cba9a63134e44c49b04a4257b61cded" class="color" data-tooltip="RGBA: 171, 171, 170, 1.0
   HEXA: #ababaaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9766c0ee39c44299b273ac8250c6f776 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 197, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9766c0ee39c44299b273ac8250c6f776::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9766c0ee39c44299b273ac8250c6f776:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9766c0ee39c44299b273ac8250c6f776" class="color" data-tooltip="RGBA: 197, 197, 195, 1.0
   HEXA: #c5c5c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_48dba13e56c446c0983e8562026995e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 224, 223, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48dba13e56c446c0983e8562026995e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48dba13e56c446c0983e8562026995e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48dba13e56c446c0983e8562026995e0" class="color" data-tooltip="RGBA: 224, 224, 223, 1.0
   HEXA: #e0e0dfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a1a5fcd9cb4342e6ad11e3c435e8748c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 254, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a1a5fcd9cb4342e6ad11e3c435e8748c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a1a5fcd9cb4342e6ad11e3c435e8748c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a1a5fcd9cb4342e6ad11e3c435e8748c" class="color" data-tooltip="RGBA: 254, 254, 253, 1.0
   HEXA: #fefefdff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_101421a591ae4b359eafe382a6227ec3 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_101421a591ae4b359eafe382a6227ec3 div { flex: 1 1 0; }
           #_101421a591ae4b359eafe382a6227ec3 div.color { width: 100%; height: 100%; }
           #_101421a591ae4b359eafe382a6227ec3 div.cmap { width: 100%; height: auto; }
           #_101421a591ae4b359eafe382a6227ec3 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>oxy</strong>
       
       <div id="_101421a591ae4b359eafe382a6227ec3" class="color-map">
           
                           <div>
                   <style>
       #_1d92fa113a7c43b497a7f3140766740d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 5, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d92fa113a7c43b497a7f3140766740d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d92fa113a7c43b497a7f3140766740d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d92fa113a7c43b497a7f3140766740d" class="color" data-tooltip="RGBA: 63, 5, 5, 1.0
   HEXA: #3f0505ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f01abc0babba48e390f69a99b8bb7013 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 6, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f01abc0babba48e390f69a99b8bb7013::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f01abc0babba48e390f69a99b8bb7013:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f01abc0babba48e390f69a99b8bb7013" class="color" data-tooltip="RGBA: 101, 6, 13, 1.0
   HEXA: #65060dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e38c12d9a15c4211ae9cc5a943402abd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(138, 17, 9, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e38c12d9a15c4211ae9cc5a943402abd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e38c12d9a15c4211ae9cc5a943402abd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e38c12d9a15c4211ae9cc5a943402abd" class="color" data-tooltip="RGBA: 138, 17, 9, 1.0
   HEXA: #8a1109ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60b0d00d9ca64190a22789fa11a4eeff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(96, 95, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60b0d00d9ca64190a22789fa11a4eeff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60b0d00d9ca64190a22789fa11a4eeff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60b0d00d9ca64190a22789fa11a4eeff" class="color" data-tooltip="RGBA: 96, 95, 95, 1.0
   HEXA: #605f5fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_744ef032dbce4d6ba5517777cb7bf1aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 118, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_744ef032dbce4d6ba5517777cb7bf1aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_744ef032dbce4d6ba5517777cb7bf1aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_744ef032dbce4d6ba5517777cb7bf1aa" class="color" data-tooltip="RGBA: 119, 118, 118, 1.0
   HEXA: #777676ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_142223e6e21a4e6b965dd57c5dfcf409 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 141, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_142223e6e21a4e6b965dd57c5dfcf409::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_142223e6e21a4e6b965dd57c5dfcf409:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_142223e6e21a4e6b965dd57c5dfcf409" class="color" data-tooltip="RGBA: 142, 141, 141, 1.0
   HEXA: #8e8d8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_162a76e30c8b4010a4bde593b4d99fc8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 166, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_162a76e30c8b4010a4bde593b4d99fc8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_162a76e30c8b4010a4bde593b4d99fc8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_162a76e30c8b4010a4bde593b4d99fc8" class="color" data-tooltip="RGBA: 166, 166, 165, 1.0
   HEXA: #a6a6a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb8a3db37de442a797828697904ac5d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 192, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb8a3db37de442a797828697904ac5d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb8a3db37de442a797828697904ac5d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb8a3db37de442a797828697904ac5d4" class="color" data-tooltip="RGBA: 193, 192, 191, 1.0
   HEXA: #c1c0bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f605efb726e84d82a2bc8f3ca4728bb9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 222, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f605efb726e84d82a2bc8f3ca4728bb9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f605efb726e84d82a2bc8f3ca4728bb9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f605efb726e84d82a2bc8f3ca4728bb9" class="color" data-tooltip="RGBA: 222, 222, 220, 1.0
   HEXA: #dededcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8054680027624904b43a09b11dc5320e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 248, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8054680027624904b43a09b11dc5320e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8054680027624904b43a09b11dc5320e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8054680027624904b43a09b11dc5320e" class="color" data-tooltip="RGBA: 239, 248, 90, 1.0
   HEXA: #eff85aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_79aa0b3fd90545f5b5f3843fcf1e45a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 210, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_79aa0b3fd90545f5b5f3843fcf1e45a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_79aa0b3fd90545f5b5f3843fcf1e45a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_79aa0b3fd90545f5b5f3843fcf1e45a2" class="color" data-tooltip="RGBA: 230, 210, 41, 1.0
   HEXA: #e6d229ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1aadcaa598734d7c9452bc2e95a98601 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 174, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1aadcaa598734d7c9452bc2e95a98601::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1aadcaa598734d7c9452bc2e95a98601:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1aadcaa598734d7c9452bc2e95a98601" class="color" data-tooltip="RGBA: 220, 174, 25, 1.0
   HEXA: #dcae19ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_3922a56cc2b64685a7c6a3e5bd3743c6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_3922a56cc2b64685a7c6a3e5bd3743c6 div { flex: 1 1 0; }
           #_3922a56cc2b64685a7c6a3e5bd3743c6 div.color { width: 100%; height: 100%; }
           #_3922a56cc2b64685a7c6a3e5bd3743c6 div.cmap { width: 100%; height: auto; }
           #_3922a56cc2b64685a7c6a3e5bd3743c6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>deep</strong>
       
       <div id="_3922a56cc2b64685a7c6a3e5bd3743c6" class="color-map">
           
                           <div>
                   <style>
       #_ff31f7e500a045798f201f9fa13e9c9a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 253, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ff31f7e500a045798f201f9fa13e9c9a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ff31f7e500a045798f201f9fa13e9c9a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ff31f7e500a045798f201f9fa13e9c9a" class="color" data-tooltip="RGBA: 253, 253, 204, 1.0
   HEXA: #fdfdccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0f432e3f5a24081976f7eeb2dee9098 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 236, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0f432e3f5a24081976f7eeb2dee9098::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0f432e3f5a24081976f7eeb2dee9098:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0f432e3f5a24081976f7eeb2dee9098" class="color" data-tooltip="RGBA: 206, 236, 179, 1.0
   HEXA: #ceecb3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_045b54d3dfde425782bae8e852dfde93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 219, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_045b54d3dfde425782bae8e852dfde93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_045b54d3dfde425782bae8e852dfde93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_045b54d3dfde425782bae8e852dfde93" class="color" data-tooltip="RGBA: 156, 219, 165, 1.0
   HEXA: #9cdba5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2d872ab571e94889b8cb255079933123 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 201, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2d872ab571e94889b8cb255079933123::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2d872ab571e94889b8cb255079933123:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2d872ab571e94889b8cb255079933123" class="color" data-tooltip="RGBA: 111, 201, 163, 1.0
   HEXA: #6fc9a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1a771e907e8449aa9478da100d580b18 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(86, 177, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a771e907e8449aa9478da100d580b18::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a771e907e8449aa9478da100d580b18:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a771e907e8449aa9478da100d580b18" class="color" data-tooltip="RGBA: 86, 177, 163, 1.0
   HEXA: #56b1a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c33ccb0a3bab41d489b03bfb8fd65cea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 153, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c33ccb0a3bab41d489b03bfb8fd65cea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c33ccb0a3bab41d489b03bfb8fd65cea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c33ccb0a3bab41d489b03bfb8fd65cea" class="color" data-tooltip="RGBA: 76, 153, 160, 1.0
   HEXA: #4c99a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_abd061d7483843618652d3d6cf92475c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 130, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_abd061d7483843618652d3d6cf92475c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_abd061d7483843618652d3d6cf92475c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_abd061d7483843618652d3d6cf92475c" class="color" data-tooltip="RGBA: 68, 130, 155, 1.0
   HEXA: #44829bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6685c78e39d646e29b494434b8db8d30 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 108, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6685c78e39d646e29b494434b8db8d30::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6685c78e39d646e29b494434b8db8d30:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6685c78e39d646e29b494434b8db8d30" class="color" data-tooltip="RGBA: 62, 108, 150, 1.0
   HEXA: #3e6c96ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0b14286e06cd46dc9ed6e6f40a6aeb8c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 82, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0b14286e06cd46dc9ed6e6f40a6aeb8c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0b14286e06cd46dc9ed6e6f40a6aeb8c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0b14286e06cd46dc9ed6e6f40a6aeb8c" class="color" data-tooltip="RGBA: 62, 82, 143, 1.0
   HEXA: #3e528fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3f5218dca3a94ccb9940a5e9a112f127 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 60, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3f5218dca3a94ccb9940a5e9a112f127::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3f5218dca3a94ccb9940a5e9a112f127:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3f5218dca3a94ccb9940a5e9a112f127" class="color" data-tooltip="RGBA: 64, 60, 115, 1.0
   HEXA: #403c73ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4300dec31bac45a5bfbbd4c6627ae0c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 43, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4300dec31bac45a5bfbbd4c6627ae0c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4300dec31bac45a5bfbbd4c6627ae0c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4300dec31bac45a5bfbbd4c6627ae0c6" class="color" data-tooltip="RGBA: 54, 43, 77, 1.0
   HEXA: #362b4dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c6b8a50d1f14e0eae328b0659e3d124 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 26, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c6b8a50d1f14e0eae328b0659e3d124::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c6b8a50d1f14e0eae328b0659e3d124:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c6b8a50d1f14e0eae328b0659e3d124" class="color" data-tooltip="RGBA: 39, 26, 44, 1.0
   HEXA: #271a2cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a70cd1eac28b465ba33dd2a7d69cbc42 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a70cd1eac28b465ba33dd2a7d69cbc42 div { flex: 1 1 0; }
           #_a70cd1eac28b465ba33dd2a7d69cbc42 div.color { width: 100%; height: 100%; }
           #_a70cd1eac28b465ba33dd2a7d69cbc42 div.cmap { width: 100%; height: auto; }
           #_a70cd1eac28b465ba33dd2a7d69cbc42 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>dense</strong>
       
       <div id="_a70cd1eac28b465ba33dd2a7d69cbc42" class="color-map">
           
                           <div>
                   <style>
       #_12d8aa9e71cf4a998959a77ddc57f655 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 240, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_12d8aa9e71cf4a998959a77ddc57f655::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_12d8aa9e71cf4a998959a77ddc57f655:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_12d8aa9e71cf4a998959a77ddc57f655" class="color" data-tooltip="RGBA: 230, 240, 240, 1.0
   HEXA: #e6f0f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1b36b8b293e7485fa86a0e07dbe05a76 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 221, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1b36b8b293e7485fa86a0e07dbe05a76::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1b36b8b293e7485fa86a0e07dbe05a76:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1b36b8b293e7485fa86a0e07dbe05a76" class="color" data-tooltip="RGBA: 191, 221, 229, 1.0
   HEXA: #bfdde5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64ea19fc27e44483a101b5a0579c9fd4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 201, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64ea19fc27e44483a101b5a0579c9fd4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64ea19fc27e44483a101b5a0579c9fd4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64ea19fc27e44483a101b5a0579c9fd4" class="color" data-tooltip="RGBA: 156, 201, 226, 1.0
   HEXA: #9cc9e2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8cb5c0c431cb4299817a59462aa2b87d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 180, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8cb5c0c431cb4299817a59462aa2b87d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8cb5c0c431cb4299817a59462aa2b87d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8cb5c0c431cb4299817a59462aa2b87d" class="color" data-tooltip="RGBA: 129, 180, 227, 1.0
   HEXA: #81b4e3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_77c49b677da342b39f37c10b5a9a58de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 154, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_77c49b677da342b39f37c10b5a9a58de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_77c49b677da342b39f37c10b5a9a58de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_77c49b677da342b39f37c10b5a9a58de" class="color" data-tooltip="RGBA: 115, 154, 228, 1.0
   HEXA: #739ae4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_627031227d5046e48aa483e0dca3ed61 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 127, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_627031227d5046e48aa483e0dca3ed61::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_627031227d5046e48aa483e0dca3ed61:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_627031227d5046e48aa483e0dca3ed61" class="color" data-tooltip="RGBA: 117, 127, 221, 1.0
   HEXA: #757fddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4798131272b4141a003ca29ef018ea1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 100, 202, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4798131272b4141a003ca29ef018ea1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4798131272b4141a003ca29ef018ea1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4798131272b4141a003ca29ef018ea1" class="color" data-tooltip="RGBA: 120, 100, 202, 1.0
   HEXA: #7864caff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6efaf8adc6594bdc82d296fd7974c743 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 74, 175, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6efaf8adc6594bdc82d296fd7974c743::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6efaf8adc6594bdc82d296fd7974c743:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6efaf8adc6594bdc82d296fd7974c743" class="color" data-tooltip="RGBA: 119, 74, 175, 1.0
   HEXA: #774aafff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c8f0bc159c5b4fc3a8b81f06eb23a64d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(113, 50, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c8f0bc159c5b4fc3a8b81f06eb23a64d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c8f0bc159c5b4fc3a8b81f06eb23a64d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c8f0bc159c5b4fc3a8b81f06eb23a64d" class="color" data-tooltip="RGBA: 113, 50, 141, 1.0
   HEXA: #71328dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_43ff95ab5b6743358ab7b7f077a39824 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(100, 31, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_43ff95ab5b6743358ab7b7f077a39824::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_43ff95ab5b6743358ab7b7f077a39824:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_43ff95ab5b6743358ab7b7f077a39824" class="color" data-tooltip="RGBA: 100, 31, 104, 1.0
   HEXA: #641f68ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e56595c6f1ff4d56a365c15968ecf1ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 20, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e56595c6f1ff4d56a365c15968ecf1ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e56595c6f1ff4d56a365c15968ecf1ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e56595c6f1ff4d56a365c15968ecf1ee" class="color" data-tooltip="RGBA: 80, 20, 66, 1.0
   HEXA: #501442ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1ff387c38af4414a473d64ba143c209 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 14, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1ff387c38af4414a473d64ba143c209::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1ff387c38af4414a473d64ba143c209:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1ff387c38af4414a473d64ba143c209" class="color" data-tooltip="RGBA: 54, 14, 36, 1.0
   HEXA: #360e24ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_cb35a117b782454d9bf46e09d9026898 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_cb35a117b782454d9bf46e09d9026898 div { flex: 1 1 0; }
           #_cb35a117b782454d9bf46e09d9026898 div.color { width: 100%; height: 100%; }
           #_cb35a117b782454d9bf46e09d9026898 div.cmap { width: 100%; height: auto; }
           #_cb35a117b782454d9bf46e09d9026898 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>algae</strong>
       
       <div id="_cb35a117b782454d9bf46e09d9026898" class="color-map">
           
                           <div>
                   <style>
       #_1f663a851ff04cddb7536f3e1aa3b8e9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 249, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f663a851ff04cddb7536f3e1aa3b8e9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f663a851ff04cddb7536f3e1aa3b8e9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f663a851ff04cddb7536f3e1aa3b8e9" class="color" data-tooltip="RGBA: 214, 249, 207, 1.0
   HEXA: #d6f9cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_780d1b2a61a34799b734fd95cfa6ba8c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 228, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_780d1b2a61a34799b734fd95cfa6ba8c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_780d1b2a61a34799b734fd95cfa6ba8c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_780d1b2a61a34799b734fd95cfa6ba8c" class="color" data-tooltip="RGBA: 186, 228, 174, 1.0
   HEXA: #bae4aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_94815f6c6a8e415fb5eb3b63c447a95a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 209, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94815f6c6a8e415fb5eb3b63c447a95a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94815f6c6a8e415fb5eb3b63c447a95a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94815f6c6a8e415fb5eb3b63c447a95a" class="color" data-tooltip="RGBA: 156, 209, 143, 1.0
   HEXA: #9cd18fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c4204237b65249c0b4675034b8dd97aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 191, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c4204237b65249c0b4675034b8dd97aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c4204237b65249c0b4675034b8dd97aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c4204237b65249c0b4675034b8dd97aa" class="color" data-tooltip="RGBA: 124, 191, 115, 1.0
   HEXA: #7cbf73ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fecacdeb6b674c36a64d7ae3f4704e29 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(85, 174, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fecacdeb6b674c36a64d7ae3f4704e29::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fecacdeb6b674c36a64d7ae3f4704e29:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fecacdeb6b674c36a64d7ae3f4704e29" class="color" data-tooltip="RGBA: 85, 174, 91, 1.0
   HEXA: #55ae5bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ef34df08cf443a6a240148302ac5130 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 157, 81, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ef34df08cf443a6a240148302ac5130::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ef34df08cf443a6a240148302ac5130:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ef34df08cf443a6a240148302ac5130" class="color" data-tooltip="RGBA: 37, 157, 81, 1.0
   HEXA: #259d51ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9cf4067316ae4938b29ff23df0112878 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 138, 78, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9cf4067316ae4938b29ff23df0112878::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9cf4067316ae4938b29ff23df0112878:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9cf4067316ae4938b29ff23df0112878" class="color" data-tooltip="RGBA: 7, 138, 78, 1.0
   HEXA: #078a4eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_94f414e3d3b44e5fbdb9be94dece52cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 117, 71, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94f414e3d3b44e5fbdb9be94dece52cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94f414e3d3b44e5fbdb9be94dece52cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94f414e3d3b44e5fbdb9be94dece52cf" class="color" data-tooltip="RGBA: 13, 117, 71, 1.0
   HEXA: #0d7547ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_080e8369af964267be0547b6f191b842 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 95, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_080e8369af964267be0547b6f191b842::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_080e8369af964267be0547b6f191b842:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_080e8369af964267be0547b6f191b842" class="color" data-tooltip="RGBA: 23, 95, 61, 1.0
   HEXA: #175f3dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b7474208e5ab4a3bbe3ff976009ab1a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 75, 49, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b7474208e5ab4a3bbe3ff976009ab1a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b7474208e5ab4a3bbe3ff976009ab1a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b7474208e5ab4a3bbe3ff976009ab1a4" class="color" data-tooltip="RGBA: 25, 75, 49, 1.0
   HEXA: #194b31ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa7a94e0ae8b430bb317073c1cf671f4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 55, 35, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa7a94e0ae8b430bb317073c1cf671f4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa7a94e0ae8b430bb317073c1cf671f4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa7a94e0ae8b430bb317073c1cf671f4" class="color" data-tooltip="RGBA: 23, 55, 35, 1.0
   HEXA: #173723ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c2ed6cdff8554360a5a6432c5ab093ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 36, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c2ed6cdff8554360a5a6432c5ab093ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c2ed6cdff8554360a5a6432c5ab093ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c2ed6cdff8554360a5a6432c5ab093ab" class="color" data-tooltip="RGBA: 17, 36, 20, 1.0
   HEXA: #112414ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1b03a0f371384623ba8d72286bb762a0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1b03a0f371384623ba8d72286bb762a0 div { flex: 1 1 0; }
           #_1b03a0f371384623ba8d72286bb762a0 div.color { width: 100%; height: 100%; }
           #_1b03a0f371384623ba8d72286bb762a0 div.cmap { width: 100%; height: auto; }
           #_1b03a0f371384623ba8d72286bb762a0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>matter</strong>
       
       <div id="_1b03a0f371384623ba8d72286bb762a0" class="color-map">
           
                           <div>
                   <style>
       #_ae1cb5d2d111482dab100d866798eb09 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 237, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ae1cb5d2d111482dab100d866798eb09::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ae1cb5d2d111482dab100d866798eb09:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ae1cb5d2d111482dab100d866798eb09" class="color" data-tooltip="RGBA: 253, 237, 176, 1.0
   HEXA: #fdedb0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bbce05e2e34c4a85b6b7b6242a3a7b5b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 205, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bbce05e2e34c4a85b6b7b6242a3a7b5b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bbce05e2e34c4a85b6b7b6242a3a7b5b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bbce05e2e34c4a85b6b7b6242a3a7b5b" class="color" data-tooltip="RGBA: 250, 205, 145, 1.0
   HEXA: #facd91ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_67539204098248c89d5e25df756df63c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 173, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_67539204098248c89d5e25df756df63c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_67539204098248c89d5e25df756df63c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_67539204098248c89d5e25df756df63c" class="color" data-tooltip="RGBA: 246, 173, 119, 1.0
   HEXA: #f6ad77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e6cb49427c04d93ade2fd45a9a30d3f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 142, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e6cb49427c04d93ade2fd45a9a30d3f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e6cb49427c04d93ade2fd45a9a30d3f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e6cb49427c04d93ade2fd45a9a30d3f" class="color" data-tooltip="RGBA: 240, 142, 98, 1.0
   HEXA: #f08e62ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f15adb92746459cb1a4955f18bfec5e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 109, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f15adb92746459cb1a4955f18bfec5e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f15adb92746459cb1a4955f18bfec5e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f15adb92746459cb1a4955f18bfec5e" class="color" data-tooltip="RGBA: 231, 109, 84, 1.0
   HEXA: #e76d54ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e030698bae564f51896ab06ccd654cd3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 80, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e030698bae564f51896ab06ccd654cd3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e030698bae564f51896ab06ccd654cd3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e030698bae564f51896ab06ccd654cd3" class="color" data-tooltip="RGBA: 216, 80, 83, 1.0
   HEXA: #d85053ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46581b14e98c4b0abc7478bce6c3ee99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 56, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46581b14e98c4b0abc7478bce6c3ee99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46581b14e98c4b0abc7478bce6c3ee99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46581b14e98c4b0abc7478bce6c3ee99" class="color" data-tooltip="RGBA: 195, 56, 90, 1.0
   HEXA: #c3385aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0101269fe8a34f7fa08da4b719f820af { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 40, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0101269fe8a34f7fa08da4b719f820af::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0101269fe8a34f7fa08da4b719f820af:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0101269fe8a34f7fa08da4b719f820af" class="color" data-tooltip="RGBA: 168, 40, 96, 1.0
   HEXA: #a82860ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ec21bcd83c6942fa813c1f7da7690e83 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(138, 29, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ec21bcd83c6942fa813c1f7da7690e83::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ec21bcd83c6942fa813c1f7da7690e83:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ec21bcd83c6942fa813c1f7da7690e83" class="color" data-tooltip="RGBA: 138, 29, 99, 1.0
   HEXA: #8a1d63ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a9b7a547653f4bfbb9138f42536253a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 24, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a9b7a547653f4bfbb9138f42536253a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a9b7a547653f4bfbb9138f42536253a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a9b7a547653f4bfbb9138f42536253a1" class="color" data-tooltip="RGBA: 107, 24, 93, 1.0
   HEXA: #6b185dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7e161c7c735541bd928094cfa33bf718 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 21, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7e161c7c735541bd928094cfa33bf718::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7e161c7c735541bd928094cfa33bf718:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7e161c7c735541bd928094cfa33bf718" class="color" data-tooltip="RGBA: 76, 21, 80, 1.0
   HEXA: #4c1550ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8b388334fa644181bf4f2a9c3e70037b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 15, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8b388334fa644181bf4f2a9c3e70037b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8b388334fa644181bf4f2a9c3e70037b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8b388334fa644181bf4f2a9c3e70037b" class="color" data-tooltip="RGBA: 47, 15, 61, 1.0
   HEXA: #2f0f3dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_374ce1fab80b4d4f85ae2f01a5117349 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_374ce1fab80b4d4f85ae2f01a5117349 div { flex: 1 1 0; }
           #_374ce1fab80b4d4f85ae2f01a5117349 div.color { width: 100%; height: 100%; }
           #_374ce1fab80b4d4f85ae2f01a5117349 div.cmap { width: 100%; height: auto; }
           #_374ce1fab80b4d4f85ae2f01a5117349 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>speed</strong>
       
       <div id="_374ce1fab80b4d4f85ae2f01a5117349" class="color-map">
           
                           <div>
                   <style>
       #_f25d4edfec914c53bf1a21975489b604 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 252, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f25d4edfec914c53bf1a21975489b604::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f25d4edfec914c53bf1a21975489b604:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f25d4edfec914c53bf1a21975489b604" class="color" data-tooltip="RGBA: 254, 252, 205, 1.0
   HEXA: #fefccdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_47faf4b870d441f498e00259a01bd315 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 225, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_47faf4b870d441f498e00259a01bd315::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_47faf4b870d441f498e00259a01bd315:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_47faf4b870d441f498e00259a01bd315" class="color" data-tooltip="RGBA: 239, 225, 156, 1.0
   HEXA: #efe19cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9e9c39b44bd412c87f01297130df6d6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 201, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9e9c39b44bd412c87f01297130df6d6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9e9c39b44bd412c87f01297130df6d6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9e9c39b44bd412c87f01297130df6d6" class="color" data-tooltip="RGBA: 221, 201, 106, 1.0
   HEXA: #ddc96aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be9b55ab12d144ec8d514b550d802ff5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 182, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be9b55ab12d144ec8d514b550d802ff5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be9b55ab12d144ec8d514b550d802ff5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be9b55ab12d144ec8d514b550d802ff5" class="color" data-tooltip="RGBA: 194, 182, 59, 1.0
   HEXA: #c2b63bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2da4aa6a8bdb4baf94b0abd9451f8568 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(157, 167, 21, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2da4aa6a8bdb4baf94b0abd9451f8568::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2da4aa6a8bdb4baf94b0abd9451f8568:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2da4aa6a8bdb4baf94b0abd9451f8568" class="color" data-tooltip="RGBA: 157, 167, 21, 1.0
   HEXA: #9da715ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9c49f3c0751c4f5a8d65957f1868777c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 153, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9c49f3c0751c4f5a8d65957f1868777c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9c49f3c0751c4f5a8d65957f1868777c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9c49f3c0751c4f5a8d65957f1868777c" class="color" data-tooltip="RGBA: 116, 153, 5, 1.0
   HEXA: #749905ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ddac086ad9f5448782bec7af84359ce4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(75, 138, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ddac086ad9f5448782bec7af84359ce4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ddac086ad9f5448782bec7af84359ce4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ddac086ad9f5448782bec7af84359ce4" class="color" data-tooltip="RGBA: 75, 138, 20, 1.0
   HEXA: #4b8a14ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aeedf23da2cf4cb38288903170d3b5d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 121, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aeedf23da2cf4cb38288903170d3b5d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aeedf23da2cf4cb38288903170d3b5d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aeedf23da2cf4cb38288903170d3b5d9" class="color" data-tooltip="RGBA: 35, 121, 36, 1.0
   HEXA: #237924ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e9d070a37954c259702bb6d0689cfc2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(11, 100, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e9d070a37954c259702bb6d0689cfc2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e9d070a37954c259702bb6d0689cfc2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e9d070a37954c259702bb6d0689cfc2" class="color" data-tooltip="RGBA: 11, 100, 44, 1.0
   HEXA: #0b642cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53cd038b9058440692ead1203ba2367a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 78, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53cd038b9058440692ead1203ba2367a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53cd038b9058440692ead1203ba2367a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53cd038b9058440692ead1203ba2367a" class="color" data-tooltip="RGBA: 18, 78, 43, 1.0
   HEXA: #124e2bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c9a14fafe204c3ab714ae82ac0fc6f9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 56, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c9a14fafe204c3ab714ae82ac0fc6f9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c9a14fafe204c3ab714ae82ac0fc6f9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c9a14fafe204c3ab714ae82ac0fc6f9" class="color" data-tooltip="RGBA: 25, 56, 34, 1.0
   HEXA: #193822ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d279f59564f74342afa7436ce4529533 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 35, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d279f59564f74342afa7436ce4529533::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d279f59564f74342afa7436ce4529533:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d279f59564f74342afa7436ce4529533" class="color" data-tooltip="RGBA: 23, 35, 18, 1.0
   HEXA: #172312ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b9da14776437430fb1b2295329303f56 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b9da14776437430fb1b2295329303f56 div { flex: 1 1 0; }
           #_b9da14776437430fb1b2295329303f56 div.color { width: 100%; height: 100%; }
           #_b9da14776437430fb1b2295329303f56 div.cmap { width: 100%; height: auto; }
           #_b9da14776437430fb1b2295329303f56 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>amp</strong>
       
       <div id="_b9da14776437430fb1b2295329303f56" class="color-map">
           
                           <div>
                   <style>
       #_947ae4dcb83e431b830b16405a869a06 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 236, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_947ae4dcb83e431b830b16405a869a06::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_947ae4dcb83e431b830b16405a869a06:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_947ae4dcb83e431b830b16405a869a06" class="color" data-tooltip="RGBA: 241, 236, 236, 1.0
   HEXA: #f1ececff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fef4ba1c249544998c0ab136b60bd633 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 209, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fef4ba1c249544998c0ab136b60bd633::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fef4ba1c249544998c0ab136b60bd633:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fef4ba1c249544998c0ab136b60bd633" class="color" data-tooltip="RGBA: 230, 209, 203, 1.0
   HEXA: #e6d1cbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_084213f1e6e047edbce918145a4d44f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 182, 170, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_084213f1e6e047edbce918145a4d44f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_084213f1e6e047edbce918145a4d44f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_084213f1e6e047edbce918145a4d44f3" class="color" data-tooltip="RGBA: 221, 182, 170, 1.0
   HEXA: #ddb6aaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9aa82ec3f7ce4864bc365508cdbca0d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 156, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9aa82ec3f7ce4864bc365508cdbca0d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9aa82ec3f7ce4864bc365508cdbca0d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9aa82ec3f7ce4864bc365508cdbca0d8" class="color" data-tooltip="RGBA: 213, 156, 137, 1.0
   HEXA: #d59c89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b4f2cb40dec6449194f672a7600aa039 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(205, 129, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b4f2cb40dec6449194f672a7600aa039::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b4f2cb40dec6449194f672a7600aa039:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b4f2cb40dec6449194f672a7600aa039" class="color" data-tooltip="RGBA: 205, 129, 103, 1.0
   HEXA: #cd8167ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2eef62be36854a11a73ea470c86fb15d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 102, 73, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2eef62be36854a11a73ea470c86fb15d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2eef62be36854a11a73ea470c86fb15d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2eef62be36854a11a73ea470c86fb15d" class="color" data-tooltip="RGBA: 196, 102, 73, 1.0
   HEXA: #c46649ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6328535b873e42b287f5dcdccce0b95c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 74, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6328535b873e42b287f5dcdccce0b95c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6328535b873e42b287f5dcdccce0b95c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6328535b873e42b287f5dcdccce0b95c" class="color" data-tooltip="RGBA: 186, 74, 47, 1.0
   HEXA: #ba4a2fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_29badf75a5a84fbbbb004cdf20bfb522 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 44, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_29badf75a5a84fbbbb004cdf20bfb522::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_29badf75a5a84fbbbb004cdf20bfb522:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_29badf75a5a84fbbbb004cdf20bfb522" class="color" data-tooltip="RGBA: 172, 44, 36, 1.0
   HEXA: #ac2c24ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1bf19ee53114416ba5c3c280705092ce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(149, 19, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1bf19ee53114416ba5c3c280705092ce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1bf19ee53114416ba5c3c280705092ce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1bf19ee53114416ba5c3c280705092ce" class="color" data-tooltip="RGBA: 149, 19, 39, 1.0
   HEXA: #951327ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_975b26f3e01f43e5b885285f96203c94 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 14, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_975b26f3e01f43e5b885285f96203c94::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_975b26f3e01f43e5b885285f96203c94:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_975b26f3e01f43e5b885285f96203c94" class="color" data-tooltip="RGBA: 120, 14, 40, 1.0
   HEXA: #780e28ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e8ea8313b0f945f09d23ba7a3300fcca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 13, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e8ea8313b0f945f09d23ba7a3300fcca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e8ea8313b0f945f09d23ba7a3300fcca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e8ea8313b0f945f09d23ba7a3300fcca" class="color" data-tooltip="RGBA: 89, 13, 31, 1.0
   HEXA: #590d1fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d3554d18fc044f49eac709d60beecb1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 9, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d3554d18fc044f49eac709d60beecb1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d3554d18fc044f49eac709d60beecb1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d3554d18fc044f49eac709d60beecb1" class="color" data-tooltip="RGBA: 60, 9, 17, 1.0
   HEXA: #3c0911ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_600dc19c6fe348f8b8903de221efa8ae {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_600dc19c6fe348f8b8903de221efa8ae div { flex: 1 1 0; }
           #_600dc19c6fe348f8b8903de221efa8ae div.color { width: 100%; height: 100%; }
           #_600dc19c6fe348f8b8903de221efa8ae div.cmap { width: 100%; height: auto; }
           #_600dc19c6fe348f8b8903de221efa8ae div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tempo</strong>
       
       <div id="_600dc19c6fe348f8b8903de221efa8ae" class="color-map">
           
                           <div>
                   <style>
       #_d83e5fc5e63e4188a0bc1bf9c52ae57c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 245, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d83e5fc5e63e4188a0bc1bf9c52ae57c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d83e5fc5e63e4188a0bc1bf9c52ae57c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d83e5fc5e63e4188a0bc1bf9c52ae57c" class="color" data-tooltip="RGBA: 254, 245, 244, 1.0
   HEXA: #fef5f4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8c76ac4f5134969a64938b06cb3b462 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 224, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8c76ac4f5134969a64938b06cb3b462::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8c76ac4f5134969a64938b06cb3b462:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8c76ac4f5134969a64938b06cb3b462" class="color" data-tooltip="RGBA: 222, 224, 210, 1.0
   HEXA: #dee0d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_804ea07b24884967a9268fe49f54e974 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 206, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_804ea07b24884967a9268fe49f54e974::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_804ea07b24884967a9268fe49f54e974:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_804ea07b24884967a9268fe49f54e974" class="color" data-tooltip="RGBA: 189, 206, 181, 1.0
   HEXA: #bdceb5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_019f85dbaa724aa8a60c0929a9977e5c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 189, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_019f85dbaa724aa8a60c0929a9977e5c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_019f85dbaa724aa8a60c0929a9977e5c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_019f85dbaa724aa8a60c0929a9977e5c" class="color" data-tooltip="RGBA: 153, 189, 156, 1.0
   HEXA: #99bd9cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_281c0fc7ea2242e4a892b06b00b88a5f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 173, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_281c0fc7ea2242e4a892b06b00b88a5f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_281c0fc7ea2242e4a892b06b00b88a5f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_281c0fc7ea2242e4a892b06b00b88a5f" class="color" data-tooltip="RGBA: 110, 173, 138, 1.0
   HEXA: #6ead8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_df6d956efba74425868e84154b988724 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 157, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_df6d956efba74425868e84154b988724::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_df6d956efba74425868e84154b988724:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_df6d956efba74425868e84154b988724" class="color" data-tooltip="RGBA: 65, 157, 129, 1.0
   HEXA: #419d81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a65209c9cb54c639dba58c71eaa5569 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 137, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a65209c9cb54c639dba58c71eaa5569::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a65209c9cb54c639dba58c71eaa5569:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a65209c9cb54c639dba58c71eaa5569" class="color" data-tooltip="RGBA: 25, 137, 125, 1.0
   HEXA: #19897dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aca147bd3cb44febbdc7521cf3cbddc7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 116, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aca147bd3cb44febbdc7521cf3cbddc7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aca147bd3cb44febbdc7521cf3cbddc7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aca147bd3cb44febbdc7521cf3cbddc7" class="color" data-tooltip="RGBA: 18, 116, 117, 1.0
   HEXA: #127475ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0bc468e21ae04aae94f8b70a09e402ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 94, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0bc468e21ae04aae94f8b70a09e402ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0bc468e21ae04aae94f8b70a09e402ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0bc468e21ae04aae94f8b70a09e402ae" class="color" data-tooltip="RGBA: 25, 94, 106, 1.0
   HEXA: #195e6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bec14b163b8f4457928e4086e0dba000 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 72, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bec14b163b8f4457928e4086e0dba000::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bec14b163b8f4457928e4086e0dba000:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bec14b163b8f4457928e4086e0dba000" class="color" data-tooltip="RGBA: 28, 72, 93, 1.0
   HEXA: #1c485dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50b9794710c84c96b06e7b356ae537d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 51, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50b9794710c84c96b06e7b356ae537d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50b9794710c84c96b06e7b356ae537d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50b9794710c84c96b06e7b356ae537d8" class="color" data-tooltip="RGBA: 25, 51, 80, 1.0
   HEXA: #193350ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fdd494bbae4e4402b6962b463fbcf86a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(20, 29, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fdd494bbae4e4402b6962b463fbcf86a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fdd494bbae4e4402b6962b463fbcf86a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fdd494bbae4e4402b6962b463fbcf86a" class="color" data-tooltip="RGBA: 20, 29, 67, 1.0
   HEXA: #141d43ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_da142da0afc04769b3db7c3687effec6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_da142da0afc04769b3db7c3687effec6 div { flex: 1 1 0; }
           #_da142da0afc04769b3db7c3687effec6 div.color { width: 100%; height: 100%; }
           #_da142da0afc04769b3db7c3687effec6 div.cmap { width: 100%; height: auto; }
           #_da142da0afc04769b3db7c3687effec6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>phase</strong>
       
       <div id="_da142da0afc04769b3db7c3687effec6" class="color-map">
           
                           <div>
                   <style>
       #_edf5a77d3ced42f98dc14cbdc3a1fa0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 119, 12, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_edf5a77d3ced42f98dc14cbdc3a1fa0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_edf5a77d3ced42f98dc14cbdc3a1fa0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_edf5a77d3ced42f98dc14cbdc3a1fa0d" class="color" data-tooltip="RGBA: 167, 119, 12, 1.0
   HEXA: #a7770cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8510fa02d5644de3a32d5caa7b1d2ca1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 96, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8510fa02d5644de3a32d5caa7b1d2ca1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8510fa02d5644de3a32d5caa7b1d2ca1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8510fa02d5644de3a32d5caa7b1d2ca1" class="color" data-tooltip="RGBA: 197, 96, 51, 1.0
   HEXA: #c56033ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d91a451f47d74fc6bcd430fb39a85282 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 67, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d91a451f47d74fc6bcd430fb39a85282::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d91a451f47d74fc6bcd430fb39a85282:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d91a451f47d74fc6bcd430fb39a85282" class="color" data-tooltip="RGBA: 217, 67, 96, 1.0
   HEXA: #d94360ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9da1e409c14457e903d47a3cafa9a63 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 38, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9da1e409c14457e903d47a3cafa9a63::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9da1e409c14457e903d47a3cafa9a63:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9da1e409c14457e903d47a3cafa9a63" class="color" data-tooltip="RGBA: 221, 38, 163, 1.0
   HEXA: #dd26a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0b33ec7217d84a5daf10a0ba30e88e5f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 59, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0b33ec7217d84a5daf10a0ba30e88e5f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0b33ec7217d84a5daf10a0ba30e88e5f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0b33ec7217d84a5daf10a0ba30e88e5f" class="color" data-tooltip="RGBA: 196, 59, 224, 1.0
   HEXA: #c43be0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bc3f732357084202968efc98481509b0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 97, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc3f732357084202968efc98481509b0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc3f732357084202968efc98481509b0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc3f732357084202968efc98481509b0" class="color" data-tooltip="RGBA: 153, 97, 244, 1.0
   HEXA: #9961f4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e85a1db8d974f5a8490bf01ce0d827b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 127, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e85a1db8d974f5a8490bf01ce0d827b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e85a1db8d974f5a8490bf01ce0d827b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e85a1db8d974f5a8490bf01ce0d827b" class="color" data-tooltip="RGBA: 95, 127, 228, 1.0
   HEXA: #5f7fe4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c39b02517354aee8e0d99b7733598b2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 144, 183, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c39b02517354aee8e0d99b7733598b2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c39b02517354aee8e0d99b7733598b2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c39b02517354aee8e0d99b7733598b2" class="color" data-tooltip="RGBA: 40, 144, 183, 1.0
   HEXA: #2890b7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_492f5b4ae02947529ea24b2ca6c2d394 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 151, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_492f5b4ae02947529ea24b2ca6c2d394::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_492f5b4ae02947529ea24b2ca6c2d394:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_492f5b4ae02947529ea24b2ca6c2d394" class="color" data-tooltip="RGBA: 15, 151, 136, 1.0
   HEXA: #0f9788ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_73f42abe73e24ce8912e7534bb3c81c5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 153, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_73f42abe73e24ce8912e7534bb3c81c5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_73f42abe73e24ce8912e7534bb3c81c5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_73f42abe73e24ce8912e7534bb3c81c5" class="color" data-tooltip="RGBA: 39, 153, 79, 1.0
   HEXA: #27994fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5887159dfbe5480eab7d78976d33185e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 141, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5887159dfbe5480eab7d78976d33185e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5887159dfbe5480eab7d78976d33185e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5887159dfbe5480eab7d78976d33185e" class="color" data-tooltip="RGBA: 119, 141, 17, 1.0
   HEXA: #778d11ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_02ccd94f8d394da5a748475030f60ba7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 119, 12, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_02ccd94f8d394da5a748475030f60ba7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_02ccd94f8d394da5a748475030f60ba7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_02ccd94f8d394da5a748475030f60ba7" class="color" data-tooltip="RGBA: 167, 119, 12, 1.0
   HEXA: #a7770cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_bb2b68c1b35b4676a958f61eb07f2259 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_bb2b68c1b35b4676a958f61eb07f2259 div { flex: 1 1 0; }
           #_bb2b68c1b35b4676a958f61eb07f2259 div.color { width: 100%; height: 100%; }
           #_bb2b68c1b35b4676a958f61eb07f2259 div.cmap { width: 100%; height: auto; }
           #_bb2b68c1b35b4676a958f61eb07f2259 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>balance</strong>
       
       <div id="_bb2b68c1b35b4676a958f61eb07f2259" class="color-map">
           
                           <div>
                   <style>
       #_a7dde070488040bca5021c5d57b660da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 28, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a7dde070488040bca5021c5d57b660da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a7dde070488040bca5021c5d57b660da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a7dde070488040bca5021c5d57b660da" class="color" data-tooltip="RGBA: 23, 28, 66, 1.0
   HEXA: #171c42ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_477e16de8b914261b629a8d8aa4dcca9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 58, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_477e16de8b914261b629a8d8aa4dcca9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_477e16de8b914261b629a8d8aa4dcca9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_477e16de8b914261b629a8d8aa4dcca9" class="color" data-tooltip="RGBA: 41, 58, 143, 1.0
   HEXA: #293a8fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_845761eb87b6426394328f49f444bff4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(11, 102, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_845761eb87b6426394328f49f444bff4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_845761eb87b6426394328f49f444bff4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_845761eb87b6426394328f49f444bff4" class="color" data-tooltip="RGBA: 11, 102, 189, 1.0
   HEXA: #0b66bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a2aea82cdc6e4f86afd1e73be8f26585 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 144, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a2aea82cdc6e4f86afd1e73be8f26585::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a2aea82cdc6e4f86afd1e73be8f26585:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a2aea82cdc6e4f86afd1e73be8f26585" class="color" data-tooltip="RGBA: 69, 144, 185, 1.0
   HEXA: #4590b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e7abce23619446fba4d3405ae7f57a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 181, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e7abce23619446fba4d3405ae7f57a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e7abce23619446fba4d3405ae7f57a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e7abce23619446fba4d3405ae7f57a9" class="color" data-tooltip="RGBA: 142, 181, 194, 1.0
   HEXA: #8eb5c2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0cc96df803bd405fa6241e277197b5af { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 216, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0cc96df803bd405fa6241e277197b5af::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0cc96df803bd405fa6241e277197b5af:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0cc96df803bd405fa6241e277197b5af" class="color" data-tooltip="RGBA: 210, 216, 219, 1.0
   HEXA: #d2d8dbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_672710b704294217933c828e89e7042e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 210, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_672710b704294217933c828e89e7042e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_672710b704294217933c828e89e7042e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_672710b704294217933c828e89e7042e" class="color" data-tooltip="RGBA: 230, 210, 204, 1.0
   HEXA: #e6d2ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a42ca039cb09417ea13d97685927a7bd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 157, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a42ca039cb09417ea13d97685927a7bd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a42ca039cb09417ea13d97685927a7bd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a42ca039cb09417ea13d97685927a7bd" class="color" data-tooltip="RGBA: 213, 157, 137, 1.0
   HEXA: #d59d89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c48d044b9258480b81b166658b87b979 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 101, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c48d044b9258480b81b166658b87b979::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c48d044b9258480b81b166658b87b979:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c48d044b9258480b81b166658b87b979" class="color" data-tooltip="RGBA: 196, 101, 72, 1.0
   HEXA: #c46548ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0465c641cb4b431aab62ecabe20c4c02 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 43, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0465c641cb4b431aab62ecabe20c4c02::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0465c641cb4b431aab62ecabe20c4c02:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0465c641cb4b431aab62ecabe20c4c02" class="color" data-tooltip="RGBA: 172, 43, 36, 1.0
   HEXA: #ac2b24ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a267e9caf4fa4672b677f206e9f1435f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 14, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a267e9caf4fa4672b677f206e9f1435f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a267e9caf4fa4672b677f206e9f1435f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a267e9caf4fa4672b677f206e9f1435f" class="color" data-tooltip="RGBA: 120, 14, 40, 1.0
   HEXA: #780e28ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6497a9803a004d268b182805290b88ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 9, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6497a9803a004d268b182805290b88ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6497a9803a004d268b182805290b88ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6497a9803a004d268b182805290b88ff" class="color" data-tooltip="RGBA: 60, 9, 17, 1.0
   HEXA: #3c0911ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f53b04f022c74666ad17bd2567eeba37 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f53b04f022c74666ad17bd2567eeba37 div { flex: 1 1 0; }
           #_f53b04f022c74666ad17bd2567eeba37 div.color { width: 100%; height: 100%; }
           #_f53b04f022c74666ad17bd2567eeba37 div.cmap { width: 100%; height: auto; }
           #_f53b04f022c74666ad17bd2567eeba37 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>delta</strong>
       
       <div id="_f53b04f022c74666ad17bd2567eeba37" class="color-map">
           
                           <div>
                   <style>
       #_6ced939d276b4566a297898318c0edb0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 31, 63, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ced939d276b4566a297898318c0edb0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ced939d276b4566a297898318c0edb0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ced939d276b4566a297898318c0edb0" class="color" data-tooltip="RGBA: 16, 31, 63, 1.0
   HEXA: #101f3fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c8aa059a2474e938d8c7f54c05f8a6a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 62, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c8aa059a2474e938d8c7f54c05f8a6a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c8aa059a2474e938d8c7f54c05f8a6a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c8aa059a2474e938d8c7f54c05f8a6a" class="color" data-tooltip="RGBA: 38, 62, 144, 1.0
   HEXA: #263e90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_35bbcbaa0b574ccbb16b522a9efb60b6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(30, 110, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_35bbcbaa0b574ccbb16b522a9efb60b6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_35bbcbaa0b574ccbb16b522a9efb60b6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_35bbcbaa0b574ccbb16b522a9efb60b6" class="color" data-tooltip="RGBA: 30, 110, 161, 1.0
   HEXA: #1e6ea1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1fd38d108144086ad0d419063d9f8fc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 154, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1fd38d108144086ad0d419063d9f8fc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1fd38d108144086ad0d419063d9f8fc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1fd38d108144086ad0d419063d9f8fc" class="color" data-tooltip="RGBA: 60, 154, 171, 1.0
   HEXA: #3c9aabff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee0bceacf3254a53b6ff9a568cf94141 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 193, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee0bceacf3254a53b6ff9a568cf94141::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee0bceacf3254a53b6ff9a568cf94141:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee0bceacf3254a53b6ff9a568cf94141" class="color" data-tooltip="RGBA: 140, 193, 186, 1.0
   HEXA: #8cc1baff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a33b4852438f41388b0fc81c92807266 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 229, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a33b4852438f41388b0fc81c92807266::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a33b4852438f41388b0fc81c92807266:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a33b4852438f41388b0fc81c92807266" class="color" data-tooltip="RGBA: 217, 229, 218, 1.0
   HEXA: #d9e5daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15ec0434ac6e431687d732e67351d601 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 226, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15ec0434ac6e431687d732e67351d601::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15ec0434ac6e431687d732e67351d601:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15ec0434ac6e431687d732e67351d601" class="color" data-tooltip="RGBA: 239, 226, 156, 1.0
   HEXA: #efe29cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f28669c5cdd44c09af00a033488223a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 182, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f28669c5cdd44c09af00a033488223a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f28669c5cdd44c09af00a033488223a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f28669c5cdd44c09af00a033488223a9" class="color" data-tooltip="RGBA: 195, 182, 59, 1.0
   HEXA: #c3b63bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_263e85286add4897aca8524b39ad64a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 152, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_263e85286add4897aca8524b39ad64a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_263e85286add4897aca8524b39ad64a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_263e85286add4897aca8524b39ad64a5" class="color" data-tooltip="RGBA: 115, 152, 5, 1.0
   HEXA: #739805ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_40cc4422f0964587bfe454e07f67e5ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 120, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_40cc4422f0964587bfe454e07f67e5ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_40cc4422f0964587bfe454e07f67e5ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_40cc4422f0964587bfe454e07f67e5ea" class="color" data-tooltip="RGBA: 34, 120, 36, 1.0
   HEXA: #227824ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5fdf33a1f1b34d2481c87cf72cce5945 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 78, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5fdf33a1f1b34d2481c87cf72cce5945::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5fdf33a1f1b34d2481c87cf72cce5945:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5fdf33a1f1b34d2481c87cf72cce5945" class="color" data-tooltip="RGBA: 18, 78, 43, 1.0
   HEXA: #124e2bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f6b3cf4bdf8346c99903f1fbee972ffc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 35, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f6b3cf4bdf8346c99903f1fbee972ffc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f6b3cf4bdf8346c99903f1fbee972ffc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f6b3cf4bdf8346c99903f1fbee972ffc" class="color" data-tooltip="RGBA: 23, 35, 18, 1.0
   HEXA: #172312ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1716a43fd5f14fd5b6e51309096ce6fc {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1716a43fd5f14fd5b6e51309096ce6fc div { flex: 1 1 0; }
           #_1716a43fd5f14fd5b6e51309096ce6fc div.color { width: 100%; height: 100%; }
           #_1716a43fd5f14fd5b6e51309096ce6fc div.cmap { width: 100%; height: auto; }
           #_1716a43fd5f14fd5b6e51309096ce6fc div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>curl</strong>
       
       <div id="_1716a43fd5f14fd5b6e51309096ce6fc" class="color-map">
           
                           <div>
                   <style>
       #_2a3a5fc99c2e43f99f47923ceaa98972 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(20, 29, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2a3a5fc99c2e43f99f47923ceaa98972::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2a3a5fc99c2e43f99f47923ceaa98972:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2a3a5fc99c2e43f99f47923ceaa98972" class="color" data-tooltip="RGBA: 20, 29, 67, 1.0
   HEXA: #141d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d3709fc5198643a59a30c9a4a617811b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 72, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d3709fc5198643a59a30c9a4a617811b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d3709fc5198643a59a30c9a4a617811b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d3709fc5198643a59a30c9a4a617811b" class="color" data-tooltip="RGBA: 28, 72, 93, 1.0
   HEXA: #1c485dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bc1052e4ec9f470984848e59b5e26938 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 115, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc1052e4ec9f470984848e59b5e26938::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc1052e4ec9f470984848e59b5e26938:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc1052e4ec9f470984848e59b5e26938" class="color" data-tooltip="RGBA: 18, 115, 117, 1.0
   HEXA: #127375ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6602381130fa420f8fe042e7a4456810 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 156, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6602381130fa420f8fe042e7a4456810::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6602381130fa420f8fe042e7a4456810:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6602381130fa420f8fe042e7a4456810" class="color" data-tooltip="RGBA: 63, 156, 129, 1.0
   HEXA: #3f9c81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0a3c253acd14bc6b6b8500bc56254ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 189, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0a3c253acd14bc6b6b8500bc56254ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0a3c253acd14bc6b6b8500bc56254ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0a3c253acd14bc6b6b8500bc56254ea" class="color" data-tooltip="RGBA: 153, 189, 156, 1.0
   HEXA: #99bd9cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_912f0039f7bc4e9eac993754f1fb1be4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 225, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_912f0039f7bc4e9eac993754f1fb1be4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_912f0039f7bc4e9eac993754f1fb1be4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_912f0039f7bc4e9eac993754f1fb1be4" class="color" data-tooltip="RGBA: 223, 225, 211, 1.0
   HEXA: #dfe1d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cdfecd41216f4951b309d84e4c268b38 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 218, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cdfecd41216f4951b309d84e4c268b38::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cdfecd41216f4951b309d84e4c268b38:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cdfecd41216f4951b309d84e4c268b38" class="color" data-tooltip="RGBA: 241, 218, 206, 1.0
   HEXA: #f1daceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63bd76f5eae24e64aa2342c25d5bb866 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 160, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63bd76f5eae24e64aa2342c25d5bb866::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63bd76f5eae24e64aa2342c25d5bb866:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63bd76f5eae24e64aa2342c25d5bb866" class="color" data-tooltip="RGBA: 224, 160, 137, 1.0
   HEXA: #e0a089ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7690938a29cd4f5b959bb716d27c3b16 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 101, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7690938a29cd4f5b959bb716d27c3b16::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7690938a29cd4f5b959bb716d27c3b16:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7690938a29cd4f5b959bb716d27c3b16" class="color" data-tooltip="RGBA: 203, 101, 99, 1.0
   HEXA: #cb6563ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bba67bd4f96045ae8259cf9195850496 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(164, 54, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bba67bd4f96045ae8259cf9195850496::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bba67bd4f96045ae8259cf9195850496:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bba67bd4f96045ae8259cf9195850496" class="color" data-tooltip="RGBA: 164, 54, 96, 1.0
   HEXA: #a43660ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e1c4be986024f6a9895aacd1c1e3208 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 23, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e1c4be986024f6a9895aacd1c1e3208::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e1c4be986024f6a9895aacd1c1e3208:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e1c4be986024f6a9895aacd1c1e3208" class="color" data-tooltip="RGBA: 111, 23, 91, 1.0
   HEXA: #6f175bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e907f58d16f45ef95a633cfe1811feb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 13, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e907f58d16f45ef95a633cfe1811feb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e907f58d16f45ef95a633cfe1811feb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e907f58d16f45ef95a633cfe1811feb" class="color" data-tooltip="RGBA: 51, 13, 53, 1.0
   HEXA: #330d35ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f6f1f8f6b40e46878ec5ad7c3b8af910 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f6f1f8f6b40e46878ec5ad7c3b8af910 div { flex: 1 1 0; }
           #_f6f1f8f6b40e46878ec5ad7c3b8af910 div.color { width: 100%; height: 100%; }
           #_f6f1f8f6b40e46878ec5ad7c3b8af910 div.cmap { width: 100%; height: auto; }
           #_f6f1f8f6b40e46878ec5ad7c3b8af910 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>DEFAULT_PLOTLY_COLORS</strong>
       
       <div id="_f6f1f8f6b40e46878ec5ad7c3b8af910" class="color-map">
           
                           <div>
                   <style>
       #_efcd799677f34ddf8ae54d4265fbb18c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 119, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_efcd799677f34ddf8ae54d4265fbb18c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_efcd799677f34ddf8ae54d4265fbb18c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_efcd799677f34ddf8ae54d4265fbb18c" class="color" data-tooltip="RGBA: 31, 119, 180, 1.0
   HEXA: #1f77b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_557b958744e947dc8114f1199a8f8d4e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 14, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_557b958744e947dc8114f1199a8f8d4e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_557b958744e947dc8114f1199a8f8d4e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_557b958744e947dc8114f1199a8f8d4e" class="color" data-tooltip="RGBA: 255, 127, 14, 1.0
   HEXA: #ff7f0eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_905a8ccae04945cf8f095f1118a34956 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 160, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_905a8ccae04945cf8f095f1118a34956::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_905a8ccae04945cf8f095f1118a34956:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_905a8ccae04945cf8f095f1118a34956" class="color" data-tooltip="RGBA: 44, 160, 44, 1.0
   HEXA: #2ca02cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_94e5eb2f3e924ce587b567038e08d0ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 39, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94e5eb2f3e924ce587b567038e08d0ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94e5eb2f3e924ce587b567038e08d0ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94e5eb2f3e924ce587b567038e08d0ac" class="color" data-tooltip="RGBA: 214, 39, 40, 1.0
   HEXA: #d62728ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d271ff554b3a4606afcd3a7de2d81212 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(148, 103, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d271ff554b3a4606afcd3a7de2d81212::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d271ff554b3a4606afcd3a7de2d81212:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d271ff554b3a4606afcd3a7de2d81212" class="color" data-tooltip="RGBA: 148, 103, 189, 1.0
   HEXA: #9467bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_27fcc61f99ef4b0e834c16aed663758a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 86, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_27fcc61f99ef4b0e834c16aed663758a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_27fcc61f99ef4b0e834c16aed663758a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_27fcc61f99ef4b0e834c16aed663758a" class="color" data-tooltip="RGBA: 140, 86, 75, 1.0
   HEXA: #8c564bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fba3171357a34509952c457f58c9da9c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 119, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fba3171357a34509952c457f58c9da9c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fba3171357a34509952c457f58c9da9c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fba3171357a34509952c457f58c9da9c" class="color" data-tooltip="RGBA: 227, 119, 194, 1.0
   HEXA: #e377c2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a439e14b2f224b0baad1f72cf5f85e9e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 127, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a439e14b2f224b0baad1f72cf5f85e9e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a439e14b2f224b0baad1f72cf5f85e9e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a439e14b2f224b0baad1f72cf5f85e9e" class="color" data-tooltip="RGBA: 127, 127, 127, 1.0
   HEXA: #7f7f7fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_733b7482caa24f61ad256ee6d63aeaaf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 189, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_733b7482caa24f61ad256ee6d63aeaaf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_733b7482caa24f61ad256ee6d63aeaaf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_733b7482caa24f61ad256ee6d63aeaaf" class="color" data-tooltip="RGBA: 188, 189, 34, 1.0
   HEXA: #bcbd22ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_386ef34a81574dc6a594bc7bcef35120 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 190, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_386ef34a81574dc6a594bc7bcef35120::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_386ef34a81574dc6a594bc7bcef35120:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_386ef34a81574dc6a594bc7bcef35120" class="color" data-tooltip="RGBA: 23, 190, 207, 1.0
   HEXA: #17becfff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
   </div>


|


----


Qualitative
-----------

.. raw:: html


   <div id="_55cd0aa9c9034b13b1698a63351aa83b" class="color-swatch">
       <style>
           #_55cd0aa9c9034b13b1698a63351aa83b {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
               gap: 0.5rem 1rem;
               justify-content: space-between;
               overflow: hidden;
               resize: both;
               width: min(65rem, 100%);
           }
           #_55cd0aa9c9034b13b1698a63351aa83b div {
               width: 100%;
           }
           #_55cd0aa9c9034b13b1698a63351aa83b > div.gradient {
               width: 100%;
               height: min(4rem, 100%);
               display: grid;
               gap: 0.2rem;
               grid-template-rows: 1rem auto;
           }
           #_55cd0aa9c9034b13b1698a63351aa83b .color {
               height: minmax(1.5rem, 100%);
           }
           #_55cd0aa9c9034b13b1698a63351aa83b > div.gradient > strong {
               margin: 0;
               padding: 0;
           }
           #_55cd0aa9c9034b13b1698a63351aa83b img {height: 100%;}
       </style>
       
           <div class="gradient">
       <style>
           #_69ac46374ddd47a5af8019e59a152976 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_69ac46374ddd47a5af8019e59a152976 div { flex: 1 1 0; }
           #_69ac46374ddd47a5af8019e59a152976 div.color { width: 100%; height: 100%; }
           #_69ac46374ddd47a5af8019e59a152976 div.cmap { width: 100%; height: auto; }
           #_69ac46374ddd47a5af8019e59a152976 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Plotly</strong>
       
       <div id="_69ac46374ddd47a5af8019e59a152976" class="color-map">
           
                           <div>
                   <style>
       #_c1569b4880a74d2381fff146ce9c0c5e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 110, 250, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1569b4880a74d2381fff146ce9c0c5e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1569b4880a74d2381fff146ce9c0c5e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1569b4880a74d2381fff146ce9c0c5e" class="color" data-tooltip="RGBA: 99, 110, 250, 1.0
   HEXA: #636efaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64e83c33f4de4b87a2948e2f3b7cfcbc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 85, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64e83c33f4de4b87a2948e2f3b7cfcbc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64e83c33f4de4b87a2948e2f3b7cfcbc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64e83c33f4de4b87a2948e2f3b7cfcbc" class="color" data-tooltip="RGBA: 239, 85, 59, 1.0
   HEXA: #ef553bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d74062c42074469096e6291943e3df94 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 204, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d74062c42074469096e6291943e3df94::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d74062c42074469096e6291943e3df94:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d74062c42074469096e6291943e3df94" class="color" data-tooltip="RGBA: 0, 204, 150, 1.0
   HEXA: #00cc96ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b592d4c9dff4aa0bac5ae6941b85caf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 99, 250, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b592d4c9dff4aa0bac5ae6941b85caf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b592d4c9dff4aa0bac5ae6941b85caf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b592d4c9dff4aa0bac5ae6941b85caf" class="color" data-tooltip="RGBA: 171, 99, 250, 1.0
   HEXA: #ab63faff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_963f039b103b4854aad2319539af3e60 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 161, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_963f039b103b4854aad2319539af3e60::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_963f039b103b4854aad2319539af3e60:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_963f039b103b4854aad2319539af3e60" class="color" data-tooltip="RGBA: 255, 161, 90, 1.0
   HEXA: #ffa15aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d076fbdc102d464e80dec8b55acd2e13 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 211, 243, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d076fbdc102d464e80dec8b55acd2e13::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d076fbdc102d464e80dec8b55acd2e13:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d076fbdc102d464e80dec8b55acd2e13" class="color" data-tooltip="RGBA: 25, 211, 243, 1.0
   HEXA: #19d3f3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8204ba5b7ca44a7083bff6b2e49f162e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 102, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8204ba5b7ca44a7083bff6b2e49f162e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8204ba5b7ca44a7083bff6b2e49f162e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8204ba5b7ca44a7083bff6b2e49f162e" class="color" data-tooltip="RGBA: 255, 102, 146, 1.0
   HEXA: #ff6692ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1343ff904b664eadbf8cd251f63b5c85 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 232, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1343ff904b664eadbf8cd251f63b5c85::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1343ff904b664eadbf8cd251f63b5c85:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1343ff904b664eadbf8cd251f63b5c85" class="color" data-tooltip="RGBA: 182, 232, 128, 1.0
   HEXA: #b6e880ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4adc8cf34ba641be81c18c90978948e9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 151, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4adc8cf34ba641be81c18c90978948e9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4adc8cf34ba641be81c18c90978948e9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4adc8cf34ba641be81c18c90978948e9" class="color" data-tooltip="RGBA: 255, 151, 255, 1.0
   HEXA: #ff97ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb85e44b1f5e49c59b592431d93ecb2c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 203, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb85e44b1f5e49c59b592431d93ecb2c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb85e44b1f5e49c59b592431d93ecb2c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb85e44b1f5e49c59b592431d93ecb2c" class="color" data-tooltip="RGBA: 254, 203, 82, 1.0
   HEXA: #fecb52ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f8eac91444e447c995178d95ef3fd71d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f8eac91444e447c995178d95ef3fd71d div { flex: 1 1 0; }
           #_f8eac91444e447c995178d95ef3fd71d div.color { width: 100%; height: 100%; }
           #_f8eac91444e447c995178d95ef3fd71d div.cmap { width: 100%; height: auto; }
           #_f8eac91444e447c995178d95ef3fd71d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>D3</strong>
       
       <div id="_f8eac91444e447c995178d95ef3fd71d" class="color-map">
           
                           <div>
                   <style>
       #_171078b995cd453e834332ddab8e2a6a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 119, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_171078b995cd453e834332ddab8e2a6a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_171078b995cd453e834332ddab8e2a6a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_171078b995cd453e834332ddab8e2a6a" class="color" data-tooltip="RGBA: 31, 119, 180, 1.0
   HEXA: #1f77b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b202ed8f6dd34def8f8fed49723ea4e6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 14, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b202ed8f6dd34def8f8fed49723ea4e6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b202ed8f6dd34def8f8fed49723ea4e6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b202ed8f6dd34def8f8fed49723ea4e6" class="color" data-tooltip="RGBA: 255, 127, 14, 1.0
   HEXA: #ff7f0eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c2ba267d0d534b0180a0cfbe565dc2a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 160, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c2ba267d0d534b0180a0cfbe565dc2a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c2ba267d0d534b0180a0cfbe565dc2a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c2ba267d0d534b0180a0cfbe565dc2a2" class="color" data-tooltip="RGBA: 44, 160, 44, 1.0
   HEXA: #2ca02cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_904707e1832047ef9aea62de297d9afc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 39, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_904707e1832047ef9aea62de297d9afc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_904707e1832047ef9aea62de297d9afc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_904707e1832047ef9aea62de297d9afc" class="color" data-tooltip="RGBA: 214, 39, 40, 1.0
   HEXA: #d62728ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0511c51c218a4a03bb5d7ad69e18df4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(148, 103, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0511c51c218a4a03bb5d7ad69e18df4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0511c51c218a4a03bb5d7ad69e18df4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0511c51c218a4a03bb5d7ad69e18df4d" class="color" data-tooltip="RGBA: 148, 103, 189, 1.0
   HEXA: #9467bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d12909bb9014eb7bd1d0ebf643f40a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 86, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d12909bb9014eb7bd1d0ebf643f40a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d12909bb9014eb7bd1d0ebf643f40a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d12909bb9014eb7bd1d0ebf643f40a6" class="color" data-tooltip="RGBA: 140, 86, 75, 1.0
   HEXA: #8c564bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a0beeec811154ae794862e12daa0e6a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 119, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a0beeec811154ae794862e12daa0e6a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a0beeec811154ae794862e12daa0e6a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a0beeec811154ae794862e12daa0e6a7" class="color" data-tooltip="RGBA: 227, 119, 194, 1.0
   HEXA: #e377c2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a5db069c1f73445c8c8aefe44ac279e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 127, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a5db069c1f73445c8c8aefe44ac279e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a5db069c1f73445c8c8aefe44ac279e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a5db069c1f73445c8c8aefe44ac279e8" class="color" data-tooltip="RGBA: 127, 127, 127, 1.0
   HEXA: #7f7f7fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_14a06978767642c09723cc4301a70c04 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 189, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_14a06978767642c09723cc4301a70c04::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_14a06978767642c09723cc4301a70c04:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_14a06978767642c09723cc4301a70c04" class="color" data-tooltip="RGBA: 188, 189, 34, 1.0
   HEXA: #bcbd22ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f5c7700871924e00acf585b3c18f560a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 190, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f5c7700871924e00acf585b3c18f560a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f5c7700871924e00acf585b3c18f560a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f5c7700871924e00acf585b3c18f560a" class="color" data-tooltip="RGBA: 23, 190, 207, 1.0
   HEXA: #17becfff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_e6a6e3f7cfd04be8b8fdb53fde32b33f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_e6a6e3f7cfd04be8b8fdb53fde32b33f div { flex: 1 1 0; }
           #_e6a6e3f7cfd04be8b8fdb53fde32b33f div.color { width: 100%; height: 100%; }
           #_e6a6e3f7cfd04be8b8fdb53fde32b33f div.cmap { width: 100%; height: auto; }
           #_e6a6e3f7cfd04be8b8fdb53fde32b33f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>G10</strong>
       
       <div id="_e6a6e3f7cfd04be8b8fdb53fde32b33f" class="color-map">
           
                           <div>
                   <style>
       #_3996122b2e4844caa42be1520c141780 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 102, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3996122b2e4844caa42be1520c141780::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3996122b2e4844caa42be1520c141780:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3996122b2e4844caa42be1520c141780" class="color" data-tooltip="RGBA: 51, 102, 204, 1.0
   HEXA: #3366ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ec5c7ae0c0d74c66adbd0ef4e34a4a33 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 57, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ec5c7ae0c0d74c66adbd0ef4e34a4a33::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ec5c7ae0c0d74c66adbd0ef4e34a4a33:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ec5c7ae0c0d74c66adbd0ef4e34a4a33" class="color" data-tooltip="RGBA: 220, 57, 18, 1.0
   HEXA: #dc3912ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3a99f1aa0f974bf4867ee50f6ec33fce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 153, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3a99f1aa0f974bf4867ee50f6ec33fce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3a99f1aa0f974bf4867ee50f6ec33fce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3a99f1aa0f974bf4867ee50f6ec33fce" class="color" data-tooltip="RGBA: 255, 153, 0, 1.0
   HEXA: #ff9900ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_06f2bd2ec4bf499f96c9a95c3a748cf7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 150, 24, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_06f2bd2ec4bf499f96c9a95c3a748cf7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_06f2bd2ec4bf499f96c9a95c3a748cf7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_06f2bd2ec4bf499f96c9a95c3a748cf7" class="color" data-tooltip="RGBA: 16, 150, 24, 1.0
   HEXA: #109618ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_77ef9b3f75be495cb17cbd8faaf2c007 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 0, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_77ef9b3f75be495cb17cbd8faaf2c007::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_77ef9b3f75be495cb17cbd8faaf2c007:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_77ef9b3f75be495cb17cbd8faaf2c007" class="color" data-tooltip="RGBA: 153, 0, 153, 1.0
   HEXA: #990099ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1c124b06b918439289490c6227d24865 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 153, 198, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c124b06b918439289490c6227d24865::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c124b06b918439289490c6227d24865:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c124b06b918439289490c6227d24865" class="color" data-tooltip="RGBA: 0, 153, 198, 1.0
   HEXA: #0099c6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dce3d468396545338c8de7a499910916 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 68, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dce3d468396545338c8de7a499910916::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dce3d468396545338c8de7a499910916:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dce3d468396545338c8de7a499910916" class="color" data-tooltip="RGBA: 221, 68, 119, 1.0
   HEXA: #dd4477ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d8add67aa0bd4ac8822bb2cf7fd55cff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 170, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d8add67aa0bd4ac8822bb2cf7fd55cff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d8add67aa0bd4ac8822bb2cf7fd55cff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d8add67aa0bd4ac8822bb2cf7fd55cff" class="color" data-tooltip="RGBA: 102, 170, 0, 1.0
   HEXA: #66aa00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c529944383e4181b9e9a8c656783fe3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(184, 46, 46, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c529944383e4181b9e9a8c656783fe3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c529944383e4181b9e9a8c656783fe3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c529944383e4181b9e9a8c656783fe3" class="color" data-tooltip="RGBA: 184, 46, 46, 1.0
   HEXA: #b82e2eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_20bbf895ae5a4f22a878c8e00f0c62f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 99, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_20bbf895ae5a4f22a878c8e00f0c62f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_20bbf895ae5a4f22a878c8e00f0c62f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_20bbf895ae5a4f22a878c8e00f0c62f5" class="color" data-tooltip="RGBA: 49, 99, 149, 1.0
   HEXA: #316395ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d8b63c59c8784620b6651adccd3fb878 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d8b63c59c8784620b6651adccd3fb878 div { flex: 1 1 0; }
           #_d8b63c59c8784620b6651adccd3fb878 div.color { width: 100%; height: 100%; }
           #_d8b63c59c8784620b6651adccd3fb878 div.cmap { width: 100%; height: auto; }
           #_d8b63c59c8784620b6651adccd3fb878 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>T10</strong>
       
       <div id="_d8b63c59c8784620b6651adccd3fb878" class="color-map">
           
                           <div>
                   <style>
       #_9cbdfef492084e78ba7b41feed9fc1cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 120, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9cbdfef492084e78ba7b41feed9fc1cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9cbdfef492084e78ba7b41feed9fc1cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9cbdfef492084e78ba7b41feed9fc1cc" class="color" data-tooltip="RGBA: 76, 120, 168, 1.0
   HEXA: #4c78a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_683d99f266d045b9a801173d9fa94925 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 133, 24, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_683d99f266d045b9a801173d9fa94925::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_683d99f266d045b9a801173d9fa94925:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_683d99f266d045b9a801173d9fa94925" class="color" data-tooltip="RGBA: 245, 133, 24, 1.0
   HEXA: #f58518ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_802bd5f39e5944fba0a3d5935e19665f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 87, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_802bd5f39e5944fba0a3d5935e19665f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_802bd5f39e5944fba0a3d5935e19665f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_802bd5f39e5944fba0a3d5935e19665f" class="color" data-tooltip="RGBA: 228, 87, 86, 1.0
   HEXA: #e45756ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1885459f7ccf4fa4aba7f536e85ad93d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 183, 178, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1885459f7ccf4fa4aba7f536e85ad93d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1885459f7ccf4fa4aba7f536e85ad93d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1885459f7ccf4fa4aba7f536e85ad93d" class="color" data-tooltip="RGBA: 114, 183, 178, 1.0
   HEXA: #72b7b2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_28d48affe6914d0f974fc2194e17f270 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 162, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_28d48affe6914d0f974fc2194e17f270::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_28d48affe6914d0f974fc2194e17f270:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_28d48affe6914d0f974fc2194e17f270" class="color" data-tooltip="RGBA: 84, 162, 75, 1.0
   HEXA: #54a24bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86925bd8d9dc4eff867ed4bbaa58a59a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 202, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86925bd8d9dc4eff867ed4bbaa58a59a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86925bd8d9dc4eff867ed4bbaa58a59a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86925bd8d9dc4eff867ed4bbaa58a59a" class="color" data-tooltip="RGBA: 238, 202, 59, 1.0
   HEXA: #eeca3bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60495a4bb1d34e569a0a1a80d96e4835 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 121, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60495a4bb1d34e569a0a1a80d96e4835::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60495a4bb1d34e569a0a1a80d96e4835:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60495a4bb1d34e569a0a1a80d96e4835" class="color" data-tooltip="RGBA: 178, 121, 162, 1.0
   HEXA: #b279a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d596570626114056ac4ad326fc26f3c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 157, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d596570626114056ac4ad326fc26f3c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d596570626114056ac4ad326fc26f3c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d596570626114056ac4ad326fc26f3c8" class="color" data-tooltip="RGBA: 255, 157, 166, 1.0
   HEXA: #ff9da6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_41b3ccb372144767beb4c05de7fd301e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(157, 117, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_41b3ccb372144767beb4c05de7fd301e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_41b3ccb372144767beb4c05de7fd301e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_41b3ccb372144767beb4c05de7fd301e" class="color" data-tooltip="RGBA: 157, 117, 93, 1.0
   HEXA: #9d755dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd3c213924f84f86b3fe869a95e27abb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 176, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd3c213924f84f86b3fe869a95e27abb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd3c213924f84f86b3fe869a95e27abb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd3c213924f84f86b3fe869a95e27abb" class="color" data-tooltip="RGBA: 186, 176, 172, 1.0
   HEXA: #bab0acff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9a513a6d9a08409abd9a030484da8380 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9a513a6d9a08409abd9a030484da8380 div { flex: 1 1 0; }
           #_9a513a6d9a08409abd9a030484da8380 div.color { width: 100%; height: 100%; }
           #_9a513a6d9a08409abd9a030484da8380 div.cmap { width: 100%; height: auto; }
           #_9a513a6d9a08409abd9a030484da8380 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Alphabet</strong>
       
       <div id="_9a513a6d9a08409abd9a030484da8380" class="color-map">
           
                           <div>
                   <style>
       #_a64b720944f4447c9d033092275d15ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 13, 254, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a64b720944f4447c9d033092275d15ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a64b720944f4447c9d033092275d15ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a64b720944f4447c9d033092275d15ca" class="color" data-tooltip="RGBA: 170, 13, 254, 1.0
   HEXA: #aa0dfeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3852b5bf16be4733a279cc5d8aecfe73 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 131, 254, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3852b5bf16be4733a279cc5d8aecfe73::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3852b5bf16be4733a279cc5d8aecfe73:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3852b5bf16be4733a279cc5d8aecfe73" class="color" data-tooltip="RGBA: 50, 131, 254, 1.0
   HEXA: #3283feff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f76af3f9802842c89cdf3edcd2a3cf03 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 102, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f76af3f9802842c89cdf3edcd2a3cf03::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f76af3f9802842c89cdf3edcd2a3cf03:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f76af3f9802842c89cdf3edcd2a3cf03" class="color" data-tooltip="RGBA: 133, 102, 13, 1.0
   HEXA: #85660dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b64f8f3551b4ec08bc73f8152afcce6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 42, 182, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b64f8f3551b4ec08bc73f8152afcce6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b64f8f3551b4ec08bc73f8152afcce6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b64f8f3551b4ec08bc73f8152afcce6" class="color" data-tooltip="RGBA: 120, 42, 182, 1.0
   HEXA: #782ab6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e0f78e109864d77bd76c71d6153066c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(86, 86, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e0f78e109864d77bd76c71d6153066c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e0f78e109864d77bd76c71d6153066c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e0f78e109864d77bd76c71d6153066c" class="color" data-tooltip="RGBA: 86, 86, 86, 1.0
   HEXA: #565656ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7e0d0a0f90b34b01b6c80d2b844a5c46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 131, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7e0d0a0f90b34b01b6c80d2b844a5c46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7e0d0a0f90b34b01b6c80d2b844a5c46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7e0d0a0f90b34b01b6c80d2b844a5c46" class="color" data-tooltip="RGBA: 28, 131, 86, 1.0
   HEXA: #1c8356ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63f9f9cea76e4d3ca888c1b45c126697 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(22, 255, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63f9f9cea76e4d3ca888c1b45c126697::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63f9f9cea76e4d3ca888c1b45c126697:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63f9f9cea76e4d3ca888c1b45c126697" class="color" data-tooltip="RGBA: 22, 255, 50, 1.0
   HEXA: #16ff32ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5d36bde25be243bbb112fdd9b5c0a162 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 225, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5d36bde25be243bbb112fdd9b5c0a162::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5d36bde25be243bbb112fdd9b5c0a162:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5d36bde25be243bbb112fdd9b5c0a162" class="color" data-tooltip="RGBA: 247, 225, 160, 1.0
   HEXA: #f7e1a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57599be495594cf9886b730420172d14 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(226, 226, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57599be495594cf9886b730420172d14::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57599be495594cf9886b730420172d14:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57599be495594cf9886b730420172d14" class="color" data-tooltip="RGBA: 226, 226, 226, 1.0
   HEXA: #e2e2e2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1e54426fa81e4a7dad79862744aef471 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 190, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e54426fa81e4a7dad79862744aef471::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e54426fa81e4a7dad79862744aef471:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e54426fa81e4a7dad79862744aef471" class="color" data-tooltip="RGBA: 28, 190, 79, 1.0
   HEXA: #1cbe4fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9003b244a334d3cad8264e579b3b920 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 69, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9003b244a334d3cad8264e579b3b920::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9003b244a334d3cad8264e579b3b920:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9003b244a334d3cad8264e579b3b920" class="color" data-tooltip="RGBA: 196, 69, 28, 1.0
   HEXA: #c4451cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_75705a4aa39b4737829dc0fe9f5e9dbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 160, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75705a4aa39b4737829dc0fe9f5e9dbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75705a4aa39b4737829dc0fe9f5e9dbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75705a4aa39b4737829dc0fe9f5e9dbd" class="color" data-tooltip="RGBA: 222, 160, 253, 1.0
   HEXA: #dea0fdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f499b01f8c204ab0953e4bbc5c549f08 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 0, 250, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f499b01f8c204ab0953e4bbc5c549f08::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f499b01f8c204ab0953e4bbc5c549f08:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f499b01f8c204ab0953e4bbc5c549f08" class="color" data-tooltip="RGBA: 254, 0, 250, 1.0
   HEXA: #fe00faff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_669e3c53453c4f9790e396e3ddba0951 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 90, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_669e3c53453c4f9790e396e3ddba0951::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_669e3c53453c4f9790e396e3ddba0951:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_669e3c53453c4f9790e396e3ddba0951" class="color" data-tooltip="RGBA: 50, 90, 155, 1.0
   HEXA: #325a9bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90ea83af3b944fd999e564946c54f0e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 175, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90ea83af3b944fd999e564946c54f0e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90ea83af3b944fd999e564946c54f0e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90ea83af3b944fd999e564946c54f0e7" class="color" data-tooltip="RGBA: 254, 175, 22, 1.0
   HEXA: #feaf16ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a2d0095f691546d798c5a351d5215bc8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 161, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a2d0095f691546d798c5a351d5215bc8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a2d0095f691546d798c5a351d5215bc8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a2d0095f691546d798c5a351d5215bc8" class="color" data-tooltip="RGBA: 248, 161, 159, 1.0
   HEXA: #f8a19fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a001d9cabfcd49129887916036180554 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(144, 173, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a001d9cabfcd49129887916036180554::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a001d9cabfcd49129887916036180554:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a001d9cabfcd49129887916036180554" class="color" data-tooltip="RGBA: 144, 173, 28, 1.0
   HEXA: #90ad1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f79c2c8484bc4db8a75d7819e42259c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 34, 46, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f79c2c8484bc4db8a75d7819e42259c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f79c2c8484bc4db8a75d7819e42259c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f79c2c8484bc4db8a75d7819e42259c6" class="color" data-tooltip="RGBA: 246, 34, 46, 1.0
   HEXA: #f6222eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab83e4ea4f744c88b29f00939557e331 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 255, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab83e4ea4f744c88b29f00939557e331::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab83e4ea4f744c88b29f00939557e331:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab83e4ea4f744c88b29f00939557e331" class="color" data-tooltip="RGBA: 28, 255, 206, 1.0
   HEXA: #1cffceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_00cbb5ad220744238a0eb68182c7759b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 217, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_00cbb5ad220744238a0eb68182c7759b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_00cbb5ad220744238a0eb68182c7759b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_00cbb5ad220744238a0eb68182c7759b" class="color" data-tooltip="RGBA: 46, 217, 255, 1.0
   HEXA: #2ed9ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2356b215aef849759034f63cb4796027 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 13, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2356b215aef849759034f63cb4796027::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2356b215aef849759034f63cb4796027:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2356b215aef849759034f63cb4796027" class="color" data-tooltip="RGBA: 177, 13, 161, 1.0
   HEXA: #b10da1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3fdef455c9444b3c948fa3307a45d357 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 117, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3fdef455c9444b3c948fa3307a45d357::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3fdef455c9444b3c948fa3307a45d357:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3fdef455c9444b3c948fa3307a45d357" class="color" data-tooltip="RGBA: 192, 117, 166, 1.0
   HEXA: #c075a6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6f5d884ed5ec46d8a83ed7b14bf66e2d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 28, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6f5d884ed5ec46d8a83ed7b14bf66e2d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6f5d884ed5ec46d8a83ed7b14bf66e2d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6f5d884ed5ec46d8a83ed7b14bf66e2d" class="color" data-tooltip="RGBA: 252, 28, 191, 1.0
   HEXA: #fc1cbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7efb2bd353234a099aba79d93ce5279e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(176, 0, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7efb2bd353234a099aba79d93ce5279e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7efb2bd353234a099aba79d93ce5279e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7efb2bd353234a099aba79d93ce5279e" class="color" data-tooltip="RGBA: 176, 0, 104, 1.0
   HEXA: #b00068ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5b71da73f81840ebbbabb3995cf871f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 228, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5b71da73f81840ebbbabb3995cf871f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5b71da73f81840ebbbabb3995cf871f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5b71da73f81840ebbbabb3995cf871f8" class="color" data-tooltip="RGBA: 251, 228, 38, 1.0
   HEXA: #fbe426ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0817c8dec4004aaeac4eac862e34cc67 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 0, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0817c8dec4004aaeac4eac862e34cc67::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0817c8dec4004aaeac4eac862e34cc67:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0817c8dec4004aaeac4eac862e34cc67" class="color" data-tooltip="RGBA: 250, 0, 135, 1.0
   HEXA: #fa0087ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_becfcbb24c9d4dcaa2a894298f329f92 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_becfcbb24c9d4dcaa2a894298f329f92 div { flex: 1 1 0; }
           #_becfcbb24c9d4dcaa2a894298f329f92 div.color { width: 100%; height: 100%; }
           #_becfcbb24c9d4dcaa2a894298f329f92 div.cmap { width: 100%; height: auto; }
           #_becfcbb24c9d4dcaa2a894298f329f92 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Dark24</strong>
       
       <div id="_becfcbb24c9d4dcaa2a894298f329f92" class="color-map">
           
                           <div>
                   <style>
       #_6846c6d910fe4978af5d4fade7c1e910 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 145, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6846c6d910fe4978af5d4fade7c1e910::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6846c6d910fe4978af5d4fade7c1e910:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6846c6d910fe4978af5d4fade7c1e910" class="color" data-tooltip="RGBA: 46, 145, 229, 1.0
   HEXA: #2e91e5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c90429942e8f442a9a6b50d0433dfe07 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 95, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c90429942e8f442a9a6b50d0433dfe07::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c90429942e8f442a9a6b50d0433dfe07:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c90429942e8f442a9a6b50d0433dfe07" class="color" data-tooltip="RGBA: 225, 95, 153, 1.0
   HEXA: #e15f99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a0ddc50847b74a278f8de9b48ba1d89e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 167, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a0ddc50847b74a278f8de9b48ba1d89e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a0ddc50847b74a278f8de9b48ba1d89e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a0ddc50847b74a278f8de9b48ba1d89e" class="color" data-tooltip="RGBA: 28, 167, 28, 1.0
   HEXA: #1ca71cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_edd5fdd2063b4d16b7643da41be421ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 13, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_edd5fdd2063b4d16b7643da41be421ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_edd5fdd2063b4d16b7643da41be421ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_edd5fdd2063b4d16b7643da41be421ac" class="color" data-tooltip="RGBA: 251, 13, 13, 1.0
   HEXA: #fb0d0dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2c0681cf8677430daad141f9b5ca204d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 22, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2c0681cf8677430daad141f9b5ca204d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2c0681cf8677430daad141f9b5ca204d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2c0681cf8677430daad141f9b5ca204d" class="color" data-tooltip="RGBA: 218, 22, 255, 1.0
   HEXA: #da16ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e819aa8f2769477dae579213d4293dac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 42, 42, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e819aa8f2769477dae579213d4293dac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e819aa8f2769477dae579213d4293dac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e819aa8f2769477dae579213d4293dac" class="color" data-tooltip="RGBA: 34, 42, 42, 1.0
   HEXA: #222a2aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a90874770dd4d029b38e3db4e91c824 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 129, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a90874770dd4d029b38e3db4e91c824::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a90874770dd4d029b38e3db4e91c824:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a90874770dd4d029b38e3db4e91c824" class="color" data-tooltip="RGBA: 182, 129, 0, 1.0
   HEXA: #b68100ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd1ef9559e1c4dc884043abfcf40fe6f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 13, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd1ef9559e1c4dc884043abfcf40fe6f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd1ef9559e1c4dc884043abfcf40fe6f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd1ef9559e1c4dc884043abfcf40fe6f" class="color" data-tooltip="RGBA: 117, 13, 134, 1.0
   HEXA: #750d86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_48ffe97b2b914927bde61ab4c1e5c16e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 102, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48ffe97b2b914927bde61ab4c1e5c16e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48ffe97b2b914927bde61ab4c1e5c16e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48ffe97b2b914927bde61ab4c1e5c16e" class="color" data-tooltip="RGBA: 235, 102, 59, 1.0
   HEXA: #eb663bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0371b1b788b44bb48730e99b2e168d40 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(81, 28, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0371b1b788b44bb48730e99b2e168d40::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0371b1b788b44bb48730e99b2e168d40:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0371b1b788b44bb48730e99b2e168d40" class="color" data-tooltip="RGBA: 81, 28, 251, 1.0
   HEXA: #511cfbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_810f6b14a4124f5bbb4991918b13b2f2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 160, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_810f6b14a4124f5bbb4991918b13b2f2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_810f6b14a4124f5bbb4991918b13b2f2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_810f6b14a4124f5bbb4991918b13b2f2" class="color" data-tooltip="RGBA: 0, 160, 139, 1.0
   HEXA: #00a08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1ba14c97dd04a9a8bf19892a435179e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 0, 209, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1ba14c97dd04a9a8bf19892a435179e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1ba14c97dd04a9a8bf19892a435179e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1ba14c97dd04a9a8bf19892a435179e" class="color" data-tooltip="RGBA: 251, 0, 209, 1.0
   HEXA: #fb00d1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6be1839ca8e64017a8550b7b470fd5c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 0, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6be1839ca8e64017a8550b7b470fd5c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6be1839ca8e64017a8550b7b470fd5c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6be1839ca8e64017a8550b7b470fd5c2" class="color" data-tooltip="RGBA: 252, 0, 128, 1.0
   HEXA: #fc0080ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_69058d011d6d4e03aa059945b0034557 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 130, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_69058d011d6d4e03aa059945b0034557::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_69058d011d6d4e03aa059945b0034557:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_69058d011d6d4e03aa059945b0034557" class="color" data-tooltip="RGBA: 178, 130, 141, 1.0
   HEXA: #b2828dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6a52c65904f04a5898a44cadd21cfd64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 124, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6a52c65904f04a5898a44cadd21cfd64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6a52c65904f04a5898a44cadd21cfd64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6a52c65904f04a5898a44cadd21cfd64" class="color" data-tooltip="RGBA: 108, 124, 50, 1.0
   HEXA: #6c7c32ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f05ae5d3b71c4861bcde2c34dd7fff9d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 138, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f05ae5d3b71c4861bcde2c34dd7fff9d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f05ae5d3b71c4861bcde2c34dd7fff9d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f05ae5d3b71c4861bcde2c34dd7fff9d" class="color" data-tooltip="RGBA: 119, 138, 174, 1.0
   HEXA: #778aaeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c49edf8990e64c9ab11dbdc6d0cc4ce7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(134, 42, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c49edf8990e64c9ab11dbdc6d0cc4ce7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c49edf8990e64c9ab11dbdc6d0cc4ce7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c49edf8990e64c9ab11dbdc6d0cc4ce7" class="color" data-tooltip="RGBA: 134, 42, 22, 1.0
   HEXA: #862a16ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8fe9a94311c04456acf0739167ed1c09 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 119, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8fe9a94311c04456acf0739167ed1c09::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8fe9a94311c04456acf0739167ed1c09:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8fe9a94311c04456acf0739167ed1c09" class="color" data-tooltip="RGBA: 167, 119, 241, 1.0
   HEXA: #a777f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d654a077f4a14390a7191b9e35727162 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(98, 0, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d654a077f4a14390a7191b9e35727162::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d654a077f4a14390a7191b9e35727162:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d654a077f4a14390a7191b9e35727162" class="color" data-tooltip="RGBA: 98, 0, 66, 1.0
   HEXA: #620042ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a36e2c21488147a487214156c06807ad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(22, 22, 167, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a36e2c21488147a487214156c06807ad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a36e2c21488147a487214156c06807ad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a36e2c21488147a487214156c06807ad" class="color" data-tooltip="RGBA: 22, 22, 167, 1.0
   HEXA: #1616a7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c33c3e9fc0894cc8b4a368900baa52b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 96, 202, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c33c3e9fc0894cc8b4a368900baa52b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c33c3e9fc0894cc8b4a368900baa52b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c33c3e9fc0894cc8b4a368900baa52b4" class="color" data-tooltip="RGBA: 218, 96, 202, 1.0
   HEXA: #da60caff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_949dce19d8e843da92388e539afa7754 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 69, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_949dce19d8e843da92388e539afa7754::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_949dce19d8e843da92388e539afa7754:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_949dce19d8e843da92388e539afa7754" class="color" data-tooltip="RGBA: 108, 69, 22, 1.0
   HEXA: #6c4516ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ecbb24614954c9ea970a298e07062b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 42, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ecbb24614954c9ea970a298e07062b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ecbb24614954c9ea970a298e07062b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ecbb24614954c9ea970a298e07062b5" class="color" data-tooltip="RGBA: 13, 42, 99, 1.0
   HEXA: #0d2a63ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_51baa76efbdf4dd6b1272e3feb5a0198 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(175, 0, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_51baa76efbdf4dd6b1272e3feb5a0198::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_51baa76efbdf4dd6b1272e3feb5a0198:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_51baa76efbdf4dd6b1272e3feb5a0198" class="color" data-tooltip="RGBA: 175, 0, 56, 1.0
   HEXA: #af0038ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_504a8711dc4c47fcae670e0fabb96f6c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_504a8711dc4c47fcae670e0fabb96f6c div { flex: 1 1 0; }
           #_504a8711dc4c47fcae670e0fabb96f6c div.color { width: 100%; height: 100%; }
           #_504a8711dc4c47fcae670e0fabb96f6c div.cmap { width: 100%; height: auto; }
           #_504a8711dc4c47fcae670e0fabb96f6c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Light24</strong>
       
       <div id="_504a8711dc4c47fcae670e0fabb96f6c" class="color-map">
           
                           <div>
                   <style>
       #_348f4155c1fc4bfd914fa0ee1186e4f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 50, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_348f4155c1fc4bfd914fa0ee1186e4f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_348f4155c1fc4bfd914fa0ee1186e4f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_348f4155c1fc4bfd914fa0ee1186e4f6" class="color" data-tooltip="RGBA: 253, 50, 22, 1.0
   HEXA: #fd3216ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4891c1d5f5954c419fcc927cab586f93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 254, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4891c1d5f5954c419fcc927cab586f93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4891c1d5f5954c419fcc927cab586f93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4891c1d5f5954c419fcc927cab586f93" class="color" data-tooltip="RGBA: 0, 254, 53, 1.0
   HEXA: #00fe35ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_041006c5ba74426889b4cf1fc7a1065f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 118, 252, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_041006c5ba74426889b4cf1fc7a1065f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_041006c5ba74426889b4cf1fc7a1065f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_041006c5ba74426889b4cf1fc7a1065f" class="color" data-tooltip="RGBA: 106, 118, 252, 1.0
   HEXA: #6a76fcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_59f96972faa44a309cd3bd2d1acb4f5d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 212, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59f96972faa44a309cd3bd2d1acb4f5d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59f96972faa44a309cd3bd2d1acb4f5d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59f96972faa44a309cd3bd2d1acb4f5d" class="color" data-tooltip="RGBA: 254, 212, 196, 1.0
   HEXA: #fed4c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bc22fe28636641ce819db9cd063976a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 0, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc22fe28636641ce819db9cd063976a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc22fe28636641ce819db9cd063976a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc22fe28636641ce819db9cd063976a1" class="color" data-tooltip="RGBA: 254, 0, 206, 1.0
   HEXA: #fe00ceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0c614be6f6745d4940bddf13f305d0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 249, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0c614be6f6745d4940bddf13f305d0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0c614be6f6745d4940bddf13f305d0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0c614be6f6745d4940bddf13f305d0d" class="color" data-tooltip="RGBA: 13, 249, 255, 1.0
   HEXA: #0df9ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c0197efbf00744abba11ae31f0ab8955 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 249, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c0197efbf00744abba11ae31f0ab8955::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c0197efbf00744abba11ae31f0ab8955:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c0197efbf00744abba11ae31f0ab8955" class="color" data-tooltip="RGBA: 246, 249, 38, 1.0
   HEXA: #f6f926ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd2afa322ade48888daa842186cce939 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 150, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd2afa322ade48888daa842186cce939::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd2afa322ade48888daa842186cce939:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd2afa322ade48888daa842186cce939" class="color" data-tooltip="RGBA: 255, 150, 22, 1.0
   HEXA: #ff9616ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_47db76182b384258bc197aacdb25d6d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(71, 155, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_47db76182b384258bc197aacdb25d6d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_47db76182b384258bc197aacdb25d6d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_47db76182b384258bc197aacdb25d6d9" class="color" data-tooltip="RGBA: 71, 155, 85, 1.0
   HEXA: #479b55ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db042ec575af4dbaaede309477eab351 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 166, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db042ec575af4dbaaede309477eab351::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db042ec575af4dbaaede309477eab351:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db042ec575af4dbaaede309477eab351" class="color" data-tooltip="RGBA: 238, 166, 251, 1.0
   HEXA: #eea6fbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d7586b6ca81474d8f74a8b90eb093c4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 88, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d7586b6ca81474d8f74a8b90eb093c4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d7586b6ca81474d8f74a8b90eb093c4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d7586b6ca81474d8f74a8b90eb093c4" class="color" data-tooltip="RGBA: 220, 88, 125, 1.0
   HEXA: #dc587dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d15f13e281c84bd69bc0cbb856233212 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 38, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d15f13e281c84bd69bc0cbb856233212::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d15f13e281c84bd69bc0cbb856233212:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d15f13e281c84bd69bc0cbb856233212" class="color" data-tooltip="RGBA: 214, 38, 255, 1.0
   HEXA: #d626ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f314afb12c2e40c088ad64e58bc38002 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 137, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f314afb12c2e40c088ad64e58bc38002::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f314afb12c2e40c088ad64e58bc38002:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f314afb12c2e40c088ad64e58bc38002" class="color" data-tooltip="RGBA: 110, 137, 156, 1.0
   HEXA: #6e899cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d7f81652d16e4464bec8d2b73aad8d8c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 181, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d7f81652d16e4464bec8d2b73aad8d8c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d7f81652d16e4464bec8d2b73aad8d8c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d7f81652d16e4464bec8d2b73aad8d8c" class="color" data-tooltip="RGBA: 0, 181, 247, 1.0
   HEXA: #00b5f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8a61e378b0cc40c9b3fe76219b4db7c5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 142, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8a61e378b0cc40c9b3fe76219b4db7c5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8a61e378b0cc40c9b3fe76219b4db7c5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8a61e378b0cc40c9b3fe76219b4db7c5" class="color" data-tooltip="RGBA: 182, 142, 0, 1.0
   HEXA: #b68e00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0846f4ba7f334ae490f1e1e5cd656059 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 251, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0846f4ba7f334ae490f1e1e5cd656059::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0846f4ba7f334ae490f1e1e5cd656059:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0846f4ba7f334ae490f1e1e5cd656059" class="color" data-tooltip="RGBA: 201, 251, 229, 1.0
   HEXA: #c9fbe5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd614d99a64349ffbcd2287324b14f80 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd614d99a64349ffbcd2287324b14f80::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd614d99a64349ffbcd2287324b14f80:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd614d99a64349ffbcd2287324b14f80" class="color" data-tooltip="RGBA: 255, 0, 146, 1.0
   HEXA: #ff0092ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63f27ebd70104299b6d5227db1164abd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 255, 167, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63f27ebd70104299b6d5227db1164abd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63f27ebd70104299b6d5227db1164abd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63f27ebd70104299b6d5227db1164abd" class="color" data-tooltip="RGBA: 34, 255, 167, 1.0
   HEXA: #22ffa7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e033b201fa4b4abab2bcaf864a55a635 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 238, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e033b201fa4b4abab2bcaf864a55a635::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e033b201fa4b4abab2bcaf864a55a635:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e033b201fa4b4abab2bcaf864a55a635" class="color" data-tooltip="RGBA: 227, 238, 158, 1.0
   HEXA: #e3ee9eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1a99b27278b04602b5b104d7dd1332a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(134, 206, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a99b27278b04602b5b104d7dd1332a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a99b27278b04602b5b104d7dd1332a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a99b27278b04602b5b104d7dd1332a9" class="color" data-tooltip="RGBA: 134, 206, 0, 1.0
   HEXA: #86ce00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b8979a0f67c74657a703dcd733b4107e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 113, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b8979a0f67c74657a703dcd733b4107e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b8979a0f67c74657a703dcd733b4107e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b8979a0f67c74657a703dcd733b4107e" class="color" data-tooltip="RGBA: 188, 113, 150, 1.0
   HEXA: #bc7196ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5a05c23cbac4c8a978ebab1368a52ef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(126, 125, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5a05c23cbac4c8a978ebab1368a52ef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5a05c23cbac4c8a978ebab1368a52ef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5a05c23cbac4c8a978ebab1368a52ef" class="color" data-tooltip="RGBA: 126, 125, 205, 1.0
   HEXA: #7e7dcdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_54ea30f1141d434cac3ff614c459c076 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 105, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_54ea30f1141d434cac3ff614c459c076::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_54ea30f1141d434cac3ff614c459c076:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_54ea30f1141d434cac3ff614c459c076" class="color" data-tooltip="RGBA: 252, 105, 85, 1.0
   HEXA: #fc6955ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a1a568e4d3f849db942182c4ab916ba5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 143, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a1a568e4d3f849db942182c4ab916ba5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a1a568e4d3f849db942182c4ab916ba5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a1a568e4d3f849db942182c4ab916ba5" class="color" data-tooltip="RGBA: 228, 143, 114, 1.0
   HEXA: #e48f72ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4bc55e72ede14e588ebd7472ba93822c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4bc55e72ede14e588ebd7472ba93822c div { flex: 1 1 0; }
           #_4bc55e72ede14e588ebd7472ba93822c div.color { width: 100%; height: 100%; }
           #_4bc55e72ede14e588ebd7472ba93822c div.cmap { width: 100%; height: auto; }
           #_4bc55e72ede14e588ebd7472ba93822c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Set1</strong>
       
       <div id="_4bc55e72ede14e588ebd7472ba93822c" class="color-map">
           
                           <div>
                   <style>
       #_0f3ca995a0694558bf3a1a390ad087e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 26, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f3ca995a0694558bf3a1a390ad087e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f3ca995a0694558bf3a1a390ad087e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f3ca995a0694558bf3a1a390ad087e0" class="color" data-tooltip="RGBA: 228, 26, 28, 1.0
   HEXA: #e41a1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4506c453252d4ff5bb27cfe7072a2433 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(55, 126, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4506c453252d4ff5bb27cfe7072a2433::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4506c453252d4ff5bb27cfe7072a2433:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4506c453252d4ff5bb27cfe7072a2433" class="color" data-tooltip="RGBA: 55, 126, 184, 1.0
   HEXA: #377eb8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b96c3948c874918ab4f53a4918a35ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 175, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b96c3948c874918ab4f53a4918a35ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b96c3948c874918ab4f53a4918a35ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b96c3948c874918ab4f53a4918a35ca" class="color" data-tooltip="RGBA: 77, 175, 74, 1.0
   HEXA: #4daf4aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34e543dc12a74e47829714afda724718 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 78, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34e543dc12a74e47829714afda724718::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34e543dc12a74e47829714afda724718:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34e543dc12a74e47829714afda724718" class="color" data-tooltip="RGBA: 152, 78, 163, 1.0
   HEXA: #984ea3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4d727d65a9e499fbc707c77c5edd788 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4d727d65a9e499fbc707c77c5edd788::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4d727d65a9e499fbc707c77c5edd788:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4d727d65a9e499fbc707c77c5edd788" class="color" data-tooltip="RGBA: 255, 127, 0, 1.0
   HEXA: #ff7f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b994b01c375d442cbe0b117d36757f95 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b994b01c375d442cbe0b117d36757f95::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b994b01c375d442cbe0b117d36757f95:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b994b01c375d442cbe0b117d36757f95" class="color" data-tooltip="RGBA: 255, 255, 51, 1.0
   HEXA: #ffff33ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4016a56a3f4c444ea413d67832c1b668 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 86, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4016a56a3f4c444ea413d67832c1b668::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4016a56a3f4c444ea413d67832c1b668:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4016a56a3f4c444ea413d67832c1b668" class="color" data-tooltip="RGBA: 166, 86, 40, 1.0
   HEXA: #a65628ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f5a10653ed1b42c3b4f6bbcd34a68707 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 129, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f5a10653ed1b42c3b4f6bbcd34a68707::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f5a10653ed1b42c3b4f6bbcd34a68707:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f5a10653ed1b42c3b4f6bbcd34a68707" class="color" data-tooltip="RGBA: 247, 129, 191, 1.0
   HEXA: #f781bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b8c54004cef4b2394884a103d375b79 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b8c54004cef4b2394884a103d375b79::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b8c54004cef4b2394884a103d375b79:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b8c54004cef4b2394884a103d375b79" class="color" data-tooltip="RGBA: 153, 153, 153, 1.0
   HEXA: #999999ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0824e27687904cba82a5cfb3d5e2d345 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0824e27687904cba82a5cfb3d5e2d345 div { flex: 1 1 0; }
           #_0824e27687904cba82a5cfb3d5e2d345 div.color { width: 100%; height: 100%; }
           #_0824e27687904cba82a5cfb3d5e2d345 div.cmap { width: 100%; height: auto; }
           #_0824e27687904cba82a5cfb3d5e2d345 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Pastel1</strong>
       
       <div id="_0824e27687904cba82a5cfb3d5e2d345" class="color-map">
           
                           <div>
                   <style>
       #_3577f2d972ae435dae15fd8ad72ff80a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 180, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3577f2d972ae435dae15fd8ad72ff80a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3577f2d972ae435dae15fd8ad72ff80a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3577f2d972ae435dae15fd8ad72ff80a" class="color" data-tooltip="RGBA: 251, 180, 174, 1.0
   HEXA: #fbb4aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_11ebe8fcb0674e0ca774fadd047b2382 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 205, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_11ebe8fcb0674e0ca774fadd047b2382::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_11ebe8fcb0674e0ca774fadd047b2382:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_11ebe8fcb0674e0ca774fadd047b2382" class="color" data-tooltip="RGBA: 179, 205, 227, 1.0
   HEXA: #b3cde3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0723acae84c4ec384a53af7c2dedaee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 235, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0723acae84c4ec384a53af7c2dedaee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0723acae84c4ec384a53af7c2dedaee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0723acae84c4ec384a53af7c2dedaee" class="color" data-tooltip="RGBA: 204, 235, 197, 1.0
   HEXA: #ccebc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_65bb62695daa47bc9e5214e597f993ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 203, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_65bb62695daa47bc9e5214e597f993ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_65bb62695daa47bc9e5214e597f993ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_65bb62695daa47bc9e5214e597f993ab" class="color" data-tooltip="RGBA: 222, 203, 228, 1.0
   HEXA: #decbe4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf753eab333b4a1f8c1ef9cd15e781fc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 217, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf753eab333b4a1f8c1ef9cd15e781fc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf753eab333b4a1f8c1ef9cd15e781fc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf753eab333b4a1f8c1ef9cd15e781fc" class="color" data-tooltip="RGBA: 254, 217, 166, 1.0
   HEXA: #fed9a6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a87c1d7c549340618f562945ee0ad743 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a87c1d7c549340618f562945ee0ad743::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a87c1d7c549340618f562945ee0ad743:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a87c1d7c549340618f562945ee0ad743" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cb2ca22676164ed8a8e6ac07e6ace289 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 216, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cb2ca22676164ed8a8e6ac07e6ace289::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cb2ca22676164ed8a8e6ac07e6ace289:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cb2ca22676164ed8a8e6ac07e6ace289" class="color" data-tooltip="RGBA: 229, 216, 189, 1.0
   HEXA: #e5d8bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e90f25d0f1f24fbdaf075d7bf9d66441 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 218, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e90f25d0f1f24fbdaf075d7bf9d66441::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e90f25d0f1f24fbdaf075d7bf9d66441:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e90f25d0f1f24fbdaf075d7bf9d66441" class="color" data-tooltip="RGBA: 253, 218, 236, 1.0
   HEXA: #fddaecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7539e28ceb4440efab1809a3611dff7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 242, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7539e28ceb4440efab1809a3611dff7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7539e28ceb4440efab1809a3611dff7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7539e28ceb4440efab1809a3611dff7b" class="color" data-tooltip="RGBA: 242, 242, 242, 1.0
   HEXA: #f2f2f2ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_cf744e6a0ed5433c98e32f47f99603e7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_cf744e6a0ed5433c98e32f47f99603e7 div { flex: 1 1 0; }
           #_cf744e6a0ed5433c98e32f47f99603e7 div.color { width: 100%; height: 100%; }
           #_cf744e6a0ed5433c98e32f47f99603e7 div.cmap { width: 100%; height: auto; }
           #_cf744e6a0ed5433c98e32f47f99603e7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Dark2</strong>
       
       <div id="_cf744e6a0ed5433c98e32f47f99603e7" class="color-map">
           
                           <div>
                   <style>
       #_7ac9b8d194344b7493409620ecd393d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 158, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7ac9b8d194344b7493409620ecd393d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7ac9b8d194344b7493409620ecd393d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7ac9b8d194344b7493409620ecd393d1" class="color" data-tooltip="RGBA: 27, 158, 119, 1.0
   HEXA: #1b9e77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a0aca40a13e546e0b29d46de7ba3292e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 95, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a0aca40a13e546e0b29d46de7ba3292e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a0aca40a13e546e0b29d46de7ba3292e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a0aca40a13e546e0b29d46de7ba3292e" class="color" data-tooltip="RGBA: 217, 95, 2, 1.0
   HEXA: #d95f02ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6ce911c77cea4e38afec9e10cec7f12f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 112, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ce911c77cea4e38afec9e10cec7f12f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ce911c77cea4e38afec9e10cec7f12f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ce911c77cea4e38afec9e10cec7f12f" class="color" data-tooltip="RGBA: 117, 112, 179, 1.0
   HEXA: #7570b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c04925c09d9430aaaaec7cf7b028f93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 41, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c04925c09d9430aaaaec7cf7b028f93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c04925c09d9430aaaaec7cf7b028f93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c04925c09d9430aaaaec7cf7b028f93" class="color" data-tooltip="RGBA: 231, 41, 138, 1.0
   HEXA: #e7298aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_619e82b461cb47318b75d54ef56d059d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 166, 30, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_619e82b461cb47318b75d54ef56d059d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_619e82b461cb47318b75d54ef56d059d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_619e82b461cb47318b75d54ef56d059d" class="color" data-tooltip="RGBA: 102, 166, 30, 1.0
   HEXA: #66a61eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6171d42d7f0f462d81455da423e8e54e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 171, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6171d42d7f0f462d81455da423e8e54e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6171d42d7f0f462d81455da423e8e54e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6171d42d7f0f462d81455da423e8e54e" class="color" data-tooltip="RGBA: 230, 171, 2, 1.0
   HEXA: #e6ab02ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c2587f9858a846e398a6255fa3b3abeb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 118, 29, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c2587f9858a846e398a6255fa3b3abeb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c2587f9858a846e398a6255fa3b3abeb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c2587f9858a846e398a6255fa3b3abeb" class="color" data-tooltip="RGBA: 166, 118, 29, 1.0
   HEXA: #a6761dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1998a59760140aea6454ce001ff5890 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1998a59760140aea6454ce001ff5890::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1998a59760140aea6454ce001ff5890:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1998a59760140aea6454ce001ff5890" class="color" data-tooltip="RGBA: 102, 102, 102, 1.0
   HEXA: #666666ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2ec53f3e80634437a3da7ed4108dc1a4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2ec53f3e80634437a3da7ed4108dc1a4 div { flex: 1 1 0; }
           #_2ec53f3e80634437a3da7ed4108dc1a4 div.color { width: 100%; height: 100%; }
           #_2ec53f3e80634437a3da7ed4108dc1a4 div.cmap { width: 100%; height: auto; }
           #_2ec53f3e80634437a3da7ed4108dc1a4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Set2</strong>
       
       <div id="_2ec53f3e80634437a3da7ed4108dc1a4" class="color-map">
           
                           <div>
                   <style>
       #_acfaebfd9d0542d3affc19f05753a55f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 194, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_acfaebfd9d0542d3affc19f05753a55f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_acfaebfd9d0542d3affc19f05753a55f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_acfaebfd9d0542d3affc19f05753a55f" class="color" data-tooltip="RGBA: 102, 194, 165, 1.0
   HEXA: #66c2a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c3907b0531c464ab8f9d4e2dcff4fbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 141, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c3907b0531c464ab8f9d4e2dcff4fbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c3907b0531c464ab8f9d4e2dcff4fbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c3907b0531c464ab8f9d4e2dcff4fbd" class="color" data-tooltip="RGBA: 252, 141, 98, 1.0
   HEXA: #fc8d62ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9207a0821814c4abee2ab6028387eda { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 160, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9207a0821814c4abee2ab6028387eda::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9207a0821814c4abee2ab6028387eda:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9207a0821814c4abee2ab6028387eda" class="color" data-tooltip="RGBA: 141, 160, 203, 1.0
   HEXA: #8da0cbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0af2366ef4a246c68c52624c6216bc4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 138, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0af2366ef4a246c68c52624c6216bc4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0af2366ef4a246c68c52624c6216bc4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0af2366ef4a246c68c52624c6216bc4d" class="color" data-tooltip="RGBA: 231, 138, 195, 1.0
   HEXA: #e78ac3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_26b908e7e61643548f60d67e6c7fbab3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 216, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26b908e7e61643548f60d67e6c7fbab3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26b908e7e61643548f60d67e6c7fbab3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26b908e7e61643548f60d67e6c7fbab3" class="color" data-tooltip="RGBA: 166, 216, 84, 1.0
   HEXA: #a6d854ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_21c16fcf3c6c4b28aad99a1cff4de24f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 217, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_21c16fcf3c6c4b28aad99a1cff4de24f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_21c16fcf3c6c4b28aad99a1cff4de24f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_21c16fcf3c6c4b28aad99a1cff4de24f" class="color" data-tooltip="RGBA: 255, 217, 47, 1.0
   HEXA: #ffd92fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8d69a39fe2e048ff9012807683a727d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 196, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8d69a39fe2e048ff9012807683a727d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8d69a39fe2e048ff9012807683a727d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8d69a39fe2e048ff9012807683a727d4" class="color" data-tooltip="RGBA: 229, 196, 148, 1.0
   HEXA: #e5c494ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_18af5ec03b61427fb915fa3d3757b7d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 179, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_18af5ec03b61427fb915fa3d3757b7d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_18af5ec03b61427fb915fa3d3757b7d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_18af5ec03b61427fb915fa3d3757b7d9" class="color" data-tooltip="RGBA: 179, 179, 179, 1.0
   HEXA: #b3b3b3ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ada861d4ee8c4fa0a7bb0ca5716dd291 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ada861d4ee8c4fa0a7bb0ca5716dd291 div { flex: 1 1 0; }
           #_ada861d4ee8c4fa0a7bb0ca5716dd291 div.color { width: 100%; height: 100%; }
           #_ada861d4ee8c4fa0a7bb0ca5716dd291 div.cmap { width: 100%; height: auto; }
           #_ada861d4ee8c4fa0a7bb0ca5716dd291 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Pastel2</strong>
       
       <div id="_ada861d4ee8c4fa0a7bb0ca5716dd291" class="color-map">
           
                           <div>
                   <style>
       #_ba2848da52654c9da16c53ac4cf8e90b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 226, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba2848da52654c9da16c53ac4cf8e90b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba2848da52654c9da16c53ac4cf8e90b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba2848da52654c9da16c53ac4cf8e90b" class="color" data-tooltip="RGBA: 179, 226, 205, 1.0
   HEXA: #b3e2cdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5c79307d93e45b7bfef6bdcc8b2cb82 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 205, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5c79307d93e45b7bfef6bdcc8b2cb82::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5c79307d93e45b7bfef6bdcc8b2cb82:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5c79307d93e45b7bfef6bdcc8b2cb82" class="color" data-tooltip="RGBA: 253, 205, 172, 1.0
   HEXA: #fdcdacff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4ef1ae55a42e4775b9d93a46f6c3d379 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 213, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4ef1ae55a42e4775b9d93a46f6c3d379::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4ef1ae55a42e4775b9d93a46f6c3d379:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4ef1ae55a42e4775b9d93a46f6c3d379" class="color" data-tooltip="RGBA: 203, 213, 232, 1.0
   HEXA: #cbd5e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_13983991a9bb4bde80d64c1ca7012af7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 202, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_13983991a9bb4bde80d64c1ca7012af7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_13983991a9bb4bde80d64c1ca7012af7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_13983991a9bb4bde80d64c1ca7012af7" class="color" data-tooltip="RGBA: 244, 202, 228, 1.0
   HEXA: #f4cae4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d9624d630af42dabb396cdaa33a1822 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d9624d630af42dabb396cdaa33a1822::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d9624d630af42dabb396cdaa33a1822:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d9624d630af42dabb396cdaa33a1822" class="color" data-tooltip="RGBA: 230, 245, 201, 1.0
   HEXA: #e6f5c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cb23a4496bfc4418b9b7d56d048b04ad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 242, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cb23a4496bfc4418b9b7d56d048b04ad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cb23a4496bfc4418b9b7d56d048b04ad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cb23a4496bfc4418b9b7d56d048b04ad" class="color" data-tooltip="RGBA: 255, 242, 174, 1.0
   HEXA: #fff2aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_603384ac732e46409feaf2be3baf5226 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 226, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_603384ac732e46409feaf2be3baf5226::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_603384ac732e46409feaf2be3baf5226:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_603384ac732e46409feaf2be3baf5226" class="color" data-tooltip="RGBA: 241, 226, 204, 1.0
   HEXA: #f1e2ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a1d57528fd847aaaffc1695c83b4776 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 204, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a1d57528fd847aaaffc1695c83b4776::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a1d57528fd847aaaffc1695c83b4776:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a1d57528fd847aaaffc1695c83b4776" class="color" data-tooltip="RGBA: 204, 204, 204, 1.0
   HEXA: #ccccccff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9d2db68253aa411c8f71c05a9ecf7b68 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9d2db68253aa411c8f71c05a9ecf7b68 div { flex: 1 1 0; }
           #_9d2db68253aa411c8f71c05a9ecf7b68 div.color { width: 100%; height: 100%; }
           #_9d2db68253aa411c8f71c05a9ecf7b68 div.cmap { width: 100%; height: auto; }
           #_9d2db68253aa411c8f71c05a9ecf7b68 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Set3</strong>
       
       <div id="_9d2db68253aa411c8f71c05a9ecf7b68" class="color-map">
           
                           <div>
                   <style>
       #_d7b9af50b4294c29a42015b992d9de59 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 211, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d7b9af50b4294c29a42015b992d9de59::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d7b9af50b4294c29a42015b992d9de59:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d7b9af50b4294c29a42015b992d9de59" class="color" data-tooltip="RGBA: 141, 211, 199, 1.0
   HEXA: #8dd3c7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b7800f1ccf6845fbbfcb6f58b42e1e0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b7800f1ccf6845fbbfcb6f58b42e1e0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b7800f1ccf6845fbbfcb6f58b42e1e0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b7800f1ccf6845fbbfcb6f58b42e1e0d" class="color" data-tooltip="RGBA: 255, 255, 179, 1.0
   HEXA: #ffffb3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d58182860c3471fa80db6666081fc3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 186, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d58182860c3471fa80db6666081fc3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d58182860c3471fa80db6666081fc3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d58182860c3471fa80db6666081fc3d" class="color" data-tooltip="RGBA: 190, 186, 218, 1.0
   HEXA: #bebadaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb2c597f98164cb4a6dcc2803613f270 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 128, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb2c597f98164cb4a6dcc2803613f270::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb2c597f98164cb4a6dcc2803613f270:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb2c597f98164cb4a6dcc2803613f270" class="color" data-tooltip="RGBA: 251, 128, 114, 1.0
   HEXA: #fb8072ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d29f5119fa5646ff808da5463e82381f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 177, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d29f5119fa5646ff808da5463e82381f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d29f5119fa5646ff808da5463e82381f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d29f5119fa5646ff808da5463e82381f" class="color" data-tooltip="RGBA: 128, 177, 211, 1.0
   HEXA: #80b1d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_347316b8d0d14afa8ef4ba31cdbc6002 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 180, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_347316b8d0d14afa8ef4ba31cdbc6002::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_347316b8d0d14afa8ef4ba31cdbc6002:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_347316b8d0d14afa8ef4ba31cdbc6002" class="color" data-tooltip="RGBA: 253, 180, 98, 1.0
   HEXA: #fdb462ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1134904d02a145b48330b13b714bf747 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 222, 105, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1134904d02a145b48330b13b714bf747::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1134904d02a145b48330b13b714bf747:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1134904d02a145b48330b13b714bf747" class="color" data-tooltip="RGBA: 179, 222, 105, 1.0
   HEXA: #b3de69ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ab6ddfc465a42fd845a173139f61742 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 205, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ab6ddfc465a42fd845a173139f61742::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ab6ddfc465a42fd845a173139f61742:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ab6ddfc465a42fd845a173139f61742" class="color" data-tooltip="RGBA: 252, 205, 229, 1.0
   HEXA: #fccde5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c5806ecf0ff1403482674b8f4e90247e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 217, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c5806ecf0ff1403482674b8f4e90247e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c5806ecf0ff1403482674b8f4e90247e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c5806ecf0ff1403482674b8f4e90247e" class="color" data-tooltip="RGBA: 217, 217, 217, 1.0
   HEXA: #d9d9d9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb7f0ae7de6b4c7f854ba38b721a8457 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 128, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb7f0ae7de6b4c7f854ba38b721a8457::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb7f0ae7de6b4c7f854ba38b721a8457:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb7f0ae7de6b4c7f854ba38b721a8457" class="color" data-tooltip="RGBA: 188, 128, 189, 1.0
   HEXA: #bc80bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3503bfae8c944205b4743b98e8164e4c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 235, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3503bfae8c944205b4743b98e8164e4c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3503bfae8c944205b4743b98e8164e4c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3503bfae8c944205b4743b98e8164e4c" class="color" data-tooltip="RGBA: 204, 235, 197, 1.0
   HEXA: #ccebc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64cbf3c31a854b6886f2fd5f0895581a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 237, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64cbf3c31a854b6886f2fd5f0895581a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64cbf3c31a854b6886f2fd5f0895581a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64cbf3c31a854b6886f2fd5f0895581a" class="color" data-tooltip="RGBA: 255, 237, 111, 1.0
   HEXA: #ffed6fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_25332408fa554d26a9e446f1c2b098a0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_25332408fa554d26a9e446f1c2b098a0 div { flex: 1 1 0; }
           #_25332408fa554d26a9e446f1c2b098a0 div.color { width: 100%; height: 100%; }
           #_25332408fa554d26a9e446f1c2b098a0 div.cmap { width: 100%; height: auto; }
           #_25332408fa554d26a9e446f1c2b098a0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Antique</strong>
       
       <div id="_25332408fa554d26a9e446f1c2b098a0" class="color-map">
           
                           <div>
                   <style>
       #_dd31534aecc8496e9dc6b81f55bcf5ce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 92, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dd31534aecc8496e9dc6b81f55bcf5ce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dd31534aecc8496e9dc6b81f55bcf5ce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dd31534aecc8496e9dc6b81f55bcf5ce" class="color" data-tooltip="RGBA: 133, 92, 117, 1.0
   HEXA: #855c75ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ecd60c78233b4c8fbf3f93f707a7699d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 175, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ecd60c78233b4c8fbf3f93f707a7699d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ecd60c78233b4c8fbf3f93f707a7699d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ecd60c78233b4c8fbf3f93f707a7699d" class="color" data-tooltip="RGBA: 217, 175, 107, 1.0
   HEXA: #d9af6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2c70d5609072485f87b6336ffc5f33f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(175, 100, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2c70d5609072485f87b6336ffc5f33f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2c70d5609072485f87b6336ffc5f33f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2c70d5609072485f87b6336ffc5f33f3" class="color" data-tooltip="RGBA: 175, 100, 88, 1.0
   HEXA: #af6458ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a94bb6889cb14f34a31c7bc956c6a367 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 111, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a94bb6889cb14f34a31c7bc956c6a367::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a94bb6889cb14f34a31c7bc956c6a367:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a94bb6889cb14f34a31c7bc956c6a367" class="color" data-tooltip="RGBA: 115, 111, 76, 1.0
   HEXA: #736f4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c157feb0c8814646a57a186c2639c6e6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 106, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c157feb0c8814646a57a186c2639c6e6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c157feb0c8814646a57a186c2639c6e6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c157feb0c8814646a57a186c2639c6e6" class="color" data-tooltip="RGBA: 82, 106, 131, 1.0
   HEXA: #526a83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_850a1d2d29e6414eb6771d578d5332c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(98, 83, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_850a1d2d29e6414eb6771d578d5332c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_850a1d2d29e6414eb6771d578d5332c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_850a1d2d29e6414eb6771d578d5332c1" class="color" data-tooltip="RGBA: 98, 83, 119, 1.0
   HEXA: #625377ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea31f4bc781b4bde90a0073a1be95103 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 133, 92, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea31f4bc781b4bde90a0073a1be95103::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea31f4bc781b4bde90a0073a1be95103:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea31f4bc781b4bde90a0073a1be95103" class="color" data-tooltip="RGBA: 104, 133, 92, 1.0
   HEXA: #68855cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63aabe95ee3c4bcf8c8785792b1d987d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 156, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63aabe95ee3c4bcf8c8785792b1d987d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63aabe95ee3c4bcf8c8785792b1d987d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63aabe95ee3c4bcf8c8785792b1d987d" class="color" data-tooltip="RGBA: 156, 156, 94, 1.0
   HEXA: #9c9c5eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_766ddf94212c43e68d1fefb0cad7af98 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 97, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_766ddf94212c43e68d1fefb0cad7af98::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_766ddf94212c43e68d1fefb0cad7af98:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_766ddf94212c43e68d1fefb0cad7af98" class="color" data-tooltip="RGBA: 160, 97, 119, 1.0
   HEXA: #a06177ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60e4d7356a984aa08ef81a8cf8fa0369 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 120, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60e4d7356a984aa08ef81a8cf8fa0369::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60e4d7356a984aa08ef81a8cf8fa0369:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60e4d7356a984aa08ef81a8cf8fa0369" class="color" data-tooltip="RGBA: 140, 120, 93, 1.0
   HEXA: #8c785dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c7a05a7f04a4904b6e0c98980240c7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 124, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c7a05a7f04a4904b6e0c98980240c7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c7a05a7f04a4904b6e0c98980240c7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c7a05a7f04a4904b6e0c98980240c7b" class="color" data-tooltip="RGBA: 124, 124, 124, 1.0
   HEXA: #7c7c7cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_dfcd0af1ac6444a0916203144612f334 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_dfcd0af1ac6444a0916203144612f334 div { flex: 1 1 0; }
           #_dfcd0af1ac6444a0916203144612f334 div.color { width: 100%; height: 100%; }
           #_dfcd0af1ac6444a0916203144612f334 div.cmap { width: 100%; height: auto; }
           #_dfcd0af1ac6444a0916203144612f334 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Bold</strong>
       
       <div id="_dfcd0af1ac6444a0916203144612f334" class="color-map">
           
                           <div>
                   <style>
       #_9d108467c48347b3b438eceb0036122f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 60, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d108467c48347b3b438eceb0036122f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d108467c48347b3b438eceb0036122f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d108467c48347b3b438eceb0036122f" class="color" data-tooltip="RGBA: 127, 60, 141, 1.0
   HEXA: #7f3c8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ac69a753a48411da1309a778d44975d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 165, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ac69a753a48411da1309a778d44975d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ac69a753a48411da1309a778d44975d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ac69a753a48411da1309a778d44975d" class="color" data-tooltip="RGBA: 17, 165, 121, 1.0
   HEXA: #11a579ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c98fc1380b74c1793d2d63407648948 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 105, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c98fc1380b74c1793d2d63407648948::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c98fc1380b74c1793d2d63407648948:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c98fc1380b74c1793d2d63407648948" class="color" data-tooltip="RGBA: 57, 105, 172, 1.0
   HEXA: #3969acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_17e21f5bfac44af79f35462e5b827b8a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 183, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_17e21f5bfac44af79f35462e5b827b8a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_17e21f5bfac44af79f35462e5b827b8a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_17e21f5bfac44af79f35462e5b827b8a" class="color" data-tooltip="RGBA: 242, 183, 1, 1.0
   HEXA: #f2b701ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a709e81a7a8047f1b46d32f96123808c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 63, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a709e81a7a8047f1b46d32f96123808c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a709e81a7a8047f1b46d32f96123808c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a709e81a7a8047f1b46d32f96123808c" class="color" data-tooltip="RGBA: 231, 63, 116, 1.0
   HEXA: #e73f74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_008a3026613c473a869844885fe9e1d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 186, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_008a3026613c473a869844885fe9e1d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_008a3026613c473a869844885fe9e1d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_008a3026613c473a869844885fe9e1d3" class="color" data-tooltip="RGBA: 128, 186, 90, 1.0
   HEXA: #80ba5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9891c63bce6d4468ad376062ab2effd6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 131, 16, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9891c63bce6d4468ad376062ab2effd6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9891c63bce6d4468ad376062ab2effd6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9891c63bce6d4468ad376062ab2effd6" class="color" data-tooltip="RGBA: 230, 131, 16, 1.0
   HEXA: #e68310ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bc69f161a69f46e3bdcc6d77d7c3222b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 134, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc69f161a69f46e3bdcc6d77d7c3222b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc69f161a69f46e3bdcc6d77d7c3222b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc69f161a69f46e3bdcc6d77d7c3222b" class="color" data-tooltip="RGBA: 0, 134, 149, 1.0
   HEXA: #008695ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4ddf33684254eec982f1dad284d9a1d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 28, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4ddf33684254eec982f1dad284d9a1d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4ddf33684254eec982f1dad284d9a1d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4ddf33684254eec982f1dad284d9a1d" class="color" data-tooltip="RGBA: 207, 28, 144, 1.0
   HEXA: #cf1c90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6902210061a34b12ad9bd6f57574c22c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 123, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6902210061a34b12ad9bd6f57574c22c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6902210061a34b12ad9bd6f57574c22c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6902210061a34b12ad9bd6f57574c22c" class="color" data-tooltip="RGBA: 249, 123, 114, 1.0
   HEXA: #f97b72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9f6ab3d94c9a42819ed7c9c0bfd5e5e2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 170, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9f6ab3d94c9a42819ed7c9c0bfd5e5e2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9f6ab3d94c9a42819ed7c9c0bfd5e5e2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9f6ab3d94c9a42819ed7c9c0bfd5e5e2" class="color" data-tooltip="RGBA: 165, 170, 153, 1.0
   HEXA: #a5aa99ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_97afb7cc0c8c432d932a05c6ff9e82ea {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_97afb7cc0c8c432d932a05c6ff9e82ea div { flex: 1 1 0; }
           #_97afb7cc0c8c432d932a05c6ff9e82ea div.color { width: 100%; height: 100%; }
           #_97afb7cc0c8c432d932a05c6ff9e82ea div.cmap { width: 100%; height: auto; }
           #_97afb7cc0c8c432d932a05c6ff9e82ea div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Pastel</strong>
       
       <div id="_97afb7cc0c8c432d932a05c6ff9e82ea" class="color-map">
           
                           <div>
                   <style>
       #_88e74c7d206941e0b80ac42bbc7e74a8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 197, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_88e74c7d206941e0b80ac42bbc7e74a8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_88e74c7d206941e0b80ac42bbc7e74a8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_88e74c7d206941e0b80ac42bbc7e74a8" class="color" data-tooltip="RGBA: 102, 197, 204, 1.0
   HEXA: #66c5ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_575c335f355e4ff7b73de7693fb918c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 207, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_575c335f355e4ff7b73de7693fb918c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_575c335f355e4ff7b73de7693fb918c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_575c335f355e4ff7b73de7693fb918c1" class="color" data-tooltip="RGBA: 246, 207, 113, 1.0
   HEXA: #f6cf71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_df47bc6ee259454890259122bd26c3a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 156, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_df47bc6ee259454890259122bd26c3a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_df47bc6ee259454890259122bd26c3a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_df47bc6ee259454890259122bd26c3a9" class="color" data-tooltip="RGBA: 248, 156, 116, 1.0
   HEXA: #f89c74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ec412f9997534e618bd19e655ac6aee1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 176, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ec412f9997534e618bd19e655ac6aee1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ec412f9997534e618bd19e655ac6aee1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ec412f9997534e618bd19e655ac6aee1" class="color" data-tooltip="RGBA: 220, 176, 242, 1.0
   HEXA: #dcb0f2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_056626d44d244389a44cc3399164cc0a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 197, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_056626d44d244389a44cc3399164cc0a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_056626d44d244389a44cc3399164cc0a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_056626d44d244389a44cc3399164cc0a" class="color" data-tooltip="RGBA: 135, 197, 95, 1.0
   HEXA: #87c55fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c85d5fce43648a89deebf555d6a0192 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 185, 243, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c85d5fce43648a89deebf555d6a0192::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c85d5fce43648a89deebf555d6a0192:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c85d5fce43648a89deebf555d6a0192" class="color" data-tooltip="RGBA: 158, 185, 243, 1.0
   HEXA: #9eb9f3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0ae5a1504994062a31b3e075f2a11a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 136, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0ae5a1504994062a31b3e075f2a11a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0ae5a1504994062a31b3e075f2a11a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0ae5a1504994062a31b3e075f2a11a6" class="color" data-tooltip="RGBA: 254, 136, 177, 1.0
   HEXA: #fe88b1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e5bb38cb92742a69f6068a6ed448bde { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 219, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e5bb38cb92742a69f6068a6ed448bde::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e5bb38cb92742a69f6068a6ed448bde:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e5bb38cb92742a69f6068a6ed448bde" class="color" data-tooltip="RGBA: 201, 219, 116, 1.0
   HEXA: #c9db74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f9e96ae2685d4202b92cd1da72e60516 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 224, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f9e96ae2685d4202b92cd1da72e60516::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f9e96ae2685d4202b92cd1da72e60516:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f9e96ae2685d4202b92cd1da72e60516" class="color" data-tooltip="RGBA: 139, 224, 164, 1.0
   HEXA: #8be0a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b77f357e8db4bfdbe25f72a64f37f48 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 151, 231, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b77f357e8db4bfdbe25f72a64f37f48::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b77f357e8db4bfdbe25f72a64f37f48:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b77f357e8db4bfdbe25f72a64f37f48" class="color" data-tooltip="RGBA: 180, 151, 231, 1.0
   HEXA: #b497e7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_11ee1c0abf4142f1a0aff17412344f30 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 179, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_11ee1c0abf4142f1a0aff17412344f30::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_11ee1c0abf4142f1a0aff17412344f30:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_11ee1c0abf4142f1a0aff17412344f30" class="color" data-tooltip="RGBA: 179, 179, 179, 1.0
   HEXA: #b3b3b3ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c779dd27377f4b858769e843e710564a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c779dd27377f4b858769e843e710564a div { flex: 1 1 0; }
           #_c779dd27377f4b858769e843e710564a div.color { width: 100%; height: 100%; }
           #_c779dd27377f4b858769e843e710564a div.cmap { width: 100%; height: auto; }
           #_c779dd27377f4b858769e843e710564a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Prism</strong>
       
       <div id="_c779dd27377f4b858769e843e710564a" class="color-map">
           
                           <div>
                   <style>
       #_a270ede1d43d4455a19773ea25f76a62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 70, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a270ede1d43d4455a19773ea25f76a62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a270ede1d43d4455a19773ea25f76a62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a270ede1d43d4455a19773ea25f76a62" class="color" data-tooltip="RGBA: 95, 70, 144, 1.0
   HEXA: #5f4690ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64d0a62834ce45278cd430c9c1a4460b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 105, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64d0a62834ce45278cd430c9c1a4460b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64d0a62834ce45278cd430c9c1a4460b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64d0a62834ce45278cd430c9c1a4460b" class="color" data-tooltip="RGBA: 29, 105, 150, 1.0
   HEXA: #1d6996ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_464948be1a864e1babff84bf3fab5e6a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 166, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_464948be1a864e1babff84bf3fab5e6a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_464948be1a864e1babff84bf3fab5e6a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_464948be1a864e1babff84bf3fab5e6a" class="color" data-tooltip="RGBA: 56, 166, 165, 1.0
   HEXA: #38a6a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a16778444f3340748315be6ed8d1be4c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 133, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a16778444f3340748315be6ed8d1be4c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a16778444f3340748315be6ed8d1be4c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a16778444f3340748315be6ed8d1be4c" class="color" data-tooltip="RGBA: 15, 133, 84, 1.0
   HEXA: #0f8554ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57e2de87eb6a4c358f99aba6bdeabfe1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 175, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57e2de87eb6a4c358f99aba6bdeabfe1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57e2de87eb6a4c358f99aba6bdeabfe1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57e2de87eb6a4c358f99aba6bdeabfe1" class="color" data-tooltip="RGBA: 115, 175, 72, 1.0
   HEXA: #73af48ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90d4263d5e97403dae0d84e4d20ed0a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 173, 8, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90d4263d5e97403dae0d84e4d20ed0a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90d4263d5e97403dae0d84e4d20ed0a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90d4263d5e97403dae0d84e4d20ed0a0" class="color" data-tooltip="RGBA: 237, 173, 8, 1.0
   HEXA: #edad08ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dd634bd4f7f44b389351a8a66e258431 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 124, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dd634bd4f7f44b389351a8a66e258431::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dd634bd4f7f44b389351a8a66e258431:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dd634bd4f7f44b389351a8a66e258431" class="color" data-tooltip="RGBA: 225, 124, 5, 1.0
   HEXA: #e17c05ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_de3b97fab4724a3a8266349bbf8d5de1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 80, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_de3b97fab4724a3a8266349bbf8d5de1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_de3b97fab4724a3a8266349bbf8d5de1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_de3b97fab4724a3a8266349bbf8d5de1" class="color" data-tooltip="RGBA: 204, 80, 62, 1.0
   HEXA: #cc503eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80fbbd8a54f846ebb4b9b76c066960f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(148, 52, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80fbbd8a54f846ebb4b9b76c066960f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80fbbd8a54f846ebb4b9b76c066960f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80fbbd8a54f846ebb4b9b76c066960f1" class="color" data-tooltip="RGBA: 148, 52, 110, 1.0
   HEXA: #94346eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1792ef8c75384a58802c6b4133bd1eff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 64, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1792ef8c75384a58802c6b4133bd1eff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1792ef8c75384a58802c6b4133bd1eff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1792ef8c75384a58802c6b4133bd1eff" class="color" data-tooltip="RGBA: 111, 64, 112, 1.0
   HEXA: #6f4070ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_55bcd9630bcb4e0f80c91e077fd19b97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_55bcd9630bcb4e0f80c91e077fd19b97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_55bcd9630bcb4e0f80c91e077fd19b97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_55bcd9630bcb4e0f80c91e077fd19b97" class="color" data-tooltip="RGBA: 102, 102, 102, 1.0
   HEXA: #666666ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_62c7a06922b442f88beaaa7931db064c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_62c7a06922b442f88beaaa7931db064c div { flex: 1 1 0; }
           #_62c7a06922b442f88beaaa7931db064c div.color { width: 100%; height: 100%; }
           #_62c7a06922b442f88beaaa7931db064c div.cmap { width: 100%; height: auto; }
           #_62c7a06922b442f88beaaa7931db064c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Safe</strong>
       
       <div id="_62c7a06922b442f88beaaa7931db064c" class="color-map">
           
                           <div>
                   <style>
       #_b3f4792736994d0587a6cd746287d287 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 204, 238, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b3f4792736994d0587a6cd746287d287::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b3f4792736994d0587a6cd746287d287:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b3f4792736994d0587a6cd746287d287" class="color" data-tooltip="RGBA: 136, 204, 238, 1.0
   HEXA: #88cceeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b09dc703aa474f14a9c5567a8fd69501 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 102, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b09dc703aa474f14a9c5567a8fd69501::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b09dc703aa474f14a9c5567a8fd69501:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b09dc703aa474f14a9c5567a8fd69501" class="color" data-tooltip="RGBA: 204, 102, 119, 1.0
   HEXA: #cc6677ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e2b7b7eed5742a3ba17e77077e6cba9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 204, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e2b7b7eed5742a3ba17e77077e6cba9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e2b7b7eed5742a3ba17e77077e6cba9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e2b7b7eed5742a3ba17e77077e6cba9" class="color" data-tooltip="RGBA: 221, 204, 119, 1.0
   HEXA: #ddcc77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa65aaa50bab42248835d2543a75328e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 119, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa65aaa50bab42248835d2543a75328e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa65aaa50bab42248835d2543a75328e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa65aaa50bab42248835d2543a75328e" class="color" data-tooltip="RGBA: 17, 119, 51, 1.0
   HEXA: #117733ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dedc56fe6f7b40cb83bf1a1134ba2e30 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 34, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dedc56fe6f7b40cb83bf1a1134ba2e30::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dedc56fe6f7b40cb83bf1a1134ba2e30:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dedc56fe6f7b40cb83bf1a1134ba2e30" class="color" data-tooltip="RGBA: 51, 34, 136, 1.0
   HEXA: #332288ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb0c04d6fe64490ab5188396a1c60f6f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 68, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb0c04d6fe64490ab5188396a1c60f6f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb0c04d6fe64490ab5188396a1c60f6f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb0c04d6fe64490ab5188396a1c60f6f" class="color" data-tooltip="RGBA: 170, 68, 153, 1.0
   HEXA: #aa4499ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_acd482bff6a94b9380cf12c38bcb924d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 170, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_acd482bff6a94b9380cf12c38bcb924d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_acd482bff6a94b9380cf12c38bcb924d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_acd482bff6a94b9380cf12c38bcb924d" class="color" data-tooltip="RGBA: 68, 170, 153, 1.0
   HEXA: #44aa99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ba6ded7c5e6426f9aa1296f2a8843cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ba6ded7c5e6426f9aa1296f2a8843cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ba6ded7c5e6426f9aa1296f2a8843cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ba6ded7c5e6426f9aa1296f2a8843cd" class="color" data-tooltip="RGBA: 153, 153, 51, 1.0
   HEXA: #999933ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e71419ab5c524313b5cd9ced8b9385d0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 34, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e71419ab5c524313b5cd9ced8b9385d0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e71419ab5c524313b5cd9ced8b9385d0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e71419ab5c524313b5cd9ced8b9385d0" class="color" data-tooltip="RGBA: 136, 34, 85, 1.0
   HEXA: #882255ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97d860f8e70f4436a102517f5dbdc972 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 17, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97d860f8e70f4436a102517f5dbdc972::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97d860f8e70f4436a102517f5dbdc972:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97d860f8e70f4436a102517f5dbdc972" class="color" data-tooltip="RGBA: 102, 17, 0, 1.0
   HEXA: #661100ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ad64595e6840442496af96f1de1bfa71 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 136, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ad64595e6840442496af96f1de1bfa71::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ad64595e6840442496af96f1de1bfa71:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ad64595e6840442496af96f1de1bfa71" class="color" data-tooltip="RGBA: 136, 136, 136, 1.0
   HEXA: #888888ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0df7feb8b3504eb0bc7d6cfa779ce698 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0df7feb8b3504eb0bc7d6cfa779ce698 div { flex: 1 1 0; }
           #_0df7feb8b3504eb0bc7d6cfa779ce698 div.color { width: 100%; height: 100%; }
           #_0df7feb8b3504eb0bc7d6cfa779ce698 div.cmap { width: 100%; height: auto; }
           #_0df7feb8b3504eb0bc7d6cfa779ce698 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Vivid</strong>
       
       <div id="_0df7feb8b3504eb0bc7d6cfa779ce698" class="color-map">
           
                           <div>
                   <style>
       #_5a67d0a402cc45ffb4f0a30e8ee33b62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 134, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5a67d0a402cc45ffb4f0a30e8ee33b62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5a67d0a402cc45ffb4f0a30e8ee33b62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5a67d0a402cc45ffb4f0a30e8ee33b62" class="color" data-tooltip="RGBA: 229, 134, 6, 1.0
   HEXA: #e58606ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fe3c64be4b1f49f6bcd051e981aecfb6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(93, 105, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe3c64be4b1f49f6bcd051e981aecfb6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe3c64be4b1f49f6bcd051e981aecfb6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe3c64be4b1f49f6bcd051e981aecfb6" class="color" data-tooltip="RGBA: 93, 105, 177, 1.0
   HEXA: #5d69b1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8dfdb9da0ae247f79e72c7372173a59d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 188, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8dfdb9da0ae247f79e72c7372173a59d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8dfdb9da0ae247f79e72c7372173a59d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8dfdb9da0ae247f79e72c7372173a59d" class="color" data-tooltip="RGBA: 82, 188, 163, 1.0
   HEXA: #52bca3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0fa0cc2cadf49a4a58f3d8ddcfe16f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 201, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0fa0cc2cadf49a4a58f3d8ddcfe16f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0fa0cc2cadf49a4a58f3d8ddcfe16f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0fa0cc2cadf49a4a58f3d8ddcfe16f8" class="color" data-tooltip="RGBA: 153, 201, 69, 1.0
   HEXA: #99c945ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b49080cff1643eaa704832ec93ada77 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 97, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b49080cff1643eaa704832ec93ada77::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b49080cff1643eaa704832ec93ada77:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b49080cff1643eaa704832ec93ada77" class="color" data-tooltip="RGBA: 204, 97, 176, 1.0
   HEXA: #cc61b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_37359f6368c745c2b98c94d06781e789 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 121, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_37359f6368c745c2b98c94d06781e789::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_37359f6368c745c2b98c94d06781e789:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_37359f6368c745c2b98c94d06781e789" class="color" data-tooltip="RGBA: 36, 121, 108, 1.0
   HEXA: #24796cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2f895befa33540f086097c8544dd1fd3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 165, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2f895befa33540f086097c8544dd1fd3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2f895befa33540f086097c8544dd1fd3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2f895befa33540f086097c8544dd1fd3" class="color" data-tooltip="RGBA: 218, 165, 27, 1.0
   HEXA: #daa51bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b626a94156e84ae49eb54738f175d451 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 138, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b626a94156e84ae49eb54738f175d451::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b626a94156e84ae49eb54738f175d451:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b626a94156e84ae49eb54738f175d451" class="color" data-tooltip="RGBA: 47, 138, 196, 1.0
   HEXA: #2f8ac4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_16f2c6feb8e6494bb6646dd96d161d8b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 78, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_16f2c6feb8e6494bb6646dd96d161d8b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_16f2c6feb8e6494bb6646dd96d161d8b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_16f2c6feb8e6494bb6646dd96d161d8b" class="color" data-tooltip="RGBA: 118, 78, 159, 1.0
   HEXA: #764e9fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5b287a6896754b6ca24230c492d7ae45 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 100, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5b287a6896754b6ca24230c492d7ae45::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5b287a6896754b6ca24230c492d7ae45:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5b287a6896754b6ca24230c492d7ae45" class="color" data-tooltip="RGBA: 237, 100, 90, 1.0
   HEXA: #ed645aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_beed66971ff34cd38006a7152b4c8a16 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 170, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_beed66971ff34cd38006a7152b4c8a16::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_beed66971ff34cd38006a7152b4c8a16:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_beed66971ff34cd38006a7152b4c8a16" class="color" data-tooltip="RGBA: 165, 170, 153, 1.0
   HEXA: #a5aa99ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
   </div>


|


----


Sequential
----------

.. raw:: html


   <div id="_f508c80afb594be7927624e70f32806f" class="color-swatch">
       <style>
           #_f508c80afb594be7927624e70f32806f {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
               gap: 0.5rem 1rem;
               justify-content: space-between;
               overflow: hidden;
               resize: both;
               width: min(65rem, 100%);
           }
           #_f508c80afb594be7927624e70f32806f div {
               width: 100%;
           }
           #_f508c80afb594be7927624e70f32806f > div.gradient {
               width: 100%;
               height: min(4rem, 100%);
               display: grid;
               gap: 0.2rem;
               grid-template-rows: 1rem auto;
           }
           #_f508c80afb594be7927624e70f32806f .color {
               height: minmax(1.5rem, 100%);
           }
           #_f508c80afb594be7927624e70f32806f > div.gradient > strong {
               margin: 0;
               padding: 0;
           }
           #_f508c80afb594be7927624e70f32806f img {height: 100%;}
       </style>
       
           <div class="gradient">
       <style>
           #_dca3b7adc4b047d998bb72e62b53eec0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_dca3b7adc4b047d998bb72e62b53eec0 div { flex: 1 1 0; }
           #_dca3b7adc4b047d998bb72e62b53eec0 div.color { width: 100%; height: 100%; }
           #_dca3b7adc4b047d998bb72e62b53eec0 div.cmap { width: 100%; height: auto; }
           #_dca3b7adc4b047d998bb72e62b53eec0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Plotly3</strong>
       
       <div id="_dca3b7adc4b047d998bb72e62b53eec0" class="color-map">
           
                           <div>
                   <style>
       #_c512dba98dcc47ddbf606d545e9160ce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 8, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c512dba98dcc47ddbf606d545e9160ce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c512dba98dcc47ddbf606d545e9160ce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c512dba98dcc47ddbf606d545e9160ce" class="color" data-tooltip="RGBA: 5, 8, 184, 1.0
   HEXA: #0508b8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f8c33f291f14938bcd1b8ada49f5f2d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 16, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f8c33f291f14938bcd1b8ada49f5f2d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f8c33f291f14938bcd1b8ada49f5f2d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f8c33f291f14938bcd1b8ada49f5f2d" class="color" data-tooltip="RGBA: 25, 16, 216, 1.0
   HEXA: #1910d8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b307096faf14e44b78add605216f4f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 25, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b307096faf14e44b78add605216f4f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b307096faf14e44b78add605216f4f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b307096faf14e44b78add605216f4f5" class="color" data-tooltip="RGBA: 60, 25, 240, 1.0
   HEXA: #3c19f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_04862ff5db0d4932ae0f4b29664a5328 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 28, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_04862ff5db0d4932ae0f4b29664a5328::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_04862ff5db0d4932ae0f4b29664a5328:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_04862ff5db0d4932ae0f4b29664a5328" class="color" data-tooltip="RGBA: 107, 28, 251, 1.0
   HEXA: #6b1cfbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1bf6acfbd0464ba195ec3c7a5ae589f4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 28, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1bf6acfbd0464ba195ec3c7a5ae589f4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1bf6acfbd0464ba195ec3c7a5ae589f4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1bf6acfbd0464ba195ec3c7a5ae589f4" class="color" data-tooltip="RGBA: 152, 28, 253, 1.0
   HEXA: #981cfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_690eed12e1c54150b38c562e46637973 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 28, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_690eed12e1c54150b38c562e46637973::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_690eed12e1c54150b38c562e46637973:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_690eed12e1c54150b38c562e46637973" class="color" data-tooltip="RGBA: 191, 28, 253, 1.0
   HEXA: #bf1cfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d1acfaf98ebd46dc90aad263409a450b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 43, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d1acfaf98ebd46dc90aad263409a450b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d1acfaf98ebd46dc90aad263409a450b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d1acfaf98ebd46dc90aad263409a450b" class="color" data-tooltip="RGBA: 221, 43, 253, 1.0
   HEXA: #dd2bfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8b41162464234911ba0608b3c29ccf37 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 70, 254, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8b41162464234911ba0608b3c29ccf37::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8b41162464234911ba0608b3c29ccf37:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8b41162464234911ba0608b3c29ccf37" class="color" data-tooltip="RGBA: 242, 70, 254, 1.0
   HEXA: #f246feff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e73e0a91f8eb42699a1c64395f05b9bc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 103, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e73e0a91f8eb42699a1c64395f05b9bc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e73e0a91f8eb42699a1c64395f05b9bc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e73e0a91f8eb42699a1c64395f05b9bc" class="color" data-tooltip="RGBA: 252, 103, 253, 1.0
   HEXA: #fc67fdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d33d14c46ccb4361a53b45c7ab8203ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 136, 252, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d33d14c46ccb4361a53b45c7ab8203ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d33d14c46ccb4361a53b45c7ab8203ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d33d14c46ccb4361a53b45c7ab8203ee" class="color" data-tooltip="RGBA: 254, 136, 252, 1.0
   HEXA: #fe88fcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_181ef06a5cb94407bbb9d2db3c9edcaf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 165, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_181ef06a5cb94407bbb9d2db3c9edcaf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_181ef06a5cb94407bbb9d2db3c9edcaf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_181ef06a5cb94407bbb9d2db3c9edcaf" class="color" data-tooltip="RGBA: 254, 165, 253, 1.0
   HEXA: #fea5fdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2f87a74034684606964f659a8731f44c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 190, 254, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2f87a74034684606964f659a8731f44c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2f87a74034684606964f659a8731f44c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2f87a74034684606964f659a8731f44c" class="color" data-tooltip="RGBA: 254, 190, 254, 1.0
   HEXA: #febefeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a1ac80796e3f47158b814378fda9818d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 195, 254, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a1ac80796e3f47158b814378fda9818d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a1ac80796e3f47158b814378fda9818d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a1ac80796e3f47158b814378fda9818d" class="color" data-tooltip="RGBA: 254, 195, 254, 1.0
   HEXA: #fec3feff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_545fe5c8ce2c4a37a4add335c54a9272 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_545fe5c8ce2c4a37a4add335c54a9272 div { flex: 1 1 0; }
           #_545fe5c8ce2c4a37a4add335c54a9272 div.color { width: 100%; height: 100%; }
           #_545fe5c8ce2c4a37a4add335c54a9272 div.cmap { width: 100%; height: auto; }
           #_545fe5c8ce2c4a37a4add335c54a9272 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Viridis</strong>
       
       <div id="_545fe5c8ce2c4a37a4add335c54a9272" class="color-map">
           
                           <div>
                   <style>
       #_7fba0eb02e5b418283dce0c5fd06f736 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 1, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7fba0eb02e5b418283dce0c5fd06f736::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7fba0eb02e5b418283dce0c5fd06f736:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7fba0eb02e5b418283dce0c5fd06f736" class="color" data-tooltip="RGBA: 68, 1, 84, 1.0
   HEXA: #440154ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_576ec934d8a64360a67af4c4704979c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(72, 40, 120, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_576ec934d8a64360a67af4c4704979c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_576ec934d8a64360a67af4c4704979c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_576ec934d8a64360a67af4c4704979c7" class="color" data-tooltip="RGBA: 72, 40, 120, 1.0
   HEXA: #482878ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0096da098b5b4695a5eb6a594781bd46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 73, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0096da098b5b4695a5eb6a594781bd46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0096da098b5b4695a5eb6a594781bd46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0096da098b5b4695a5eb6a594781bd46" class="color" data-tooltip="RGBA: 62, 73, 137, 1.0
   HEXA: #3e4989ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aeee71acc44c4a51848c301ec817f7f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 104, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aeee71acc44c4a51848c301ec817f7f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aeee71acc44c4a51848c301ec817f7f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aeee71acc44c4a51848c301ec817f7f5" class="color" data-tooltip="RGBA: 49, 104, 142, 1.0
   HEXA: #31688eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e53c4da531dd41d1b9fa5d2409112e88 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 130, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e53c4da531dd41d1b9fa5d2409112e88::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e53c4da531dd41d1b9fa5d2409112e88:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e53c4da531dd41d1b9fa5d2409112e88" class="color" data-tooltip="RGBA: 38, 130, 142, 1.0
   HEXA: #26828eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_baf4a2cacd9d4892928d3ad81d249e8e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 158, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_baf4a2cacd9d4892928d3ad81d249e8e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_baf4a2cacd9d4892928d3ad81d249e8e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_baf4a2cacd9d4892928d3ad81d249e8e" class="color" data-tooltip="RGBA: 31, 158, 137, 1.0
   HEXA: #1f9e89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_763250f0d58445e3a4f0801107da06f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 183, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_763250f0d58445e3a4f0801107da06f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_763250f0d58445e3a4f0801107da06f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_763250f0d58445e3a4f0801107da06f6" class="color" data-tooltip="RGBA: 53, 183, 121, 1.0
   HEXA: #35b779ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e395ebee7af14cc3984e6a10b4c69bd7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 206, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e395ebee7af14cc3984e6a10b4c69bd7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e395ebee7af14cc3984e6a10b4c69bd7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e395ebee7af14cc3984e6a10b4c69bd7" class="color" data-tooltip="RGBA: 110, 206, 88, 1.0
   HEXA: #6ece58ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66ab7f537c51460cbedcea4f06f81b22 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 222, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66ab7f537c51460cbedcea4f06f81b22::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66ab7f537c51460cbedcea4f06f81b22:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66ab7f537c51460cbedcea4f06f81b22" class="color" data-tooltip="RGBA: 181, 222, 43, 1.0
   HEXA: #b5de2bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44aa581610994ae480b5826dd943a1a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 231, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44aa581610994ae480b5826dd943a1a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44aa581610994ae480b5826dd943a1a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44aa581610994ae480b5826dd943a1a4" class="color" data-tooltip="RGBA: 253, 231, 37, 1.0
   HEXA: #fde725ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0cb1cb81cad849ffb3372184d9a0fd2e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0cb1cb81cad849ffb3372184d9a0fd2e div { flex: 1 1 0; }
           #_0cb1cb81cad849ffb3372184d9a0fd2e div.color { width: 100%; height: 100%; }
           #_0cb1cb81cad849ffb3372184d9a0fd2e div.cmap { width: 100%; height: auto; }
           #_0cb1cb81cad849ffb3372184d9a0fd2e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Cividis</strong>
       
       <div id="_0cb1cb81cad849ffb3372184d9a0fd2e" class="color-map">
           
                           <div>
                   <style>
       #_5d85f8ce07744a638aef9525b25c344e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 34, 78, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5d85f8ce07744a638aef9525b25c344e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5d85f8ce07744a638aef9525b25c344e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5d85f8ce07744a638aef9525b25c344e" class="color" data-tooltip="RGBA: 0, 34, 78, 1.0
   HEXA: #00224eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3a83990fc8d4bf3bd83cb132aec8f30 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 53, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3a83990fc8d4bf3bd83cb132aec8f30::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3a83990fc8d4bf3bd83cb132aec8f30:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3a83990fc8d4bf3bd83cb132aec8f30" class="color" data-tooltip="RGBA: 18, 53, 112, 1.0
   HEXA: #123570ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d21610214ffc4870b5b093ced47276ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 73, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d21610214ffc4870b5b093ced47276ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d21610214ffc4870b5b093ced47276ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d21610214ffc4870b5b093ced47276ae" class="color" data-tooltip="RGBA: 59, 73, 108, 1.0
   HEXA: #3b496cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e16207586cd6473691f988209a983a01 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 93, 109, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e16207586cd6473691f988209a983a01::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e16207586cd6473691f988209a983a01:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e16207586cd6473691f988209a983a01" class="color" data-tooltip="RGBA: 87, 93, 109, 1.0
   HEXA: #575d6dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3625154d112f463797ff57de88c64193 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(112, 113, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3625154d112f463797ff57de88c64193::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3625154d112f463797ff57de88c64193:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3625154d112f463797ff57de88c64193" class="color" data-tooltip="RGBA: 112, 113, 115, 1.0
   HEXA: #707173ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4288d527424f4c40bd2847d4b2a7d209 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(138, 134, 120, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4288d527424f4c40bd2847d4b2a7d209::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4288d527424f4c40bd2847d4b2a7d209:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4288d527424f4c40bd2847d4b2a7d209" class="color" data-tooltip="RGBA: 138, 134, 120, 1.0
   HEXA: #8a8678ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3adb471fb1846acb905a5448acd0f6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 156, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3adb471fb1846acb905a5448acd0f6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3adb471fb1846acb905a5448acd0f6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3adb471fb1846acb905a5448acd0f6c" class="color" data-tooltip="RGBA: 165, 156, 116, 1.0
   HEXA: #a59c74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be9bcf410a1c4681b9c058ab1e0a0942 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 179, 105, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be9bcf410a1c4681b9c058ab1e0a0942::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be9bcf410a1c4681b9c058ab1e0a0942:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be9bcf410a1c4681b9c058ab1e0a0942" class="color" data-tooltip="RGBA: 195, 179, 105, 1.0
   HEXA: #c3b369ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aeee43a265a0442386099ff41992ac1d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 204, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aeee43a265a0442386099ff41992ac1d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aeee43a265a0442386099ff41992ac1d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aeee43a265a0442386099ff41992ac1d" class="color" data-tooltip="RGBA: 225, 204, 85, 1.0
   HEXA: #e1cc55ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d3aa7e486799472b8ca80cd6aa8a74c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 232, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d3aa7e486799472b8ca80cd6aa8a74c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d3aa7e486799472b8ca80cd6aa8a74c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d3aa7e486799472b8ca80cd6aa8a74c7" class="color" data-tooltip="RGBA: 254, 232, 56, 1.0
   HEXA: #fee838ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f20fca54d1e64662b18386af436c7080 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f20fca54d1e64662b18386af436c7080 div { flex: 1 1 0; }
           #_f20fca54d1e64662b18386af436c7080 div.color { width: 100%; height: 100%; }
           #_f20fca54d1e64662b18386af436c7080 div.cmap { width: 100%; height: auto; }
           #_f20fca54d1e64662b18386af436c7080 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Inferno</strong>
       
       <div id="_f20fca54d1e64662b18386af436c7080" class="color-map">
           
                           <div>
                   <style>
       #_4d51f27a3c8741f5b1fb7bbf23f11f30 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d51f27a3c8741f5b1fb7bbf23f11f30::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d51f27a3c8741f5b1fb7bbf23f11f30:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d51f27a3c8741f5b1fb7bbf23f11f30" class="color" data-tooltip="RGBA: 0, 0, 4, 1.0
   HEXA: #000004ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e8a1eb16883846269a476af510a2828b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 12, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e8a1eb16883846269a476af510a2828b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e8a1eb16883846269a476af510a2828b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e8a1eb16883846269a476af510a2828b" class="color" data-tooltip="RGBA: 27, 12, 65, 1.0
   HEXA: #1b0c41ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_30c1c4f37c194d18b8d0c5dadb0b612b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(74, 12, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30c1c4f37c194d18b8d0c5dadb0b612b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30c1c4f37c194d18b8d0c5dadb0b612b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30c1c4f37c194d18b8d0c5dadb0b612b" class="color" data-tooltip="RGBA: 74, 12, 107, 1.0
   HEXA: #4a0c6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2c1d999e86c6403980d4ec5bcabb6f22 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 28, 109, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2c1d999e86c6403980d4ec5bcabb6f22::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2c1d999e86c6403980d4ec5bcabb6f22:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2c1d999e86c6403980d4ec5bcabb6f22" class="color" data-tooltip="RGBA: 120, 28, 109, 1.0
   HEXA: #781c6dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82dc16daa66f45a18ef699ae1ad27495 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 44, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82dc16daa66f45a18ef699ae1ad27495::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82dc16daa66f45a18ef699ae1ad27495:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82dc16daa66f45a18ef699ae1ad27495" class="color" data-tooltip="RGBA: 165, 44, 96, 1.0
   HEXA: #a52c60ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_35dc7c4a67894c7092f5a8269d298e87 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 68, 70, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_35dc7c4a67894c7092f5a8269d298e87::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_35dc7c4a67894c7092f5a8269d298e87:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_35dc7c4a67894c7092f5a8269d298e87" class="color" data-tooltip="RGBA: 207, 68, 70, 1.0
   HEXA: #cf4446ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf9283a00a47485697ac9138a6f0df2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 105, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf9283a00a47485697ac9138a6f0df2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf9283a00a47485697ac9138a6f0df2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf9283a00a47485697ac9138a6f0df2b" class="color" data-tooltip="RGBA: 237, 105, 37, 1.0
   HEXA: #ed6925ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ccb06c3573e8411fa015ab0e5d9cd763 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 155, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ccb06c3573e8411fa015ab0e5d9cd763::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ccb06c3573e8411fa015ab0e5d9cd763:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ccb06c3573e8411fa015ab0e5d9cd763" class="color" data-tooltip="RGBA: 251, 155, 6, 1.0
   HEXA: #fb9b06ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53bfcbd1035a40eaa4b892d3042f9e0c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 209, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53bfcbd1035a40eaa4b892d3042f9e0c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53bfcbd1035a40eaa4b892d3042f9e0c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53bfcbd1035a40eaa4b892d3042f9e0c" class="color" data-tooltip="RGBA: 247, 209, 61, 1.0
   HEXA: #f7d13dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7256bdbcc8c147d7a2ff88b66747ed5d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 255, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7256bdbcc8c147d7a2ff88b66747ed5d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7256bdbcc8c147d7a2ff88b66747ed5d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7256bdbcc8c147d7a2ff88b66747ed5d" class="color" data-tooltip="RGBA: 252, 255, 164, 1.0
   HEXA: #fcffa4ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8eb19fe007284ba2a4d937a417bf278b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8eb19fe007284ba2a4d937a417bf278b div { flex: 1 1 0; }
           #_8eb19fe007284ba2a4d937a417bf278b div.color { width: 100%; height: 100%; }
           #_8eb19fe007284ba2a4d937a417bf278b div.cmap { width: 100%; height: auto; }
           #_8eb19fe007284ba2a4d937a417bf278b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Magma</strong>
       
       <div id="_8eb19fe007284ba2a4d937a417bf278b" class="color-map">
           
                           <div>
                   <style>
       #_95eb4de117d84a57a94e0676b95861d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95eb4de117d84a57a94e0676b95861d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95eb4de117d84a57a94e0676b95861d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95eb4de117d84a57a94e0676b95861d9" class="color" data-tooltip="RGBA: 0, 0, 4, 1.0
   HEXA: #000004ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c3989a73e628493299301acc2966d5e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(24, 15, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c3989a73e628493299301acc2966d5e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c3989a73e628493299301acc2966d5e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c3989a73e628493299301acc2966d5e8" class="color" data-tooltip="RGBA: 24, 15, 61, 1.0
   HEXA: #180f3dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57776e9d0a2348a69b7f3fa92f7cd647 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 15, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57776e9d0a2348a69b7f3fa92f7cd647::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57776e9d0a2348a69b7f3fa92f7cd647:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57776e9d0a2348a69b7f3fa92f7cd647" class="color" data-tooltip="RGBA: 68, 15, 118, 1.0
   HEXA: #440f76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b38540f29ac54b6aabd38f5649b6e003 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 31, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b38540f29ac54b6aabd38f5649b6e003::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b38540f29ac54b6aabd38f5649b6e003:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b38540f29ac54b6aabd38f5649b6e003" class="color" data-tooltip="RGBA: 114, 31, 129, 1.0
   HEXA: #721f81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ae246a8e66e44f9a2585629d3594eb9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 47, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ae246a8e66e44f9a2585629d3594eb9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ae246a8e66e44f9a2585629d3594eb9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ae246a8e66e44f9a2585629d3594eb9" class="color" data-tooltip="RGBA: 158, 47, 127, 1.0
   HEXA: #9e2f7fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2d301665eb5f4467b0659b024e434e95 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(205, 64, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2d301665eb5f4467b0659b024e434e95::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2d301665eb5f4467b0659b024e434e95:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2d301665eb5f4467b0659b024e434e95" class="color" data-tooltip="RGBA: 205, 64, 113, 1.0
   HEXA: #cd4071ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ecc5a995a48f45468e1a2942c9be0b85 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 96, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ecc5a995a48f45468e1a2942c9be0b85::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ecc5a995a48f45468e1a2942c9be0b85:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ecc5a995a48f45468e1a2942c9be0b85" class="color" data-tooltip="RGBA: 241, 96, 93, 1.0
   HEXA: #f1605dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_176168f90b3349d6b7eee9379bc32341 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 150, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_176168f90b3349d6b7eee9379bc32341::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_176168f90b3349d6b7eee9379bc32341:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_176168f90b3349d6b7eee9379bc32341" class="color" data-tooltip="RGBA: 253, 150, 104, 1.0
   HEXA: #fd9668ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bebb6de652324e7ba104b7c863104031 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 202, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bebb6de652324e7ba104b7c863104031::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bebb6de652324e7ba104b7c863104031:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bebb6de652324e7ba104b7c863104031" class="color" data-tooltip="RGBA: 254, 202, 141, 1.0
   HEXA: #feca8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57444173c4ac4e73976538efebe2c33c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 253, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57444173c4ac4e73976538efebe2c33c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57444173c4ac4e73976538efebe2c33c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57444173c4ac4e73976538efebe2c33c" class="color" data-tooltip="RGBA: 252, 253, 191, 1.0
   HEXA: #fcfdbfff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_25c15d2f8f9145db91dfc509b98a7386 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_25c15d2f8f9145db91dfc509b98a7386 div { flex: 1 1 0; }
           #_25c15d2f8f9145db91dfc509b98a7386 div.color { width: 100%; height: 100%; }
           #_25c15d2f8f9145db91dfc509b98a7386 div.cmap { width: 100%; height: auto; }
           #_25c15d2f8f9145db91dfc509b98a7386 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Plasma</strong>
       
       <div id="_25c15d2f8f9145db91dfc509b98a7386" class="color-map">
           
                           <div>
                   <style>
       #_8df357cac90445269311482ddbf917b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 8, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8df357cac90445269311482ddbf917b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8df357cac90445269311482ddbf917b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8df357cac90445269311482ddbf917b5" class="color" data-tooltip="RGBA: 13, 8, 135, 1.0
   HEXA: #0d0887ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dd21328931bd49eb91455f1cfc210a7f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 3, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dd21328931bd49eb91455f1cfc210a7f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dd21328931bd49eb91455f1cfc210a7f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dd21328931bd49eb91455f1cfc210a7f" class="color" data-tooltip="RGBA: 70, 3, 159, 1.0
   HEXA: #46039fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e53f7d0be844f909d2222ae53da5914 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 1, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e53f7d0be844f909d2222ae53da5914::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e53f7d0be844f909d2222ae53da5914:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e53f7d0be844f909d2222ae53da5914" class="color" data-tooltip="RGBA: 114, 1, 168, 1.0
   HEXA: #7201a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8f5c44a9f4649598fd0235daf9cf854 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 23, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8f5c44a9f4649598fd0235daf9cf854::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8f5c44a9f4649598fd0235daf9cf854:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8f5c44a9f4649598fd0235daf9cf854" class="color" data-tooltip="RGBA: 156, 23, 158, 1.0
   HEXA: #9c179eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_91957b07f3514e3fac6ff119508ccdf6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 55, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_91957b07f3514e3fac6ff119508ccdf6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_91957b07f3514e3fac6ff119508ccdf6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_91957b07f3514e3fac6ff119508ccdf6" class="color" data-tooltip="RGBA: 189, 55, 134, 1.0
   HEXA: #bd3786ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81b9ad2fc56548ea8a9fc827e7f0f9f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 87, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81b9ad2fc56548ea8a9fc827e7f0f9f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81b9ad2fc56548ea8a9fc827e7f0f9f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81b9ad2fc56548ea8a9fc827e7f0f9f1" class="color" data-tooltip="RGBA: 216, 87, 107, 1.0
   HEXA: #d8576bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b5e4457db6094c6dbf03b9d064872b90 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 121, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b5e4457db6094c6dbf03b9d064872b90::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b5e4457db6094c6dbf03b9d064872b90:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b5e4457db6094c6dbf03b9d064872b90" class="color" data-tooltip="RGBA: 237, 121, 83, 1.0
   HEXA: #ed7953ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0402668bf39846b3a4a69199e37d2347 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 159, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0402668bf39846b3a4a69199e37d2347::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0402668bf39846b3a4a69199e37d2347:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0402668bf39846b3a4a69199e37d2347" class="color" data-tooltip="RGBA: 251, 159, 58, 1.0
   HEXA: #fb9f3aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_259d48acbe8040a0b7e0b4bd88c77442 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 202, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_259d48acbe8040a0b7e0b4bd88c77442::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_259d48acbe8040a0b7e0b4bd88c77442:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_259d48acbe8040a0b7e0b4bd88c77442" class="color" data-tooltip="RGBA: 253, 202, 38, 1.0
   HEXA: #fdca26ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8f5da421c8b14b74b8a586b4ad788364 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 249, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8f5da421c8b14b74b8a586b4ad788364::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8f5da421c8b14b74b8a586b4ad788364:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8f5da421c8b14b74b8a586b4ad788364" class="color" data-tooltip="RGBA: 240, 249, 33, 1.0
   HEXA: #f0f921ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_3e4272a27b3b45b09253af898abc4946 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_3e4272a27b3b45b09253af898abc4946 div { flex: 1 1 0; }
           #_3e4272a27b3b45b09253af898abc4946 div.color { width: 100%; height: 100%; }
           #_3e4272a27b3b45b09253af898abc4946 div.cmap { width: 100%; height: auto; }
           #_3e4272a27b3b45b09253af898abc4946 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Turbo</strong>
       
       <div id="_3e4272a27b3b45b09253af898abc4946" class="color-map">
           
                           <div>
                   <style>
       #_6ced3260eed54ed7b88e9a40c8bbbacc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(48, 18, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ced3260eed54ed7b88e9a40c8bbbacc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ced3260eed54ed7b88e9a40c8bbbacc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ced3260eed54ed7b88e9a40c8bbbacc" class="color" data-tooltip="RGBA: 48, 18, 59, 1.0
   HEXA: #30123bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2876d021038403db521261cc8d91be1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 69, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2876d021038403db521261cc8d91be1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2876d021038403db521261cc8d91be1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2876d021038403db521261cc8d91be1" class="color" data-tooltip="RGBA: 65, 69, 171, 1.0
   HEXA: #4145abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f0b848c233e47619ce4d2261fc663c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 117, 237, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f0b848c233e47619ce4d2261fc663c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f0b848c233e47619ce4d2261fc663c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f0b848c233e47619ce4d2261fc663c2" class="color" data-tooltip="RGBA: 70, 117, 237, 1.0
   HEXA: #4675edff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1721f72ad8fd4706ad236044935ca398 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 162, 252, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1721f72ad8fd4706ad236044935ca398::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1721f72ad8fd4706ad236044935ca398:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1721f72ad8fd4706ad236044935ca398" class="color" data-tooltip="RGBA: 57, 162, 252, 1.0
   HEXA: #39a2fcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bdbeb664bd984193be480f6cd80de26f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 207, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bdbeb664bd984193be480f6cd80de26f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bdbeb664bd984193be480f6cd80de26f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bdbeb664bd984193be480f6cd80de26f" class="color" data-tooltip="RGBA: 27, 207, 212, 1.0
   HEXA: #1bcfd4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_880948170c4d4e05a0985b7e844e5859 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 236, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_880948170c4d4e05a0985b7e844e5859::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_880948170c4d4e05a0985b7e844e5859:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_880948170c4d4e05a0985b7e844e5859" class="color" data-tooltip="RGBA: 36, 236, 166, 1.0
   HEXA: #24eca6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_062cfefc163847f28aa8f9db8b25667f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(97, 252, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_062cfefc163847f28aa8f9db8b25667f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_062cfefc163847f28aa8f9db8b25667f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_062cfefc163847f28aa8f9db8b25667f" class="color" data-tooltip="RGBA: 97, 252, 108, 1.0
   HEXA: #61fc6cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f0a8a5e304da4c70a2ebb1a8dc889164 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(164, 252, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f0a8a5e304da4c70a2ebb1a8dc889164::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f0a8a5e304da4c70a2ebb1a8dc889164:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f0a8a5e304da4c70a2ebb1a8dc889164" class="color" data-tooltip="RGBA: 164, 252, 59, 1.0
   HEXA: #a4fc3bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_449ab693df41407bb4652454b3c44e3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 232, 52, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_449ab693df41407bb4652454b3c44e3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_449ab693df41407bb4652454b3c44e3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_449ab693df41407bb4652454b3c44e3d" class="color" data-tooltip="RGBA: 209, 232, 52, 1.0
   HEXA: #d1e834ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2cf93055cff9449597a4356691dbd0f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 198, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2cf93055cff9449597a4356691dbd0f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2cf93055cff9449597a4356691dbd0f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2cf93055cff9449597a4356691dbd0f6" class="color" data-tooltip="RGBA: 243, 198, 58, 1.0
   HEXA: #f3c63aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_959ca4beff2a496089b4bb3134e011b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 155, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_959ca4beff2a496089b4bb3134e011b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_959ca4beff2a496089b4bb3134e011b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_959ca4beff2a496089b4bb3134e011b5" class="color" data-tooltip="RGBA: 254, 155, 45, 1.0
   HEXA: #fe9b2dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_266cdf4a1ada433085a69f20278c5d2a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 99, 21, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_266cdf4a1ada433085a69f20278c5d2a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_266cdf4a1ada433085a69f20278c5d2a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_266cdf4a1ada433085a69f20278c5d2a" class="color" data-tooltip="RGBA: 243, 99, 21, 1.0
   HEXA: #f36315ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8a387c2d4ece421ba8edb5624f296a6b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 56, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8a387c2d4ece421ba8edb5624f296a6b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8a387c2d4ece421ba8edb5624f296a6b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8a387c2d4ece421ba8edb5624f296a6b" class="color" data-tooltip="RGBA: 217, 56, 6, 1.0
   HEXA: #d93806ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab134336271e491a99e00202a693ec97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 25, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab134336271e491a99e00202a693ec97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab134336271e491a99e00202a693ec97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab134336271e491a99e00202a693ec97" class="color" data-tooltip="RGBA: 177, 25, 1, 1.0
   HEXA: #b11901ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_24953974efa24cbe964aea3b529f4078 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(122, 4, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_24953974efa24cbe964aea3b529f4078::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_24953974efa24cbe964aea3b529f4078:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_24953974efa24cbe964aea3b529f4078" class="color" data-tooltip="RGBA: 122, 4, 2, 1.0
   HEXA: #7a0402ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_22b051e6300342c5ab0fcaf84af420eb {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_22b051e6300342c5ab0fcaf84af420eb div { flex: 1 1 0; }
           #_22b051e6300342c5ab0fcaf84af420eb div.color { width: 100%; height: 100%; }
           #_22b051e6300342c5ab0fcaf84af420eb div.cmap { width: 100%; height: auto; }
           #_22b051e6300342c5ab0fcaf84af420eb div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Blackbody</strong>
       
       <div id="_22b051e6300342c5ab0fcaf84af420eb" class="color-map">
           
                           <div>
                   <style>
       #_5221bcbe291a4dce8a7385e934c0c8e4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5221bcbe291a4dce8a7385e934c0c8e4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5221bcbe291a4dce8a7385e934c0c8e4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5221bcbe291a4dce8a7385e934c0c8e4" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_032df0951f934052a49d77a88793b62f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_032df0951f934052a49d77a88793b62f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_032df0951f934052a49d77a88793b62f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_032df0951f934052a49d77a88793b62f" class="color" data-tooltip="RGBA: 230, 0, 0, 1.0
   HEXA: #e60000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cbc0e171db964ab59cbe68ec57fcc8a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 210, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cbc0e171db964ab59cbe68ec57fcc8a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cbc0e171db964ab59cbe68ec57fcc8a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cbc0e171db964ab59cbe68ec57fcc8a7" class="color" data-tooltip="RGBA: 230, 210, 0, 1.0
   HEXA: #e6d200ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_570db8688a30430896548336473f7125 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_570db8688a30430896548336473f7125::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_570db8688a30430896548336473f7125:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_570db8688a30430896548336473f7125" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a43ab151ea824f73807b439941cd9562 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 200, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a43ab151ea824f73807b439941cd9562::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a43ab151ea824f73807b439941cd9562:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a43ab151ea824f73807b439941cd9562" class="color" data-tooltip="RGBA: 160, 200, 255, 1.0
   HEXA: #a0c8ffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_44b6f4bb67f745039c5598440bdddc8c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_44b6f4bb67f745039c5598440bdddc8c div { flex: 1 1 0; }
           #_44b6f4bb67f745039c5598440bdddc8c div.color { width: 100%; height: 100%; }
           #_44b6f4bb67f745039c5598440bdddc8c div.cmap { width: 100%; height: auto; }
           #_44b6f4bb67f745039c5598440bdddc8c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Bluered</strong>
       
       <div id="_44b6f4bb67f745039c5598440bdddc8c" class="color-map">
           
                           <div>
                   <style>
       #_93f5d820ac8445e48cf92185584e88ef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93f5d820ac8445e48cf92185584e88ef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93f5d820ac8445e48cf92185584e88ef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93f5d820ac8445e48cf92185584e88ef" class="color" data-tooltip="RGBA: 0, 0, 255, 1.0
   HEXA: #0000ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e197ed6a1fed4efb9f061b3817a66a45 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e197ed6a1fed4efb9f061b3817a66a45::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e197ed6a1fed4efb9f061b3817a66a45:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e197ed6a1fed4efb9f061b3817a66a45" class="color" data-tooltip="RGBA: 255, 0, 0, 1.0
   HEXA: #ff0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_be4073d0ce6545a2b38a4cdccf2141c2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_be4073d0ce6545a2b38a4cdccf2141c2 div { flex: 1 1 0; }
           #_be4073d0ce6545a2b38a4cdccf2141c2 div.color { width: 100%; height: 100%; }
           #_be4073d0ce6545a2b38a4cdccf2141c2 div.cmap { width: 100%; height: auto; }
           #_be4073d0ce6545a2b38a4cdccf2141c2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Electric</strong>
       
       <div id="_be4073d0ce6545a2b38a4cdccf2141c2" class="color-map">
           
                           <div>
                   <style>
       #_235736eedc874ac0b969c7c624600096 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_235736eedc874ac0b969c7c624600096::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_235736eedc874ac0b969c7c624600096:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_235736eedc874ac0b969c7c624600096" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fcb53331b4a54026ade73ce411a52958 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(30, 0, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fcb53331b4a54026ade73ce411a52958::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fcb53331b4a54026ade73ce411a52958:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fcb53331b4a54026ade73ce411a52958" class="color" data-tooltip="RGBA: 30, 0, 100, 1.0
   HEXA: #1e0064ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_18c5c77fbe364e47ae53f66b146b2cb5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 0, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_18c5c77fbe364e47ae53f66b146b2cb5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_18c5c77fbe364e47ae53f66b146b2cb5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_18c5c77fbe364e47ae53f66b146b2cb5" class="color" data-tooltip="RGBA: 120, 0, 100, 1.0
   HEXA: #780064ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_260258b189e84d5297923e28630220ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 90, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_260258b189e84d5297923e28630220ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_260258b189e84d5297923e28630220ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_260258b189e84d5297923e28630220ff" class="color" data-tooltip="RGBA: 160, 90, 0, 1.0
   HEXA: #a05a00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b561058cf90a407298af5f10ac9f7ecf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 200, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b561058cf90a407298af5f10ac9f7ecf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b561058cf90a407298af5f10ac9f7ecf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b561058cf90a407298af5f10ac9f7ecf" class="color" data-tooltip="RGBA: 230, 200, 0, 1.0
   HEXA: #e6c800ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_48fb7c073c8e4da294a7eb1e59c16368 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 250, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48fb7c073c8e4da294a7eb1e59c16368::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48fb7c073c8e4da294a7eb1e59c16368:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48fb7c073c8e4da294a7eb1e59c16368" class="color" data-tooltip="RGBA: 255, 250, 220, 1.0
   HEXA: #fffadcff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_fd7713800edb41cd88d8c4ee5404acbe {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_fd7713800edb41cd88d8c4ee5404acbe div { flex: 1 1 0; }
           #_fd7713800edb41cd88d8c4ee5404acbe div.color { width: 100%; height: 100%; }
           #_fd7713800edb41cd88d8c4ee5404acbe div.cmap { width: 100%; height: auto; }
           #_fd7713800edb41cd88d8c4ee5404acbe div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Hot</strong>
       
       <div id="_fd7713800edb41cd88d8c4ee5404acbe" class="color-map">
           
                           <div>
                   <style>
       #_9b4ad6956ef5471987c62de29ff25e2e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9b4ad6956ef5471987c62de29ff25e2e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9b4ad6956ef5471987c62de29ff25e2e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9b4ad6956ef5471987c62de29ff25e2e" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb20aed9ecb34f9fb06f18c46de31f4f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb20aed9ecb34f9fb06f18c46de31f4f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb20aed9ecb34f9fb06f18c46de31f4f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb20aed9ecb34f9fb06f18c46de31f4f" class="color" data-tooltip="RGBA: 230, 0, 0, 1.0
   HEXA: #e60000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9bca6f20fe914e468fe8446e30ded735 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 210, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9bca6f20fe914e468fe8446e30ded735::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9bca6f20fe914e468fe8446e30ded735:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9bca6f20fe914e468fe8446e30ded735" class="color" data-tooltip="RGBA: 255, 210, 0, 1.0
   HEXA: #ffd200ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1b04f4608ca4429b72e03645510f242 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1b04f4608ca4429b72e03645510f242::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1b04f4608ca4429b72e03645510f242:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1b04f4608ca4429b72e03645510f242" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c4dcf19b95fa4ec89ff8894990442ff6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c4dcf19b95fa4ec89ff8894990442ff6 div { flex: 1 1 0; }
           #_c4dcf19b95fa4ec89ff8894990442ff6 div.color { width: 100%; height: 100%; }
           #_c4dcf19b95fa4ec89ff8894990442ff6 div.cmap { width: 100%; height: auto; }
           #_c4dcf19b95fa4ec89ff8894990442ff6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Jet</strong>
       
       <div id="_c4dcf19b95fa4ec89ff8894990442ff6" class="color-map">
           
                           <div>
                   <style>
       #_f09eef52f3a348fea45277d9fe4ff4aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f09eef52f3a348fea45277d9fe4ff4aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f09eef52f3a348fea45277d9fe4ff4aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f09eef52f3a348fea45277d9fe4ff4aa" class="color" data-tooltip="RGBA: 0, 0, 131, 1.0
   HEXA: #000083ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd6a74d9866d4c348b0a5270450b2b80 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 60, 170, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd6a74d9866d4c348b0a5270450b2b80::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd6a74d9866d4c348b0a5270450b2b80:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd6a74d9866d4c348b0a5270450b2b80" class="color" data-tooltip="RGBA: 0, 60, 170, 1.0
   HEXA: #003caaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_669bc5d92dde4173b09d8c340808a8c4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_669bc5d92dde4173b09d8c340808a8c4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_669bc5d92dde4173b09d8c340808a8c4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_669bc5d92dde4173b09d8c340808a8c4" class="color" data-tooltip="RGBA: 5, 255, 255, 1.0
   HEXA: #05ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bcc0b93416974463b05e257609bbdc1c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bcc0b93416974463b05e257609bbdc1c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bcc0b93416974463b05e257609bbdc1c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bcc0b93416974463b05e257609bbdc1c" class="color" data-tooltip="RGBA: 255, 255, 0, 1.0
   HEXA: #ffff00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d307435846fd4703841f0e68fb25108a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d307435846fd4703841f0e68fb25108a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d307435846fd4703841f0e68fb25108a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d307435846fd4703841f0e68fb25108a" class="color" data-tooltip="RGBA: 250, 0, 0, 1.0
   HEXA: #fa0000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_13866367afeb4bf38aca67ab1db9cd31 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_13866367afeb4bf38aca67ab1db9cd31::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_13866367afeb4bf38aca67ab1db9cd31:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_13866367afeb4bf38aca67ab1db9cd31" class="color" data-tooltip="RGBA: 128, 0, 0, 1.0
   HEXA: #800000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_220b65e4788d40048df91b3d1f9b9ace {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_220b65e4788d40048df91b3d1f9b9ace div { flex: 1 1 0; }
           #_220b65e4788d40048df91b3d1f9b9ace div.color { width: 100%; height: 100%; }
           #_220b65e4788d40048df91b3d1f9b9ace div.cmap { width: 100%; height: auto; }
           #_220b65e4788d40048df91b3d1f9b9ace div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Rainbow</strong>
       
       <div id="_220b65e4788d40048df91b3d1f9b9ace" class="color-map">
           
                           <div>
                   <style>
       #_e1097f7cc91d4ef3b03f89711db6d209 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 0, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1097f7cc91d4ef3b03f89711db6d209::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1097f7cc91d4ef3b03f89711db6d209:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1097f7cc91d4ef3b03f89711db6d209" class="color" data-tooltip="RGBA: 150, 0, 90, 1.0
   HEXA: #96005aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b89a5fee56ab4235b5719b11c74984d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b89a5fee56ab4235b5719b11c74984d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b89a5fee56ab4235b5719b11c74984d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b89a5fee56ab4235b5719b11c74984d3" class="color" data-tooltip="RGBA: 0, 0, 200, 1.0
   HEXA: #0000c8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e176c857bbb742a9a4e7ef5c678bc7cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 25, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e176c857bbb742a9a4e7ef5c678bc7cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e176c857bbb742a9a4e7ef5c678bc7cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e176c857bbb742a9a4e7ef5c678bc7cf" class="color" data-tooltip="RGBA: 0, 25, 255, 1.0
   HEXA: #0019ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc9d3c09a76043c49e7e9210f5eb57a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 152, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc9d3c09a76043c49e7e9210f5eb57a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc9d3c09a76043c49e7e9210f5eb57a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc9d3c09a76043c49e7e9210f5eb57a7" class="color" data-tooltip="RGBA: 0, 152, 255, 1.0
   HEXA: #0098ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a679e9a6e2424f30be166377aa44a11c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 255, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a679e9a6e2424f30be166377aa44a11c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a679e9a6e2424f30be166377aa44a11c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a679e9a6e2424f30be166377aa44a11c" class="color" data-tooltip="RGBA: 44, 255, 150, 1.0
   HEXA: #2cff96ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2bc9b1243f5b4a069f1d20124597e2b2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 255, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2bc9b1243f5b4a069f1d20124597e2b2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2bc9b1243f5b4a069f1d20124597e2b2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2bc9b1243f5b4a069f1d20124597e2b2" class="color" data-tooltip="RGBA: 151, 255, 0, 1.0
   HEXA: #97ff00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34c2548edc654076b41dabc981690162 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 234, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34c2548edc654076b41dabc981690162::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34c2548edc654076b41dabc981690162:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34c2548edc654076b41dabc981690162" class="color" data-tooltip="RGBA: 255, 234, 0, 1.0
   HEXA: #ffea00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8d4647df7ebc47e0ad3d87e1b1e9b18b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 111, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8d4647df7ebc47e0ad3d87e1b1e9b18b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8d4647df7ebc47e0ad3d87e1b1e9b18b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8d4647df7ebc47e0ad3d87e1b1e9b18b" class="color" data-tooltip="RGBA: 255, 111, 0, 1.0
   HEXA: #ff6f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8417428686c242c9ae9dea20ee004c93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8417428686c242c9ae9dea20ee004c93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8417428686c242c9ae9dea20ee004c93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8417428686c242c9ae9dea20ee004c93" class="color" data-tooltip="RGBA: 255, 0, 0, 1.0
   HEXA: #ff0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_193609c8dcfd432f84b526fab945451c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_193609c8dcfd432f84b526fab945451c div { flex: 1 1 0; }
           #_193609c8dcfd432f84b526fab945451c div.color { width: 100%; height: 100%; }
           #_193609c8dcfd432f84b526fab945451c div.cmap { width: 100%; height: auto; }
           #_193609c8dcfd432f84b526fab945451c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Blues</strong>
       
       <div id="_193609c8dcfd432f84b526fab945451c" class="color-map">
           
                           <div>
                   <style>
       #_64592b141f77464f951e12c5dd19ab1c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 251, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64592b141f77464f951e12c5dd19ab1c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64592b141f77464f951e12c5dd19ab1c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64592b141f77464f951e12c5dd19ab1c" class="color" data-tooltip="RGBA: 247, 251, 255, 1.0
   HEXA: #f7fbffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95269f9eb8274ae9bd6b6406aea1139d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 235, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95269f9eb8274ae9bd6b6406aea1139d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95269f9eb8274ae9bd6b6406aea1139d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95269f9eb8274ae9bd6b6406aea1139d" class="color" data-tooltip="RGBA: 222, 235, 247, 1.0
   HEXA: #deebf7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b11534b672f040ac8fc48833f52d1584 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 219, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b11534b672f040ac8fc48833f52d1584::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b11534b672f040ac8fc48833f52d1584:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b11534b672f040ac8fc48833f52d1584" class="color" data-tooltip="RGBA: 198, 219, 239, 1.0
   HEXA: #c6dbefff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac035c786d424072b6002a987f5274cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 202, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac035c786d424072b6002a987f5274cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac035c786d424072b6002a987f5274cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac035c786d424072b6002a987f5274cc" class="color" data-tooltip="RGBA: 158, 202, 225, 1.0
   HEXA: #9ecae1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3dee1e7450a4b7680ed76f5779e6aef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 174, 214, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3dee1e7450a4b7680ed76f5779e6aef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3dee1e7450a4b7680ed76f5779e6aef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3dee1e7450a4b7680ed76f5779e6aef" class="color" data-tooltip="RGBA: 107, 174, 214, 1.0
   HEXA: #6baed6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7caedf77f5d14d3ba626f25e1fbb31e1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 146, 198, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7caedf77f5d14d3ba626f25e1fbb31e1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7caedf77f5d14d3ba626f25e1fbb31e1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7caedf77f5d14d3ba626f25e1fbb31e1" class="color" data-tooltip="RGBA: 66, 146, 198, 1.0
   HEXA: #4292c6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c9b66fa16efd42aeadfbf535a13edb75 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 113, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9b66fa16efd42aeadfbf535a13edb75::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9b66fa16efd42aeadfbf535a13edb75:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9b66fa16efd42aeadfbf535a13edb75" class="color" data-tooltip="RGBA: 33, 113, 181, 1.0
   HEXA: #2171b5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9dd3625f3eb54434a2ef2add83340aaf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 81, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9dd3625f3eb54434a2ef2add83340aaf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9dd3625f3eb54434a2ef2add83340aaf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9dd3625f3eb54434a2ef2add83340aaf" class="color" data-tooltip="RGBA: 8, 81, 156, 1.0
   HEXA: #08519cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1d06d27975c4db8a2fd995cdb3487d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 48, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1d06d27975c4db8a2fd995cdb3487d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1d06d27975c4db8a2fd995cdb3487d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1d06d27975c4db8a2fd995cdb3487d4" class="color" data-tooltip="RGBA: 8, 48, 107, 1.0
   HEXA: #08306bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a161ba07d96b4643b749d64f27680510 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a161ba07d96b4643b749d64f27680510 div { flex: 1 1 0; }
           #_a161ba07d96b4643b749d64f27680510 div.color { width: 100%; height: 100%; }
           #_a161ba07d96b4643b749d64f27680510 div.cmap { width: 100%; height: auto; }
           #_a161ba07d96b4643b749d64f27680510 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>BuGn</strong>
       
       <div id="_a161ba07d96b4643b749d64f27680510" class="color-map">
           
                           <div>
                   <style>
       #_7fe756878ed3484eb1a5cdd11252b0e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7fe756878ed3484eb1a5cdd11252b0e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7fe756878ed3484eb1a5cdd11252b0e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7fe756878ed3484eb1a5cdd11252b0e0" class="color" data-tooltip="RGBA: 247, 252, 253, 1.0
   HEXA: #f7fcfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_42522c3e43c54c76bf1129d80763cc02 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 245, 249, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_42522c3e43c54c76bf1129d80763cc02::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_42522c3e43c54c76bf1129d80763cc02:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_42522c3e43c54c76bf1129d80763cc02" class="color" data-tooltip="RGBA: 229, 245, 249, 1.0
   HEXA: #e5f5f9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0872a7eea62242698ec7acafb03369be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 236, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0872a7eea62242698ec7acafb03369be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0872a7eea62242698ec7acafb03369be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0872a7eea62242698ec7acafb03369be" class="color" data-tooltip="RGBA: 204, 236, 230, 1.0
   HEXA: #ccece6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7dc6a0b620224b009c9af82e94dfea46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 216, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7dc6a0b620224b009c9af82e94dfea46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7dc6a0b620224b009c9af82e94dfea46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7dc6a0b620224b009c9af82e94dfea46" class="color" data-tooltip="RGBA: 153, 216, 201, 1.0
   HEXA: #99d8c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dcb3026b3ebf447ea53d88957cad1809 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 194, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dcb3026b3ebf447ea53d88957cad1809::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dcb3026b3ebf447ea53d88957cad1809:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dcb3026b3ebf447ea53d88957cad1809" class="color" data-tooltip="RGBA: 102, 194, 164, 1.0
   HEXA: #66c2a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_507632661e1e4d86b7f116b300c2ad21 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 174, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_507632661e1e4d86b7f116b300c2ad21::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_507632661e1e4d86b7f116b300c2ad21:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_507632661e1e4d86b7f116b300c2ad21" class="color" data-tooltip="RGBA: 65, 174, 118, 1.0
   HEXA: #41ae76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4894483a40eb4787bb7bced62f14e19c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 139, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4894483a40eb4787bb7bced62f14e19c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4894483a40eb4787bb7bced62f14e19c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4894483a40eb4787bb7bced62f14e19c" class="color" data-tooltip="RGBA: 35, 139, 69, 1.0
   HEXA: #238b45ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e9066fdea6d405899005392329980b9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 109, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e9066fdea6d405899005392329980b9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e9066fdea6d405899005392329980b9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e9066fdea6d405899005392329980b9" class="color" data-tooltip="RGBA: 0, 109, 44, 1.0
   HEXA: #006d2cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_538354de04474177b45fa1986e37c6f0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_538354de04474177b45fa1986e37c6f0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_538354de04474177b45fa1986e37c6f0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_538354de04474177b45fa1986e37c6f0" class="color" data-tooltip="RGBA: 0, 68, 27, 1.0
   HEXA: #00441bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_cb5e40abca684a5899b7adaf452ea50a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_cb5e40abca684a5899b7adaf452ea50a div { flex: 1 1 0; }
           #_cb5e40abca684a5899b7adaf452ea50a div.color { width: 100%; height: 100%; }
           #_cb5e40abca684a5899b7adaf452ea50a div.cmap { width: 100%; height: auto; }
           #_cb5e40abca684a5899b7adaf452ea50a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>BuPu</strong>
       
       <div id="_cb5e40abca684a5899b7adaf452ea50a" class="color-map">
           
                           <div>
                   <style>
       #_b78ced7109aa415598e63d88a5f629a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b78ced7109aa415598e63d88a5f629a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b78ced7109aa415598e63d88a5f629a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b78ced7109aa415598e63d88a5f629a5" class="color" data-tooltip="RGBA: 247, 252, 253, 1.0
   HEXA: #f7fcfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f58183eefcb14234821c8c38dc6d14ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 236, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f58183eefcb14234821c8c38dc6d14ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f58183eefcb14234821c8c38dc6d14ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f58183eefcb14234821c8c38dc6d14ab" class="color" data-tooltip="RGBA: 224, 236, 244, 1.0
   HEXA: #e0ecf4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e34542670e4c4c62b9f2370512f35aa6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 211, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e34542670e4c4c62b9f2370512f35aa6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e34542670e4c4c62b9f2370512f35aa6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e34542670e4c4c62b9f2370512f35aa6" class="color" data-tooltip="RGBA: 191, 211, 230, 1.0
   HEXA: #bfd3e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6bb4e0133dea4b8fb6324f1c6040a96c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 188, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6bb4e0133dea4b8fb6324f1c6040a96c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6bb4e0133dea4b8fb6324f1c6040a96c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6bb4e0133dea4b8fb6324f1c6040a96c" class="color" data-tooltip="RGBA: 158, 188, 218, 1.0
   HEXA: #9ebcdaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3a60635a398846febf30e9b094f9bb73 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 150, 198, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3a60635a398846febf30e9b094f9bb73::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3a60635a398846febf30e9b094f9bb73:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3a60635a398846febf30e9b094f9bb73" class="color" data-tooltip="RGBA: 140, 150, 198, 1.0
   HEXA: #8c96c6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cac9991c48a64bfd8035d024a4842b46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 107, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cac9991c48a64bfd8035d024a4842b46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cac9991c48a64bfd8035d024a4842b46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cac9991c48a64bfd8035d024a4842b46" class="color" data-tooltip="RGBA: 140, 107, 177, 1.0
   HEXA: #8c6bb1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5ea0e445824148b7a9fcbdb644f5a17a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 65, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5ea0e445824148b7a9fcbdb644f5a17a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5ea0e445824148b7a9fcbdb644f5a17a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5ea0e445824148b7a9fcbdb644f5a17a" class="color" data-tooltip="RGBA: 136, 65, 157, 1.0
   HEXA: #88419dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8906e6745ff1473c991f90d94d30db32 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 15, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8906e6745ff1473c991f90d94d30db32::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8906e6745ff1473c991f90d94d30db32:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8906e6745ff1473c991f90d94d30db32" class="color" data-tooltip="RGBA: 129, 15, 124, 1.0
   HEXA: #810f7cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8705aa609a4646aaabdbfc011735810e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 0, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8705aa609a4646aaabdbfc011735810e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8705aa609a4646aaabdbfc011735810e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8705aa609a4646aaabdbfc011735810e" class="color" data-tooltip="RGBA: 77, 0, 75, 1.0
   HEXA: #4d004bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_67b4c43c096f470590b246530774c949 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_67b4c43c096f470590b246530774c949 div { flex: 1 1 0; }
           #_67b4c43c096f470590b246530774c949 div.color { width: 100%; height: 100%; }
           #_67b4c43c096f470590b246530774c949 div.cmap { width: 100%; height: auto; }
           #_67b4c43c096f470590b246530774c949 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>GnBu</strong>
       
       <div id="_67b4c43c096f470590b246530774c949" class="color-map">
           
                           <div>
                   <style>
       #_af5ced5b74664a36852c2d12d81d13aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_af5ced5b74664a36852c2d12d81d13aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_af5ced5b74664a36852c2d12d81d13aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_af5ced5b74664a36852c2d12d81d13aa" class="color" data-tooltip="RGBA: 247, 252, 240, 1.0
   HEXA: #f7fcf0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_121f8965f92240fea3db7f8306c9e489 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 243, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_121f8965f92240fea3db7f8306c9e489::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_121f8965f92240fea3db7f8306c9e489:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_121f8965f92240fea3db7f8306c9e489" class="color" data-tooltip="RGBA: 224, 243, 219, 1.0
   HEXA: #e0f3dbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be3c52fcb955418e8d3c514e388a5110 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 235, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be3c52fcb955418e8d3c514e388a5110::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be3c52fcb955418e8d3c514e388a5110:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be3c52fcb955418e8d3c514e388a5110" class="color" data-tooltip="RGBA: 204, 235, 197, 1.0
   HEXA: #ccebc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b19485f0023f44c5b852cdb73e8368af { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 221, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b19485f0023f44c5b852cdb73e8368af::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b19485f0023f44c5b852cdb73e8368af:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b19485f0023f44c5b852cdb73e8368af" class="color" data-tooltip="RGBA: 168, 221, 181, 1.0
   HEXA: #a8ddb5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d90790fc754e449bb12b847a17e1d081 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 204, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d90790fc754e449bb12b847a17e1d081::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d90790fc754e449bb12b847a17e1d081:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d90790fc754e449bb12b847a17e1d081" class="color" data-tooltip="RGBA: 123, 204, 196, 1.0
   HEXA: #7bccc4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_399b08b11cee4b3697d459bedb7e665c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(78, 179, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_399b08b11cee4b3697d459bedb7e665c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_399b08b11cee4b3697d459bedb7e665c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_399b08b11cee4b3697d459bedb7e665c" class="color" data-tooltip="RGBA: 78, 179, 211, 1.0
   HEXA: #4eb3d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_555e68861d2643c09add6a704cb27bae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(43, 140, 190, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_555e68861d2643c09add6a704cb27bae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_555e68861d2643c09add6a704cb27bae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_555e68861d2643c09add6a704cb27bae" class="color" data-tooltip="RGBA: 43, 140, 190, 1.0
   HEXA: #2b8cbeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a1428d3e57d54df8a7807d95732114eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 104, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a1428d3e57d54df8a7807d95732114eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a1428d3e57d54df8a7807d95732114eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a1428d3e57d54df8a7807d95732114eb" class="color" data-tooltip="RGBA: 8, 104, 172, 1.0
   HEXA: #0868acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_214080a711f54436b8d75448d700f478 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 64, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_214080a711f54436b8d75448d700f478::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_214080a711f54436b8d75448d700f478:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_214080a711f54436b8d75448d700f478" class="color" data-tooltip="RGBA: 8, 64, 129, 1.0
   HEXA: #084081ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2592b104345a4971a9e5821b725ec337 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2592b104345a4971a9e5821b725ec337 div { flex: 1 1 0; }
           #_2592b104345a4971a9e5821b725ec337 div.color { width: 100%; height: 100%; }
           #_2592b104345a4971a9e5821b725ec337 div.cmap { width: 100%; height: auto; }
           #_2592b104345a4971a9e5821b725ec337 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Greens</strong>
       
       <div id="_2592b104345a4971a9e5821b725ec337" class="color-map">
           
                           <div>
                   <style>
       #_a6a271289d3b49d59d7393c0c112a9be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6a271289d3b49d59d7393c0c112a9be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6a271289d3b49d59d7393c0c112a9be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6a271289d3b49d59d7393c0c112a9be" class="color" data-tooltip="RGBA: 247, 252, 245, 1.0
   HEXA: #f7fcf5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_adeddfafee854837b39f7feb13f42841 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 245, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_adeddfafee854837b39f7feb13f42841::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_adeddfafee854837b39f7feb13f42841:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_adeddfafee854837b39f7feb13f42841" class="color" data-tooltip="RGBA: 229, 245, 224, 1.0
   HEXA: #e5f5e0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4dd33b9a7d3c4838aff44684bae9f985 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 233, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4dd33b9a7d3c4838aff44684bae9f985::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4dd33b9a7d3c4838aff44684bae9f985:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4dd33b9a7d3c4838aff44684bae9f985" class="color" data-tooltip="RGBA: 199, 233, 192, 1.0
   HEXA: #c7e9c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e702cbc8350f473683633b9158693789 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 217, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e702cbc8350f473683633b9158693789::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e702cbc8350f473683633b9158693789:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e702cbc8350f473683633b9158693789" class="color" data-tooltip="RGBA: 161, 217, 155, 1.0
   HEXA: #a1d99bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b607dda367f0471e90fa17814bb48ef7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 196, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b607dda367f0471e90fa17814bb48ef7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b607dda367f0471e90fa17814bb48ef7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b607dda367f0471e90fa17814bb48ef7" class="color" data-tooltip="RGBA: 116, 196, 118, 1.0
   HEXA: #74c476ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_47fc13e509cb4a8791cd673e3d2c0730 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 171, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_47fc13e509cb4a8791cd673e3d2c0730::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_47fc13e509cb4a8791cd673e3d2c0730:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_47fc13e509cb4a8791cd673e3d2c0730" class="color" data-tooltip="RGBA: 65, 171, 93, 1.0
   HEXA: #41ab5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce1f6a850a4a4c9685a8db241f3f8065 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 139, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce1f6a850a4a4c9685a8db241f3f8065::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce1f6a850a4a4c9685a8db241f3f8065:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce1f6a850a4a4c9685a8db241f3f8065" class="color" data-tooltip="RGBA: 35, 139, 69, 1.0
   HEXA: #238b45ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e75ed5f0a0264b9a8a4a54600f67e3f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 109, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e75ed5f0a0264b9a8a4a54600f67e3f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e75ed5f0a0264b9a8a4a54600f67e3f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e75ed5f0a0264b9a8a4a54600f67e3f8" class="color" data-tooltip="RGBA: 0, 109, 44, 1.0
   HEXA: #006d2cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_91f4969b02424a5eafa657cee5d1feb4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_91f4969b02424a5eafa657cee5d1feb4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_91f4969b02424a5eafa657cee5d1feb4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_91f4969b02424a5eafa657cee5d1feb4" class="color" data-tooltip="RGBA: 0, 68, 27, 1.0
   HEXA: #00441bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_e34f2801fd6f46e2a8fee53fd04c0cdc {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_e34f2801fd6f46e2a8fee53fd04c0cdc div { flex: 1 1 0; }
           #_e34f2801fd6f46e2a8fee53fd04c0cdc div.color { width: 100%; height: 100%; }
           #_e34f2801fd6f46e2a8fee53fd04c0cdc div.cmap { width: 100%; height: auto; }
           #_e34f2801fd6f46e2a8fee53fd04c0cdc div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Greys</strong>
       
       <div id="_e34f2801fd6f46e2a8fee53fd04c0cdc" class="color-map">
           
                           <div>
                   <style>
       #_ec1e915347334cf79ed5f33a353a7cf0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ec1e915347334cf79ed5f33a353a7cf0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ec1e915347334cf79ed5f33a353a7cf0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ec1e915347334cf79ed5f33a353a7cf0" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a0885460f5e3416cbfc958de69e54a91 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 240, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a0885460f5e3416cbfc958de69e54a91::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a0885460f5e3416cbfc958de69e54a91:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a0885460f5e3416cbfc958de69e54a91" class="color" data-tooltip="RGBA: 240, 240, 240, 1.0
   HEXA: #f0f0f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_989758b92625488f87c305f9f4ac7cfa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 217, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_989758b92625488f87c305f9f4ac7cfa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_989758b92625488f87c305f9f4ac7cfa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_989758b92625488f87c305f9f4ac7cfa" class="color" data-tooltip="RGBA: 217, 217, 217, 1.0
   HEXA: #d9d9d9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_18050a180ba44155899dedde78820152 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 189, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_18050a180ba44155899dedde78820152::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_18050a180ba44155899dedde78820152:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_18050a180ba44155899dedde78820152" class="color" data-tooltip="RGBA: 189, 189, 189, 1.0
   HEXA: #bdbdbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97ee0f2acaa442e8b3614981c1eae97c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 150, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97ee0f2acaa442e8b3614981c1eae97c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97ee0f2acaa442e8b3614981c1eae97c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97ee0f2acaa442e8b3614981c1eae97c" class="color" data-tooltip="RGBA: 150, 150, 150, 1.0
   HEXA: #969696ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ccfea56807dd48d8b42ff5b385c10481 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 115, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ccfea56807dd48d8b42ff5b385c10481::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ccfea56807dd48d8b42ff5b385c10481:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ccfea56807dd48d8b42ff5b385c10481" class="color" data-tooltip="RGBA: 115, 115, 115, 1.0
   HEXA: #737373ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_781db07b574f4455a12d118e70d7c3a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 82, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_781db07b574f4455a12d118e70d7c3a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_781db07b574f4455a12d118e70d7c3a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_781db07b574f4455a12d118e70d7c3a9" class="color" data-tooltip="RGBA: 82, 82, 82, 1.0
   HEXA: #525252ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f56fe694cb23418ca7c9efe1ee952cdb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 37, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f56fe694cb23418ca7c9efe1ee952cdb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f56fe694cb23418ca7c9efe1ee952cdb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f56fe694cb23418ca7c9efe1ee952cdb" class="color" data-tooltip="RGBA: 37, 37, 37, 1.0
   HEXA: #252525ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_975a1b7736a24fc9bac3cdd203e47f7c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_975a1b7736a24fc9bac3cdd203e47f7c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_975a1b7736a24fc9bac3cdd203e47f7c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_975a1b7736a24fc9bac3cdd203e47f7c" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9f71937b614d41748229c4de0e4f2e0a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9f71937b614d41748229c4de0e4f2e0a div { flex: 1 1 0; }
           #_9f71937b614d41748229c4de0e4f2e0a div.color { width: 100%; height: 100%; }
           #_9f71937b614d41748229c4de0e4f2e0a div.cmap { width: 100%; height: auto; }
           #_9f71937b614d41748229c4de0e4f2e0a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>OrRd</strong>
       
       <div id="_9f71937b614d41748229c4de0e4f2e0a" class="color-map">
           
                           <div>
                   <style>
       #_c9d263debfa441308ba9a1aee30f4045 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9d263debfa441308ba9a1aee30f4045::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9d263debfa441308ba9a1aee30f4045:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9d263debfa441308ba9a1aee30f4045" class="color" data-tooltip="RGBA: 255, 247, 236, 1.0
   HEXA: #fff7ecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fbf81f5d73194f56b663e2bb13eea2d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 232, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fbf81f5d73194f56b663e2bb13eea2d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fbf81f5d73194f56b663e2bb13eea2d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fbf81f5d73194f56b663e2bb13eea2d3" class="color" data-tooltip="RGBA: 254, 232, 200, 1.0
   HEXA: #fee8c8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_40be5af92c594bc9bd1c75fd7d1d2bd0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 212, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_40be5af92c594bc9bd1c75fd7d1d2bd0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_40be5af92c594bc9bd1c75fd7d1d2bd0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_40be5af92c594bc9bd1c75fd7d1d2bd0" class="color" data-tooltip="RGBA: 253, 212, 158, 1.0
   HEXA: #fdd49eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3bc98cfa414e4a608c7acd43b87501bd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 187, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3bc98cfa414e4a608c7acd43b87501bd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3bc98cfa414e4a608c7acd43b87501bd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3bc98cfa414e4a608c7acd43b87501bd" class="color" data-tooltip="RGBA: 253, 187, 132, 1.0
   HEXA: #fdbb84ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1e00dfb418ba4badbfb92f036b9c9ebd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 141, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e00dfb418ba4badbfb92f036b9c9ebd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e00dfb418ba4badbfb92f036b9c9ebd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e00dfb418ba4badbfb92f036b9c9ebd" class="color" data-tooltip="RGBA: 252, 141, 89, 1.0
   HEXA: #fc8d59ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8ddf394b63494e5a8362cc4f3c9706a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 101, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8ddf394b63494e5a8362cc4f3c9706a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8ddf394b63494e5a8362cc4f3c9706a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8ddf394b63494e5a8362cc4f3c9706a7" class="color" data-tooltip="RGBA: 239, 101, 72, 1.0
   HEXA: #ef6548ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d366aeb669f64d36ba9bd7beba578ceb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 48, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d366aeb669f64d36ba9bd7beba578ceb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d366aeb669f64d36ba9bd7beba578ceb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d366aeb669f64d36ba9bd7beba578ceb" class="color" data-tooltip="RGBA: 215, 48, 31, 1.0
   HEXA: #d7301fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9435aa3dfd024edc864c2ea2b414ecc3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9435aa3dfd024edc864c2ea2b414ecc3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9435aa3dfd024edc864c2ea2b414ecc3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9435aa3dfd024edc864c2ea2b414ecc3" class="color" data-tooltip="RGBA: 179, 0, 0, 1.0
   HEXA: #b30000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee3e014664a14046b6b02dbaba5f61d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee3e014664a14046b6b02dbaba5f61d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee3e014664a14046b6b02dbaba5f61d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee3e014664a14046b6b02dbaba5f61d2" class="color" data-tooltip="RGBA: 127, 0, 0, 1.0
   HEXA: #7f0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_42f50ddc641149b3b6e490facb6b42fe {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_42f50ddc641149b3b6e490facb6b42fe div { flex: 1 1 0; }
           #_42f50ddc641149b3b6e490facb6b42fe div.color { width: 100%; height: 100%; }
           #_42f50ddc641149b3b6e490facb6b42fe div.cmap { width: 100%; height: auto; }
           #_42f50ddc641149b3b6e490facb6b42fe div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Oranges</strong>
       
       <div id="_42f50ddc641149b3b6e490facb6b42fe" class="color-map">
           
                           <div>
                   <style>
       #_e2f81e6dbb9e44fb8e53644b8da73a22 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 245, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2f81e6dbb9e44fb8e53644b8da73a22::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2f81e6dbb9e44fb8e53644b8da73a22:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2f81e6dbb9e44fb8e53644b8da73a22" class="color" data-tooltip="RGBA: 255, 245, 235, 1.0
   HEXA: #fff5ebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d47cd8f8fc04672881c1da13cad6e51 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 230, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d47cd8f8fc04672881c1da13cad6e51::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d47cd8f8fc04672881c1da13cad6e51:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d47cd8f8fc04672881c1da13cad6e51" class="color" data-tooltip="RGBA: 254, 230, 206, 1.0
   HEXA: #fee6ceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b3f55d056794c2ab7e2790cb68b9c34 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 208, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b3f55d056794c2ab7e2790cb68b9c34::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b3f55d056794c2ab7e2790cb68b9c34:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b3f55d056794c2ab7e2790cb68b9c34" class="color" data-tooltip="RGBA: 253, 208, 162, 1.0
   HEXA: #fdd0a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_666caac54ef84d019fb74d255f34d805 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_666caac54ef84d019fb74d255f34d805::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_666caac54ef84d019fb74d255f34d805:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_666caac54ef84d019fb74d255f34d805" class="color" data-tooltip="RGBA: 253, 174, 107, 1.0
   HEXA: #fdae6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b76633a09fab40a7a98096f3bfb041ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 141, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b76633a09fab40a7a98096f3bfb041ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b76633a09fab40a7a98096f3bfb041ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b76633a09fab40a7a98096f3bfb041ff" class="color" data-tooltip="RGBA: 253, 141, 60, 1.0
   HEXA: #fd8d3cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_059afce7414146d7a9685a16608adfe9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 105, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_059afce7414146d7a9685a16608adfe9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_059afce7414146d7a9685a16608adfe9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_059afce7414146d7a9685a16608adfe9" class="color" data-tooltip="RGBA: 241, 105, 19, 1.0
   HEXA: #f16913ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_179ef44e73944cb6ae7a9883e0b31681 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 72, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_179ef44e73944cb6ae7a9883e0b31681::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_179ef44e73944cb6ae7a9883e0b31681:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_179ef44e73944cb6ae7a9883e0b31681" class="color" data-tooltip="RGBA: 217, 72, 1, 1.0
   HEXA: #d94801ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5fd6aa36f8304feb9d50c30627d78ca5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 54, 3, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5fd6aa36f8304feb9d50c30627d78ca5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5fd6aa36f8304feb9d50c30627d78ca5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5fd6aa36f8304feb9d50c30627d78ca5" class="color" data-tooltip="RGBA: 166, 54, 3, 1.0
   HEXA: #a63603ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_13dc737939b942bd878157f8e22c7820 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 39, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_13dc737939b942bd878157f8e22c7820::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_13dc737939b942bd878157f8e22c7820:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_13dc737939b942bd878157f8e22c7820" class="color" data-tooltip="RGBA: 127, 39, 4, 1.0
   HEXA: #7f2704ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6fefe90298eb484f87311a7b597d753f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6fefe90298eb484f87311a7b597d753f div { flex: 1 1 0; }
           #_6fefe90298eb484f87311a7b597d753f div.color { width: 100%; height: 100%; }
           #_6fefe90298eb484f87311a7b597d753f div.cmap { width: 100%; height: auto; }
           #_6fefe90298eb484f87311a7b597d753f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PuBu</strong>
       
       <div id="_6fefe90298eb484f87311a7b597d753f" class="color-map">
           
                           <div>
                   <style>
       #_90b07be4c9d34c8ca85fb1efe8df8c25 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90b07be4c9d34c8ca85fb1efe8df8c25::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90b07be4c9d34c8ca85fb1efe8df8c25:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90b07be4c9d34c8ca85fb1efe8df8c25" class="color" data-tooltip="RGBA: 255, 247, 251, 1.0
   HEXA: #fff7fbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5646c655113b4b1ebb02121936babb7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 231, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5646c655113b4b1ebb02121936babb7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5646c655113b4b1ebb02121936babb7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5646c655113b4b1ebb02121936babb7b" class="color" data-tooltip="RGBA: 236, 231, 242, 1.0
   HEXA: #ece7f2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dee5aa6ad6e346c49ff18d5bd4d2a979 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 209, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dee5aa6ad6e346c49ff18d5bd4d2a979::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dee5aa6ad6e346c49ff18d5bd4d2a979:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dee5aa6ad6e346c49ff18d5bd4d2a979" class="color" data-tooltip="RGBA: 208, 209, 230, 1.0
   HEXA: #d0d1e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b618134399a54f5e9f1ff5a6aba0f93b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 189, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b618134399a54f5e9f1ff5a6aba0f93b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b618134399a54f5e9f1ff5a6aba0f93b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b618134399a54f5e9f1ff5a6aba0f93b" class="color" data-tooltip="RGBA: 166, 189, 219, 1.0
   HEXA: #a6bddbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f67d31516cb54ba2b8a58d0307ec20a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 169, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f67d31516cb54ba2b8a58d0307ec20a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f67d31516cb54ba2b8a58d0307ec20a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f67d31516cb54ba2b8a58d0307ec20a2" class="color" data-tooltip="RGBA: 116, 169, 207, 1.0
   HEXA: #74a9cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_56089e9cd7a64e17be1c022dc9f7e401 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 144, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_56089e9cd7a64e17be1c022dc9f7e401::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_56089e9cd7a64e17be1c022dc9f7e401:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_56089e9cd7a64e17be1c022dc9f7e401" class="color" data-tooltip="RGBA: 54, 144, 192, 1.0
   HEXA: #3690c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d9851cc223c04dc797015e365ac82c3c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 112, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d9851cc223c04dc797015e365ac82c3c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d9851cc223c04dc797015e365ac82c3c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d9851cc223c04dc797015e365ac82c3c" class="color" data-tooltip="RGBA: 5, 112, 176, 1.0
   HEXA: #0570b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0a12f03fb4e1469aa6bafa69e39fa2b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 90, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0a12f03fb4e1469aa6bafa69e39fa2b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0a12f03fb4e1469aa6bafa69e39fa2b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0a12f03fb4e1469aa6bafa69e39fa2b3" class="color" data-tooltip="RGBA: 4, 90, 141, 1.0
   HEXA: #045a8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b8a1b087e8ca48b3b5660f61f613f805 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(2, 56, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b8a1b087e8ca48b3b5660f61f613f805::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b8a1b087e8ca48b3b5660f61f613f805:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b8a1b087e8ca48b3b5660f61f613f805" class="color" data-tooltip="RGBA: 2, 56, 88, 1.0
   HEXA: #023858ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b403c1918d984e34b500ce7a9fa90539 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b403c1918d984e34b500ce7a9fa90539 div { flex: 1 1 0; }
           #_b403c1918d984e34b500ce7a9fa90539 div.color { width: 100%; height: 100%; }
           #_b403c1918d984e34b500ce7a9fa90539 div.cmap { width: 100%; height: auto; }
           #_b403c1918d984e34b500ce7a9fa90539 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PuBuGn</strong>
       
       <div id="_b403c1918d984e34b500ce7a9fa90539" class="color-map">
           
                           <div>
                   <style>
       #_feff19d448bb44b89809e017bb116e28 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_feff19d448bb44b89809e017bb116e28::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_feff19d448bb44b89809e017bb116e28:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_feff19d448bb44b89809e017bb116e28" class="color" data-tooltip="RGBA: 255, 247, 251, 1.0
   HEXA: #fff7fbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_19d1c94f6c6c4470a71301c32ba746c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 226, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19d1c94f6c6c4470a71301c32ba746c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19d1c94f6c6c4470a71301c32ba746c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19d1c94f6c6c4470a71301c32ba746c2" class="color" data-tooltip="RGBA: 236, 226, 240, 1.0
   HEXA: #ece2f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_51756216bdf543b4a51046aeb77bc261 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 209, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_51756216bdf543b4a51046aeb77bc261::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_51756216bdf543b4a51046aeb77bc261:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_51756216bdf543b4a51046aeb77bc261" class="color" data-tooltip="RGBA: 208, 209, 230, 1.0
   HEXA: #d0d1e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac94b4731b6341c09cd19ab0377afbd1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 189, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac94b4731b6341c09cd19ab0377afbd1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac94b4731b6341c09cd19ab0377afbd1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac94b4731b6341c09cd19ab0377afbd1" class="color" data-tooltip="RGBA: 166, 189, 219, 1.0
   HEXA: #a6bddbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63b8a8dd016844419e4800ff4ffcda23 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 169, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63b8a8dd016844419e4800ff4ffcda23::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63b8a8dd016844419e4800ff4ffcda23:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63b8a8dd016844419e4800ff4ffcda23" class="color" data-tooltip="RGBA: 103, 169, 207, 1.0
   HEXA: #67a9cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d7cf37b2face411cafde8bfeba74d9a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 144, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d7cf37b2face411cafde8bfeba74d9a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d7cf37b2face411cafde8bfeba74d9a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d7cf37b2face411cafde8bfeba74d9a7" class="color" data-tooltip="RGBA: 54, 144, 192, 1.0
   HEXA: #3690c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce77b0e6b865433ea65d06b7dacd535f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(2, 129, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce77b0e6b865433ea65d06b7dacd535f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce77b0e6b865433ea65d06b7dacd535f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce77b0e6b865433ea65d06b7dacd535f" class="color" data-tooltip="RGBA: 2, 129, 138, 1.0
   HEXA: #02818aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_19a999e373564e56b5f61e28f924553a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 108, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19a999e373564e56b5f61e28f924553a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19a999e373564e56b5f61e28f924553a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19a999e373564e56b5f61e28f924553a" class="color" data-tooltip="RGBA: 1, 108, 89, 1.0
   HEXA: #016c59ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_49cfa2ef4b4646b6abd312d3b5da5adf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 70, 54, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_49cfa2ef4b4646b6abd312d3b5da5adf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_49cfa2ef4b4646b6abd312d3b5da5adf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_49cfa2ef4b4646b6abd312d3b5da5adf" class="color" data-tooltip="RGBA: 1, 70, 54, 1.0
   HEXA: #014636ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_97ebc26b67854e6bbb2efa96b94fd640 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_97ebc26b67854e6bbb2efa96b94fd640 div { flex: 1 1 0; }
           #_97ebc26b67854e6bbb2efa96b94fd640 div.color { width: 100%; height: 100%; }
           #_97ebc26b67854e6bbb2efa96b94fd640 div.cmap { width: 100%; height: auto; }
           #_97ebc26b67854e6bbb2efa96b94fd640 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PuRd</strong>
       
       <div id="_97ebc26b67854e6bbb2efa96b94fd640" class="color-map">
           
                           <div>
                   <style>
       #_25fded7a14564beca32d9511feab3be9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 244, 249, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_25fded7a14564beca32d9511feab3be9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_25fded7a14564beca32d9511feab3be9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_25fded7a14564beca32d9511feab3be9" class="color" data-tooltip="RGBA: 247, 244, 249, 1.0
   HEXA: #f7f4f9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e59094135ff4a46b16a5aa7ca94eb63 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 225, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e59094135ff4a46b16a5aa7ca94eb63::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e59094135ff4a46b16a5aa7ca94eb63:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e59094135ff4a46b16a5aa7ca94eb63" class="color" data-tooltip="RGBA: 231, 225, 239, 1.0
   HEXA: #e7e1efff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c862d3229a2648c19bf7951dc3d9d806 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 185, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c862d3229a2648c19bf7951dc3d9d806::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c862d3229a2648c19bf7951dc3d9d806:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c862d3229a2648c19bf7951dc3d9d806" class="color" data-tooltip="RGBA: 212, 185, 218, 1.0
   HEXA: #d4b9daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_18802a363b8b445fbcf62601a66c9061 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 148, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_18802a363b8b445fbcf62601a66c9061::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_18802a363b8b445fbcf62601a66c9061:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_18802a363b8b445fbcf62601a66c9061" class="color" data-tooltip="RGBA: 201, 148, 199, 1.0
   HEXA: #c994c7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f48bf35d2ca45eaaee75bcbbbbe89cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 101, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f48bf35d2ca45eaaee75bcbbbbe89cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f48bf35d2ca45eaaee75bcbbbbe89cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f48bf35d2ca45eaaee75bcbbbbe89cd" class="color" data-tooltip="RGBA: 223, 101, 176, 1.0
   HEXA: #df65b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c17dd17dcbda4866b01323cb92a0188a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 41, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c17dd17dcbda4866b01323cb92a0188a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c17dd17dcbda4866b01323cb92a0188a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c17dd17dcbda4866b01323cb92a0188a" class="color" data-tooltip="RGBA: 231, 41, 138, 1.0
   HEXA: #e7298aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f24c060f12d14c198a789f656ccd5c99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 18, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f24c060f12d14c198a789f656ccd5c99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f24c060f12d14c198a789f656ccd5c99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f24c060f12d14c198a789f656ccd5c99" class="color" data-tooltip="RGBA: 206, 18, 86, 1.0
   HEXA: #ce1256ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3eb09ecfc6544ff28e00d601c22f225a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 0, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3eb09ecfc6544ff28e00d601c22f225a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3eb09ecfc6544ff28e00d601c22f225a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3eb09ecfc6544ff28e00d601c22f225a" class="color" data-tooltip="RGBA: 152, 0, 67, 1.0
   HEXA: #980043ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c163b6acdba64893a3224f0a833ab268 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c163b6acdba64893a3224f0a833ab268::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c163b6acdba64893a3224f0a833ab268:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c163b6acdba64893a3224f0a833ab268" class="color" data-tooltip="RGBA: 103, 0, 31, 1.0
   HEXA: #67001fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_afc9405c7c45467cbaa2d1cb8cba0dd7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_afc9405c7c45467cbaa2d1cb8cba0dd7 div { flex: 1 1 0; }
           #_afc9405c7c45467cbaa2d1cb8cba0dd7 div.color { width: 100%; height: 100%; }
           #_afc9405c7c45467cbaa2d1cb8cba0dd7 div.cmap { width: 100%; height: auto; }
           #_afc9405c7c45467cbaa2d1cb8cba0dd7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Purples</strong>
       
       <div id="_afc9405c7c45467cbaa2d1cb8cba0dd7" class="color-map">
           
                           <div>
                   <style>
       #_989e265c6f9049029dd586dcef599def { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 251, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_989e265c6f9049029dd586dcef599def::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_989e265c6f9049029dd586dcef599def:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_989e265c6f9049029dd586dcef599def" class="color" data-tooltip="RGBA: 252, 251, 253, 1.0
   HEXA: #fcfbfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c0ff9a6a46f4a70b6baa1bf1676ae62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 237, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c0ff9a6a46f4a70b6baa1bf1676ae62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c0ff9a6a46f4a70b6baa1bf1676ae62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c0ff9a6a46f4a70b6baa1bf1676ae62" class="color" data-tooltip="RGBA: 239, 237, 245, 1.0
   HEXA: #efedf5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e202ab00fb9f498aa6d4754c527b3dbc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 218, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e202ab00fb9f498aa6d4754c527b3dbc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e202ab00fb9f498aa6d4754c527b3dbc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e202ab00fb9f498aa6d4754c527b3dbc" class="color" data-tooltip="RGBA: 218, 218, 235, 1.0
   HEXA: #dadaebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ad3a10c7dfd142bdb1e7679ab1cb0d00 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 189, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ad3a10c7dfd142bdb1e7679ab1cb0d00::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ad3a10c7dfd142bdb1e7679ab1cb0d00:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ad3a10c7dfd142bdb1e7679ab1cb0d00" class="color" data-tooltip="RGBA: 188, 189, 220, 1.0
   HEXA: #bcbddcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_30fc6806cf694981a61beec1a6f6db55 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 154, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30fc6806cf694981a61beec1a6f6db55::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30fc6806cf694981a61beec1a6f6db55:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30fc6806cf694981a61beec1a6f6db55" class="color" data-tooltip="RGBA: 158, 154, 200, 1.0
   HEXA: #9e9ac8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d78dc666b6714453afe27a7364731c55 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 125, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d78dc666b6714453afe27a7364731c55::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d78dc666b6714453afe27a7364731c55:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d78dc666b6714453afe27a7364731c55" class="color" data-tooltip="RGBA: 128, 125, 186, 1.0
   HEXA: #807dbaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_69dafb0144984095b23180279623ce31 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 81, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_69dafb0144984095b23180279623ce31::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_69dafb0144984095b23180279623ce31:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_69dafb0144984095b23180279623ce31" class="color" data-tooltip="RGBA: 106, 81, 163, 1.0
   HEXA: #6a51a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_18f0c1b1b3924828949db427299a3af8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 39, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_18f0c1b1b3924828949db427299a3af8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_18f0c1b1b3924828949db427299a3af8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_18f0c1b1b3924828949db427299a3af8" class="color" data-tooltip="RGBA: 84, 39, 143, 1.0
   HEXA: #54278fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_833a2b4e4fda470bbaeb39ab694bf401 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 0, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_833a2b4e4fda470bbaeb39ab694bf401::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_833a2b4e4fda470bbaeb39ab694bf401:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_833a2b4e4fda470bbaeb39ab694bf401" class="color" data-tooltip="RGBA: 63, 0, 125, 1.0
   HEXA: #3f007dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_210a92d298da46d3a7c7903aabf3f252 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_210a92d298da46d3a7c7903aabf3f252 div { flex: 1 1 0; }
           #_210a92d298da46d3a7c7903aabf3f252 div.color { width: 100%; height: 100%; }
           #_210a92d298da46d3a7c7903aabf3f252 div.cmap { width: 100%; height: auto; }
           #_210a92d298da46d3a7c7903aabf3f252 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdBu</strong>
       
       <div id="_210a92d298da46d3a7c7903aabf3f252" class="color-map">
           
                           <div>
                   <style>
       #_a8dd158e14234429bd7d7afa8576aeee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8dd158e14234429bd7d7afa8576aeee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8dd158e14234429bd7d7afa8576aeee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8dd158e14234429bd7d7afa8576aeee" class="color" data-tooltip="RGBA: 103, 0, 31, 1.0
   HEXA: #67001fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fab3c8c757044d3bae2074cd6e5d3e07 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 24, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fab3c8c757044d3bae2074cd6e5d3e07::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fab3c8c757044d3bae2074cd6e5d3e07:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fab3c8c757044d3bae2074cd6e5d3e07" class="color" data-tooltip="RGBA: 178, 24, 43, 1.0
   HEXA: #b2182bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_20fa7b5bdcf644db82a7bb225eb318e4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 96, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_20fa7b5bdcf644db82a7bb225eb318e4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_20fa7b5bdcf644db82a7bb225eb318e4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_20fa7b5bdcf644db82a7bb225eb318e4" class="color" data-tooltip="RGBA: 214, 96, 77, 1.0
   HEXA: #d6604dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cbedfdab4a6a46ac9fa798d7dd59115b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 165, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cbedfdab4a6a46ac9fa798d7dd59115b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cbedfdab4a6a46ac9fa798d7dd59115b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cbedfdab4a6a46ac9fa798d7dd59115b" class="color" data-tooltip="RGBA: 244, 165, 130, 1.0
   HEXA: #f4a582ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd94ada32b1c4772a90ccdbe791a5ce4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 219, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd94ada32b1c4772a90ccdbe791a5ce4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd94ada32b1c4772a90ccdbe791a5ce4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd94ada32b1c4772a90ccdbe791a5ce4" class="color" data-tooltip="RGBA: 253, 219, 199, 1.0
   HEXA: #fddbc7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ecda84390ad47a2994f977f488b63e5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ecda84390ad47a2994f977f488b63e5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ecda84390ad47a2994f977f488b63e5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ecda84390ad47a2994f977f488b63e5" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c791c3df33548db88009c3a1d7ed0c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 229, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c791c3df33548db88009c3a1d7ed0c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c791c3df33548db88009c3a1d7ed0c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c791c3df33548db88009c3a1d7ed0c9" class="color" data-tooltip="RGBA: 209, 229, 240, 1.0
   HEXA: #d1e5f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0621a996470747fabb88cf399d9c6af1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 197, 222, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0621a996470747fabb88cf399d9c6af1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0621a996470747fabb88cf399d9c6af1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0621a996470747fabb88cf399d9c6af1" class="color" data-tooltip="RGBA: 146, 197, 222, 1.0
   HEXA: #92c5deff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_972781207dad4bcab089d9ee96b33d62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(67, 147, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_972781207dad4bcab089d9ee96b33d62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_972781207dad4bcab089d9ee96b33d62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_972781207dad4bcab089d9ee96b33d62" class="color" data-tooltip="RGBA: 67, 147, 195, 1.0
   HEXA: #4393c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_072502c036b6431b872935f742aa8c81 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 102, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_072502c036b6431b872935f742aa8c81::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_072502c036b6431b872935f742aa8c81:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_072502c036b6431b872935f742aa8c81" class="color" data-tooltip="RGBA: 33, 102, 172, 1.0
   HEXA: #2166acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5cb6d9babe84b94bc44a3fb9d52005f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 48, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5cb6d9babe84b94bc44a3fb9d52005f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5cb6d9babe84b94bc44a3fb9d52005f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5cb6d9babe84b94bc44a3fb9d52005f" class="color" data-tooltip="RGBA: 5, 48, 97, 1.0
   HEXA: #053061ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b16b95e0f03d471caf9393af36148a8d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b16b95e0f03d471caf9393af36148a8d div { flex: 1 1 0; }
           #_b16b95e0f03d471caf9393af36148a8d div.color { width: 100%; height: 100%; }
           #_b16b95e0f03d471caf9393af36148a8d div.cmap { width: 100%; height: auto; }
           #_b16b95e0f03d471caf9393af36148a8d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdPu</strong>
       
       <div id="_b16b95e0f03d471caf9393af36148a8d" class="color-map">
           
                           <div>
                   <style>
       #_a6bd06a41f1d400fbacd4fc8bbacc9d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 243, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6bd06a41f1d400fbacd4fc8bbacc9d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6bd06a41f1d400fbacd4fc8bbacc9d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6bd06a41f1d400fbacd4fc8bbacc9d3" class="color" data-tooltip="RGBA: 255, 247, 243, 1.0
   HEXA: #fff7f3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c04bd67a8fe400fb6ce92e24d80d98a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 224, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c04bd67a8fe400fb6ce92e24d80d98a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c04bd67a8fe400fb6ce92e24d80d98a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c04bd67a8fe400fb6ce92e24d80d98a" class="color" data-tooltip="RGBA: 253, 224, 221, 1.0
   HEXA: #fde0ddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_263bbacadb0146ddad1a7494881e0024 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 197, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_263bbacadb0146ddad1a7494881e0024::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_263bbacadb0146ddad1a7494881e0024:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_263bbacadb0146ddad1a7494881e0024" class="color" data-tooltip="RGBA: 252, 197, 192, 1.0
   HEXA: #fcc5c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4aef7998cb744f34be4cafbed57f7e28 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 159, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4aef7998cb744f34be4cafbed57f7e28::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4aef7998cb744f34be4cafbed57f7e28:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4aef7998cb744f34be4cafbed57f7e28" class="color" data-tooltip="RGBA: 250, 159, 181, 1.0
   HEXA: #fa9fb5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_da85e434c3474edb8c4a882d096521d7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 104, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_da85e434c3474edb8c4a882d096521d7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_da85e434c3474edb8c4a882d096521d7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_da85e434c3474edb8c4a882d096521d7" class="color" data-tooltip="RGBA: 247, 104, 161, 1.0
   HEXA: #f768a1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3cac2d94150f46ad82e34622de50b42b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 52, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3cac2d94150f46ad82e34622de50b42b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3cac2d94150f46ad82e34622de50b42b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3cac2d94150f46ad82e34622de50b42b" class="color" data-tooltip="RGBA: 221, 52, 151, 1.0
   HEXA: #dd3497ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5fa016bd56e446488a22a5ac9f3bcb2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 1, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5fa016bd56e446488a22a5ac9f3bcb2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5fa016bd56e446488a22a5ac9f3bcb2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5fa016bd56e446488a22a5ac9f3bcb2b" class="color" data-tooltip="RGBA: 174, 1, 126, 1.0
   HEXA: #ae017eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d6b06d7e38d74abf9885e6ae286994bc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(122, 1, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d6b06d7e38d74abf9885e6ae286994bc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d6b06d7e38d74abf9885e6ae286994bc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d6b06d7e38d74abf9885e6ae286994bc" class="color" data-tooltip="RGBA: 122, 1, 119, 1.0
   HEXA: #7a0177ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c14e4c0db1234498b29dba4f09c7d872 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(73, 0, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c14e4c0db1234498b29dba4f09c7d872::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c14e4c0db1234498b29dba4f09c7d872:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c14e4c0db1234498b29dba4f09c7d872" class="color" data-tooltip="RGBA: 73, 0, 106, 1.0
   HEXA: #49006aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ded8a45256ff440693982e001f37caed {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ded8a45256ff440693982e001f37caed div { flex: 1 1 0; }
           #_ded8a45256ff440693982e001f37caed div.color { width: 100%; height: 100%; }
           #_ded8a45256ff440693982e001f37caed div.cmap { width: 100%; height: auto; }
           #_ded8a45256ff440693982e001f37caed div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Reds</strong>
       
       <div id="_ded8a45256ff440693982e001f37caed" class="color-map">
           
                           <div>
                   <style>
       #_ff267ffa5a724fbdbe95cdbe8008c5bd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 245, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ff267ffa5a724fbdbe95cdbe8008c5bd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ff267ffa5a724fbdbe95cdbe8008c5bd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ff267ffa5a724fbdbe95cdbe8008c5bd" class="color" data-tooltip="RGBA: 255, 245, 240, 1.0
   HEXA: #fff5f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3a6a0546f0ed482a8e70d992fc5123b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3a6a0546f0ed482a8e70d992fc5123b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3a6a0546f0ed482a8e70d992fc5123b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3a6a0546f0ed482a8e70d992fc5123b3" class="color" data-tooltip="RGBA: 254, 224, 210, 1.0
   HEXA: #fee0d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68b0e30532154d88978f02f82a5c67a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 187, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68b0e30532154d88978f02f82a5c67a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68b0e30532154d88978f02f82a5c67a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68b0e30532154d88978f02f82a5c67a1" class="color" data-tooltip="RGBA: 252, 187, 161, 1.0
   HEXA: #fcbba1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d88a8771784487b83208a1529c04877 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 146, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d88a8771784487b83208a1529c04877::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d88a8771784487b83208a1529c04877:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d88a8771784487b83208a1529c04877" class="color" data-tooltip="RGBA: 252, 146, 114, 1.0
   HEXA: #fc9272ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8073f5e817334b7db721b73e4c0d0f12 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 106, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8073f5e817334b7db721b73e4c0d0f12::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8073f5e817334b7db721b73e4c0d0f12:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8073f5e817334b7db721b73e4c0d0f12" class="color" data-tooltip="RGBA: 251, 106, 74, 1.0
   HEXA: #fb6a4aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1fa00142d1624939ba11d40708119c74 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 59, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1fa00142d1624939ba11d40708119c74::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1fa00142d1624939ba11d40708119c74:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1fa00142d1624939ba11d40708119c74" class="color" data-tooltip="RGBA: 239, 59, 44, 1.0
   HEXA: #ef3b2cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_901fc2ed01a848a9827af7bf23dc85e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 24, 29, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_901fc2ed01a848a9827af7bf23dc85e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_901fc2ed01a848a9827af7bf23dc85e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_901fc2ed01a848a9827af7bf23dc85e0" class="color" data-tooltip="RGBA: 203, 24, 29, 1.0
   HEXA: #cb181dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_12a6aa48d94545bab6504547d27e75a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 15, 21, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_12a6aa48d94545bab6504547d27e75a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_12a6aa48d94545bab6504547d27e75a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_12a6aa48d94545bab6504547d27e75a4" class="color" data-tooltip="RGBA: 165, 15, 21, 1.0
   HEXA: #a50f15ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3320af56038d49269316773b9daea0ec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3320af56038d49269316773b9daea0ec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3320af56038d49269316773b9daea0ec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3320af56038d49269316773b9daea0ec" class="color" data-tooltip="RGBA: 103, 0, 13, 1.0
   HEXA: #67000dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_541ab1387b01487cb5fb09865f18d59b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_541ab1387b01487cb5fb09865f18d59b div { flex: 1 1 0; }
           #_541ab1387b01487cb5fb09865f18d59b div.color { width: 100%; height: 100%; }
           #_541ab1387b01487cb5fb09865f18d59b div.cmap { width: 100%; height: auto; }
           #_541ab1387b01487cb5fb09865f18d59b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>YlGn</strong>
       
       <div id="_541ab1387b01487cb5fb09865f18d59b" class="color-map">
           
                           <div>
                   <style>
       #_b334595a1a9c4f74a0fd3d39b4c464d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b334595a1a9c4f74a0fd3d39b4c464d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b334595a1a9c4f74a0fd3d39b4c464d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b334595a1a9c4f74a0fd3d39b4c464d3" class="color" data-tooltip="RGBA: 255, 255, 229, 1.0
   HEXA: #ffffe5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b54f61547ca4486089cfdf1c23523fd8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b54f61547ca4486089cfdf1c23523fd8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b54f61547ca4486089cfdf1c23523fd8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b54f61547ca4486089cfdf1c23523fd8" class="color" data-tooltip="RGBA: 247, 252, 185, 1.0
   HEXA: #f7fcb9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1fdc2812745149d9bea8c868fd4b9042 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 240, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1fdc2812745149d9bea8c868fd4b9042::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1fdc2812745149d9bea8c868fd4b9042:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1fdc2812745149d9bea8c868fd4b9042" class="color" data-tooltip="RGBA: 217, 240, 163, 1.0
   HEXA: #d9f0a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d792e84e253f41e092271a80b890d535 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 221, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d792e84e253f41e092271a80b890d535::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d792e84e253f41e092271a80b890d535:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d792e84e253f41e092271a80b890d535" class="color" data-tooltip="RGBA: 173, 221, 142, 1.0
   HEXA: #addd8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57fe869bb29f4af5b8e8332738fec2f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 198, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57fe869bb29f4af5b8e8332738fec2f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57fe869bb29f4af5b8e8332738fec2f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57fe869bb29f4af5b8e8332738fec2f8" class="color" data-tooltip="RGBA: 120, 198, 121, 1.0
   HEXA: #78c679ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_99903be4887146709ab7838e87d063f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 171, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_99903be4887146709ab7838e87d063f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_99903be4887146709ab7838e87d063f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_99903be4887146709ab7838e87d063f1" class="color" data-tooltip="RGBA: 65, 171, 93, 1.0
   HEXA: #41ab5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c320fc71acd441b9b24d05a216c17973 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 132, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c320fc71acd441b9b24d05a216c17973::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c320fc71acd441b9b24d05a216c17973:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c320fc71acd441b9b24d05a216c17973" class="color" data-tooltip="RGBA: 35, 132, 67, 1.0
   HEXA: #238443ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_614172452d7a471b9dbdac37c9f1d27d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 104, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_614172452d7a471b9dbdac37c9f1d27d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_614172452d7a471b9dbdac37c9f1d27d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_614172452d7a471b9dbdac37c9f1d27d" class="color" data-tooltip="RGBA: 0, 104, 55, 1.0
   HEXA: #006837ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9c6115472e9240d28178abdc6d216f45 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 69, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9c6115472e9240d28178abdc6d216f45::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9c6115472e9240d28178abdc6d216f45:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9c6115472e9240d28178abdc6d216f45" class="color" data-tooltip="RGBA: 0, 69, 41, 1.0
   HEXA: #004529ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f0494503105f412b8bd2b07c5614625f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f0494503105f412b8bd2b07c5614625f div { flex: 1 1 0; }
           #_f0494503105f412b8bd2b07c5614625f div.color { width: 100%; height: 100%; }
           #_f0494503105f412b8bd2b07c5614625f div.cmap { width: 100%; height: auto; }
           #_f0494503105f412b8bd2b07c5614625f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>YlGnBu</strong>
       
       <div id="_f0494503105f412b8bd2b07c5614625f" class="color-map">
           
                           <div>
                   <style>
       #_4f3236e358454024adeca13cc499eb61 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4f3236e358454024adeca13cc499eb61::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4f3236e358454024adeca13cc499eb61:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4f3236e358454024adeca13cc499eb61" class="color" data-tooltip="RGBA: 255, 255, 217, 1.0
   HEXA: #ffffd9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_713455b9ea5b4f85af8d1b606ca48303 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 248, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_713455b9ea5b4f85af8d1b606ca48303::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_713455b9ea5b4f85af8d1b606ca48303:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_713455b9ea5b4f85af8d1b606ca48303" class="color" data-tooltip="RGBA: 237, 248, 177, 1.0
   HEXA: #edf8b1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2e3f02eabb664a12b8e38b6f30e16e84 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 233, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2e3f02eabb664a12b8e38b6f30e16e84::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2e3f02eabb664a12b8e38b6f30e16e84:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2e3f02eabb664a12b8e38b6f30e16e84" class="color" data-tooltip="RGBA: 199, 233, 180, 1.0
   HEXA: #c7e9b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2bb60967148643f89db30048073a615c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 205, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2bb60967148643f89db30048073a615c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2bb60967148643f89db30048073a615c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2bb60967148643f89db30048073a615c" class="color" data-tooltip="RGBA: 127, 205, 187, 1.0
   HEXA: #7fcdbbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64bab8ed0b154665ba0fbbe02e3bba71 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 182, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64bab8ed0b154665ba0fbbe02e3bba71::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64bab8ed0b154665ba0fbbe02e3bba71:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64bab8ed0b154665ba0fbbe02e3bba71" class="color" data-tooltip="RGBA: 65, 182, 196, 1.0
   HEXA: #41b6c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e5799fc00d7c45c4bbe6eabb2ea5c6c3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 145, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e5799fc00d7c45c4bbe6eabb2ea5c6c3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e5799fc00d7c45c4bbe6eabb2ea5c6c3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e5799fc00d7c45c4bbe6eabb2ea5c6c3" class="color" data-tooltip="RGBA: 29, 145, 192, 1.0
   HEXA: #1d91c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e44471f855d424a8b14b4436707af6d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 94, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e44471f855d424a8b14b4436707af6d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e44471f855d424a8b14b4436707af6d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e44471f855d424a8b14b4436707af6d" class="color" data-tooltip="RGBA: 34, 94, 168, 1.0
   HEXA: #225ea8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_00df12212f634951ab22c9b94b43b9cb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 52, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_00df12212f634951ab22c9b94b43b9cb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_00df12212f634951ab22c9b94b43b9cb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_00df12212f634951ab22c9b94b43b9cb" class="color" data-tooltip="RGBA: 37, 52, 148, 1.0
   HEXA: #253494ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8407592211d94459a45858fb38545d31 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 29, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8407592211d94459a45858fb38545d31::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8407592211d94459a45858fb38545d31:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8407592211d94459a45858fb38545d31" class="color" data-tooltip="RGBA: 8, 29, 88, 1.0
   HEXA: #081d58ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_654e97d4a5e24eb7b552206e1d3d099e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_654e97d4a5e24eb7b552206e1d3d099e div { flex: 1 1 0; }
           #_654e97d4a5e24eb7b552206e1d3d099e div.color { width: 100%; height: 100%; }
           #_654e97d4a5e24eb7b552206e1d3d099e div.cmap { width: 100%; height: auto; }
           #_654e97d4a5e24eb7b552206e1d3d099e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>YlOrBr</strong>
       
       <div id="_654e97d4a5e24eb7b552206e1d3d099e" class="color-map">
           
                           <div>
                   <style>
       #_758b3141ea134797a9a16608a623dc6f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_758b3141ea134797a9a16608a623dc6f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_758b3141ea134797a9a16608a623dc6f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_758b3141ea134797a9a16608a623dc6f" class="color" data-tooltip="RGBA: 255, 255, 229, 1.0
   HEXA: #ffffe5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_28ad8dd3c37c4694a3365c4f76518be6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_28ad8dd3c37c4694a3365c4f76518be6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_28ad8dd3c37c4694a3365c4f76518be6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_28ad8dd3c37c4694a3365c4f76518be6" class="color" data-tooltip="RGBA: 255, 247, 188, 1.0
   HEXA: #fff7bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e60eeaf777504b77928dc6bdb9bcb69a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 227, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e60eeaf777504b77928dc6bdb9bcb69a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e60eeaf777504b77928dc6bdb9bcb69a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e60eeaf777504b77928dc6bdb9bcb69a" class="color" data-tooltip="RGBA: 254, 227, 145, 1.0
   HEXA: #fee391ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e68ff399c7f1495abb9820901649e682 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 196, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e68ff399c7f1495abb9820901649e682::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e68ff399c7f1495abb9820901649e682:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e68ff399c7f1495abb9820901649e682" class="color" data-tooltip="RGBA: 254, 196, 79, 1.0
   HEXA: #fec44fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6873824e40564801a2a2a85acdcf54b6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 153, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6873824e40564801a2a2a85acdcf54b6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6873824e40564801a2a2a85acdcf54b6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6873824e40564801a2a2a85acdcf54b6" class="color" data-tooltip="RGBA: 254, 153, 41, 1.0
   HEXA: #fe9929ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4285fd07ebfe412386b64e8d7fbbd642 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 112, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4285fd07ebfe412386b64e8d7fbbd642::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4285fd07ebfe412386b64e8d7fbbd642:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4285fd07ebfe412386b64e8d7fbbd642" class="color" data-tooltip="RGBA: 236, 112, 20, 1.0
   HEXA: #ec7014ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f4f2ea775ab2418286f0688861992759 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 76, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f4f2ea775ab2418286f0688861992759::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f4f2ea775ab2418286f0688861992759:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f4f2ea775ab2418286f0688861992759" class="color" data-tooltip="RGBA: 204, 76, 2, 1.0
   HEXA: #cc4c02ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_39781ae683cb4c93a64152651208796c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 52, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_39781ae683cb4c93a64152651208796c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_39781ae683cb4c93a64152651208796c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_39781ae683cb4c93a64152651208796c" class="color" data-tooltip="RGBA: 153, 52, 4, 1.0
   HEXA: #993404ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b5fa601562704ced81a71a3ce1a29eec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 37, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b5fa601562704ced81a71a3ce1a29eec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b5fa601562704ced81a71a3ce1a29eec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b5fa601562704ced81a71a3ce1a29eec" class="color" data-tooltip="RGBA: 102, 37, 6, 1.0
   HEXA: #662506ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6904c3e7f20642539b989814bdafca5e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6904c3e7f20642539b989814bdafca5e div { flex: 1 1 0; }
           #_6904c3e7f20642539b989814bdafca5e div.color { width: 100%; height: 100%; }
           #_6904c3e7f20642539b989814bdafca5e div.cmap { width: 100%; height: auto; }
           #_6904c3e7f20642539b989814bdafca5e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>YlOrRd</strong>
       
       <div id="_6904c3e7f20642539b989814bdafca5e" class="color-map">
           
                           <div>
                   <style>
       #_61ce6076b518471bae3dd8d044734204 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61ce6076b518471bae3dd8d044734204::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61ce6076b518471bae3dd8d044734204:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61ce6076b518471bae3dd8d044734204" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05a304c1dc9b4d90a4b7bf60eabafc27 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 237, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05a304c1dc9b4d90a4b7bf60eabafc27::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05a304c1dc9b4d90a4b7bf60eabafc27:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05a304c1dc9b4d90a4b7bf60eabafc27" class="color" data-tooltip="RGBA: 255, 237, 160, 1.0
   HEXA: #ffeda0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dce06d05181240c1837990709da55bf4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 217, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dce06d05181240c1837990709da55bf4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dce06d05181240c1837990709da55bf4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dce06d05181240c1837990709da55bf4" class="color" data-tooltip="RGBA: 254, 217, 118, 1.0
   HEXA: #fed976ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4e0150bb1eba4381a90eb0edf1403c54 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 178, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4e0150bb1eba4381a90eb0edf1403c54::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4e0150bb1eba4381a90eb0edf1403c54:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4e0150bb1eba4381a90eb0edf1403c54" class="color" data-tooltip="RGBA: 254, 178, 76, 1.0
   HEXA: #feb24cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_734b170de94649d69bab45b59747ba2e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 141, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_734b170de94649d69bab45b59747ba2e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_734b170de94649d69bab45b59747ba2e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_734b170de94649d69bab45b59747ba2e" class="color" data-tooltip="RGBA: 253, 141, 60, 1.0
   HEXA: #fd8d3cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea69b29eec7f4c3baedd678ac5919cf4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 78, 42, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea69b29eec7f4c3baedd678ac5919cf4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea69b29eec7f4c3baedd678ac5919cf4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea69b29eec7f4c3baedd678ac5919cf4" class="color" data-tooltip="RGBA: 252, 78, 42, 1.0
   HEXA: #fc4e2aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fa56d69a2b9a41b6b2aaeab5d468d93c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 26, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fa56d69a2b9a41b6b2aaeab5d468d93c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fa56d69a2b9a41b6b2aaeab5d468d93c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fa56d69a2b9a41b6b2aaeab5d468d93c" class="color" data-tooltip="RGBA: 227, 26, 28, 1.0
   HEXA: #e31a1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bbdfc8d15d014a8788b9e5618cf4abf0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bbdfc8d15d014a8788b9e5618cf4abf0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bbdfc8d15d014a8788b9e5618cf4abf0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bbdfc8d15d014a8788b9e5618cf4abf0" class="color" data-tooltip="RGBA: 189, 0, 38, 1.0
   HEXA: #bd0026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c9485fdf116840dfac61e88e05be38ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9485fdf116840dfac61e88e05be38ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9485fdf116840dfac61e88e05be38ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9485fdf116840dfac61e88e05be38ca" class="color" data-tooltip="RGBA: 128, 0, 38, 1.0
   HEXA: #800026ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4574ff495ed84aaa87b88bbb9654bc9f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4574ff495ed84aaa87b88bbb9654bc9f div { flex: 1 1 0; }
           #_4574ff495ed84aaa87b88bbb9654bc9f div.color { width: 100%; height: 100%; }
           #_4574ff495ed84aaa87b88bbb9654bc9f div.cmap { width: 100%; height: auto; }
           #_4574ff495ed84aaa87b88bbb9654bc9f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>turbid</strong>
       
       <div id="_4574ff495ed84aaa87b88bbb9654bc9f" class="color-map">
           
                           <div>
                   <style>
       #_b19f965b81e248fb9f15df0ec222892c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 245, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b19f965b81e248fb9f15df0ec222892c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b19f965b81e248fb9f15df0ec222892c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b19f965b81e248fb9f15df0ec222892c" class="color" data-tooltip="RGBA: 232, 245, 171, 1.0
   HEXA: #e8f5abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_214e214bf2514cdb8f927a3b7cd505a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 219, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_214e214bf2514cdb8f927a3b7cd505a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_214e214bf2514cdb8f927a3b7cd505a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_214e214bf2514cdb8f927a3b7cd505a1" class="color" data-tooltip="RGBA: 220, 219, 137, 1.0
   HEXA: #dcdb89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cadf78a999a5487e93493042e2d625f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 193, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cadf78a999a5487e93493042e2d625f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cadf78a999a5487e93493042e2d625f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cadf78a999a5487e93493042e2d625f6" class="color" data-tooltip="RGBA: 209, 193, 107, 1.0
   HEXA: #d1c16bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9efda3139784f2e8de594aa324d7435 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 168, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9efda3139784f2e8de594aa324d7435::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9efda3139784f2e8de594aa324d7435:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9efda3139784f2e8de594aa324d7435" class="color" data-tooltip="RGBA: 199, 168, 83, 1.0
   HEXA: #c7a853ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cae35289897b4828bab64f7ef13065fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 143, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cae35289897b4828bab64f7ef13065fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cae35289897b4828bab64f7ef13065fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cae35289897b4828bab64f7ef13065fb" class="color" data-tooltip="RGBA: 186, 143, 66, 1.0
   HEXA: #ba8f42ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d40cd77f33d3439abafd783ec0ce4161 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 121, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d40cd77f33d3439abafd783ec0ce4161::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d40cd77f33d3439abafd783ec0ce4161:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d40cd77f33d3439abafd783ec0ce4161" class="color" data-tooltip="RGBA: 170, 121, 60, 1.0
   HEXA: #aa793cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3f1e45025fe04101a2e51f0d394c78ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 103, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3f1e45025fe04101a2e51f0d394c78ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3f1e45025fe04101a2e51f0d394c78ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3f1e45025fe04101a2e51f0d394c78ea" class="color" data-tooltip="RGBA: 151, 103, 58, 1.0
   HEXA: #97673aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_326850678769426c87657115362b451f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 87, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_326850678769426c87657115362b451f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_326850678769426c87657115362b451f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_326850678769426c87657115362b451f" class="color" data-tooltip="RGBA: 129, 87, 56, 1.0
   HEXA: #815738ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6a3effcfc9824878bf28590467afd22d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 72, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6a3effcfc9824878bf28590467afd22d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6a3effcfc9824878bf28590467afd22d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6a3effcfc9824878bf28590467afd22d" class="color" data-tooltip="RGBA: 104, 72, 53, 1.0
   HEXA: #684835ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_69cbf6b9c3f944b5abb2261fcdafda4a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 59, 46, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_69cbf6b9c3f944b5abb2261fcdafda4a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_69cbf6b9c3f944b5abb2261fcdafda4a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_69cbf6b9c3f944b5abb2261fcdafda4a" class="color" data-tooltip="RGBA: 80, 59, 46, 1.0
   HEXA: #503b2eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_857548bbd8b545eba0858334ba624343 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 45, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_857548bbd8b545eba0858334ba624343::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_857548bbd8b545eba0858334ba624343:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_857548bbd8b545eba0858334ba624343" class="color" data-tooltip="RGBA: 57, 45, 37, 1.0
   HEXA: #392d25ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8b61d10d655440f2964ba36a3e498634 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 30, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8b61d10d655440f2964ba36a3e498634::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8b61d10d655440f2964ba36a3e498634:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8b61d10d655440f2964ba36a3e498634" class="color" data-tooltip="RGBA: 34, 30, 27, 1.0
   HEXA: #221e1bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_fabef4cd15e14b26ac719d7cd72ab4d3 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_fabef4cd15e14b26ac719d7cd72ab4d3 div { flex: 1 1 0; }
           #_fabef4cd15e14b26ac719d7cd72ab4d3 div.color { width: 100%; height: 100%; }
           #_fabef4cd15e14b26ac719d7cd72ab4d3 div.cmap { width: 100%; height: auto; }
           #_fabef4cd15e14b26ac719d7cd72ab4d3 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>thermal</strong>
       
       <div id="_fabef4cd15e14b26ac719d7cd72ab4d3" class="color-map">
           
                           <div>
                   <style>
       #_cfdc6b61d3d642c7938edd587fe99491 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(3, 35, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cfdc6b61d3d642c7938edd587fe99491::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cfdc6b61d3d642c7938edd587fe99491:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cfdc6b61d3d642c7938edd587fe99491" class="color" data-tooltip="RGBA: 3, 35, 51, 1.0
   HEXA: #032333ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e6330fdadeb458098a45c8e19a21f2a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 48, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e6330fdadeb458098a45c8e19a21f2a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e6330fdadeb458098a45c8e19a21f2a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e6330fdadeb458098a45c8e19a21f2a" class="color" data-tooltip="RGBA: 13, 48, 100, 1.0
   HEXA: #0d3064ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b343c4d80b84fbda9a6f450620e0116 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 50, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b343c4d80b84fbda9a6f450620e0116::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b343c4d80b84fbda9a6f450620e0116:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b343c4d80b84fbda9a6f450620e0116" class="color" data-tooltip="RGBA: 53, 50, 155, 1.0
   HEXA: #35329bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9eb0d85fb324fa5accc679872818f44 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(93, 62, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9eb0d85fb324fa5accc679872818f44::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9eb0d85fb324fa5accc679872818f44:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9eb0d85fb324fa5accc679872818f44" class="color" data-tooltip="RGBA: 93, 62, 153, 1.0
   HEXA: #5d3e99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1f52dd46ef2e4ed18b4eb97d53b22427 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(126, 77, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f52dd46ef2e4ed18b4eb97d53b22427::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f52dd46ef2e4ed18b4eb97d53b22427:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f52dd46ef2e4ed18b4eb97d53b22427" class="color" data-tooltip="RGBA: 126, 77, 143, 1.0
   HEXA: #7e4d8fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5af1c22899114ab9a17f64421cf16b36 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 89, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5af1c22899114ab9a17f64421cf16b36::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5af1c22899114ab9a17f64421cf16b36:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5af1c22899114ab9a17f64421cf16b36" class="color" data-tooltip="RGBA: 158, 89, 135, 1.0
   HEXA: #9e5987ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b36cda5032842678df5f422cabd1cca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 100, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b36cda5032842678df5f422cabd1cca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b36cda5032842678df5f422cabd1cca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b36cda5032842678df5f422cabd1cca" class="color" data-tooltip="RGBA: 193, 100, 121, 1.0
   HEXA: #c16479ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_022c1d8945334935b1c2eee1799f4150 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 113, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_022c1d8945334935b1c2eee1799f4150::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_022c1d8945334935b1c2eee1799f4150:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_022c1d8945334935b1c2eee1799f4150" class="color" data-tooltip="RGBA: 225, 113, 97, 1.0
   HEXA: #e17161ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b662b11377dc43bbbe2f7703c5786d1c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 139, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b662b11377dc43bbbe2f7703c5786d1c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b662b11377dc43bbbe2f7703c5786d1c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b662b11377dc43bbbe2f7703c5786d1c" class="color" data-tooltip="RGBA: 246, 139, 69, 1.0
   HEXA: #f68b45ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c86b4670a5640db8413036fbca9171d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 173, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c86b4670a5640db8413036fbca9171d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c86b4670a5640db8413036fbca9171d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c86b4670a5640db8413036fbca9171d" class="color" data-tooltip="RGBA: 251, 173, 60, 1.0
   HEXA: #fbad3cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5a9be8f22d704631bc08974d5e0b89f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 211, 70, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5a9be8f22d704631bc08974d5e0b89f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5a9be8f22d704631bc08974d5e0b89f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5a9be8f22d704631bc08974d5e0b89f1" class="color" data-tooltip="RGBA: 246, 211, 70, 1.0
   HEXA: #f6d346ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_07aecfae696e4bbaa17b3de9b8a7bc97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 250, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_07aecfae696e4bbaa17b3de9b8a7bc97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_07aecfae696e4bbaa17b3de9b8a7bc97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_07aecfae696e4bbaa17b3de9b8a7bc97" class="color" data-tooltip="RGBA: 231, 250, 90, 1.0
   HEXA: #e7fa5aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c5410485dd754680a404172e9fa161a1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c5410485dd754680a404172e9fa161a1 div { flex: 1 1 0; }
           #_c5410485dd754680a404172e9fa161a1 div.color { width: 100%; height: 100%; }
           #_c5410485dd754680a404172e9fa161a1 div.cmap { width: 100%; height: auto; }
           #_c5410485dd754680a404172e9fa161a1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>haline</strong>
       
       <div id="_c5410485dd754680a404172e9fa161a1" class="color-map">
           
                           <div>
                   <style>
       #_a53a2ea786ae461db78fe268f3583e1d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 24, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a53a2ea786ae461db78fe268f3583e1d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a53a2ea786ae461db78fe268f3583e1d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a53a2ea786ae461db78fe268f3583e1d" class="color" data-tooltip="RGBA: 41, 24, 107, 1.0
   HEXA: #29186bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9b2a9dfb9941401eb4b9659bfff28ce6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 35, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9b2a9dfb9941401eb4b9659bfff28ce6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9b2a9dfb9941401eb4b9659bfff28ce6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9b2a9dfb9941401eb4b9659bfff28ce6" class="color" data-tooltip="RGBA: 42, 35, 160, 1.0
   HEXA: #2a23a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e2e063ba0f19487ab17efa7233de21aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 71, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2e063ba0f19487ab17efa7233de21aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2e063ba0f19487ab17efa7233de21aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2e063ba0f19487ab17efa7233de21aa" class="color" data-tooltip="RGBA: 15, 71, 153, 1.0
   HEXA: #0f4799ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9bf9929fbc96446ea0629a492c91823e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 95, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9bf9929fbc96446ea0629a492c91823e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9bf9929fbc96446ea0629a492c91823e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9bf9929fbc96446ea0629a492c91823e" class="color" data-tooltip="RGBA: 18, 95, 142, 1.0
   HEXA: #125f8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_52157854de1f40c3a2e4096fb5eea51f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 116, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_52157854de1f40c3a2e4096fb5eea51f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_52157854de1f40c3a2e4096fb5eea51f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_52157854de1f40c3a2e4096fb5eea51f" class="color" data-tooltip="RGBA: 38, 116, 137, 1.0
   HEXA: #267489ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c035602dd26454595069d7e87877e4b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 136, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c035602dd26454595069d7e87877e4b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c035602dd26454595069d7e87877e4b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c035602dd26454595069d7e87877e4b" class="color" data-tooltip="RGBA: 53, 136, 136, 1.0
   HEXA: #358888ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e4fe274edcf5480eb3f8d0179d2550d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 157, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e4fe274edcf5480eb3f8d0179d2550d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e4fe274edcf5480eb3f8d0179d2550d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e4fe274edcf5480eb3f8d0179d2550d1" class="color" data-tooltip="RGBA: 65, 157, 133, 1.0
   HEXA: #419d85ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63a26658932a45f1b8e252549cde685a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(81, 178, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63a26658932a45f1b8e252549cde685a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63a26658932a45f1b8e252549cde685a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63a26658932a45f1b8e252549cde685a" class="color" data-tooltip="RGBA: 81, 178, 124, 1.0
   HEXA: #51b27cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee804f2698ec4643b1d928a040c6b895 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 198, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee804f2698ec4643b1d928a040c6b895::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee804f2698ec4643b1d928a040c6b895:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee804f2698ec4643b1d928a040c6b895" class="color" data-tooltip="RGBA: 111, 198, 107, 1.0
   HEXA: #6fc66bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a050ec3fdcd42798873a0af8275d8c0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 214, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a050ec3fdcd42798873a0af8275d8c0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a050ec3fdcd42798873a0af8275d8c0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a050ec3fdcd42798873a0af8275d8c0" class="color" data-tooltip="RGBA: 160, 214, 91, 1.0
   HEXA: #a0d65bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1c99d57d4a6e4af28538835c27bb5ed7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 225, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c99d57d4a6e4af28538835c27bb5ed7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c99d57d4a6e4af28538835c27bb5ed7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c99d57d4a6e4af28538835c27bb5ed7" class="color" data-tooltip="RGBA: 212, 225, 112, 1.0
   HEXA: #d4e170ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa12c6c2082b4ce38e1736faf3f399dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 238, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa12c6c2082b4ce38e1736faf3f399dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa12c6c2082b4ce38e1736faf3f399dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa12c6c2082b4ce38e1736faf3f399dd" class="color" data-tooltip="RGBA: 253, 238, 153, 1.0
   HEXA: #fdee99ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_afbf8bcb1f6d461d86836931f83ebe68 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_afbf8bcb1f6d461d86836931f83ebe68 div { flex: 1 1 0; }
           #_afbf8bcb1f6d461d86836931f83ebe68 div.color { width: 100%; height: 100%; }
           #_afbf8bcb1f6d461d86836931f83ebe68 div.cmap { width: 100%; height: auto; }
           #_afbf8bcb1f6d461d86836931f83ebe68 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>solar</strong>
       
       <div id="_afbf8bcb1f6d461d86836931f83ebe68" class="color-map">
           
                           <div>
                   <style>
       #_1d40ba85deca4895a2c7fac361a0f465 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 19, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d40ba85deca4895a2c7fac361a0f465::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d40ba85deca4895a2c7fac361a0f465:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d40ba85deca4895a2c7fac361a0f465" class="color" data-tooltip="RGBA: 51, 19, 23, 1.0
   HEXA: #331317ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e848ead6ac7041678c7c5712a7af5c85 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(79, 28, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e848ead6ac7041678c7c5712a7af5c85::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e848ead6ac7041678c7c5712a7af5c85:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e848ead6ac7041678c7c5712a7af5c85" class="color" data-tooltip="RGBA: 79, 28, 33, 1.0
   HEXA: #4f1c21ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_865cb98948c543e98ef71a18d2ff7ce9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 36, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_865cb98948c543e98ef71a18d2ff7ce9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_865cb98948c543e98ef71a18d2ff7ce9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_865cb98948c543e98ef71a18d2ff7ce9" class="color" data-tooltip="RGBA: 108, 36, 36, 1.0
   HEXA: #6c2424ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4239a6c9ce604b2b8b7a904e5eb05814 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 47, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4239a6c9ce604b2b8b7a904e5eb05814::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4239a6c9ce604b2b8b7a904e5eb05814:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4239a6c9ce604b2b8b7a904e5eb05814" class="color" data-tooltip="RGBA: 135, 47, 32, 1.0
   HEXA: #872f20ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d9f211acff2e4770aa1bdf9353500274 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(157, 66, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d9f211acff2e4770aa1bdf9353500274::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d9f211acff2e4770aa1bdf9353500274:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d9f211acff2e4770aa1bdf9353500274" class="color" data-tooltip="RGBA: 157, 66, 25, 1.0
   HEXA: #9d4219ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f2a97a443aee43019ae0bf53356cd3ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 88, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f2a97a443aee43019ae0bf53356cd3ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f2a97a443aee43019ae0bf53356cd3ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f2a97a443aee43019ae0bf53356cd3ca" class="color" data-tooltip="RGBA: 174, 88, 20, 1.0
   HEXA: #ae5814ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66670c1d1a1a4e02a9907d929cb3f7c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 111, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66670c1d1a1a4e02a9907d929cb3f7c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66670c1d1a1a4e02a9907d929cb3f7c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66670c1d1a1a4e02a9907d929cb3f7c9" class="color" data-tooltip="RGBA: 188, 111, 19, 1.0
   HEXA: #bc6f13ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_495c5f57cd3f48c39a3898a083313362 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 137, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_495c5f57cd3f48c39a3898a083313362::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_495c5f57cd3f48c39a3898a083313362:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_495c5f57cd3f48c39a3898a083313362" class="color" data-tooltip="RGBA: 199, 137, 22, 1.0
   HEXA: #c78916ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_09e6e3e6bea84cdd8b652c2846398c7c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 164, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_09e6e3e6bea84cdd8b652c2846398c7c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_09e6e3e6bea84cdd8b652c2846398c7c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_09e6e3e6bea84cdd8b652c2846398c7c" class="color" data-tooltip="RGBA: 209, 164, 32, 1.0
   HEXA: #d1a420ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f73b0fbbe9e54fadbbf185201462bd4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 192, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f73b0fbbe9e54fadbbf185201462bd4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f73b0fbbe9e54fadbbf185201462bd4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f73b0fbbe9e54fadbbf185201462bd4d" class="color" data-tooltip="RGBA: 217, 192, 44, 1.0
   HEXA: #d9c02cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0b35da0f8494323a78c33d4907593d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 222, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0b35da0f8494323a78c33d4907593d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0b35da0f8494323a78c33d4907593d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0b35da0f8494323a78c33d4907593d1" class="color" data-tooltip="RGBA: 222, 222, 59, 1.0
   HEXA: #dede3bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0c4cdfd460d4288806020b48a04d6db { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 253, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0c4cdfd460d4288806020b48a04d6db::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0c4cdfd460d4288806020b48a04d6db:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0c4cdfd460d4288806020b48a04d6db" class="color" data-tooltip="RGBA: 224, 253, 74, 1.0
   HEXA: #e0fd4aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_3f0e660b1bd1470a98ae32910300fc0e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_3f0e660b1bd1470a98ae32910300fc0e div { flex: 1 1 0; }
           #_3f0e660b1bd1470a98ae32910300fc0e div.color { width: 100%; height: 100%; }
           #_3f0e660b1bd1470a98ae32910300fc0e div.cmap { width: 100%; height: auto; }
           #_3f0e660b1bd1470a98ae32910300fc0e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>ice</strong>
       
       <div id="_3f0e660b1bd1470a98ae32910300fc0e" class="color-map">
           
                           <div>
                   <style>
       #_c6466ebd06654ab08f3b300f9822927f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(3, 5, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c6466ebd06654ab08f3b300f9822927f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c6466ebd06654ab08f3b300f9822927f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c6466ebd06654ab08f3b300f9822927f" class="color" data-tooltip="RGBA: 3, 5, 18, 1.0
   HEXA: #030512ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c9cbc91e3e1140dea2c022c553508ba0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 25, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9cbc91e3e1140dea2c022c553508ba0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9cbc91e3e1140dea2c022c553508ba0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9cbc91e3e1140dea2c022c553508ba0" class="color" data-tooltip="RGBA: 25, 25, 51, 1.0
   HEXA: #191933ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e22584139a743979f2395306ea0c580 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 42, 87, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e22584139a743979f2395306ea0c580::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e22584139a743979f2395306ea0c580:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e22584139a743979f2395306ea0c580" class="color" data-tooltip="RGBA: 44, 42, 87, 1.0
   HEXA: #2c2a57ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_edd46b734e0442b1a5e51ceba2059887 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 60, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_edd46b734e0442b1a5e51ceba2059887::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_edd46b734e0442b1a5e51ceba2059887:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_edd46b734e0442b1a5e51ceba2059887" class="color" data-tooltip="RGBA: 58, 60, 125, 1.0
   HEXA: #3a3c7dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e7a7dc06bcf54760a3fd784df149bddf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 83, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e7a7dc06bcf54760a3fd784df149bddf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e7a7dc06bcf54760a3fd784df149bddf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e7a7dc06bcf54760a3fd784df149bddf" class="color" data-tooltip="RGBA: 62, 83, 160, 1.0
   HEXA: #3e53a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_183c3e21d2224a629e29c6dd83ff0b91 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 109, 178, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_183c3e21d2224a629e29c6dd83ff0b91::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_183c3e21d2224a629e29c6dd83ff0b91:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_183c3e21d2224a629e29c6dd83ff0b91" class="color" data-tooltip="RGBA: 62, 109, 178, 1.0
   HEXA: #3e6db2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_efead33707814ed0a837aff6930c070c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(72, 134, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_efead33707814ed0a837aff6930c070c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_efead33707814ed0a837aff6930c070c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_efead33707814ed0a837aff6930c070c" class="color" data-tooltip="RGBA: 72, 134, 187, 1.0
   HEXA: #4886bbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a57dee7628284876b507f7dfe94f59ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 159, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a57dee7628284876b507f7dfe94f59ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a57dee7628284876b507f7dfe94f59ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a57dee7628284876b507f7dfe94f59ff" class="color" data-tooltip="RGBA: 89, 159, 196, 1.0
   HEXA: #599fc4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_61d1001fe79348b1bf1173e96290a144 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 184, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61d1001fe79348b1bf1173e96290a144::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61d1001fe79348b1bf1173e96290a144:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61d1001fe79348b1bf1173e96290a144" class="color" data-tooltip="RGBA: 114, 184, 205, 1.0
   HEXA: #72b8cdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6840e2043ab0492f85839e996b2ff76d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(149, 207, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6840e2043ab0492f85839e996b2ff76d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6840e2043ab0492f85839e996b2ff76d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6840e2043ab0492f85839e996b2ff76d" class="color" data-tooltip="RGBA: 149, 207, 216, 1.0
   HEXA: #95cfd8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_32d657bbaa39449ba9b019e80ef3bd1c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 229, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_32d657bbaa39449ba9b019e80ef3bd1c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_32d657bbaa39449ba9b019e80ef3bd1c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_32d657bbaa39449ba9b019e80ef3bd1c" class="color" data-tooltip="RGBA: 192, 229, 232, 1.0
   HEXA: #c0e5e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1b53188966fb473dabc9f5896fcacd7a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 252, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1b53188966fb473dabc9f5896fcacd7a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1b53188966fb473dabc9f5896fcacd7a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1b53188966fb473dabc9f5896fcacd7a" class="color" data-tooltip="RGBA: 234, 252, 253, 1.0
   HEXA: #eafcfdff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6cca6141f5ee455cb2a279a2f74556dd {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6cca6141f5ee455cb2a279a2f74556dd div { flex: 1 1 0; }
           #_6cca6141f5ee455cb2a279a2f74556dd div.color { width: 100%; height: 100%; }
           #_6cca6141f5ee455cb2a279a2f74556dd div.cmap { width: 100%; height: auto; }
           #_6cca6141f5ee455cb2a279a2f74556dd div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>gray</strong>
       
       <div id="_6cca6141f5ee455cb2a279a2f74556dd" class="color-map">
           
                           <div>
                   <style>
       #_f57f8d60955b4539a3404f120543f83c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f57f8d60955b4539a3404f120543f83c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f57f8d60955b4539a3404f120543f83c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f57f8d60955b4539a3404f120543f83c" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be48bb38e4f84688bec4eda3a18f29e9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 16, 16, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be48bb38e4f84688bec4eda3a18f29e9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be48bb38e4f84688bec4eda3a18f29e9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be48bb38e4f84688bec4eda3a18f29e9" class="color" data-tooltip="RGBA: 16, 16, 16, 1.0
   HEXA: #101010ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6df7d0a7e2d442f0a6d8c724a7c6b8d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 38, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6df7d0a7e2d442f0a6d8c724a7c6b8d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6df7d0a7e2d442f0a6d8c724a7c6b8d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6df7d0a7e2d442f0a6d8c724a7c6b8d3" class="color" data-tooltip="RGBA: 38, 38, 38, 1.0
   HEXA: #262626ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e366b9e16e2e4865af0ace7caa1f8d04 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 59, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e366b9e16e2e4865af0ace7caa1f8d04::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e366b9e16e2e4865af0ace7caa1f8d04:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e366b9e16e2e4865af0ace7caa1f8d04" class="color" data-tooltip="RGBA: 59, 59, 59, 1.0
   HEXA: #3b3b3bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_079fcb148feb441ba8870242ee56e6b6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(81, 80, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_079fcb148feb441ba8870242ee56e6b6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_079fcb148feb441ba8870242ee56e6b6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_079fcb148feb441ba8870242ee56e6b6" class="color" data-tooltip="RGBA: 81, 80, 80, 1.0
   HEXA: #515050ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_22348c7df1024298aa783faeb8887e92 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 101, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22348c7df1024298aa783faeb8887e92::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22348c7df1024298aa783faeb8887e92:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22348c7df1024298aa783faeb8887e92" class="color" data-tooltip="RGBA: 102, 101, 101, 1.0
   HEXA: #666565ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ba715f24c4644e1a90431d22cc1721c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 123, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ba715f24c4644e1a90431d22cc1721c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ba715f24c4644e1a90431d22cc1721c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ba715f24c4644e1a90431d22cc1721c" class="color" data-tooltip="RGBA: 124, 123, 122, 1.0
   HEXA: #7c7b7aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9a98ce71efc74c65b0a34dd5ed082ea6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 146, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a98ce71efc74c65b0a34dd5ed082ea6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a98ce71efc74c65b0a34dd5ed082ea6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a98ce71efc74c65b0a34dd5ed082ea6" class="color" data-tooltip="RGBA: 146, 146, 145, 1.0
   HEXA: #929291ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c3bccbde7a949e1bcff7347bd037237 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 171, 170, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c3bccbde7a949e1bcff7347bd037237::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c3bccbde7a949e1bcff7347bd037237:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c3bccbde7a949e1bcff7347bd037237" class="color" data-tooltip="RGBA: 171, 171, 170, 1.0
   HEXA: #ababaaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ebd39327642a400ea093f15c14e2a821 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 197, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ebd39327642a400ea093f15c14e2a821::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ebd39327642a400ea093f15c14e2a821:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ebd39327642a400ea093f15c14e2a821" class="color" data-tooltip="RGBA: 197, 197, 195, 1.0
   HEXA: #c5c5c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a9e2cd9144ff4b1b83962390b275c807 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 224, 223, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a9e2cd9144ff4b1b83962390b275c807::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a9e2cd9144ff4b1b83962390b275c807:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a9e2cd9144ff4b1b83962390b275c807" class="color" data-tooltip="RGBA: 224, 224, 223, 1.0
   HEXA: #e0e0dfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9c47b3ab7765419ab0d9c14bf74b9a5a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 254, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9c47b3ab7765419ab0d9c14bf74b9a5a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9c47b3ab7765419ab0d9c14bf74b9a5a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9c47b3ab7765419ab0d9c14bf74b9a5a" class="color" data-tooltip="RGBA: 254, 254, 253, 1.0
   HEXA: #fefefdff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_de49a23969f441a9b915d9e25d19e3b0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_de49a23969f441a9b915d9e25d19e3b0 div { flex: 1 1 0; }
           #_de49a23969f441a9b915d9e25d19e3b0 div.color { width: 100%; height: 100%; }
           #_de49a23969f441a9b915d9e25d19e3b0 div.cmap { width: 100%; height: auto; }
           #_de49a23969f441a9b915d9e25d19e3b0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>deep</strong>
       
       <div id="_de49a23969f441a9b915d9e25d19e3b0" class="color-map">
           
                           <div>
                   <style>
       #_ace26ac9e0bb4c95b063f33ab302acc8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 253, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ace26ac9e0bb4c95b063f33ab302acc8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ace26ac9e0bb4c95b063f33ab302acc8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ace26ac9e0bb4c95b063f33ab302acc8" class="color" data-tooltip="RGBA: 253, 253, 204, 1.0
   HEXA: #fdfdccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0603b1cd5969495aa9eea9f4176c02dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 236, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0603b1cd5969495aa9eea9f4176c02dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0603b1cd5969495aa9eea9f4176c02dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0603b1cd5969495aa9eea9f4176c02dd" class="color" data-tooltip="RGBA: 206, 236, 179, 1.0
   HEXA: #ceecb3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a101a50b4cf44f4b8e97ba1dcd4b93de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 219, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a101a50b4cf44f4b8e97ba1dcd4b93de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a101a50b4cf44f4b8e97ba1dcd4b93de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a101a50b4cf44f4b8e97ba1dcd4b93de" class="color" data-tooltip="RGBA: 156, 219, 165, 1.0
   HEXA: #9cdba5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3779125e43eb409aa29500528316a2f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 201, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3779125e43eb409aa29500528316a2f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3779125e43eb409aa29500528316a2f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3779125e43eb409aa29500528316a2f6" class="color" data-tooltip="RGBA: 111, 201, 163, 1.0
   HEXA: #6fc9a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5daecba8a5184ccaa4b416afa3b02f7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(86, 177, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5daecba8a5184ccaa4b416afa3b02f7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5daecba8a5184ccaa4b416afa3b02f7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5daecba8a5184ccaa4b416afa3b02f7b" class="color" data-tooltip="RGBA: 86, 177, 163, 1.0
   HEXA: #56b1a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd649a7886a64b549741c6ac9ac07221 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 153, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd649a7886a64b549741c6ac9ac07221::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd649a7886a64b549741c6ac9ac07221:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd649a7886a64b549741c6ac9ac07221" class="color" data-tooltip="RGBA: 76, 153, 160, 1.0
   HEXA: #4c99a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0cba2360257a49819ea5c937af2a3717 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 130, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0cba2360257a49819ea5c937af2a3717::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0cba2360257a49819ea5c937af2a3717:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0cba2360257a49819ea5c937af2a3717" class="color" data-tooltip="RGBA: 68, 130, 155, 1.0
   HEXA: #44829bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8c4882a4c124cbeb98f695cac6c5222 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 108, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8c4882a4c124cbeb98f695cac6c5222::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8c4882a4c124cbeb98f695cac6c5222:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8c4882a4c124cbeb98f695cac6c5222" class="color" data-tooltip="RGBA: 62, 108, 150, 1.0
   HEXA: #3e6c96ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fad6e7d551294f17a1cc69eda94265e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 82, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fad6e7d551294f17a1cc69eda94265e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fad6e7d551294f17a1cc69eda94265e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fad6e7d551294f17a1cc69eda94265e8" class="color" data-tooltip="RGBA: 62, 82, 143, 1.0
   HEXA: #3e528fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e15fc1dd3a545bfa9af8a8bc6ddeac0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 60, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e15fc1dd3a545bfa9af8a8bc6ddeac0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e15fc1dd3a545bfa9af8a8bc6ddeac0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e15fc1dd3a545bfa9af8a8bc6ddeac0" class="color" data-tooltip="RGBA: 64, 60, 115, 1.0
   HEXA: #403c73ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3dddf0f06bfd4382a1e0e6a9b29840fd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 43, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3dddf0f06bfd4382a1e0e6a9b29840fd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3dddf0f06bfd4382a1e0e6a9b29840fd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3dddf0f06bfd4382a1e0e6a9b29840fd" class="color" data-tooltip="RGBA: 54, 43, 77, 1.0
   HEXA: #362b4dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aab403606ba64c5e9f0ab0e77e0b28c4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 26, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aab403606ba64c5e9f0ab0e77e0b28c4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aab403606ba64c5e9f0ab0e77e0b28c4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aab403606ba64c5e9f0ab0e77e0b28c4" class="color" data-tooltip="RGBA: 39, 26, 44, 1.0
   HEXA: #271a2cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_78ca74fa59f64cc8b1e1a5bf8aa9beb2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_78ca74fa59f64cc8b1e1a5bf8aa9beb2 div { flex: 1 1 0; }
           #_78ca74fa59f64cc8b1e1a5bf8aa9beb2 div.color { width: 100%; height: 100%; }
           #_78ca74fa59f64cc8b1e1a5bf8aa9beb2 div.cmap { width: 100%; height: auto; }
           #_78ca74fa59f64cc8b1e1a5bf8aa9beb2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>dense</strong>
       
       <div id="_78ca74fa59f64cc8b1e1a5bf8aa9beb2" class="color-map">
           
                           <div>
                   <style>
       #_60c5915318814d75a02c737db9e1bd78 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 240, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60c5915318814d75a02c737db9e1bd78::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60c5915318814d75a02c737db9e1bd78:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60c5915318814d75a02c737db9e1bd78" class="color" data-tooltip="RGBA: 230, 240, 240, 1.0
   HEXA: #e6f0f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_168d5eae0c9d4eb88ffd4ce8be6e7abb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 221, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_168d5eae0c9d4eb88ffd4ce8be6e7abb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_168d5eae0c9d4eb88ffd4ce8be6e7abb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_168d5eae0c9d4eb88ffd4ce8be6e7abb" class="color" data-tooltip="RGBA: 191, 221, 229, 1.0
   HEXA: #bfdde5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9e24f93eefe43c1bf032e0c2013afaf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 201, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9e24f93eefe43c1bf032e0c2013afaf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9e24f93eefe43c1bf032e0c2013afaf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9e24f93eefe43c1bf032e0c2013afaf" class="color" data-tooltip="RGBA: 156, 201, 226, 1.0
   HEXA: #9cc9e2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_503ed72fccd74058b76824546d892a73 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 180, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_503ed72fccd74058b76824546d892a73::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_503ed72fccd74058b76824546d892a73:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_503ed72fccd74058b76824546d892a73" class="color" data-tooltip="RGBA: 129, 180, 227, 1.0
   HEXA: #81b4e3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46cbae1da1df4686b49db49ccff3ebb5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 154, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46cbae1da1df4686b49db49ccff3ebb5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46cbae1da1df4686b49db49ccff3ebb5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46cbae1da1df4686b49db49ccff3ebb5" class="color" data-tooltip="RGBA: 115, 154, 228, 1.0
   HEXA: #739ae4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_982bf285a7be49aab2d4f90b13908bed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 127, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_982bf285a7be49aab2d4f90b13908bed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_982bf285a7be49aab2d4f90b13908bed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_982bf285a7be49aab2d4f90b13908bed" class="color" data-tooltip="RGBA: 117, 127, 221, 1.0
   HEXA: #757fddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_844c07b4bca3480e860a44b0b990b6be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 100, 202, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_844c07b4bca3480e860a44b0b990b6be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_844c07b4bca3480e860a44b0b990b6be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_844c07b4bca3480e860a44b0b990b6be" class="color" data-tooltip="RGBA: 120, 100, 202, 1.0
   HEXA: #7864caff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e8546205228b46d78f873181ae0e29c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 74, 175, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e8546205228b46d78f873181ae0e29c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e8546205228b46d78f873181ae0e29c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e8546205228b46d78f873181ae0e29c9" class="color" data-tooltip="RGBA: 119, 74, 175, 1.0
   HEXA: #774aafff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_10a3aa4a09e0407f91cd08208c8854df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(113, 50, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_10a3aa4a09e0407f91cd08208c8854df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_10a3aa4a09e0407f91cd08208c8854df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_10a3aa4a09e0407f91cd08208c8854df" class="color" data-tooltip="RGBA: 113, 50, 141, 1.0
   HEXA: #71328dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3b3dd30477b4d82866effcaa8e1ec53 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(100, 31, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3b3dd30477b4d82866effcaa8e1ec53::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3b3dd30477b4d82866effcaa8e1ec53:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3b3dd30477b4d82866effcaa8e1ec53" class="color" data-tooltip="RGBA: 100, 31, 104, 1.0
   HEXA: #641f68ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_235016c0d0004cdc84298c389199b7fd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 20, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_235016c0d0004cdc84298c389199b7fd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_235016c0d0004cdc84298c389199b7fd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_235016c0d0004cdc84298c389199b7fd" class="color" data-tooltip="RGBA: 80, 20, 66, 1.0
   HEXA: #501442ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f417bf19ceef49178d0c43d70f5c60ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 14, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f417bf19ceef49178d0c43d70f5c60ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f417bf19ceef49178d0c43d70f5c60ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f417bf19ceef49178d0c43d70f5c60ab" class="color" data-tooltip="RGBA: 54, 14, 36, 1.0
   HEXA: #360e24ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b52f71e66e21461b8c3a49bb5f3fb06d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b52f71e66e21461b8c3a49bb5f3fb06d div { flex: 1 1 0; }
           #_b52f71e66e21461b8c3a49bb5f3fb06d div.color { width: 100%; height: 100%; }
           #_b52f71e66e21461b8c3a49bb5f3fb06d div.cmap { width: 100%; height: auto; }
           #_b52f71e66e21461b8c3a49bb5f3fb06d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>algae</strong>
       
       <div id="_b52f71e66e21461b8c3a49bb5f3fb06d" class="color-map">
           
                           <div>
                   <style>
       #_2b73ddac8e584f66b41d6554d3276796 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 249, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b73ddac8e584f66b41d6554d3276796::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b73ddac8e584f66b41d6554d3276796:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b73ddac8e584f66b41d6554d3276796" class="color" data-tooltip="RGBA: 214, 249, 207, 1.0
   HEXA: #d6f9cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8691ca35a32a41b0967ba6001714d90a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 228, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8691ca35a32a41b0967ba6001714d90a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8691ca35a32a41b0967ba6001714d90a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8691ca35a32a41b0967ba6001714d90a" class="color" data-tooltip="RGBA: 186, 228, 174, 1.0
   HEXA: #bae4aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_654a8940d2c44ba581d2ef42ab955670 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 209, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_654a8940d2c44ba581d2ef42ab955670::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_654a8940d2c44ba581d2ef42ab955670:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_654a8940d2c44ba581d2ef42ab955670" class="color" data-tooltip="RGBA: 156, 209, 143, 1.0
   HEXA: #9cd18fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4709023fdd1d45dca877c6f3ea86f017 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 191, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4709023fdd1d45dca877c6f3ea86f017::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4709023fdd1d45dca877c6f3ea86f017:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4709023fdd1d45dca877c6f3ea86f017" class="color" data-tooltip="RGBA: 124, 191, 115, 1.0
   HEXA: #7cbf73ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0cfada0020384e998d6f47774f04a85f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(85, 174, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0cfada0020384e998d6f47774f04a85f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0cfada0020384e998d6f47774f04a85f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0cfada0020384e998d6f47774f04a85f" class="color" data-tooltip="RGBA: 85, 174, 91, 1.0
   HEXA: #55ae5bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0cf82cf3a58c48fcbe2b1496e906c216 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 157, 81, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0cf82cf3a58c48fcbe2b1496e906c216::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0cf82cf3a58c48fcbe2b1496e906c216:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0cf82cf3a58c48fcbe2b1496e906c216" class="color" data-tooltip="RGBA: 37, 157, 81, 1.0
   HEXA: #259d51ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f180b44214d74184825a82bb22bdbb5b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 138, 78, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f180b44214d74184825a82bb22bdbb5b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f180b44214d74184825a82bb22bdbb5b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f180b44214d74184825a82bb22bdbb5b" class="color" data-tooltip="RGBA: 7, 138, 78, 1.0
   HEXA: #078a4eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_71973c0d1b0b499489ed6336ffc5e30c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 117, 71, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_71973c0d1b0b499489ed6336ffc5e30c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_71973c0d1b0b499489ed6336ffc5e30c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_71973c0d1b0b499489ed6336ffc5e30c" class="color" data-tooltip="RGBA: 13, 117, 71, 1.0
   HEXA: #0d7547ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e114da362a0438495c2ba21da42809a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 95, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e114da362a0438495c2ba21da42809a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e114da362a0438495c2ba21da42809a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e114da362a0438495c2ba21da42809a" class="color" data-tooltip="RGBA: 23, 95, 61, 1.0
   HEXA: #175f3dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_62cecc6bcaf549d0a61d9005f6187fd1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 75, 49, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_62cecc6bcaf549d0a61d9005f6187fd1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_62cecc6bcaf549d0a61d9005f6187fd1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_62cecc6bcaf549d0a61d9005f6187fd1" class="color" data-tooltip="RGBA: 25, 75, 49, 1.0
   HEXA: #194b31ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_716d347f4b2041928116bdaa53a94885 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 55, 35, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_716d347f4b2041928116bdaa53a94885::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_716d347f4b2041928116bdaa53a94885:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_716d347f4b2041928116bdaa53a94885" class="color" data-tooltip="RGBA: 23, 55, 35, 1.0
   HEXA: #173723ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4888e99809b845c79e815fd6b5204f28 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 36, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4888e99809b845c79e815fd6b5204f28::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4888e99809b845c79e815fd6b5204f28:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4888e99809b845c79e815fd6b5204f28" class="color" data-tooltip="RGBA: 17, 36, 20, 1.0
   HEXA: #112414ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a6dcc82b2e1748b7a8cf824ae9fb1394 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a6dcc82b2e1748b7a8cf824ae9fb1394 div { flex: 1 1 0; }
           #_a6dcc82b2e1748b7a8cf824ae9fb1394 div.color { width: 100%; height: 100%; }
           #_a6dcc82b2e1748b7a8cf824ae9fb1394 div.cmap { width: 100%; height: auto; }
           #_a6dcc82b2e1748b7a8cf824ae9fb1394 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>matter</strong>
       
       <div id="_a6dcc82b2e1748b7a8cf824ae9fb1394" class="color-map">
           
                           <div>
                   <style>
       #_f962506268d7420e8eb23df5c48cf070 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 237, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f962506268d7420e8eb23df5c48cf070::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f962506268d7420e8eb23df5c48cf070:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f962506268d7420e8eb23df5c48cf070" class="color" data-tooltip="RGBA: 253, 237, 176, 1.0
   HEXA: #fdedb0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc9997613fef44b5abe5b3412416ad70 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 205, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc9997613fef44b5abe5b3412416ad70::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc9997613fef44b5abe5b3412416ad70:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc9997613fef44b5abe5b3412416ad70" class="color" data-tooltip="RGBA: 250, 205, 145, 1.0
   HEXA: #facd91ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b38900acf36c4e6fa587bfee6b561666 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 173, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b38900acf36c4e6fa587bfee6b561666::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b38900acf36c4e6fa587bfee6b561666:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b38900acf36c4e6fa587bfee6b561666" class="color" data-tooltip="RGBA: 246, 173, 119, 1.0
   HEXA: #f6ad77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c0eda0d5e454cf5a99fc66e4484a29a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 142, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c0eda0d5e454cf5a99fc66e4484a29a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c0eda0d5e454cf5a99fc66e4484a29a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c0eda0d5e454cf5a99fc66e4484a29a" class="color" data-tooltip="RGBA: 240, 142, 98, 1.0
   HEXA: #f08e62ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7b11dcb50fd34eeab57cb4754236d411 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 109, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7b11dcb50fd34eeab57cb4754236d411::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7b11dcb50fd34eeab57cb4754236d411:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7b11dcb50fd34eeab57cb4754236d411" class="color" data-tooltip="RGBA: 231, 109, 84, 1.0
   HEXA: #e76d54ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63e5af4c6be1457d8c2ebd4c2f8a169c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 80, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63e5af4c6be1457d8c2ebd4c2f8a169c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63e5af4c6be1457d8c2ebd4c2f8a169c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63e5af4c6be1457d8c2ebd4c2f8a169c" class="color" data-tooltip="RGBA: 216, 80, 83, 1.0
   HEXA: #d85053ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aeeb0ae6eba94744829310340e149464 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 56, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aeeb0ae6eba94744829310340e149464::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aeeb0ae6eba94744829310340e149464:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aeeb0ae6eba94744829310340e149464" class="color" data-tooltip="RGBA: 195, 56, 90, 1.0
   HEXA: #c3385aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0a5323601d594035be1afd5dcc89d7f9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 40, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0a5323601d594035be1afd5dcc89d7f9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0a5323601d594035be1afd5dcc89d7f9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0a5323601d594035be1afd5dcc89d7f9" class="color" data-tooltip="RGBA: 168, 40, 96, 1.0
   HEXA: #a82860ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_859e021598a94eba9035146a5443148e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(138, 29, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_859e021598a94eba9035146a5443148e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_859e021598a94eba9035146a5443148e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_859e021598a94eba9035146a5443148e" class="color" data-tooltip="RGBA: 138, 29, 99, 1.0
   HEXA: #8a1d63ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9810083827564641b86fabbfb4ae4e5c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 24, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9810083827564641b86fabbfb4ae4e5c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9810083827564641b86fabbfb4ae4e5c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9810083827564641b86fabbfb4ae4e5c" class="color" data-tooltip="RGBA: 107, 24, 93, 1.0
   HEXA: #6b185dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fb9404c969d4483cb58619659a49120c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 21, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fb9404c969d4483cb58619659a49120c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fb9404c969d4483cb58619659a49120c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fb9404c969d4483cb58619659a49120c" class="color" data-tooltip="RGBA: 76, 21, 80, 1.0
   HEXA: #4c1550ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_899f1a5f4d7942c6aa7810273e9ee214 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 15, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_899f1a5f4d7942c6aa7810273e9ee214::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_899f1a5f4d7942c6aa7810273e9ee214:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_899f1a5f4d7942c6aa7810273e9ee214" class="color" data-tooltip="RGBA: 47, 15, 61, 1.0
   HEXA: #2f0f3dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_93f6eb7f32184fe4bf37742b14221773 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_93f6eb7f32184fe4bf37742b14221773 div { flex: 1 1 0; }
           #_93f6eb7f32184fe4bf37742b14221773 div.color { width: 100%; height: 100%; }
           #_93f6eb7f32184fe4bf37742b14221773 div.cmap { width: 100%; height: auto; }
           #_93f6eb7f32184fe4bf37742b14221773 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>speed</strong>
       
       <div id="_93f6eb7f32184fe4bf37742b14221773" class="color-map">
           
                           <div>
                   <style>
       #_ce68e054aca446dbb11451774c665697 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 252, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce68e054aca446dbb11451774c665697::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce68e054aca446dbb11451774c665697:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce68e054aca446dbb11451774c665697" class="color" data-tooltip="RGBA: 254, 252, 205, 1.0
   HEXA: #fefccdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b6e05fda06394c1589f69e7b1c39c2c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 225, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b6e05fda06394c1589f69e7b1c39c2c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b6e05fda06394c1589f69e7b1c39c2c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b6e05fda06394c1589f69e7b1c39c2c6" class="color" data-tooltip="RGBA: 239, 225, 156, 1.0
   HEXA: #efe19cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_432e90ad7c774acab5da7005f43851e5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 201, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_432e90ad7c774acab5da7005f43851e5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_432e90ad7c774acab5da7005f43851e5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_432e90ad7c774acab5da7005f43851e5" class="color" data-tooltip="RGBA: 221, 201, 106, 1.0
   HEXA: #ddc96aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80685c16c52141569695ecd780aa6bf3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 182, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80685c16c52141569695ecd780aa6bf3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80685c16c52141569695ecd780aa6bf3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80685c16c52141569695ecd780aa6bf3" class="color" data-tooltip="RGBA: 194, 182, 59, 1.0
   HEXA: #c2b63bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4ca7c498bef047ba91032ee354c3ea56 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(157, 167, 21, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4ca7c498bef047ba91032ee354c3ea56::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4ca7c498bef047ba91032ee354c3ea56:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4ca7c498bef047ba91032ee354c3ea56" class="color" data-tooltip="RGBA: 157, 167, 21, 1.0
   HEXA: #9da715ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4289bfc92af046ccae8419091f900145 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 153, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4289bfc92af046ccae8419091f900145::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4289bfc92af046ccae8419091f900145:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4289bfc92af046ccae8419091f900145" class="color" data-tooltip="RGBA: 116, 153, 5, 1.0
   HEXA: #749905ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e27329dbceb7445bbf149105c55c565e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(75, 138, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e27329dbceb7445bbf149105c55c565e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e27329dbceb7445bbf149105c55c565e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e27329dbceb7445bbf149105c55c565e" class="color" data-tooltip="RGBA: 75, 138, 20, 1.0
   HEXA: #4b8a14ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_84b1a0f2b2d54b7e881a5daba6201409 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 121, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_84b1a0f2b2d54b7e881a5daba6201409::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_84b1a0f2b2d54b7e881a5daba6201409:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_84b1a0f2b2d54b7e881a5daba6201409" class="color" data-tooltip="RGBA: 35, 121, 36, 1.0
   HEXA: #237924ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_02b17d29f373412eb8dedb3edf8dd09b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(11, 100, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_02b17d29f373412eb8dedb3edf8dd09b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_02b17d29f373412eb8dedb3edf8dd09b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_02b17d29f373412eb8dedb3edf8dd09b" class="color" data-tooltip="RGBA: 11, 100, 44, 1.0
   HEXA: #0b642cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cb79db3452e2469f814a8e06b52e2e65 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 78, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cb79db3452e2469f814a8e06b52e2e65::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cb79db3452e2469f814a8e06b52e2e65:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cb79db3452e2469f814a8e06b52e2e65" class="color" data-tooltip="RGBA: 18, 78, 43, 1.0
   HEXA: #124e2bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_970372dfa5e646d889afa74fd77d339a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 56, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_970372dfa5e646d889afa74fd77d339a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_970372dfa5e646d889afa74fd77d339a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_970372dfa5e646d889afa74fd77d339a" class="color" data-tooltip="RGBA: 25, 56, 34, 1.0
   HEXA: #193822ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e667147f20a7493293647409313829ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 35, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e667147f20a7493293647409313829ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e667147f20a7493293647409313829ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e667147f20a7493293647409313829ff" class="color" data-tooltip="RGBA: 23, 35, 18, 1.0
   HEXA: #172312ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_adb71a2bc10b4d0ba68385a068f3b7e6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_adb71a2bc10b4d0ba68385a068f3b7e6 div { flex: 1 1 0; }
           #_adb71a2bc10b4d0ba68385a068f3b7e6 div.color { width: 100%; height: 100%; }
           #_adb71a2bc10b4d0ba68385a068f3b7e6 div.cmap { width: 100%; height: auto; }
           #_adb71a2bc10b4d0ba68385a068f3b7e6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>amp</strong>
       
       <div id="_adb71a2bc10b4d0ba68385a068f3b7e6" class="color-map">
           
                           <div>
                   <style>
       #_56b0734d4aab404dbd2b674ea230b851 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 236, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_56b0734d4aab404dbd2b674ea230b851::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_56b0734d4aab404dbd2b674ea230b851:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_56b0734d4aab404dbd2b674ea230b851" class="color" data-tooltip="RGBA: 241, 236, 236, 1.0
   HEXA: #f1ececff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dd3ce16897f84e90a2e18bd98742b58b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 209, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dd3ce16897f84e90a2e18bd98742b58b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dd3ce16897f84e90a2e18bd98742b58b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dd3ce16897f84e90a2e18bd98742b58b" class="color" data-tooltip="RGBA: 230, 209, 203, 1.0
   HEXA: #e6d1cbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee73148da45b476cb08460f2c702cf3b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 182, 170, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee73148da45b476cb08460f2c702cf3b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee73148da45b476cb08460f2c702cf3b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee73148da45b476cb08460f2c702cf3b" class="color" data-tooltip="RGBA: 221, 182, 170, 1.0
   HEXA: #ddb6aaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc872d6fbfa249469a5f9db85926d7fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 156, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc872d6fbfa249469a5f9db85926d7fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc872d6fbfa249469a5f9db85926d7fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc872d6fbfa249469a5f9db85926d7fe" class="color" data-tooltip="RGBA: 213, 156, 137, 1.0
   HEXA: #d59c89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90dec7041ce74ce6860e87a7873aeb71 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(205, 129, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90dec7041ce74ce6860e87a7873aeb71::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90dec7041ce74ce6860e87a7873aeb71:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90dec7041ce74ce6860e87a7873aeb71" class="color" data-tooltip="RGBA: 205, 129, 103, 1.0
   HEXA: #cd8167ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_921357b514d54ecaaeb42a8692d4e85c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 102, 73, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_921357b514d54ecaaeb42a8692d4e85c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_921357b514d54ecaaeb42a8692d4e85c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_921357b514d54ecaaeb42a8692d4e85c" class="color" data-tooltip="RGBA: 196, 102, 73, 1.0
   HEXA: #c46649ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c451bbb96d5447cb0c85cc3f173072f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 74, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c451bbb96d5447cb0c85cc3f173072f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c451bbb96d5447cb0c85cc3f173072f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c451bbb96d5447cb0c85cc3f173072f" class="color" data-tooltip="RGBA: 186, 74, 47, 1.0
   HEXA: #ba4a2fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e9e274c21aa44d39aea39ed5d6e991e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 44, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e9e274c21aa44d39aea39ed5d6e991e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e9e274c21aa44d39aea39ed5d6e991e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e9e274c21aa44d39aea39ed5d6e991e" class="color" data-tooltip="RGBA: 172, 44, 36, 1.0
   HEXA: #ac2c24ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_13e135d3517340c1a5692ad52bb4eb26 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(149, 19, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_13e135d3517340c1a5692ad52bb4eb26::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_13e135d3517340c1a5692ad52bb4eb26:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_13e135d3517340c1a5692ad52bb4eb26" class="color" data-tooltip="RGBA: 149, 19, 39, 1.0
   HEXA: #951327ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c3a6c3e3a86493681d7e1a6cf2b5e05 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 14, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c3a6c3e3a86493681d7e1a6cf2b5e05::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c3a6c3e3a86493681d7e1a6cf2b5e05:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c3a6c3e3a86493681d7e1a6cf2b5e05" class="color" data-tooltip="RGBA: 120, 14, 40, 1.0
   HEXA: #780e28ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea9b8caec24c463aa49bfb0950371365 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 13, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea9b8caec24c463aa49bfb0950371365::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea9b8caec24c463aa49bfb0950371365:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea9b8caec24c463aa49bfb0950371365" class="color" data-tooltip="RGBA: 89, 13, 31, 1.0
   HEXA: #590d1fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_328333275890468ea1b9ffe9d8891836 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 9, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_328333275890468ea1b9ffe9d8891836::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_328333275890468ea1b9ffe9d8891836:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_328333275890468ea1b9ffe9d8891836" class="color" data-tooltip="RGBA: 60, 9, 17, 1.0
   HEXA: #3c0911ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ed87aa0c14684f08bd45f0f16d091b24 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ed87aa0c14684f08bd45f0f16d091b24 div { flex: 1 1 0; }
           #_ed87aa0c14684f08bd45f0f16d091b24 div.color { width: 100%; height: 100%; }
           #_ed87aa0c14684f08bd45f0f16d091b24 div.cmap { width: 100%; height: auto; }
           #_ed87aa0c14684f08bd45f0f16d091b24 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tempo</strong>
       
       <div id="_ed87aa0c14684f08bd45f0f16d091b24" class="color-map">
           
                           <div>
                   <style>
       #_22cd53fcee63424bb497f9ef04773bb2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 245, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22cd53fcee63424bb497f9ef04773bb2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22cd53fcee63424bb497f9ef04773bb2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22cd53fcee63424bb497f9ef04773bb2" class="color" data-tooltip="RGBA: 254, 245, 244, 1.0
   HEXA: #fef5f4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c60c0cf9faa84a1eab6ec64f0e7d4bbf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 224, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c60c0cf9faa84a1eab6ec64f0e7d4bbf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c60c0cf9faa84a1eab6ec64f0e7d4bbf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c60c0cf9faa84a1eab6ec64f0e7d4bbf" class="color" data-tooltip="RGBA: 222, 224, 210, 1.0
   HEXA: #dee0d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d383695f7bf4448a632625d61122917 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 206, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d383695f7bf4448a632625d61122917::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d383695f7bf4448a632625d61122917:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d383695f7bf4448a632625d61122917" class="color" data-tooltip="RGBA: 189, 206, 181, 1.0
   HEXA: #bdceb5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e299ccec100a42b6aa27b594f4db05f7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 189, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e299ccec100a42b6aa27b594f4db05f7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e299ccec100a42b6aa27b594f4db05f7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e299ccec100a42b6aa27b594f4db05f7" class="color" data-tooltip="RGBA: 153, 189, 156, 1.0
   HEXA: #99bd9cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dae826ffd2b347caae179b7f0725e6bb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 173, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dae826ffd2b347caae179b7f0725e6bb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dae826ffd2b347caae179b7f0725e6bb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dae826ffd2b347caae179b7f0725e6bb" class="color" data-tooltip="RGBA: 110, 173, 138, 1.0
   HEXA: #6ead8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c7a6bb3972214e9b841a1ba697645d47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 157, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c7a6bb3972214e9b841a1ba697645d47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c7a6bb3972214e9b841a1ba697645d47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c7a6bb3972214e9b841a1ba697645d47" class="color" data-tooltip="RGBA: 65, 157, 129, 1.0
   HEXA: #419d81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d00130b0e28e448daabd08c619b65b62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 137, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d00130b0e28e448daabd08c619b65b62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d00130b0e28e448daabd08c619b65b62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d00130b0e28e448daabd08c619b65b62" class="color" data-tooltip="RGBA: 25, 137, 125, 1.0
   HEXA: #19897dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7936fcf2fbf24a1b840aa3f7673173c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 116, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7936fcf2fbf24a1b840aa3f7673173c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7936fcf2fbf24a1b840aa3f7673173c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7936fcf2fbf24a1b840aa3f7673173c9" class="color" data-tooltip="RGBA: 18, 116, 117, 1.0
   HEXA: #127475ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1961f32f13824737a4ab0570e5d174f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 94, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1961f32f13824737a4ab0570e5d174f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1961f32f13824737a4ab0570e5d174f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1961f32f13824737a4ab0570e5d174f6" class="color" data-tooltip="RGBA: 25, 94, 106, 1.0
   HEXA: #195e6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9c4b8bf969e144e098f27867d4e30a71 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 72, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9c4b8bf969e144e098f27867d4e30a71::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9c4b8bf969e144e098f27867d4e30a71:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9c4b8bf969e144e098f27867d4e30a71" class="color" data-tooltip="RGBA: 28, 72, 93, 1.0
   HEXA: #1c485dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f509f72183c44be4b05be5be42623731 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 51, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f509f72183c44be4b05be5be42623731::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f509f72183c44be4b05be5be42623731:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f509f72183c44be4b05be5be42623731" class="color" data-tooltip="RGBA: 25, 51, 80, 1.0
   HEXA: #193350ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80e30d4eee1549099f46c9b84ebde4c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(20, 29, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80e30d4eee1549099f46c9b84ebde4c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80e30d4eee1549099f46c9b84ebde4c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80e30d4eee1549099f46c9b84ebde4c6" class="color" data-tooltip="RGBA: 20, 29, 67, 1.0
   HEXA: #141d43ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9dc632410a91474c8d00e61378dc56b6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9dc632410a91474c8d00e61378dc56b6 div { flex: 1 1 0; }
           #_9dc632410a91474c8d00e61378dc56b6 div.color { width: 100%; height: 100%; }
           #_9dc632410a91474c8d00e61378dc56b6 div.cmap { width: 100%; height: auto; }
           #_9dc632410a91474c8d00e61378dc56b6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Burg</strong>
       
       <div id="_9dc632410a91474c8d00e61378dc56b6" class="color-map">
           
                           <div>
                   <style>
       #_296c9a8a739b4bac9e2c1702c6443379 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 198, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_296c9a8a739b4bac9e2c1702c6443379::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_296c9a8a739b4bac9e2c1702c6443379:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_296c9a8a739b4bac9e2c1702c6443379" class="color" data-tooltip="RGBA: 255, 198, 196, 1.0
   HEXA: #ffc6c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_732b0e6213be402ebb0bbb2ba70033cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 163, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_732b0e6213be402ebb0bbb2ba70033cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_732b0e6213be402ebb0bbb2ba70033cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_732b0e6213be402ebb0bbb2ba70033cd" class="color" data-tooltip="RGBA: 244, 163, 168, 1.0
   HEXA: #f4a3a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_75773eb8aec64fa5882bfbedb9dc1292 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 129, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75773eb8aec64fa5882bfbedb9dc1292::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75773eb8aec64fa5882bfbedb9dc1292:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75773eb8aec64fa5882bfbedb9dc1292" class="color" data-tooltip="RGBA: 227, 129, 145, 1.0
   HEXA: #e38191ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f5eeabeb1c9d4fa9bbae4742d47cb86d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 96, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f5eeabeb1c9d4fa9bbae4742d47cb86d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f5eeabeb1c9d4fa9bbae4742d47cb86d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f5eeabeb1c9d4fa9bbae4742d47cb86d" class="color" data-tooltip="RGBA: 204, 96, 125, 1.0
   HEXA: #cc607dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45ea154cadf34241b5c1af08cf3df60d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 70, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45ea154cadf34241b5c1af08cf3df60d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45ea154cadf34241b5c1af08cf3df60d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45ea154cadf34241b5c1af08cf3df60d" class="color" data-tooltip="RGBA: 173, 70, 108, 1.0
   HEXA: #ad466cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5e2ddb4642564bcfba7ce3cf1fc3d77e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 48, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5e2ddb4642564bcfba7ce3cf1fc3d77e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5e2ddb4642564bcfba7ce3cf1fc3d77e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5e2ddb4642564bcfba7ce3cf1fc3d77e" class="color" data-tooltip="RGBA: 139, 48, 88, 1.0
   HEXA: #8b3058ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f33c2a37539f4977bf256ab51b52e058 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 32, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f33c2a37539f4977bf256ab51b52e058::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f33c2a37539f4977bf256ab51b52e058:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f33c2a37539f4977bf256ab51b52e058" class="color" data-tooltip="RGBA: 103, 32, 68, 1.0
   HEXA: #672044ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8cc72eb2b48a46f7bbc7223d3eab7ef1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8cc72eb2b48a46f7bbc7223d3eab7ef1 div { flex: 1 1 0; }
           #_8cc72eb2b48a46f7bbc7223d3eab7ef1 div.color { width: 100%; height: 100%; }
           #_8cc72eb2b48a46f7bbc7223d3eab7ef1 div.cmap { width: 100%; height: auto; }
           #_8cc72eb2b48a46f7bbc7223d3eab7ef1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Burgyl</strong>
       
       <div id="_8cc72eb2b48a46f7bbc7223d3eab7ef1" class="color-map">
           
                           <div>
                   <style>
       #_2df66a050aea463fb02fb880114b7c7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 230, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2df66a050aea463fb02fb880114b7c7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2df66a050aea463fb02fb880114b7c7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2df66a050aea463fb02fb880114b7c7b" class="color" data-tooltip="RGBA: 251, 230, 197, 1.0
   HEXA: #fbe6c5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2678e3c462db4b63b2fab31f4b1f36c4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 186, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2678e3c462db4b63b2fab31f4b1f36c4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2678e3c462db4b63b2fab31f4b1f36c4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2678e3c462db4b63b2fab31f4b1f36c4" class="color" data-tooltip="RGBA: 245, 186, 152, 1.0
   HEXA: #f5ba98ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c442ac86f2c3493eb6fe20ced840f200 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 138, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c442ac86f2c3493eb6fe20ced840f200::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c442ac86f2c3493eb6fe20ced840f200:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c442ac86f2c3493eb6fe20ced840f200" class="color" data-tooltip="RGBA: 238, 138, 130, 1.0
   HEXA: #ee8a82ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2ae665d24adc49b0a3756d13d6c52dd2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 113, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2ae665d24adc49b0a3756d13d6c52dd2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2ae665d24adc49b0a3756d13d6c52dd2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2ae665d24adc49b0a3756d13d6c52dd2" class="color" data-tooltip="RGBA: 220, 113, 118, 1.0
   HEXA: #dc7176ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6722fa67a5af4f6fa6001ff041ceaa3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 88, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6722fa67a5af4f6fa6001ff041ceaa3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6722fa67a5af4f6fa6001ff041ceaa3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6722fa67a5af4f6fa6001ff041ceaa3d" class="color" data-tooltip="RGBA: 200, 88, 108, 1.0
   HEXA: #c8586cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ebb7be1eefbc47d7967411f7a996cd37 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 63, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ebb7be1eefbc47d7967411f7a996cd37::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ebb7be1eefbc47d7967411f7a996cd37:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ebb7be1eefbc47d7967411f7a996cd37" class="color" data-tooltip="RGBA: 156, 63, 93, 1.0
   HEXA: #9c3f5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_31b4bf0d8d794a17963d3b335e474f19 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(112, 40, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_31b4bf0d8d794a17963d3b335e474f19::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_31b4bf0d8d794a17963d3b335e474f19:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_31b4bf0d8d794a17963d3b335e474f19" class="color" data-tooltip="RGBA: 112, 40, 74, 1.0
   HEXA: #70284aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6d4b942e38874853bec747baa93ce914 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6d4b942e38874853bec747baa93ce914 div { flex: 1 1 0; }
           #_6d4b942e38874853bec747baa93ce914 div.color { width: 100%; height: 100%; }
           #_6d4b942e38874853bec747baa93ce914 div.cmap { width: 100%; height: auto; }
           #_6d4b942e38874853bec747baa93ce914 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Redor</strong>
       
       <div id="_6d4b942e38874853bec747baa93ce914" class="color-map">
           
                           <div>
                   <style>
       #_bf713a10df43471783e07f81ce8851d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 210, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf713a10df43471783e07f81ce8851d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf713a10df43471783e07f81ce8851d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf713a10df43471783e07f81ce8851d3" class="color" data-tooltip="RGBA: 246, 210, 169, 1.0
   HEXA: #f6d2a9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_caee012e3a474ff8a290ee36820a6de8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 183, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_caee012e3a474ff8a290ee36820a6de8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_caee012e3a474ff8a290ee36820a6de8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_caee012e3a474ff8a290ee36820a6de8" class="color" data-tooltip="RGBA: 245, 183, 142, 1.0
   HEXA: #f5b78eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a8493f3f3ce4cbbbad1a08bb696aa91 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 156, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a8493f3f3ce4cbbbad1a08bb696aa91::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a8493f3f3ce4cbbbad1a08bb696aa91:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a8493f3f3ce4cbbbad1a08bb696aa91" class="color" data-tooltip="RGBA: 241, 156, 124, 1.0
   HEXA: #f19c7cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_76c420bb575f4a4b8fb5011104eacd64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 129, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_76c420bb575f4a4b8fb5011104eacd64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_76c420bb575f4a4b8fb5011104eacd64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_76c420bb575f4a4b8fb5011104eacd64" class="color" data-tooltip="RGBA: 234, 129, 113, 1.0
   HEXA: #ea8171ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fba4d0f686df441da3e9f15ec007e48e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 104, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fba4d0f686df441da3e9f15ec007e48e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fba4d0f686df441da3e9f15ec007e48e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fba4d0f686df441da3e9f15ec007e48e" class="color" data-tooltip="RGBA: 221, 104, 108, 1.0
   HEXA: #dd686cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef200ce401a54d42a606c3b8d477e029 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 82, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef200ce401a54d42a606c3b8d477e029::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef200ce401a54d42a606c3b8d477e029:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef200ce401a54d42a606c3b8d477e029" class="color" data-tooltip="RGBA: 202, 82, 104, 1.0
   HEXA: #ca5268ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bed4d37bcece44f0a577f20c4dc35ae1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 63, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bed4d37bcece44f0a577f20c4dc35ae1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bed4d37bcece44f0a577f20c4dc35ae1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bed4d37bcece44f0a577f20c4dc35ae1" class="color" data-tooltip="RGBA: 177, 63, 100, 1.0
   HEXA: #b13f64ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_09c1ab89323c408e876eba88eab2c8cd {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_09c1ab89323c408e876eba88eab2c8cd div { flex: 1 1 0; }
           #_09c1ab89323c408e876eba88eab2c8cd div.color { width: 100%; height: 100%; }
           #_09c1ab89323c408e876eba88eab2c8cd div.cmap { width: 100%; height: auto; }
           #_09c1ab89323c408e876eba88eab2c8cd div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Oryel</strong>
       
       <div id="_09c1ab89323c408e876eba88eab2c8cd" class="color-map">
           
                           <div>
                   <style>
       #_ff1359491c024ee9875a9a71800fa01b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 218, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ff1359491c024ee9875a9a71800fa01b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ff1359491c024ee9875a9a71800fa01b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ff1359491c024ee9875a9a71800fa01b" class="color" data-tooltip="RGBA: 236, 218, 154, 1.0
   HEXA: #ecda9aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a175d9935ece49a886530837db08e2ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 196, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a175d9935ece49a886530837db08e2ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a175d9935ece49a886530837db08e2ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a175d9935ece49a886530837db08e2ee" class="color" data-tooltip="RGBA: 239, 196, 126, 1.0
   HEXA: #efc47eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_83bd58c4e8c84e0297333f545ec42c2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 173, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_83bd58c4e8c84e0297333f545ec42c2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_83bd58c4e8c84e0297333f545ec42c2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_83bd58c4e8c84e0297333f545ec42c2b" class="color" data-tooltip="RGBA: 243, 173, 106, 1.0
   HEXA: #f3ad6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2fde20f1433e46408bc4dfb81ec0b209 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 148, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2fde20f1433e46408bc4dfb81ec0b209::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2fde20f1433e46408bc4dfb81ec0b209:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2fde20f1433e46408bc4dfb81ec0b209" class="color" data-tooltip="RGBA: 247, 148, 93, 1.0
   HEXA: #f7945dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8270b66583a1477389032d2797bb2b6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 123, 87, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8270b66583a1477389032d2797bb2b6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8270b66583a1477389032d2797bb2b6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8270b66583a1477389032d2797bb2b6c" class="color" data-tooltip="RGBA: 249, 123, 87, 1.0
   HEXA: #f97b57ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2e117b20422646f6a4ee410a8fb23dfb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 99, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2e117b20422646f6a4ee410a8fb23dfb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2e117b20422646f6a4ee410a8fb23dfb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2e117b20422646f6a4ee410a8fb23dfb" class="color" data-tooltip="RGBA: 246, 99, 86, 1.0
   HEXA: #f66356ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_31398c52c3bc4de986886a69383d8efa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 77, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_31398c52c3bc4de986886a69383d8efa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_31398c52c3bc4de986886a69383d8efa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_31398c52c3bc4de986886a69383d8efa" class="color" data-tooltip="RGBA: 238, 77, 90, 1.0
   HEXA: #ee4d5aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_607764a7999f49b19db08ea0f10aae0d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_607764a7999f49b19db08ea0f10aae0d div { flex: 1 1 0; }
           #_607764a7999f49b19db08ea0f10aae0d div.color { width: 100%; height: 100%; }
           #_607764a7999f49b19db08ea0f10aae0d div.cmap { width: 100%; height: auto; }
           #_607764a7999f49b19db08ea0f10aae0d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Peach</strong>
       
       <div id="_607764a7999f49b19db08ea0f10aae0d" class="color-map">
           
                           <div>
                   <style>
       #_f6f402880a514cd6b469485c4fdcf808 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 224, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f6f402880a514cd6b469485c4fdcf808::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f6f402880a514cd6b469485c4fdcf808:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f6f402880a514cd6b469485c4fdcf808" class="color" data-tooltip="RGBA: 253, 224, 197, 1.0
   HEXA: #fde0c5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d64ca6edfbcb42628dce30fc47bb3a0a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 203, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d64ca6edfbcb42628dce30fc47bb3a0a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d64ca6edfbcb42628dce30fc47bb3a0a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d64ca6edfbcb42628dce30fc47bb3a0a" class="color" data-tooltip="RGBA: 250, 203, 166, 1.0
   HEXA: #facba6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d60656693e5b4faea5a30ada1bef444a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 181, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d60656693e5b4faea5a30ada1bef444a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d60656693e5b4faea5a30ada1bef444a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d60656693e5b4faea5a30ada1bef444a" class="color" data-tooltip="RGBA: 248, 181, 139, 1.0
   HEXA: #f8b58bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1f62bfc88ae441a190de91ad02d58be3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 158, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f62bfc88ae441a190de91ad02d58be3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f62bfc88ae441a190de91ad02d58be3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f62bfc88ae441a190de91ad02d58be3" class="color" data-tooltip="RGBA: 245, 158, 114, 1.0
   HEXA: #f59e72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f5abc8b719334ee982697d3eae175c12 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 133, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f5abc8b719334ee982697d3eae175c12::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f5abc8b719334ee982697d3eae175c12:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f5abc8b719334ee982697d3eae175c12" class="color" data-tooltip="RGBA: 242, 133, 93, 1.0
   HEXA: #f2855dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_33bbaaf1114c4736bcc1e06d061f43af { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 106, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_33bbaaf1114c4736bcc1e06d061f43af::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_33bbaaf1114c4736bcc1e06d061f43af:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_33bbaaf1114c4736bcc1e06d061f43af" class="color" data-tooltip="RGBA: 239, 106, 76, 1.0
   HEXA: #ef6a4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c5b5f4a0e8ad47a080cc3c4311623d4e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 74, 64, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c5b5f4a0e8ad47a080cc3c4311623d4e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c5b5f4a0e8ad47a080cc3c4311623d4e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c5b5f4a0e8ad47a080cc3c4311623d4e" class="color" data-tooltip="RGBA: 235, 74, 64, 1.0
   HEXA: #eb4a40ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_613682a56f52485d9a3f4eb45167e796 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_613682a56f52485d9a3f4eb45167e796 div { flex: 1 1 0; }
           #_613682a56f52485d9a3f4eb45167e796 div.color { width: 100%; height: 100%; }
           #_613682a56f52485d9a3f4eb45167e796 div.cmap { width: 100%; height: auto; }
           #_613682a56f52485d9a3f4eb45167e796 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Pinkyl</strong>
       
       <div id="_613682a56f52485d9a3f4eb45167e796" class="color-map">
           
                           <div>
                   <style>
       #_e253194d35ca4484beeb2d04e0ee54cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 246, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e253194d35ca4484beeb2d04e0ee54cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e253194d35ca4484beeb2d04e0ee54cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e253194d35ca4484beeb2d04e0ee54cc" class="color" data-tooltip="RGBA: 254, 246, 181, 1.0
   HEXA: #fef6b5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7dd4d2ee37ea4f319a5d820e7e66ea60 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 221, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7dd4d2ee37ea4f319a5d820e7e66ea60::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7dd4d2ee37ea4f319a5d820e7e66ea60:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7dd4d2ee37ea4f319a5d820e7e66ea60" class="color" data-tooltip="RGBA: 255, 221, 154, 1.0
   HEXA: #ffdd9aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd737b3de6f646159e180a84c549dd57 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 194, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd737b3de6f646159e180a84c549dd57::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd737b3de6f646159e180a84c549dd57:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd737b3de6f646159e180a84c549dd57" class="color" data-tooltip="RGBA: 255, 194, 133, 1.0
   HEXA: #ffc285ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b64cfff79e474a7aa002edfecad0361a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 166, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b64cfff79e474a7aa002edfecad0361a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b64cfff79e474a7aa002edfecad0361a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b64cfff79e474a7aa002edfecad0361a" class="color" data-tooltip="RGBA: 255, 166, 121, 1.0
   HEXA: #ffa679ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3409cd7956e74a7e8929fc2e2e737f4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 138, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3409cd7956e74a7e8929fc2e2e737f4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3409cd7956e74a7e8929fc2e2e737f4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3409cd7956e74a7e8929fc2e2e737f4d" class="color" data-tooltip="RGBA: 250, 138, 118, 1.0
   HEXA: #fa8a76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f7ba97b40914c7692e76e9b75f32cad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 109, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f7ba97b40914c7692e76e9b75f32cad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f7ba97b40914c7692e76e9b75f32cad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f7ba97b40914c7692e76e9b75f32cad" class="color" data-tooltip="RGBA: 241, 109, 122, 1.0
   HEXA: #f16d7aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2139393619ea468fa6a38e3dda17207d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 83, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2139393619ea468fa6a38e3dda17207d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2139393619ea468fa6a38e3dda17207d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2139393619ea468fa6a38e3dda17207d" class="color" data-tooltip="RGBA: 225, 83, 131, 1.0
   HEXA: #e15383ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_3631a96e65934357b094c557cfd4cfaf {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_3631a96e65934357b094c557cfd4cfaf div { flex: 1 1 0; }
           #_3631a96e65934357b094c557cfd4cfaf div.color { width: 100%; height: 100%; }
           #_3631a96e65934357b094c557cfd4cfaf div.cmap { width: 100%; height: auto; }
           #_3631a96e65934357b094c557cfd4cfaf div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Mint</strong>
       
       <div id="_3631a96e65934357b094c557cfd4cfaf" class="color-map">
           
                           <div>
                   <style>
       #_19b18ed30b2e4ad4b82e360a6bbd7001 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 241, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19b18ed30b2e4ad4b82e360a6bbd7001::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19b18ed30b2e4ad4b82e360a6bbd7001:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19b18ed30b2e4ad4b82e360a6bbd7001" class="color" data-tooltip="RGBA: 228, 241, 225, 1.0
   HEXA: #e4f1e1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c25ec1e905f14a62b0558346ea02a56b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 217, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c25ec1e905f14a62b0558346ea02a56b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c25ec1e905f14a62b0558346ea02a56b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c25ec1e905f14a62b0558346ea02a56b" class="color" data-tooltip="RGBA: 180, 217, 204, 1.0
   HEXA: #b4d9ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_94c99dca32f94dfbbc885cc0d18d7c12 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 192, 182, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94c99dca32f94dfbbc885cc0d18d7c12::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94c99dca32f94dfbbc885cc0d18d7c12:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94c99dca32f94dfbbc885cc0d18d7c12" class="color" data-tooltip="RGBA: 137, 192, 182, 1.0
   HEXA: #89c0b6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_92d8d480204944dfa92f19306bee0a50 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 166, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_92d8d480204944dfa92f19306bee0a50::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_92d8d480204944dfa92f19306bee0a50:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_92d8d480204944dfa92f19306bee0a50" class="color" data-tooltip="RGBA: 99, 166, 160, 1.0
   HEXA: #63a6a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_308890e80757471f9b0db16fd58affe9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 140, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_308890e80757471f9b0db16fd58affe9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_308890e80757471f9b0db16fd58affe9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_308890e80757471f9b0db16fd58affe9" class="color" data-tooltip="RGBA: 68, 140, 138, 1.0
   HEXA: #448c8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c8aa16366334af8b0add32affc4e8e6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 114, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c8aa16366334af8b0add32affc4e8e6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c8aa16366334af8b0add32affc4e8e6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c8aa16366334af8b0add32affc4e8e6" class="color" data-tooltip="RGBA: 40, 114, 116, 1.0
   HEXA: #287274ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5b0be31dd01649db91bea61ea8beedd9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 88, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5b0be31dd01649db91bea61ea8beedd9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5b0be31dd01649db91bea61ea8beedd9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5b0be31dd01649db91bea61ea8beedd9" class="color" data-tooltip="RGBA: 13, 88, 95, 1.0
   HEXA: #0d585fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9e0a2f4354164b1ab966e066db4407b8 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9e0a2f4354164b1ab966e066db4407b8 div { flex: 1 1 0; }
           #_9e0a2f4354164b1ab966e066db4407b8 div.color { width: 100%; height: 100%; }
           #_9e0a2f4354164b1ab966e066db4407b8 div.cmap { width: 100%; height: auto; }
           #_9e0a2f4354164b1ab966e066db4407b8 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Blugrn</strong>
       
       <div id="_9e0a2f4354164b1ab966e066db4407b8" class="color-map">
           
                           <div>
                   <style>
       #_42b8fb5f6d764ea2a63f804f32734a8b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 230, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_42b8fb5f6d764ea2a63f804f32734a8b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_42b8fb5f6d764ea2a63f804f32734a8b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_42b8fb5f6d764ea2a63f804f32734a8b" class="color" data-tooltip="RGBA: 196, 230, 195, 1.0
   HEXA: #c4e6c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_26c3fd840bb843ab80efe9a7846e51a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 210, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26c3fd840bb843ab80efe9a7846e51a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26c3fd840bb843ab80efe9a7846e51a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26c3fd840bb843ab80efe9a7846e51a9" class="color" data-tooltip="RGBA: 150, 210, 164, 1.0
   HEXA: #96d2a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f07cf1862b424ed7a3974d9cf85e02f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 188, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f07cf1862b424ed7a3974d9cf85e02f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f07cf1862b424ed7a3974d9cf85e02f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f07cf1862b424ed7a3974d9cf85e02f6" class="color" data-tooltip="RGBA: 109, 188, 144, 1.0
   HEXA: #6dbc90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_248c9891f0eb4598a818338dd91daea5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 162, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_248c9891f0eb4598a818338dd91daea5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_248c9891f0eb4598a818338dd91daea5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_248c9891f0eb4598a818338dd91daea5" class="color" data-tooltip="RGBA: 77, 162, 132, 1.0
   HEXA: #4da284ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa5f5fe3bbdc44d0bf87a6be4aa7b4b9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 135, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa5f5fe3bbdc44d0bf87a6be4aa7b4b9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa5f5fe3bbdc44d0bf87a6be4aa7b4b9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa5f5fe3bbdc44d0bf87a6be4aa7b4b9" class="color" data-tooltip="RGBA: 54, 135, 122, 1.0
   HEXA: #36877aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e69e6516e35d46ad8e75ca0169f7f9d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 107, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e69e6516e35d46ad8e75ca0169f7f9d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e69e6516e35d46ad8e75ca0169f7f9d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e69e6516e35d46ad8e75ca0169f7f9d3" class="color" data-tooltip="RGBA: 38, 107, 110, 1.0
   HEXA: #266b6eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fe18c1f9d2154c63adb919fe6fc8a4b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 79, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe18c1f9d2154c63adb919fe6fc8a4b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe18c1f9d2154c63adb919fe6fc8a4b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe18c1f9d2154c63adb919fe6fc8a4b3" class="color" data-tooltip="RGBA: 29, 79, 96, 1.0
   HEXA: #1d4f60ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ad29cad4ce194f358c1daedd3b2525a1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ad29cad4ce194f358c1daedd3b2525a1 div { flex: 1 1 0; }
           #_ad29cad4ce194f358c1daedd3b2525a1 div.color { width: 100%; height: 100%; }
           #_ad29cad4ce194f358c1daedd3b2525a1 div.cmap { width: 100%; height: auto; }
           #_ad29cad4ce194f358c1daedd3b2525a1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Darkmint</strong>
       
       <div id="_ad29cad4ce194f358c1daedd3b2525a1" class="color-map">
           
                           <div>
                   <style>
       #_9a863f636fe045aa85bb953a460ae151 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 251, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a863f636fe045aa85bb953a460ae151::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a863f636fe045aa85bb953a460ae151:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a863f636fe045aa85bb953a460ae151" class="color" data-tooltip="RGBA: 210, 251, 212, 1.0
   HEXA: #d2fbd4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e1b876695b04b9cbc9340f3b61a134a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 219, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e1b876695b04b9cbc9340f3b61a134a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e1b876695b04b9cbc9340f3b61a134a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e1b876695b04b9cbc9340f3b61a134a" class="color" data-tooltip="RGBA: 165, 219, 194, 1.0
   HEXA: #a5dbc2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f92dc742c9bf4badb918e8434119f84e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 188, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f92dc742c9bf4badb918e8434119f84e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f92dc742c9bf4badb918e8434119f84e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f92dc742c9bf4badb918e8434119f84e" class="color" data-tooltip="RGBA: 123, 188, 176, 1.0
   HEXA: #7bbcb0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9005f431880f457d87ab401c24cee1ce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(85, 156, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9005f431880f457d87ab401c24cee1ce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9005f431880f457d87ab401c24cee1ce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9005f431880f457d87ab401c24cee1ce" class="color" data-tooltip="RGBA: 85, 156, 158, 1.0
   HEXA: #559c9eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_36bdac46ff824167b846c37270ec9c0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 124, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36bdac46ff824167b846c37270ec9c0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36bdac46ff824167b846c37270ec9c0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36bdac46ff824167b846c37270ec9c0d" class="color" data-tooltip="RGBA: 58, 124, 137, 1.0
   HEXA: #3a7c89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_625ca92c2e874410b8c86a8edb3cdb3b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 93, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_625ca92c2e874410b8c86a8edb3cdb3b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_625ca92c2e874410b8c86a8edb3cdb3b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_625ca92c2e874410b8c86a8edb3cdb3b" class="color" data-tooltip="RGBA: 35, 93, 114, 1.0
   HEXA: #235d72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86f85f34d5c24530868e9b28aad39f6a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 63, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86f85f34d5c24530868e9b28aad39f6a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86f85f34d5c24530868e9b28aad39f6a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86f85f34d5c24530868e9b28aad39f6a" class="color" data-tooltip="RGBA: 18, 63, 90, 1.0
   HEXA: #123f5aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_07456413889e433d9ec1dfc476f68d6b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_07456413889e433d9ec1dfc476f68d6b div { flex: 1 1 0; }
           #_07456413889e433d9ec1dfc476f68d6b div.color { width: 100%; height: 100%; }
           #_07456413889e433d9ec1dfc476f68d6b div.cmap { width: 100%; height: auto; }
           #_07456413889e433d9ec1dfc476f68d6b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Emrld</strong>
       
       <div id="_07456413889e433d9ec1dfc476f68d6b" class="color-map">
           
                           <div>
                   <style>
       #_ea8810291cbb4c969cfc8048009dd012 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 242, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea8810291cbb4c969cfc8048009dd012::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea8810291cbb4c969cfc8048009dd012:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea8810291cbb4c969cfc8048009dd012" class="color" data-tooltip="RGBA: 211, 242, 163, 1.0
   HEXA: #d3f2a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0107d305ad6447b8494be87beb0479d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 225, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0107d305ad6447b8494be87beb0479d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0107d305ad6447b8494be87beb0479d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0107d305ad6447b8494be87beb0479d" class="color" data-tooltip="RGBA: 151, 225, 150, 1.0
   HEXA: #97e196ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3d85658f0d52409f885c3de5de452f5b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 192, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3d85658f0d52409f885c3de5de452f5b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3d85658f0d52409f885c3de5de452f5b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3d85658f0d52409f885c3de5de452f5b" class="color" data-tooltip="RGBA: 108, 192, 139, 1.0
   HEXA: #6cc08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_03844b212bef4a6895b9d03855368a3f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 155, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_03844b212bef4a6895b9d03855368a3f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_03844b212bef4a6895b9d03855368a3f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_03844b212bef4a6895b9d03855368a3f" class="color" data-tooltip="RGBA: 76, 155, 130, 1.0
   HEXA: #4c9b82ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_61d7bca9b6a744fe99d83657a5b6f8ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 122, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61d7bca9b6a744fe99d83657a5b6f8ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61d7bca9b6a744fe99d83657a5b6f8ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61d7bca9b6a744fe99d83657a5b6f8ac" class="color" data-tooltip="RGBA: 33, 122, 121, 1.0
   HEXA: #217a79ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f261f0beb73f42b59ee50689b3a976c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 89, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f261f0beb73f42b59ee50689b3a976c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f261f0beb73f42b59ee50689b3a976c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f261f0beb73f42b59ee50689b3a976c2" class="color" data-tooltip="RGBA: 16, 89, 101, 1.0
   HEXA: #105965ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b245adb576af417cb15676d994844f11 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 64, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b245adb576af417cb15676d994844f11::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b245adb576af417cb15676d994844f11:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b245adb576af417cb15676d994844f11" class="color" data-tooltip="RGBA: 7, 64, 80, 1.0
   HEXA: #074050ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ef9b9a01f26e485dabf67ac93f39ddda {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ef9b9a01f26e485dabf67ac93f39ddda div { flex: 1 1 0; }
           #_ef9b9a01f26e485dabf67ac93f39ddda div.color { width: 100%; height: 100%; }
           #_ef9b9a01f26e485dabf67ac93f39ddda div.cmap { width: 100%; height: auto; }
           #_ef9b9a01f26e485dabf67ac93f39ddda div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Aggrnyl</strong>
       
       <div id="_ef9b9a01f26e485dabf67ac93f39ddda" class="color-map">
           
                           <div>
                   <style>
       #_103d1f67440b42dca690ffe5cc6a7195 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 86, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_103d1f67440b42dca690ffe5cc6a7195::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_103d1f67440b42dca690ffe5cc6a7195:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_103d1f67440b42dca690ffe5cc6a7195" class="color" data-tooltip="RGBA: 36, 86, 104, 1.0
   HEXA: #245668ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c657c54140ad45c7b507858e175e7549 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 114, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c657c54140ad45c7b507858e175e7549::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c657c54140ad45c7b507858e175e7549:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c657c54140ad45c7b507858e175e7549" class="color" data-tooltip="RGBA: 15, 114, 121, 1.0
   HEXA: #0f7279ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a5f1105974034bf286db3fae06d94b92 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 143, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a5f1105974034bf286db3fae06d94b92::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a5f1105974034bf286db3fae06d94b92:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a5f1105974034bf286db3fae06d94b92" class="color" data-tooltip="RGBA: 13, 143, 129, 1.0
   HEXA: #0d8f81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1809a71d8c8482c8aba86075a273f85 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 171, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1809a71d8c8482c8aba86075a273f85::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1809a71d8c8482c8aba86075a273f85:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1809a71d8c8482c8aba86075a273f85" class="color" data-tooltip="RGBA: 57, 171, 126, 1.0
   HEXA: #39ab7eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc4177ec7ad0477db066062de4567766 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 197, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc4177ec7ad0477db066062de4567766::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc4177ec7ad0477db066062de4567766:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc4177ec7ad0477db066062de4567766" class="color" data-tooltip="RGBA: 110, 197, 116, 1.0
   HEXA: #6ec574ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b08740fcad9425baa49a24d8e3e5937 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(169, 220, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b08740fcad9425baa49a24d8e3e5937::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b08740fcad9425baa49a24d8e3e5937:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b08740fcad9425baa49a24d8e3e5937" class="color" data-tooltip="RGBA: 169, 220, 103, 1.0
   HEXA: #a9dc67ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9a80b1d1f5ca4103a47011ddbc53e8bc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 239, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a80b1d1f5ca4103a47011ddbc53e8bc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a80b1d1f5ca4103a47011ddbc53e8bc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a80b1d1f5ca4103a47011ddbc53e8bc" class="color" data-tooltip="RGBA: 237, 239, 93, 1.0
   HEXA: #edef5dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_04d4a50c188f46c8bc92652e8753bb28 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_04d4a50c188f46c8bc92652e8753bb28 div { flex: 1 1 0; }
           #_04d4a50c188f46c8bc92652e8753bb28 div.color { width: 100%; height: 100%; }
           #_04d4a50c188f46c8bc92652e8753bb28 div.cmap { width: 100%; height: auto; }
           #_04d4a50c188f46c8bc92652e8753bb28 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Bluyl</strong>
       
       <div id="_04d4a50c188f46c8bc92652e8753bb28" class="color-map">
           
                           <div>
                   <style>
       #_4a21ceade49d4ae2ad00a19bb2f7c137 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 254, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a21ceade49d4ae2ad00a19bb2f7c137::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a21ceade49d4ae2ad00a19bb2f7c137:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a21ceade49d4ae2ad00a19bb2f7c137" class="color" data-tooltip="RGBA: 247, 254, 174, 1.0
   HEXA: #f7feaeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_611d58df7f8a430b99f2db11bdbb45d6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(183, 230, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_611d58df7f8a430b99f2db11bdbb45d6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_611d58df7f8a430b99f2db11bdbb45d6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_611d58df7f8a430b99f2db11bdbb45d6" class="color" data-tooltip="RGBA: 183, 230, 165, 1.0
   HEXA: #b7e6a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b16ef28cc68d4414b8f939acc0644593 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 203, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b16ef28cc68d4414b8f939acc0644593::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b16ef28cc68d4414b8f939acc0644593:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b16ef28cc68d4414b8f939acc0644593" class="color" data-tooltip="RGBA: 124, 203, 162, 1.0
   HEXA: #7ccba2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68b7f3f884a84f1d9a115c503b29f3c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 174, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68b7f3f884a84f1d9a115c503b29f3c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68b7f3f884a84f1d9a115c503b29f3c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68b7f3f884a84f1d9a115c503b29f3c9" class="color" data-tooltip="RGBA: 70, 174, 160, 1.0
   HEXA: #46aea0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2caf4897ca0343de8b04212e009fc57c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 144, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2caf4897ca0343de8b04212e009fc57c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2caf4897ca0343de8b04212e009fc57c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2caf4897ca0343de8b04212e009fc57c" class="color" data-tooltip="RGBA: 8, 144, 153, 1.0
   HEXA: #089099ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f255533107e645d1b95982ad14f8f677 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 113, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f255533107e645d1b95982ad14f8f677::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f255533107e645d1b95982ad14f8f677:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f255533107e645d1b95982ad14f8f677" class="color" data-tooltip="RGBA: 0, 113, 139, 1.0
   HEXA: #00718bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8ab46bd06bf94b5ebdbeccdd5fc0c30f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 82, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8ab46bd06bf94b5ebdbeccdd5fc0c30f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8ab46bd06bf94b5ebdbeccdd5fc0c30f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8ab46bd06bf94b5ebdbeccdd5fc0c30f" class="color" data-tooltip="RGBA: 4, 82, 117, 1.0
   HEXA: #045275ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6b7e2f933482436fa7325efbe6acaa22 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6b7e2f933482436fa7325efbe6acaa22 div { flex: 1 1 0; }
           #_6b7e2f933482436fa7325efbe6acaa22 div.color { width: 100%; height: 100%; }
           #_6b7e2f933482436fa7325efbe6acaa22 div.cmap { width: 100%; height: auto; }
           #_6b7e2f933482436fa7325efbe6acaa22 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Teal</strong>
       
       <div id="_6b7e2f933482436fa7325efbe6acaa22" class="color-map">
           
                           <div>
                   <style>
       #_0ca3f7dd2d0d42718951d92c62bbd1c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 238, 234, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ca3f7dd2d0d42718951d92c62bbd1c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ca3f7dd2d0d42718951d92c62bbd1c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ca3f7dd2d0d42718951d92c62bbd1c2" class="color" data-tooltip="RGBA: 209, 238, 234, 1.0
   HEXA: #d1eeeaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9352c0849db14502980bc2adcb10a8d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 219, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9352c0849db14502980bc2adcb10a8d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9352c0849db14502980bc2adcb10a8d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9352c0849db14502980bc2adcb10a8d8" class="color" data-tooltip="RGBA: 168, 219, 217, 1.0
   HEXA: #a8dbd9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5d1eb850b09141099ae0d6ac7a33fde8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 196, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5d1eb850b09141099ae0d6ac7a33fde8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5d1eb850b09141099ae0d6ac7a33fde8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5d1eb850b09141099ae0d6ac7a33fde8" class="color" data-tooltip="RGBA: 133, 196, 201, 1.0
   HEXA: #85c4c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4f2288a58e2b4c85a0e22e9d2f8f62f2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 171, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4f2288a58e2b4c85a0e22e9d2f8f62f2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4f2288a58e2b4c85a0e22e9d2f8f62f2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4f2288a58e2b4c85a0e22e9d2f8f62f2" class="color" data-tooltip="RGBA: 104, 171, 184, 1.0
   HEXA: #68abb8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e2d75aa1ecd5440b9069288cfccdfeb8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(79, 144, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2d75aa1ecd5440b9069288cfccdfeb8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2d75aa1ecd5440b9069288cfccdfeb8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2d75aa1ecd5440b9069288cfccdfeb8" class="color" data-tooltip="RGBA: 79, 144, 166, 1.0
   HEXA: #4f90a6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc80cd48654342f48fae112a2b7ac5f4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 115, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc80cd48654342f48fae112a2b7ac5f4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc80cd48654342f48fae112a2b7ac5f4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc80cd48654342f48fae112a2b7ac5f4" class="color" data-tooltip="RGBA: 59, 115, 143, 1.0
   HEXA: #3b738fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05cd306efaf24b87b2992002f3aceffd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 86, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05cd306efaf24b87b2992002f3aceffd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05cd306efaf24b87b2992002f3aceffd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05cd306efaf24b87b2992002f3aceffd" class="color" data-tooltip="RGBA: 42, 86, 116, 1.0
   HEXA: #2a5674ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b0af6553c046437c85411eeb54eee84d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b0af6553c046437c85411eeb54eee84d div { flex: 1 1 0; }
           #_b0af6553c046437c85411eeb54eee84d div.color { width: 100%; height: 100%; }
           #_b0af6553c046437c85411eeb54eee84d div.cmap { width: 100%; height: auto; }
           #_b0af6553c046437c85411eeb54eee84d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Tealgrn</strong>
       
       <div id="_b0af6553c046437c85411eeb54eee84d" class="color-map">
           
                           <div>
                   <style>
       #_bf2cf97bfb8c474f9465720fe70a8d25 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(176, 242, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf2cf97bfb8c474f9465720fe70a8d25::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf2cf97bfb8c474f9465720fe70a8d25:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf2cf97bfb8c474f9465720fe70a8d25" class="color" data-tooltip="RGBA: 176, 242, 188, 1.0
   HEXA: #b0f2bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf42ac79433942529f77bcfac9db825f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 232, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf42ac79433942529f77bcfac9db825f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf42ac79433942529f77bcfac9db825f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf42ac79433942529f77bcfac9db825f" class="color" data-tooltip="RGBA: 137, 232, 172, 1.0
   HEXA: #89e8acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cfced09173de47cf8298f06571b7e989 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 219, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cfced09173de47cf8298f06571b7e989::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cfced09173de47cf8298f06571b7e989:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cfced09173de47cf8298f06571b7e989" class="color" data-tooltip="RGBA: 103, 219, 165, 1.0
   HEXA: #67dba5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9291786ff4a3415eb049d1cd3f0e2f60 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 200, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9291786ff4a3415eb049d1cd3f0e2f60::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9291786ff4a3415eb049d1cd3f0e2f60:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9291786ff4a3415eb049d1cd3f0e2f60" class="color" data-tooltip="RGBA: 76, 200, 163, 1.0
   HEXA: #4cc8a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_74f0df1d75c64339aac43034ca6b0a6a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 178, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_74f0df1d75c64339aac43034ca6b0a6a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_74f0df1d75c64339aac43034ca6b0a6a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_74f0df1d75c64339aac43034ca6b0a6a" class="color" data-tooltip="RGBA: 56, 178, 163, 1.0
   HEXA: #38b2a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_218ce46cf5e84e1d8407a4d6a70147f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 152, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_218ce46cf5e84e1d8407a4d6a70147f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_218ce46cf5e84e1d8407a4d6a70147f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_218ce46cf5e84e1d8407a4d6a70147f8" class="color" data-tooltip="RGBA: 44, 152, 160, 1.0
   HEXA: #2c98a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9edd27294a2845acbbab62717f9a5a0f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 125, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9edd27294a2845acbbab62717f9a5a0f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9edd27294a2845acbbab62717f9a5a0f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9edd27294a2845acbbab62717f9a5a0f" class="color" data-tooltip="RGBA: 37, 125, 152, 1.0
   HEXA: #257d98ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5088ddedcf914d70ab016f4681d2f627 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5088ddedcf914d70ab016f4681d2f627 div { flex: 1 1 0; }
           #_5088ddedcf914d70ab016f4681d2f627 div.color { width: 100%; height: 100%; }
           #_5088ddedcf914d70ab016f4681d2f627 div.cmap { width: 100%; height: auto; }
           #_5088ddedcf914d70ab016f4681d2f627 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Purp</strong>
       
       <div id="_5088ddedcf914d70ab016f4681d2f627" class="color-map">
           
                           <div>
                   <style>
       #_436237fcac284195acf47e48e35ebda5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 224, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_436237fcac284195acf47e48e35ebda5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_436237fcac284195acf47e48e35ebda5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_436237fcac284195acf47e48e35ebda5" class="color" data-tooltip="RGBA: 243, 224, 247, 1.0
   HEXA: #f3e0f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6dec818489e74aa5a8082139ebca6d90 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 199, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6dec818489e74aa5a8082139ebca6d90::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6dec818489e74aa5a8082139ebca6d90:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6dec818489e74aa5a8082139ebca6d90" class="color" data-tooltip="RGBA: 228, 199, 241, 1.0
   HEXA: #e4c7f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_21baad9806974502add43560fcab99f2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 175, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_21baad9806974502add43560fcab99f2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_21baad9806974502add43560fcab99f2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_21baad9806974502add43560fcab99f2" class="color" data-tooltip="RGBA: 209, 175, 232, 1.0
   HEXA: #d1afe8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7219ee5cb35f4deea2df62c2f17aae49 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 152, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7219ee5cb35f4deea2df62c2f17aae49::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7219ee5cb35f4deea2df62c2f17aae49:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7219ee5cb35f4deea2df62c2f17aae49" class="color" data-tooltip="RGBA: 185, 152, 221, 1.0
   HEXA: #b998ddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_332eb80063d24f249794fdc5d6ff9528 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(159, 130, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_332eb80063d24f249794fdc5d6ff9528::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_332eb80063d24f249794fdc5d6ff9528:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_332eb80063d24f249794fdc5d6ff9528" class="color" data-tooltip="RGBA: 159, 130, 206, 1.0
   HEXA: #9f82ceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ec59e001f2242ec9b196630132790f4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 109, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ec59e001f2242ec9b196630132790f4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ec59e001f2242ec9b196630132790f4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ec59e001f2242ec9b196630132790f4" class="color" data-tooltip="RGBA: 130, 109, 186, 1.0
   HEXA: #826dbaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4830d2920d034f8e87ef12a54bf54659 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 88, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4830d2920d034f8e87ef12a54bf54659::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4830d2920d034f8e87ef12a54bf54659:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4830d2920d034f8e87ef12a54bf54659" class="color" data-tooltip="RGBA: 99, 88, 159, 1.0
   HEXA: #63589fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_76521c859a0a447aa0551a3c9e6087e5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_76521c859a0a447aa0551a3c9e6087e5 div { flex: 1 1 0; }
           #_76521c859a0a447aa0551a3c9e6087e5 div.color { width: 100%; height: 100%; }
           #_76521c859a0a447aa0551a3c9e6087e5 div.cmap { width: 100%; height: auto; }
           #_76521c859a0a447aa0551a3c9e6087e5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Purpor</strong>
       
       <div id="_76521c859a0a447aa0551a3c9e6087e5" class="color-map">
           
                           <div>
                   <style>
       #_b284e62196f14ca5bcbee0e879f921da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 221, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b284e62196f14ca5bcbee0e879f921da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b284e62196f14ca5bcbee0e879f921da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b284e62196f14ca5bcbee0e879f921da" class="color" data-tooltip="RGBA: 249, 221, 218, 1.0
   HEXA: #f9dddaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b4d6604b90d8448ab19f2a2367dd063c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 185, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b4d6604b90d8448ab19f2a2367dd063c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b4d6604b90d8448ab19f2a2367dd063c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b4d6604b90d8448ab19f2a2367dd063c" class="color" data-tooltip="RGBA: 242, 185, 196, 1.0
   HEXA: #f2b9c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_98d21632f4fd44559b630e8e55af3534 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 151, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_98d21632f4fd44559b630e8e55af3534::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_98d21632f4fd44559b630e8e55af3534:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_98d21632f4fd44559b630e8e55af3534" class="color" data-tooltip="RGBA: 229, 151, 185, 1.0
   HEXA: #e597b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be1c42eb11174e3bb63aef6e812ed804 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 120, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be1c42eb11174e3bb63aef6e812ed804::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be1c42eb11174e3bb63aef6e812ed804:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be1c42eb11174e3bb63aef6e812ed804" class="color" data-tooltip="RGBA: 206, 120, 179, 1.0
   HEXA: #ce78b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d1d9b0e9afee479dad5bf86efd81f1cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 95, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d1d9b0e9afee479dad5bf86efd81f1cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d1d9b0e9afee479dad5bf86efd81f1cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d1d9b0e9afee479dad5bf86efd81f1cc" class="color" data-tooltip="RGBA: 173, 95, 173, 1.0
   HEXA: #ad5fadff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15d7308fc2964080921bcf27c1cdf599 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 75, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15d7308fc2964080921bcf27c1cdf599::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15d7308fc2964080921bcf27c1cdf599:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15d7308fc2964080921bcf27c1cdf599" class="color" data-tooltip="RGBA: 131, 75, 160, 1.0
   HEXA: #834ba0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2617c5182f974b85af189843b0f9c86e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 59, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2617c5182f974b85af189843b0f9c86e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2617c5182f974b85af189843b0f9c86e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2617c5182f974b85af189843b0f9c86e" class="color" data-tooltip="RGBA: 87, 59, 136, 1.0
   HEXA: #573b88ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b4c96df0046f4efcba5e70b4c0166178 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b4c96df0046f4efcba5e70b4c0166178 div { flex: 1 1 0; }
           #_b4c96df0046f4efcba5e70b4c0166178 div.color { width: 100%; height: 100%; }
           #_b4c96df0046f4efcba5e70b4c0166178 div.cmap { width: 100%; height: auto; }
           #_b4c96df0046f4efcba5e70b4c0166178 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Sunset</strong>
       
       <div id="_b4c96df0046f4efcba5e70b4c0166178" class="color-map">
           
                           <div>
                   <style>
       #_6f910412e3ec4395923de86328f38a3b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 231, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6f910412e3ec4395923de86328f38a3b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6f910412e3ec4395923de86328f38a3b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6f910412e3ec4395923de86328f38a3b" class="color" data-tooltip="RGBA: 243, 231, 155, 1.0
   HEXA: #f3e79bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e0bbbe719824d5d948cdb95817bafe8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 196, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e0bbbe719824d5d948cdb95817bafe8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e0bbbe719824d5d948cdb95817bafe8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e0bbbe719824d5d948cdb95817bafe8" class="color" data-tooltip="RGBA: 250, 196, 132, 1.0
   HEXA: #fac484ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c64ce0ae3c6148b09e1e12c54379f0cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 160, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c64ce0ae3c6148b09e1e12c54379f0cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c64ce0ae3c6148b09e1e12c54379f0cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c64ce0ae3c6148b09e1e12c54379f0cc" class="color" data-tooltip="RGBA: 248, 160, 126, 1.0
   HEXA: #f8a07eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_39379aa937e047319dcc8b53af6a250c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 127, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_39379aa937e047319dcc8b53af6a250c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_39379aa937e047319dcc8b53af6a250c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_39379aa937e047319dcc8b53af6a250c" class="color" data-tooltip="RGBA: 235, 127, 134, 1.0
   HEXA: #eb7f86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8a6c278f948f44a99143b07d154893f2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 102, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8a6c278f948f44a99143b07d154893f2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8a6c278f948f44a99143b07d154893f2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8a6c278f948f44a99143b07d154893f2" class="color" data-tooltip="RGBA: 206, 102, 147, 1.0
   HEXA: #ce6693ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50158e64af164210b928636f2748572e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 89, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50158e64af164210b928636f2748572e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50158e64af164210b928636f2748572e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50158e64af164210b928636f2748572e" class="color" data-tooltip="RGBA: 160, 89, 160, 1.0
   HEXA: #a059a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4426ea0433d4e2fbcf8edf3f5b2fc3a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(92, 83, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4426ea0433d4e2fbcf8edf3f5b2fc3a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4426ea0433d4e2fbcf8edf3f5b2fc3a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4426ea0433d4e2fbcf8edf3f5b2fc3a" class="color" data-tooltip="RGBA: 92, 83, 165, 1.0
   HEXA: #5c53a5ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_79549e91cdd04df89ab29bdd01120b3a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_79549e91cdd04df89ab29bdd01120b3a div { flex: 1 1 0; }
           #_79549e91cdd04df89ab29bdd01120b3a div.color { width: 100%; height: 100%; }
           #_79549e91cdd04df89ab29bdd01120b3a div.cmap { width: 100%; height: auto; }
           #_79549e91cdd04df89ab29bdd01120b3a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Magenta</strong>
       
       <div id="_79549e91cdd04df89ab29bdd01120b3a" class="color-map">
           
                           <div>
                   <style>
       #_bc263303b386474faf255aaf94e0c284 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 203, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc263303b386474faf255aaf94e0c284::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc263303b386474faf255aaf94e0c284:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc263303b386474faf255aaf94e0c284" class="color" data-tooltip="RGBA: 243, 203, 211, 1.0
   HEXA: #f3cbd3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a5bd0abd594c4311b0ad9d23bbea68ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 169, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a5bd0abd594c4311b0ad9d23bbea68ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a5bd0abd594c4311b0ad9d23bbea68ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a5bd0abd594c4311b0ad9d23bbea68ba" class="color" data-tooltip="RGBA: 234, 169, 189, 1.0
   HEXA: #eaa9bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d3c00a6b0504eefa6427c2e8dd12765 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 136, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d3c00a6b0504eefa6427c2e8dd12765::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d3c00a6b0504eefa6427c2e8dd12765:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d3c00a6b0504eefa6427c2e8dd12765" class="color" data-tooltip="RGBA: 221, 136, 172, 1.0
   HEXA: #dd88acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb2a033afab04dceab30d50257d5099c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 105, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb2a033afab04dceab30d50257d5099c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb2a033afab04dceab30d50257d5099c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb2a033afab04dceab30d50257d5099c" class="color" data-tooltip="RGBA: 202, 105, 157, 1.0
   HEXA: #ca699dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_214416d56c9b4fd6a04976dede69f7a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 77, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_214416d56c9b4fd6a04976dede69f7a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_214416d56c9b4fd6a04976dede69f7a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_214416d56c9b4fd6a04976dede69f7a1" class="color" data-tooltip="RGBA: 177, 77, 142, 1.0
   HEXA: #b14d8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1920fb0401a3470b9a5ab498b419c965 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(145, 53, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1920fb0401a3470b9a5ab498b419c965::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1920fb0401a3470b9a5ab498b419c965:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1920fb0401a3470b9a5ab498b419c965" class="color" data-tooltip="RGBA: 145, 53, 125, 1.0
   HEXA: #91357dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc03a5cc699b4ed7a07aa2d18f3e4656 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 33, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc03a5cc699b4ed7a07aa2d18f3e4656::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc03a5cc699b4ed7a07aa2d18f3e4656:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc03a5cc699b4ed7a07aa2d18f3e4656" class="color" data-tooltip="RGBA: 108, 33, 103, 1.0
   HEXA: #6c2167ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b87d440cb0ff43bcb7f9f936347f93c5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b87d440cb0ff43bcb7f9f936347f93c5 div { flex: 1 1 0; }
           #_b87d440cb0ff43bcb7f9f936347f93c5 div.color { width: 100%; height: 100%; }
           #_b87d440cb0ff43bcb7f9f936347f93c5 div.cmap { width: 100%; height: auto; }
           #_b87d440cb0ff43bcb7f9f936347f93c5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Sunsetdark</strong>
       
       <div id="_b87d440cb0ff43bcb7f9f936347f93c5" class="color-map">
           
                           <div>
                   <style>
       #_f018902d31e740c19cbde064a8c3432a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 222, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f018902d31e740c19cbde064a8c3432a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f018902d31e740c19cbde064a8c3432a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f018902d31e740c19cbde064a8c3432a" class="color" data-tooltip="RGBA: 252, 222, 156, 1.0
   HEXA: #fcde9cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a2c2d10e303b43d49e21e836c051960d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 164, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a2c2d10e303b43d49e21e836c051960d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a2c2d10e303b43d49e21e836c051960d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a2c2d10e303b43d49e21e836c051960d" class="color" data-tooltip="RGBA: 250, 164, 118, 1.0
   HEXA: #faa476ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e10e187daceb44dba4aedcb871d23b99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 116, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e10e187daceb44dba4aedcb871d23b99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e10e187daceb44dba4aedcb871d23b99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e10e187daceb44dba4aedcb871d23b99" class="color" data-tooltip="RGBA: 240, 116, 110, 1.0
   HEXA: #f0746eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1fc3a061d04a424480f15871cc38893e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 79, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1fc3a061d04a424480f15871cc38893e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1fc3a061d04a424480f15871cc38893e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1fc3a061d04a424480f15871cc38893e" class="color" data-tooltip="RGBA: 227, 79, 111, 1.0
   HEXA: #e34f6fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7dca33066b1f45e1bd7df817ac5d1cbe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 57, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7dca33066b1f45e1bd7df817ac5d1cbe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7dca33066b1f45e1bd7df817ac5d1cbe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7dca33066b1f45e1bd7df817ac5d1cbe" class="color" data-tooltip="RGBA: 220, 57, 119, 1.0
   HEXA: #dc3977ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f844e3556f5a4c28a8deb2e886d4dcd4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 37, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f844e3556f5a4c28a8deb2e886d4dcd4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f844e3556f5a4c28a8deb2e886d4dcd4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f844e3556f5a4c28a8deb2e886d4dcd4" class="color" data-tooltip="RGBA: 185, 37, 122, 1.0
   HEXA: #b9257aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_746cfb2e7fd8453d80bfada371fba5e1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 29, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_746cfb2e7fd8453d80bfada371fba5e1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_746cfb2e7fd8453d80bfada371fba5e1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_746cfb2e7fd8453d80bfada371fba5e1" class="color" data-tooltip="RGBA: 124, 29, 111, 1.0
   HEXA: #7c1d6fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9602e3f521ed4254b55de9f0c576ac9c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9602e3f521ed4254b55de9f0c576ac9c div { flex: 1 1 0; }
           #_9602e3f521ed4254b55de9f0c576ac9c div.color { width: 100%; height: 100%; }
           #_9602e3f521ed4254b55de9f0c576ac9c div.cmap { width: 100%; height: auto; }
           #_9602e3f521ed4254b55de9f0c576ac9c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Agsunset</strong>
       
       <div id="_9602e3f521ed4254b55de9f0c576ac9c" class="color-map">
           
                           <div>
                   <style>
       #_657d2902d9b44fa68252257b6ae31706 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(75, 41, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_657d2902d9b44fa68252257b6ae31706::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_657d2902d9b44fa68252257b6ae31706:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_657d2902d9b44fa68252257b6ae31706" class="color" data-tooltip="RGBA: 75, 41, 145, 1.0
   HEXA: #4b2991ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1a575e766f64bbc82c3f07b5c8f4765 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 44, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1a575e766f64bbc82c3f07b5c8f4765::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1a575e766f64bbc82c3f07b5c8f4765:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1a575e766f64bbc82c3f07b5c8f4765" class="color" data-tooltip="RGBA: 135, 44, 162, 1.0
   HEXA: #872ca2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb2f49d9a96e4503b15404922b4f640a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 54, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb2f49d9a96e4503b15404922b4f640a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb2f49d9a96e4503b15404922b4f640a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb2f49d9a96e4503b15404922b4f640a" class="color" data-tooltip="RGBA: 192, 54, 157, 1.0
   HEXA: #c0369dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3da1d11928c44f76885d21099c898556 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 79, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3da1d11928c44f76885d21099c898556::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3da1d11928c44f76885d21099c898556:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3da1d11928c44f76885d21099c898556" class="color" data-tooltip="RGBA: 234, 79, 136, 1.0
   HEXA: #ea4f88ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c240deb4b2445a4b6a87742fd8fa897 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 120, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c240deb4b2445a4b6a87742fd8fa897::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c240deb4b2445a4b6a87742fd8fa897:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c240deb4b2445a4b6a87742fd8fa897" class="color" data-tooltip="RGBA: 250, 120, 118, 1.0
   HEXA: #fa7876ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0d205ed2e234bd6bff6f9030797258b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 169, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0d205ed2e234bd6bff6f9030797258b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0d205ed2e234bd6bff6f9030797258b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0d205ed2e234bd6bff6f9030797258b" class="color" data-tooltip="RGBA: 246, 169, 122, 1.0
   HEXA: #f6a97aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ff93b1438f974d9b9f6bc4675569a762 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 217, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ff93b1438f974d9b9f6bc4675569a762::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ff93b1438f974d9b9f6bc4675569a762:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ff93b1438f974d9b9f6bc4675569a762" class="color" data-tooltip="RGBA: 237, 217, 163, 1.0
   HEXA: #edd9a3ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_430ed3b510374708ac89fb31899b1127 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_430ed3b510374708ac89fb31899b1127 div { flex: 1 1 0; }
           #_430ed3b510374708ac89fb31899b1127 div.color { width: 100%; height: 100%; }
           #_430ed3b510374708ac89fb31899b1127 div.cmap { width: 100%; height: auto; }
           #_430ed3b510374708ac89fb31899b1127 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Brwnyl</strong>
       
       <div id="_430ed3b510374708ac89fb31899b1127" class="color-map">
           
                           <div>
                   <style>
       #_f515ade7acea41febcf1dc36df65c796 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 229, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f515ade7acea41febcf1dc36df65c796::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f515ade7acea41febcf1dc36df65c796:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f515ade7acea41febcf1dc36df65c796" class="color" data-tooltip="RGBA: 237, 229, 207, 1.0
   HEXA: #ede5cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf074e47b75f440cb52a5b15c101d2b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 194, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf074e47b75f440cb52a5b15c101d2b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf074e47b75f440cb52a5b15c101d2b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf074e47b75f440cb52a5b15c101d2b3" class="color" data-tooltip="RGBA: 224, 194, 162, 1.0
   HEXA: #e0c2a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c66a8c905ee4ebc85a38f4dbd7ce073 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 156, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c66a8c905ee4ebc85a38f4dbd7ce073::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c66a8c905ee4ebc85a38f4dbd7ce073:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c66a8c905ee4ebc85a38f4dbd7ce073" class="color" data-tooltip="RGBA: 211, 156, 131, 1.0
   HEXA: #d39c83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_439a1dc5f5da48a1bfafc85b8db83261 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 118, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_439a1dc5f5da48a1bfafc85b8db83261::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_439a1dc5f5da48a1bfafc85b8db83261:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_439a1dc5f5da48a1bfafc85b8db83261" class="color" data-tooltip="RGBA: 193, 118, 111, 1.0
   HEXA: #c1766fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc1d5c3f473d4ee385fc186a8ca1e85b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 84, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc1d5c3f473d4ee385fc186a8ca1e85b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc1d5c3f473d4ee385fc186a8ca1e85b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc1d5c3f473d4ee385fc186a8ca1e85b" class="color" data-tooltip="RGBA: 166, 84, 97, 1.0
   HEXA: #a65461ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_75a0c8e3e1d445568bbbdf6b9d3cba53 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 55, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75a0c8e3e1d445568bbbdf6b9d3cba53::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75a0c8e3e1d445568bbbdf6b9d3cba53:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75a0c8e3e1d445568bbbdf6b9d3cba53" class="color" data-tooltip="RGBA: 129, 55, 83, 1.0
   HEXA: #813753ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e06a9be89cd24f35b2c49135a06569f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 31, 63, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e06a9be89cd24f35b2c49135a06569f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e06a9be89cd24f35b2c49135a06569f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e06a9be89cd24f35b2c49135a06569f8" class="color" data-tooltip="RGBA: 84, 31, 63, 1.0
   HEXA: #541f3fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
   </div>


|


----


Diverging
---------

.. raw:: html


   <div id="_f955d426b43b4c5da0cd7d7a2d068ac2" class="color-swatch">
       <style>
           #_f955d426b43b4c5da0cd7d7a2d068ac2 {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
               gap: 0.5rem 1rem;
               justify-content: space-between;
               overflow: hidden;
               resize: both;
               width: min(65rem, 100%);
           }
           #_f955d426b43b4c5da0cd7d7a2d068ac2 div {
               width: 100%;
           }
           #_f955d426b43b4c5da0cd7d7a2d068ac2 > div.gradient {
               width: 100%;
               height: min(4rem, 100%);
               display: grid;
               gap: 0.2rem;
               grid-template-rows: 1rem auto;
           }
           #_f955d426b43b4c5da0cd7d7a2d068ac2 .color {
               height: minmax(1.5rem, 100%);
           }
           #_f955d426b43b4c5da0cd7d7a2d068ac2 > div.gradient > strong {
               margin: 0;
               padding: 0;
           }
           #_f955d426b43b4c5da0cd7d7a2d068ac2 img {height: 100%;}
       </style>
       
           <div class="gradient">
       <style>
           #_c894404829044c218823d98c908bc365 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c894404829044c218823d98c908bc365 div { flex: 1 1 0; }
           #_c894404829044c218823d98c908bc365 div.color { width: 100%; height: 100%; }
           #_c894404829044c218823d98c908bc365 div.cmap { width: 100%; height: auto; }
           #_c894404829044c218823d98c908bc365 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>BrBG</strong>
       
       <div id="_c894404829044c218823d98c908bc365" class="color-map">
           
                           <div>
                   <style>
       #_26563a1a43184fffb4f5963ce47252a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 48, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26563a1a43184fffb4f5963ce47252a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26563a1a43184fffb4f5963ce47252a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26563a1a43184fffb4f5963ce47252a2" class="color" data-tooltip="RGBA: 84, 48, 5, 1.0
   HEXA: #543005ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1fa92a50e3c3485f9df09d5d700aea0e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 81, 10, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1fa92a50e3c3485f9df09d5d700aea0e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1fa92a50e3c3485f9df09d5d700aea0e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1fa92a50e3c3485f9df09d5d700aea0e" class="color" data-tooltip="RGBA: 140, 81, 10, 1.0
   HEXA: #8c510aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fd29b82f01d54fd0a5c46923ac37acf3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 129, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fd29b82f01d54fd0a5c46923ac37acf3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fd29b82f01d54fd0a5c46923ac37acf3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fd29b82f01d54fd0a5c46923ac37acf3" class="color" data-tooltip="RGBA: 191, 129, 45, 1.0
   HEXA: #bf812dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_72d1853d5c9a4169a55b7e90544afcd3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 194, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_72d1853d5c9a4169a55b7e90544afcd3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_72d1853d5c9a4169a55b7e90544afcd3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_72d1853d5c9a4169a55b7e90544afcd3" class="color" data-tooltip="RGBA: 223, 194, 125, 1.0
   HEXA: #dfc27dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f70ed4c62f2e46218203e0fd7f16437d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 232, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f70ed4c62f2e46218203e0fd7f16437d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f70ed4c62f2e46218203e0fd7f16437d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f70ed4c62f2e46218203e0fd7f16437d" class="color" data-tooltip="RGBA: 246, 232, 195, 1.0
   HEXA: #f6e8c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64245ec01754456596d4557ce1289e0f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 245, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64245ec01754456596d4557ce1289e0f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64245ec01754456596d4557ce1289e0f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64245ec01754456596d4557ce1289e0f" class="color" data-tooltip="RGBA: 245, 245, 245, 1.0
   HEXA: #f5f5f5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c2a311fc682346f4b00fa2ec7f014810 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 234, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c2a311fc682346f4b00fa2ec7f014810::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c2a311fc682346f4b00fa2ec7f014810:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c2a311fc682346f4b00fa2ec7f014810" class="color" data-tooltip="RGBA: 199, 234, 229, 1.0
   HEXA: #c7eae5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e3c79296c604bd9a1d3f2c5e9c2ad5d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 205, 193, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e3c79296c604bd9a1d3f2c5e9c2ad5d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e3c79296c604bd9a1d3f2c5e9c2ad5d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e3c79296c604bd9a1d3f2c5e9c2ad5d" class="color" data-tooltip="RGBA: 128, 205, 193, 1.0
   HEXA: #80cdc1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c02f51d938d4d6ba53fa7fa1c886bc6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 151, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c02f51d938d4d6ba53fa7fa1c886bc6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c02f51d938d4d6ba53fa7fa1c886bc6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c02f51d938d4d6ba53fa7fa1c886bc6" class="color" data-tooltip="RGBA: 53, 151, 143, 1.0
   HEXA: #35978fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6ea0a1143d0c4f85a91251ae277ca4d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 102, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ea0a1143d0c4f85a91251ae277ca4d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ea0a1143d0c4f85a91251ae277ca4d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ea0a1143d0c4f85a91251ae277ca4d9" class="color" data-tooltip="RGBA: 1, 102, 94, 1.0
   HEXA: #01665eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81ce84b5cd01428c8f09d80a37814086 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 60, 48, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81ce84b5cd01428c8f09d80a37814086::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81ce84b5cd01428c8f09d80a37814086:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81ce84b5cd01428c8f09d80a37814086" class="color" data-tooltip="RGBA: 0, 60, 48, 1.0
   HEXA: #003c30ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_90fea504b57d4841854c5616236f45f2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_90fea504b57d4841854c5616236f45f2 div { flex: 1 1 0; }
           #_90fea504b57d4841854c5616236f45f2 div.color { width: 100%; height: 100%; }
           #_90fea504b57d4841854c5616236f45f2 div.cmap { width: 100%; height: auto; }
           #_90fea504b57d4841854c5616236f45f2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PRGn</strong>
       
       <div id="_90fea504b57d4841854c5616236f45f2" class="color-map">
           
                           <div>
                   <style>
       #_d505bfc665154009b6c72bcfaec2efae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 0, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d505bfc665154009b6c72bcfaec2efae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d505bfc665154009b6c72bcfaec2efae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d505bfc665154009b6c72bcfaec2efae" class="color" data-tooltip="RGBA: 64, 0, 75, 1.0
   HEXA: #40004bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ecc292f0cb74439f89c038bebc46547e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 42, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ecc292f0cb74439f89c038bebc46547e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ecc292f0cb74439f89c038bebc46547e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ecc292f0cb74439f89c038bebc46547e" class="color" data-tooltip="RGBA: 118, 42, 131, 1.0
   HEXA: #762a83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6231d5363854000b912f054123453a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 112, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6231d5363854000b912f054123453a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6231d5363854000b912f054123453a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6231d5363854000b912f054123453a5" class="color" data-tooltip="RGBA: 153, 112, 171, 1.0
   HEXA: #9970abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_36744a0609e94811a1caca75ff6602bc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 165, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36744a0609e94811a1caca75ff6602bc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36744a0609e94811a1caca75ff6602bc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36744a0609e94811a1caca75ff6602bc" class="color" data-tooltip="RGBA: 194, 165, 207, 1.0
   HEXA: #c2a5cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f63f44ba22894ed3984a8db8914a44d0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 212, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f63f44ba22894ed3984a8db8914a44d0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f63f44ba22894ed3984a8db8914a44d0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f63f44ba22894ed3984a8db8914a44d0" class="color" data-tooltip="RGBA: 231, 212, 232, 1.0
   HEXA: #e7d4e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b8f59e7419b54264a4d1abd8b919780a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b8f59e7419b54264a4d1abd8b919780a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b8f59e7419b54264a4d1abd8b919780a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b8f59e7419b54264a4d1abd8b919780a" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_33e7175ddd954b8285ed1bb94226edbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 240, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_33e7175ddd954b8285ed1bb94226edbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_33e7175ddd954b8285ed1bb94226edbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_33e7175ddd954b8285ed1bb94226edbd" class="color" data-tooltip="RGBA: 217, 240, 211, 1.0
   HEXA: #d9f0d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8fdeabd7ce824b6c98c2c62262922ef5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 219, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8fdeabd7ce824b6c98c2c62262922ef5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8fdeabd7ce824b6c98c2c62262922ef5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8fdeabd7ce824b6c98c2c62262922ef5" class="color" data-tooltip="RGBA: 166, 219, 160, 1.0
   HEXA: #a6dba0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50f28c6680db4898be5675f12dfbe2f0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(90, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50f28c6680db4898be5675f12dfbe2f0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50f28c6680db4898be5675f12dfbe2f0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50f28c6680db4898be5675f12dfbe2f0" class="color" data-tooltip="RGBA: 90, 174, 97, 1.0
   HEXA: #5aae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c3c9f85a6506410da69d0de43b8b8f53 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 120, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c3c9f85a6506410da69d0de43b8b8f53::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c3c9f85a6506410da69d0de43b8b8f53:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c3c9f85a6506410da69d0de43b8b8f53" class="color" data-tooltip="RGBA: 27, 120, 55, 1.0
   HEXA: #1b7837ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2bd51ea049504d3ea0b716cfa412fde9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2bd51ea049504d3ea0b716cfa412fde9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2bd51ea049504d3ea0b716cfa412fde9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2bd51ea049504d3ea0b716cfa412fde9" class="color" data-tooltip="RGBA: 0, 68, 27, 1.0
   HEXA: #00441bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5c0daf18bab6480d89cd002e527e5583 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5c0daf18bab6480d89cd002e527e5583 div { flex: 1 1 0; }
           #_5c0daf18bab6480d89cd002e527e5583 div.color { width: 100%; height: 100%; }
           #_5c0daf18bab6480d89cd002e527e5583 div.cmap { width: 100%; height: auto; }
           #_5c0daf18bab6480d89cd002e527e5583 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PiYG</strong>
       
       <div id="_5c0daf18bab6480d89cd002e527e5583" class="color-map">
           
                           <div>
                   <style>
       #_a071f934b2aa4f62ac16159de569c2eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 1, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a071f934b2aa4f62ac16159de569c2eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a071f934b2aa4f62ac16159de569c2eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a071f934b2aa4f62ac16159de569c2eb" class="color" data-tooltip="RGBA: 142, 1, 82, 1.0
   HEXA: #8e0152ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_20dd28494bf24077b4fbd42f0b825731 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 27, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_20dd28494bf24077b4fbd42f0b825731::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_20dd28494bf24077b4fbd42f0b825731:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_20dd28494bf24077b4fbd42f0b825731" class="color" data-tooltip="RGBA: 197, 27, 125, 1.0
   HEXA: #c51b7dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea7822b068394065894a3b3ac0da4a7e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 119, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea7822b068394065894a3b3ac0da4a7e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea7822b068394065894a3b3ac0da4a7e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea7822b068394065894a3b3ac0da4a7e" class="color" data-tooltip="RGBA: 222, 119, 174, 1.0
   HEXA: #de77aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66d96f55cfb64b60bd150a7bd5ce02a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 182, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66d96f55cfb64b60bd150a7bd5ce02a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66d96f55cfb64b60bd150a7bd5ce02a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66d96f55cfb64b60bd150a7bd5ce02a4" class="color" data-tooltip="RGBA: 241, 182, 218, 1.0
   HEXA: #f1b6daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9f6f6b471cd34dfda07bfaf32e3b4260 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 224, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9f6f6b471cd34dfda07bfaf32e3b4260::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9f6f6b471cd34dfda07bfaf32e3b4260:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9f6f6b471cd34dfda07bfaf32e3b4260" class="color" data-tooltip="RGBA: 253, 224, 239, 1.0
   HEXA: #fde0efff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9bccf32dec3046b6a8db188efa7fab4f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9bccf32dec3046b6a8db188efa7fab4f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9bccf32dec3046b6a8db188efa7fab4f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9bccf32dec3046b6a8db188efa7fab4f" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee94949e4ef1420091e4a7a5daf28cd5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 208, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee94949e4ef1420091e4a7a5daf28cd5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee94949e4ef1420091e4a7a5daf28cd5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee94949e4ef1420091e4a7a5daf28cd5" class="color" data-tooltip="RGBA: 230, 245, 208, 1.0
   HEXA: #e6f5d0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15491c07d460437f9d545825a67e6bd7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(184, 225, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15491c07d460437f9d545825a67e6bd7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15491c07d460437f9d545825a67e6bd7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15491c07d460437f9d545825a67e6bd7" class="color" data-tooltip="RGBA: 184, 225, 134, 1.0
   HEXA: #b8e186ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45e2991ca01f4a70bc7658af5a5d342c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 188, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45e2991ca01f4a70bc7658af5a5d342c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45e2991ca01f4a70bc7658af5a5d342c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45e2991ca01f4a70bc7658af5a5d342c" class="color" data-tooltip="RGBA: 127, 188, 65, 1.0
   HEXA: #7fbc41ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fcbb9599771f44f78efa1b77cc25ae24 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 146, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fcbb9599771f44f78efa1b77cc25ae24::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fcbb9599771f44f78efa1b77cc25ae24:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fcbb9599771f44f78efa1b77cc25ae24" class="color" data-tooltip="RGBA: 77, 146, 33, 1.0
   HEXA: #4d9221ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6bfb2a7f6ba74e75a43a0b423f688cc2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 100, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6bfb2a7f6ba74e75a43a0b423f688cc2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6bfb2a7f6ba74e75a43a0b423f688cc2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6bfb2a7f6ba74e75a43a0b423f688cc2" class="color" data-tooltip="RGBA: 39, 100, 25, 1.0
   HEXA: #276419ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4fb78182e6fb4777a83f6484708df8b7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4fb78182e6fb4777a83f6484708df8b7 div { flex: 1 1 0; }
           #_4fb78182e6fb4777a83f6484708df8b7 div.color { width: 100%; height: 100%; }
           #_4fb78182e6fb4777a83f6484708df8b7 div.cmap { width: 100%; height: auto; }
           #_4fb78182e6fb4777a83f6484708df8b7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>PuOr</strong>
       
       <div id="_4fb78182e6fb4777a83f6484708df8b7" class="color-map">
           
                           <div>
                   <style>
       #_07cbe538b6f84c63906ac43fa23256f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 59, 8, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_07cbe538b6f84c63906ac43fa23256f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_07cbe538b6f84c63906ac43fa23256f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_07cbe538b6f84c63906ac43fa23256f8" class="color" data-tooltip="RGBA: 127, 59, 8, 1.0
   HEXA: #7f3b08ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea738394701046cfbb548a8426541ba1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 88, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea738394701046cfbb548a8426541ba1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea738394701046cfbb548a8426541ba1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea738394701046cfbb548a8426541ba1" class="color" data-tooltip="RGBA: 179, 88, 6, 1.0
   HEXA: #b35806ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6579c969e094944bb80525dd3e979d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 130, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6579c969e094944bb80525dd3e979d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6579c969e094944bb80525dd3e979d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6579c969e094944bb80525dd3e979d4" class="color" data-tooltip="RGBA: 224, 130, 20, 1.0
   HEXA: #e08214ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c62fc94f84a1414c9c4211c1c9320808 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 184, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c62fc94f84a1414c9c4211c1c9320808::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c62fc94f84a1414c9c4211c1c9320808:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c62fc94f84a1414c9c4211c1c9320808" class="color" data-tooltip="RGBA: 253, 184, 99, 1.0
   HEXA: #fdb863ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53ac36eea9574d9aa3cb393c1ba8979d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 182, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53ac36eea9574d9aa3cb393c1ba8979d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53ac36eea9574d9aa3cb393c1ba8979d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53ac36eea9574d9aa3cb393c1ba8979d" class="color" data-tooltip="RGBA: 254, 224, 182, 1.0
   HEXA: #fee0b6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b94efab9c069457bad55e877cac26cdd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b94efab9c069457bad55e877cac26cdd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b94efab9c069457bad55e877cac26cdd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b94efab9c069457bad55e877cac26cdd" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b5b67e753b64626b11d7bc9279c2670 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 218, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b5b67e753b64626b11d7bc9279c2670::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b5b67e753b64626b11d7bc9279c2670:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b5b67e753b64626b11d7bc9279c2670" class="color" data-tooltip="RGBA: 216, 218, 235, 1.0
   HEXA: #d8daebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b13e0afac8bd45f690456a882dcbe35d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 171, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b13e0afac8bd45f690456a882dcbe35d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b13e0afac8bd45f690456a882dcbe35d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b13e0afac8bd45f690456a882dcbe35d" class="color" data-tooltip="RGBA: 178, 171, 210, 1.0
   HEXA: #b2abd2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_daf2f76214dd49e3a823d1de3f18629f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 115, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_daf2f76214dd49e3a823d1de3f18629f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_daf2f76214dd49e3a823d1de3f18629f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_daf2f76214dd49e3a823d1de3f18629f" class="color" data-tooltip="RGBA: 128, 115, 172, 1.0
   HEXA: #8073acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d6221274b1c4997bd59639c9d861855 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 39, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d6221274b1c4997bd59639c9d861855::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d6221274b1c4997bd59639c9d861855:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d6221274b1c4997bd59639c9d861855" class="color" data-tooltip="RGBA: 84, 39, 136, 1.0
   HEXA: #542788ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ad7d302ebb2448529b9482d568ad2cb9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(45, 0, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ad7d302ebb2448529b9482d568ad2cb9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ad7d302ebb2448529b9482d568ad2cb9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ad7d302ebb2448529b9482d568ad2cb9" class="color" data-tooltip="RGBA: 45, 0, 75, 1.0
   HEXA: #2d004bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f7f3f2be9add4339a311d1216b22ede8 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f7f3f2be9add4339a311d1216b22ede8 div { flex: 1 1 0; }
           #_f7f3f2be9add4339a311d1216b22ede8 div.color { width: 100%; height: 100%; }
           #_f7f3f2be9add4339a311d1216b22ede8 div.cmap { width: 100%; height: auto; }
           #_f7f3f2be9add4339a311d1216b22ede8 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdBu</strong>
       
       <div id="_f7f3f2be9add4339a311d1216b22ede8" class="color-map">
           
                           <div>
                   <style>
       #_08dbb1c5c40b488ea8d53bcdc13c828f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_08dbb1c5c40b488ea8d53bcdc13c828f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_08dbb1c5c40b488ea8d53bcdc13c828f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_08dbb1c5c40b488ea8d53bcdc13c828f" class="color" data-tooltip="RGBA: 103, 0, 31, 1.0
   HEXA: #67001fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_32ca6f09507d45b286a85e0dd5608581 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 24, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_32ca6f09507d45b286a85e0dd5608581::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_32ca6f09507d45b286a85e0dd5608581:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_32ca6f09507d45b286a85e0dd5608581" class="color" data-tooltip="RGBA: 178, 24, 43, 1.0
   HEXA: #b2182bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d58acbb597804700b9b651e11e0aaca9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 96, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d58acbb597804700b9b651e11e0aaca9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d58acbb597804700b9b651e11e0aaca9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d58acbb597804700b9b651e11e0aaca9" class="color" data-tooltip="RGBA: 214, 96, 77, 1.0
   HEXA: #d6604dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d1d713a598784bf785f5ea8369e52f6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 165, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d1d713a598784bf785f5ea8369e52f6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d1d713a598784bf785f5ea8369e52f6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d1d713a598784bf785f5ea8369e52f6c" class="color" data-tooltip="RGBA: 244, 165, 130, 1.0
   HEXA: #f4a582ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d95a09819894006a923402a104e6a37 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 219, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d95a09819894006a923402a104e6a37::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d95a09819894006a923402a104e6a37:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d95a09819894006a923402a104e6a37" class="color" data-tooltip="RGBA: 253, 219, 199, 1.0
   HEXA: #fddbc7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d78c01237abe41b1977c38fa1635dfbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d78c01237abe41b1977c38fa1635dfbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d78c01237abe41b1977c38fa1635dfbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d78c01237abe41b1977c38fa1635dfbd" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b240743f4f534d16a87ae16d52781d6a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 229, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b240743f4f534d16a87ae16d52781d6a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b240743f4f534d16a87ae16d52781d6a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b240743f4f534d16a87ae16d52781d6a" class="color" data-tooltip="RGBA: 209, 229, 240, 1.0
   HEXA: #d1e5f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ffa7cc7917f4445088b6203bcd085799 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 197, 222, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ffa7cc7917f4445088b6203bcd085799::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ffa7cc7917f4445088b6203bcd085799:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ffa7cc7917f4445088b6203bcd085799" class="color" data-tooltip="RGBA: 146, 197, 222, 1.0
   HEXA: #92c5deff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_727848b147f34bb3953bea15498fe12c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(67, 147, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_727848b147f34bb3953bea15498fe12c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_727848b147f34bb3953bea15498fe12c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_727848b147f34bb3953bea15498fe12c" class="color" data-tooltip="RGBA: 67, 147, 195, 1.0
   HEXA: #4393c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_225c237356ad4d0faa5d39a219828be3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 102, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_225c237356ad4d0faa5d39a219828be3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_225c237356ad4d0faa5d39a219828be3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_225c237356ad4d0faa5d39a219828be3" class="color" data-tooltip="RGBA: 33, 102, 172, 1.0
   HEXA: #2166acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_24643c33dd44491dae106e5d56348a0c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 48, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_24643c33dd44491dae106e5d56348a0c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_24643c33dd44491dae106e5d56348a0c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_24643c33dd44491dae106e5d56348a0c" class="color" data-tooltip="RGBA: 5, 48, 97, 1.0
   HEXA: #053061ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6500163dfc9143c9b7db78c9b09b3531 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6500163dfc9143c9b7db78c9b09b3531 div { flex: 1 1 0; }
           #_6500163dfc9143c9b7db78c9b09b3531 div.color { width: 100%; height: 100%; }
           #_6500163dfc9143c9b7db78c9b09b3531 div.cmap { width: 100%; height: auto; }
           #_6500163dfc9143c9b7db78c9b09b3531 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdGy</strong>
       
       <div id="_6500163dfc9143c9b7db78c9b09b3531" class="color-map">
           
                           <div>
                   <style>
       #_ecb4b74a9f8b4629bb866b34c6715c5f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ecb4b74a9f8b4629bb866b34c6715c5f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ecb4b74a9f8b4629bb866b34c6715c5f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ecb4b74a9f8b4629bb866b34c6715c5f" class="color" data-tooltip="RGBA: 103, 0, 31, 1.0
   HEXA: #67001fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9a7a91c8ce64da6840b1dc1a91e224c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 24, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9a7a91c8ce64da6840b1dc1a91e224c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9a7a91c8ce64da6840b1dc1a91e224c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9a7a91c8ce64da6840b1dc1a91e224c" class="color" data-tooltip="RGBA: 178, 24, 43, 1.0
   HEXA: #b2182bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9229398f4e57433d805278eb0fab12ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 96, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9229398f4e57433d805278eb0fab12ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9229398f4e57433d805278eb0fab12ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9229398f4e57433d805278eb0fab12ac" class="color" data-tooltip="RGBA: 214, 96, 77, 1.0
   HEXA: #d6604dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e003d2a5f8984353bdce3910f7ef107e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 165, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e003d2a5f8984353bdce3910f7ef107e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e003d2a5f8984353bdce3910f7ef107e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e003d2a5f8984353bdce3910f7ef107e" class="color" data-tooltip="RGBA: 244, 165, 130, 1.0
   HEXA: #f4a582ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6cad6827efe443bbab7e6f9d2fd1d30b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 219, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6cad6827efe443bbab7e6f9d2fd1d30b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6cad6827efe443bbab7e6f9d2fd1d30b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6cad6827efe443bbab7e6f9d2fd1d30b" class="color" data-tooltip="RGBA: 253, 219, 199, 1.0
   HEXA: #fddbc7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_966df12521ad4501b02110172c390e1b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_966df12521ad4501b02110172c390e1b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_966df12521ad4501b02110172c390e1b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_966df12521ad4501b02110172c390e1b" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c0e868378a66459185729b27eee3dbed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 224, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c0e868378a66459185729b27eee3dbed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c0e868378a66459185729b27eee3dbed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c0e868378a66459185729b27eee3dbed" class="color" data-tooltip="RGBA: 224, 224, 224, 1.0
   HEXA: #e0e0e0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ae7d7811e1044ee3a92cabbcef603197 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 186, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ae7d7811e1044ee3a92cabbcef603197::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ae7d7811e1044ee3a92cabbcef603197:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ae7d7811e1044ee3a92cabbcef603197" class="color" data-tooltip="RGBA: 186, 186, 186, 1.0
   HEXA: #bababaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d61068dc441343ce98e25354e09e3e92 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 135, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d61068dc441343ce98e25354e09e3e92::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d61068dc441343ce98e25354e09e3e92:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d61068dc441343ce98e25354e09e3e92" class="color" data-tooltip="RGBA: 135, 135, 135, 1.0
   HEXA: #878787ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7552190adca34102a6ed19cb60c5aec1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 77, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7552190adca34102a6ed19cb60c5aec1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7552190adca34102a6ed19cb60c5aec1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7552190adca34102a6ed19cb60c5aec1" class="color" data-tooltip="RGBA: 77, 77, 77, 1.0
   HEXA: #4d4d4dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0342fb0439724a3b82d245e29078c11e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 26, 26, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0342fb0439724a3b82d245e29078c11e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0342fb0439724a3b82d245e29078c11e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0342fb0439724a3b82d245e29078c11e" class="color" data-tooltip="RGBA: 26, 26, 26, 1.0
   HEXA: #1a1a1aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1740764ad7bb4c11a9dc4f5946eae610 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1740764ad7bb4c11a9dc4f5946eae610 div { flex: 1 1 0; }
           #_1740764ad7bb4c11a9dc4f5946eae610 div.color { width: 100%; height: 100%; }
           #_1740764ad7bb4c11a9dc4f5946eae610 div.cmap { width: 100%; height: auto; }
           #_1740764ad7bb4c11a9dc4f5946eae610 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdYlBu</strong>
       
       <div id="_1740764ad7bb4c11a9dc4f5946eae610" class="color-map">
           
                           <div>
                   <style>
       #_feda51b07d7c4a65bb48654981a2192d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_feda51b07d7c4a65bb48654981a2192d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_feda51b07d7c4a65bb48654981a2192d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_feda51b07d7c4a65bb48654981a2192d" class="color" data-tooltip="RGBA: 165, 0, 38, 1.0
   HEXA: #a50026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d96549fd8434b039b2c0ae66c4057fd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 48, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d96549fd8434b039b2c0ae66c4057fd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d96549fd8434b039b2c0ae66c4057fd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d96549fd8434b039b2c0ae66c4057fd" class="color" data-tooltip="RGBA: 215, 48, 39, 1.0
   HEXA: #d73027ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9089dfb6fa094552bbbcc95569b24d14 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 109, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9089dfb6fa094552bbbcc95569b24d14::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9089dfb6fa094552bbbcc95569b24d14:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9089dfb6fa094552bbbcc95569b24d14" class="color" data-tooltip="RGBA: 244, 109, 67, 1.0
   HEXA: #f46d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c0b71c12e02440a788b0895923bfbe40 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c0b71c12e02440a788b0895923bfbe40::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c0b71c12e02440a788b0895923bfbe40:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c0b71c12e02440a788b0895923bfbe40" class="color" data-tooltip="RGBA: 253, 174, 97, 1.0
   HEXA: #fdae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c075da72a90b4cc186b349f5a7655aef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c075da72a90b4cc186b349f5a7655aef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c075da72a90b4cc186b349f5a7655aef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c075da72a90b4cc186b349f5a7655aef" class="color" data-tooltip="RGBA: 254, 224, 144, 1.0
   HEXA: #fee090ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_08b3b553b449464a976d906a4d29c904 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_08b3b553b449464a976d906a4d29c904::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_08b3b553b449464a976d906a4d29c904:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_08b3b553b449464a976d906a4d29c904" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64c52c4f61124cd3b262bb548b32bb17 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 243, 248, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64c52c4f61124cd3b262bb548b32bb17::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64c52c4f61124cd3b262bb548b32bb17:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64c52c4f61124cd3b262bb548b32bb17" class="color" data-tooltip="RGBA: 224, 243, 248, 1.0
   HEXA: #e0f3f8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82595a4d142d4291bda3c41be8361235 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 217, 233, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82595a4d142d4291bda3c41be8361235::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82595a4d142d4291bda3c41be8361235:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82595a4d142d4291bda3c41be8361235" class="color" data-tooltip="RGBA: 171, 217, 233, 1.0
   HEXA: #abd9e9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_073692c9a763495a80dc0cdab3487c98 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 173, 209, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_073692c9a763495a80dc0cdab3487c98::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_073692c9a763495a80dc0cdab3487c98:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_073692c9a763495a80dc0cdab3487c98" class="color" data-tooltip="RGBA: 116, 173, 209, 1.0
   HEXA: #74add1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_300e3519b0fa447889c68b4743ac906c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 117, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_300e3519b0fa447889c68b4743ac906c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_300e3519b0fa447889c68b4743ac906c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_300e3519b0fa447889c68b4743ac906c" class="color" data-tooltip="RGBA: 69, 117, 180, 1.0
   HEXA: #4575b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_49a53aabe08e42cda0bcca4bd5bddff2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 54, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_49a53aabe08e42cda0bcca4bd5bddff2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_49a53aabe08e42cda0bcca4bd5bddff2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_49a53aabe08e42cda0bcca4bd5bddff2" class="color" data-tooltip="RGBA: 49, 54, 149, 1.0
   HEXA: #313695ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a1125efc420f4bdf94e86b6269289781 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a1125efc420f4bdf94e86b6269289781 div { flex: 1 1 0; }
           #_a1125efc420f4bdf94e86b6269289781 div.color { width: 100%; height: 100%; }
           #_a1125efc420f4bdf94e86b6269289781 div.cmap { width: 100%; height: auto; }
           #_a1125efc420f4bdf94e86b6269289781 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>RdYlGn</strong>
       
       <div id="_a1125efc420f4bdf94e86b6269289781" class="color-map">
           
                           <div>
                   <style>
       #_a6021c735b0241968d2d79b4c37221a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6021c735b0241968d2d79b4c37221a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6021c735b0241968d2d79b4c37221a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6021c735b0241968d2d79b4c37221a2" class="color" data-tooltip="RGBA: 165, 0, 38, 1.0
   HEXA: #a50026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b033427a076c4d04b52ecef1ee5f4cdd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 48, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b033427a076c4d04b52ecef1ee5f4cdd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b033427a076c4d04b52ecef1ee5f4cdd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b033427a076c4d04b52ecef1ee5f4cdd" class="color" data-tooltip="RGBA: 215, 48, 39, 1.0
   HEXA: #d73027ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_af9c6b5894b446dda23fabe546dea270 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 109, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_af9c6b5894b446dda23fabe546dea270::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_af9c6b5894b446dda23fabe546dea270:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_af9c6b5894b446dda23fabe546dea270" class="color" data-tooltip="RGBA: 244, 109, 67, 1.0
   HEXA: #f46d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9a9b55dadd54fb58c495c3f5920362f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9a9b55dadd54fb58c495c3f5920362f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9a9b55dadd54fb58c495c3f5920362f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9a9b55dadd54fb58c495c3f5920362f" class="color" data-tooltip="RGBA: 253, 174, 97, 1.0
   HEXA: #fdae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d82ef67f09ab40b5a57bdf00beb539f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d82ef67f09ab40b5a57bdf00beb539f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d82ef67f09ab40b5a57bdf00beb539f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d82ef67f09ab40b5a57bdf00beb539f3" class="color" data-tooltip="RGBA: 254, 224, 139, 1.0
   HEXA: #fee08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2d47b4c5ea47458abc77d9c608aeeca1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2d47b4c5ea47458abc77d9c608aeeca1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2d47b4c5ea47458abc77d9c608aeeca1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2d47b4c5ea47458abc77d9c608aeeca1" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf6122b0f7d3412b880fc68b781d2ddd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 239, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf6122b0f7d3412b880fc68b781d2ddd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf6122b0f7d3412b880fc68b781d2ddd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf6122b0f7d3412b880fc68b781d2ddd" class="color" data-tooltip="RGBA: 217, 239, 139, 1.0
   HEXA: #d9ef8bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_76e5c9269d2e4800b3a7fa594068d7dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 217, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_76e5c9269d2e4800b3a7fa594068d7dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_76e5c9269d2e4800b3a7fa594068d7dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_76e5c9269d2e4800b3a7fa594068d7dd" class="color" data-tooltip="RGBA: 166, 217, 106, 1.0
   HEXA: #a6d96aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a16015f103714a6a93d876fdc2c1ab40 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 189, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a16015f103714a6a93d876fdc2c1ab40::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a16015f103714a6a93d876fdc2c1ab40:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a16015f103714a6a93d876fdc2c1ab40" class="color" data-tooltip="RGBA: 102, 189, 99, 1.0
   HEXA: #66bd63ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3056e2cfd99b45569adf19331d0b646b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 152, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3056e2cfd99b45569adf19331d0b646b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3056e2cfd99b45569adf19331d0b646b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3056e2cfd99b45569adf19331d0b646b" class="color" data-tooltip="RGBA: 26, 152, 80, 1.0
   HEXA: #1a9850ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a1c1e73c5f0e43379031de6e7ccc4848 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 104, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a1c1e73c5f0e43379031de6e7ccc4848::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a1c1e73c5f0e43379031de6e7ccc4848:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a1c1e73c5f0e43379031de6e7ccc4848" class="color" data-tooltip="RGBA: 0, 104, 55, 1.0
   HEXA: #006837ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c060b33694844b3aabcca9a94f0be294 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c060b33694844b3aabcca9a94f0be294 div { flex: 1 1 0; }
           #_c060b33694844b3aabcca9a94f0be294 div.color { width: 100%; height: 100%; }
           #_c060b33694844b3aabcca9a94f0be294 div.cmap { width: 100%; height: auto; }
           #_c060b33694844b3aabcca9a94f0be294 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Spectral</strong>
       
       <div id="_c060b33694844b3aabcca9a94f0be294" class="color-map">
           
                           <div>
                   <style>
       #_77aacce3620e4aa8a57fdd5b9453de62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 1, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_77aacce3620e4aa8a57fdd5b9453de62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_77aacce3620e4aa8a57fdd5b9453de62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_77aacce3620e4aa8a57fdd5b9453de62" class="color" data-tooltip="RGBA: 158, 1, 66, 1.0
   HEXA: #9e0142ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_41253bb9993b4e8983ff09d7d8004941 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 62, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_41253bb9993b4e8983ff09d7d8004941::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_41253bb9993b4e8983ff09d7d8004941:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_41253bb9993b4e8983ff09d7d8004941" class="color" data-tooltip="RGBA: 213, 62, 79, 1.0
   HEXA: #d53e4fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7245535e94b8462cba9f89eca48686c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 109, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7245535e94b8462cba9f89eca48686c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7245535e94b8462cba9f89eca48686c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7245535e94b8462cba9f89eca48686c7" class="color" data-tooltip="RGBA: 244, 109, 67, 1.0
   HEXA: #f46d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_24e22a9c225b45819b89bc7d05423340 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_24e22a9c225b45819b89bc7d05423340::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_24e22a9c225b45819b89bc7d05423340:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_24e22a9c225b45819b89bc7d05423340" class="color" data-tooltip="RGBA: 253, 174, 97, 1.0
   HEXA: #fdae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab040977e7c540048816f271d152cf66 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab040977e7c540048816f271d152cf66::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab040977e7c540048816f271d152cf66:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab040977e7c540048816f271d152cf66" class="color" data-tooltip="RGBA: 254, 224, 139, 1.0
   HEXA: #fee08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ae4c8bbf3ea34ab7a97f0bdff795db04 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ae4c8bbf3ea34ab7a97f0bdff795db04::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ae4c8bbf3ea34ab7a97f0bdff795db04:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ae4c8bbf3ea34ab7a97f0bdff795db04" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2da33b5a8697454fa2f5536866b07c1b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2da33b5a8697454fa2f5536866b07c1b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2da33b5a8697454fa2f5536866b07c1b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2da33b5a8697454fa2f5536866b07c1b" class="color" data-tooltip="RGBA: 230, 245, 152, 1.0
   HEXA: #e6f598ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea2c8b41814840ac8b08d19cd868488e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 221, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea2c8b41814840ac8b08d19cd868488e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea2c8b41814840ac8b08d19cd868488e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea2c8b41814840ac8b08d19cd868488e" class="color" data-tooltip="RGBA: 171, 221, 164, 1.0
   HEXA: #abdda4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_69911a0d2e1b46c0930d9a5e06cea987 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 194, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_69911a0d2e1b46c0930d9a5e06cea987::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_69911a0d2e1b46c0930d9a5e06cea987:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_69911a0d2e1b46c0930d9a5e06cea987" class="color" data-tooltip="RGBA: 102, 194, 165, 1.0
   HEXA: #66c2a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_138f013306b24d0a9494203c56cb1153 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 136, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_138f013306b24d0a9494203c56cb1153::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_138f013306b24d0a9494203c56cb1153:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_138f013306b24d0a9494203c56cb1153" class="color" data-tooltip="RGBA: 50, 136, 189, 1.0
   HEXA: #3288bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d2beb4843b04514a95b295fe78e0c9b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 79, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d2beb4843b04514a95b295fe78e0c9b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d2beb4843b04514a95b295fe78e0c9b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d2beb4843b04514a95b295fe78e0c9b" class="color" data-tooltip="RGBA: 94, 79, 162, 1.0
   HEXA: #5e4fa2ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_eca76fa293444468bb0caab562691e62 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_eca76fa293444468bb0caab562691e62 div { flex: 1 1 0; }
           #_eca76fa293444468bb0caab562691e62 div.color { width: 100%; height: 100%; }
           #_eca76fa293444468bb0caab562691e62 div.cmap { width: 100%; height: auto; }
           #_eca76fa293444468bb0caab562691e62 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>balance</strong>
       
       <div id="_eca76fa293444468bb0caab562691e62" class="color-map">
           
                           <div>
                   <style>
       #_26ac5c332b3845aa9d630d4ec882dc98 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 28, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26ac5c332b3845aa9d630d4ec882dc98::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26ac5c332b3845aa9d630d4ec882dc98:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26ac5c332b3845aa9d630d4ec882dc98" class="color" data-tooltip="RGBA: 23, 28, 66, 1.0
   HEXA: #171c42ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c488bbd55bad437f873c0fd0f375ffc6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 58, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c488bbd55bad437f873c0fd0f375ffc6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c488bbd55bad437f873c0fd0f375ffc6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c488bbd55bad437f873c0fd0f375ffc6" class="color" data-tooltip="RGBA: 41, 58, 143, 1.0
   HEXA: #293a8fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dd03a785e7a54782827d224f87840de9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(11, 102, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dd03a785e7a54782827d224f87840de9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dd03a785e7a54782827d224f87840de9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dd03a785e7a54782827d224f87840de9" class="color" data-tooltip="RGBA: 11, 102, 189, 1.0
   HEXA: #0b66bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7760d1f9783248acbb85878ec57aed34 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 144, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7760d1f9783248acbb85878ec57aed34::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7760d1f9783248acbb85878ec57aed34:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7760d1f9783248acbb85878ec57aed34" class="color" data-tooltip="RGBA: 69, 144, 185, 1.0
   HEXA: #4590b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d1b542093a1f4afdbba52b2a32083ea3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 181, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d1b542093a1f4afdbba52b2a32083ea3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d1b542093a1f4afdbba52b2a32083ea3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d1b542093a1f4afdbba52b2a32083ea3" class="color" data-tooltip="RGBA: 142, 181, 194, 1.0
   HEXA: #8eb5c2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_235433f512744b8389b798976f1979a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 216, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_235433f512744b8389b798976f1979a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_235433f512744b8389b798976f1979a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_235433f512744b8389b798976f1979a3" class="color" data-tooltip="RGBA: 210, 216, 219, 1.0
   HEXA: #d2d8dbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7b5f8777af249839f86ae2543cc55bb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 210, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7b5f8777af249839f86ae2543cc55bb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7b5f8777af249839f86ae2543cc55bb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7b5f8777af249839f86ae2543cc55bb" class="color" data-tooltip="RGBA: 230, 210, 204, 1.0
   HEXA: #e6d2ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_06421a95f5774cb6b796bfea76ac101a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 157, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_06421a95f5774cb6b796bfea76ac101a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_06421a95f5774cb6b796bfea76ac101a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_06421a95f5774cb6b796bfea76ac101a" class="color" data-tooltip="RGBA: 213, 157, 137, 1.0
   HEXA: #d59d89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f8fa59c193b64e5aae33390c2500bef2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 101, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f8fa59c193b64e5aae33390c2500bef2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f8fa59c193b64e5aae33390c2500bef2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f8fa59c193b64e5aae33390c2500bef2" class="color" data-tooltip="RGBA: 196, 101, 72, 1.0
   HEXA: #c46548ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_59c00f38f06243a9a3bc46572e6162ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 43, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59c00f38f06243a9a3bc46572e6162ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59c00f38f06243a9a3bc46572e6162ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59c00f38f06243a9a3bc46572e6162ac" class="color" data-tooltip="RGBA: 172, 43, 36, 1.0
   HEXA: #ac2b24ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e0ec06c9cad4db68e572274f67187e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 14, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e0ec06c9cad4db68e572274f67187e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e0ec06c9cad4db68e572274f67187e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e0ec06c9cad4db68e572274f67187e8" class="color" data-tooltip="RGBA: 120, 14, 40, 1.0
   HEXA: #780e28ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9dfe59b1ee448caa661ee76a1940720 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 9, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9dfe59b1ee448caa661ee76a1940720::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9dfe59b1ee448caa661ee76a1940720:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9dfe59b1ee448caa661ee76a1940720" class="color" data-tooltip="RGBA: 60, 9, 17, 1.0
   HEXA: #3c0911ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_469dd9fddf94443a978c04541b05d9d7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_469dd9fddf94443a978c04541b05d9d7 div { flex: 1 1 0; }
           #_469dd9fddf94443a978c04541b05d9d7 div.color { width: 100%; height: 100%; }
           #_469dd9fddf94443a978c04541b05d9d7 div.cmap { width: 100%; height: auto; }
           #_469dd9fddf94443a978c04541b05d9d7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>delta</strong>
       
       <div id="_469dd9fddf94443a978c04541b05d9d7" class="color-map">
           
                           <div>
                   <style>
       #_b83a354f3b174c95b23691b014e5d08c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 31, 63, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b83a354f3b174c95b23691b014e5d08c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b83a354f3b174c95b23691b014e5d08c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b83a354f3b174c95b23691b014e5d08c" class="color" data-tooltip="RGBA: 16, 31, 63, 1.0
   HEXA: #101f3fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4ed54130d0df44bc83a537f1f6c4d7d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 62, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4ed54130d0df44bc83a537f1f6c4d7d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4ed54130d0df44bc83a537f1f6c4d7d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4ed54130d0df44bc83a537f1f6c4d7d2" class="color" data-tooltip="RGBA: 38, 62, 144, 1.0
   HEXA: #263e90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab22eb890ecb4f379bfb936dd63fc78b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(30, 110, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab22eb890ecb4f379bfb936dd63fc78b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab22eb890ecb4f379bfb936dd63fc78b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab22eb890ecb4f379bfb936dd63fc78b" class="color" data-tooltip="RGBA: 30, 110, 161, 1.0
   HEXA: #1e6ea1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dac486f41fd843ad8297b8b34d8ccd40 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 154, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dac486f41fd843ad8297b8b34d8ccd40::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dac486f41fd843ad8297b8b34d8ccd40:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dac486f41fd843ad8297b8b34d8ccd40" class="color" data-tooltip="RGBA: 60, 154, 171, 1.0
   HEXA: #3c9aabff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa7fdb7e9536471bb3bbcf4818d36344 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 193, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa7fdb7e9536471bb3bbcf4818d36344::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa7fdb7e9536471bb3bbcf4818d36344:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa7fdb7e9536471bb3bbcf4818d36344" class="color" data-tooltip="RGBA: 140, 193, 186, 1.0
   HEXA: #8cc1baff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ca1a1373c11e40a182c62960df2ccd04 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 229, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ca1a1373c11e40a182c62960df2ccd04::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ca1a1373c11e40a182c62960df2ccd04:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ca1a1373c11e40a182c62960df2ccd04" class="color" data-tooltip="RGBA: 217, 229, 218, 1.0
   HEXA: #d9e5daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_07ade5f1a36847a0af972857ec804e51 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 226, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_07ade5f1a36847a0af972857ec804e51::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_07ade5f1a36847a0af972857ec804e51:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_07ade5f1a36847a0af972857ec804e51" class="color" data-tooltip="RGBA: 239, 226, 156, 1.0
   HEXA: #efe29cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f08da5f13ecd40b9b5ea265e378ef0c3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 182, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f08da5f13ecd40b9b5ea265e378ef0c3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f08da5f13ecd40b9b5ea265e378ef0c3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f08da5f13ecd40b9b5ea265e378ef0c3" class="color" data-tooltip="RGBA: 195, 182, 59, 1.0
   HEXA: #c3b63bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_89ad888dc8d841939f2fb1c43c9ea180 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 152, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_89ad888dc8d841939f2fb1c43c9ea180::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_89ad888dc8d841939f2fb1c43c9ea180:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_89ad888dc8d841939f2fb1c43c9ea180" class="color" data-tooltip="RGBA: 115, 152, 5, 1.0
   HEXA: #739805ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_352891ab93174a408cb95e0a6ec22d9d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 120, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_352891ab93174a408cb95e0a6ec22d9d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_352891ab93174a408cb95e0a6ec22d9d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_352891ab93174a408cb95e0a6ec22d9d" class="color" data-tooltip="RGBA: 34, 120, 36, 1.0
   HEXA: #227824ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b736fd265d1b49b1a539b453efa96008 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 78, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b736fd265d1b49b1a539b453efa96008::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b736fd265d1b49b1a539b453efa96008:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b736fd265d1b49b1a539b453efa96008" class="color" data-tooltip="RGBA: 18, 78, 43, 1.0
   HEXA: #124e2bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_83aa3fcd4ae541268b88849b548e3bdb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 35, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_83aa3fcd4ae541268b88849b548e3bdb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_83aa3fcd4ae541268b88849b548e3bdb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_83aa3fcd4ae541268b88849b548e3bdb" class="color" data-tooltip="RGBA: 23, 35, 18, 1.0
   HEXA: #172312ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_81303be7cc7d4beeaa83748424b42544 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_81303be7cc7d4beeaa83748424b42544 div { flex: 1 1 0; }
           #_81303be7cc7d4beeaa83748424b42544 div.color { width: 100%; height: 100%; }
           #_81303be7cc7d4beeaa83748424b42544 div.cmap { width: 100%; height: auto; }
           #_81303be7cc7d4beeaa83748424b42544 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>curl</strong>
       
       <div id="_81303be7cc7d4beeaa83748424b42544" class="color-map">
           
                           <div>
                   <style>
       #_fbbf669eff0d425199159b55302301d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(20, 29, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fbbf669eff0d425199159b55302301d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fbbf669eff0d425199159b55302301d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fbbf669eff0d425199159b55302301d1" class="color" data-tooltip="RGBA: 20, 29, 67, 1.0
   HEXA: #141d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_666e053d70534f9793064218014a0ad1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 72, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_666e053d70534f9793064218014a0ad1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_666e053d70534f9793064218014a0ad1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_666e053d70534f9793064218014a0ad1" class="color" data-tooltip="RGBA: 28, 72, 93, 1.0
   HEXA: #1c485dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d1359c65e734b3f986dde28302eca69 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 115, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d1359c65e734b3f986dde28302eca69::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d1359c65e734b3f986dde28302eca69:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d1359c65e734b3f986dde28302eca69" class="color" data-tooltip="RGBA: 18, 115, 117, 1.0
   HEXA: #127375ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_38a524ed414746b48cd0cd6aa5bc5f77 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 156, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38a524ed414746b48cd0cd6aa5bc5f77::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38a524ed414746b48cd0cd6aa5bc5f77:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38a524ed414746b48cd0cd6aa5bc5f77" class="color" data-tooltip="RGBA: 63, 156, 129, 1.0
   HEXA: #3f9c81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2554ae3d6ed24dcf8367ecb5ff3df6a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 189, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2554ae3d6ed24dcf8367ecb5ff3df6a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2554ae3d6ed24dcf8367ecb5ff3df6a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2554ae3d6ed24dcf8367ecb5ff3df6a1" class="color" data-tooltip="RGBA: 153, 189, 156, 1.0
   HEXA: #99bd9cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e48963d89b704d0283291a7774ccb09b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 225, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e48963d89b704d0283291a7774ccb09b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e48963d89b704d0283291a7774ccb09b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e48963d89b704d0283291a7774ccb09b" class="color" data-tooltip="RGBA: 223, 225, 211, 1.0
   HEXA: #dfe1d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_936eb83662c2467c9e438869cad6a3c4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 218, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_936eb83662c2467c9e438869cad6a3c4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_936eb83662c2467c9e438869cad6a3c4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_936eb83662c2467c9e438869cad6a3c4" class="color" data-tooltip="RGBA: 241, 218, 206, 1.0
   HEXA: #f1daceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_361e2b99bf5e49809325c9706466c729 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 160, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_361e2b99bf5e49809325c9706466c729::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_361e2b99bf5e49809325c9706466c729:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_361e2b99bf5e49809325c9706466c729" class="color" data-tooltip="RGBA: 224, 160, 137, 1.0
   HEXA: #e0a089ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fd130abd310d42acb4ddcc6c07cd6e2c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 101, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fd130abd310d42acb4ddcc6c07cd6e2c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fd130abd310d42acb4ddcc6c07cd6e2c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fd130abd310d42acb4ddcc6c07cd6e2c" class="color" data-tooltip="RGBA: 203, 101, 99, 1.0
   HEXA: #cb6563ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_089f9a6274954ff296035e0ebb8bd4b9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(164, 54, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_089f9a6274954ff296035e0ebb8bd4b9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_089f9a6274954ff296035e0ebb8bd4b9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_089f9a6274954ff296035e0ebb8bd4b9" class="color" data-tooltip="RGBA: 164, 54, 96, 1.0
   HEXA: #a43660ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86a4a751eaff46758210bb5bac961be4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 23, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86a4a751eaff46758210bb5bac961be4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86a4a751eaff46758210bb5bac961be4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86a4a751eaff46758210bb5bac961be4" class="color" data-tooltip="RGBA: 111, 23, 91, 1.0
   HEXA: #6f175bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6f73d94e57aa454a896a83fbd6904ed3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 13, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6f73d94e57aa454a896a83fbd6904ed3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6f73d94e57aa454a896a83fbd6904ed3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6f73d94e57aa454a896a83fbd6904ed3" class="color" data-tooltip="RGBA: 51, 13, 53, 1.0
   HEXA: #330d35ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_37e6d36cd2424643a06eadbfc645ce8c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_37e6d36cd2424643a06eadbfc645ce8c div { flex: 1 1 0; }
           #_37e6d36cd2424643a06eadbfc645ce8c div.color { width: 100%; height: 100%; }
           #_37e6d36cd2424643a06eadbfc645ce8c div.cmap { width: 100%; height: auto; }
           #_37e6d36cd2424643a06eadbfc645ce8c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>oxy</strong>
       
       <div id="_37e6d36cd2424643a06eadbfc645ce8c" class="color-map">
           
                           <div>
                   <style>
       #_82aab5d033cb4ac78cf0f1510a5959f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 5, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82aab5d033cb4ac78cf0f1510a5959f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82aab5d033cb4ac78cf0f1510a5959f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82aab5d033cb4ac78cf0f1510a5959f3" class="color" data-tooltip="RGBA: 63, 5, 5, 1.0
   HEXA: #3f0505ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e2e2dda6266a4859aaeed1300949d150 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 6, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2e2dda6266a4859aaeed1300949d150::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2e2dda6266a4859aaeed1300949d150:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2e2dda6266a4859aaeed1300949d150" class="color" data-tooltip="RGBA: 101, 6, 13, 1.0
   HEXA: #65060dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_14c91ed329bb4c56b05d015fad9d5824 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(138, 17, 9, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_14c91ed329bb4c56b05d015fad9d5824::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_14c91ed329bb4c56b05d015fad9d5824:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_14c91ed329bb4c56b05d015fad9d5824" class="color" data-tooltip="RGBA: 138, 17, 9, 1.0
   HEXA: #8a1109ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c7fcf7e592c042d890cdd672fdd81d5e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(96, 95, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c7fcf7e592c042d890cdd672fdd81d5e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c7fcf7e592c042d890cdd672fdd81d5e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c7fcf7e592c042d890cdd672fdd81d5e" class="color" data-tooltip="RGBA: 96, 95, 95, 1.0
   HEXA: #605f5fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_076975d94f54464aa07e2ec8b805e4f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 118, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_076975d94f54464aa07e2ec8b805e4f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_076975d94f54464aa07e2ec8b805e4f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_076975d94f54464aa07e2ec8b805e4f1" class="color" data-tooltip="RGBA: 119, 118, 118, 1.0
   HEXA: #777676ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee88a4bc2ebd4534bcff657dc2c6fb3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 141, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee88a4bc2ebd4534bcff657dc2c6fb3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee88a4bc2ebd4534bcff657dc2c6fb3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee88a4bc2ebd4534bcff657dc2c6fb3d" class="color" data-tooltip="RGBA: 142, 141, 141, 1.0
   HEXA: #8e8d8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_303efca8e123482788282aad7458e0d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 166, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_303efca8e123482788282aad7458e0d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_303efca8e123482788282aad7458e0d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_303efca8e123482788282aad7458e0d3" class="color" data-tooltip="RGBA: 166, 166, 165, 1.0
   HEXA: #a6a6a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_33d7a1291eee4464b1528c69f9e68718 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 192, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_33d7a1291eee4464b1528c69f9e68718::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_33d7a1291eee4464b1528c69f9e68718:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_33d7a1291eee4464b1528c69f9e68718" class="color" data-tooltip="RGBA: 193, 192, 191, 1.0
   HEXA: #c1c0bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8d33e9c1124341df827a6497be2d84e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 222, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8d33e9c1124341df827a6497be2d84e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8d33e9c1124341df827a6497be2d84e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8d33e9c1124341df827a6497be2d84e7" class="color" data-tooltip="RGBA: 222, 222, 220, 1.0
   HEXA: #dededcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8489c210f76a43dd9e3ba527944773a8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 248, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8489c210f76a43dd9e3ba527944773a8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8489c210f76a43dd9e3ba527944773a8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8489c210f76a43dd9e3ba527944773a8" class="color" data-tooltip="RGBA: 239, 248, 90, 1.0
   HEXA: #eff85aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1361d7c97994401be5ea85286ec999d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 210, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1361d7c97994401be5ea85286ec999d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1361d7c97994401be5ea85286ec999d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1361d7c97994401be5ea85286ec999d" class="color" data-tooltip="RGBA: 230, 210, 41, 1.0
   HEXA: #e6d229ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1902ba549ea24efc8bcadc992b61f78b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 174, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1902ba549ea24efc8bcadc992b61f78b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1902ba549ea24efc8bcadc992b61f78b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1902ba549ea24efc8bcadc992b61f78b" class="color" data-tooltip="RGBA: 220, 174, 25, 1.0
   HEXA: #dcae19ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d97862cce06446d8b23ae62c43d800f7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d97862cce06446d8b23ae62c43d800f7 div { flex: 1 1 0; }
           #_d97862cce06446d8b23ae62c43d800f7 div.color { width: 100%; height: 100%; }
           #_d97862cce06446d8b23ae62c43d800f7 div.cmap { width: 100%; height: auto; }
           #_d97862cce06446d8b23ae62c43d800f7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Armyrose</strong>
       
       <div id="_d97862cce06446d8b23ae62c43d800f7" class="color-map">
           
                           <div>
                   <style>
       #_1e4bad3c2cd94230b0e3ad369e4ba84f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 130, 52, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e4bad3c2cd94230b0e3ad369e4ba84f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e4bad3c2cd94230b0e3ad369e4ba84f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e4bad3c2cd94230b0e3ad369e4ba84f" class="color" data-tooltip="RGBA: 121, 130, 52, 1.0
   HEXA: #798234ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8d24068d8fee4a5f917bd3b2267e3759 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(163, 173, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8d24068d8fee4a5f917bd3b2267e3759::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8d24068d8fee4a5f917bd3b2267e3759:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8d24068d8fee4a5f917bd3b2267e3759" class="color" data-tooltip="RGBA: 163, 173, 98, 1.0
   HEXA: #a3ad62ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_626751fb302b4ce4b1f66fdc52437abe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 211, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_626751fb302b4ce4b1f66fdc52437abe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_626751fb302b4ce4b1f66fdc52437abe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_626751fb302b4ce4b1f66fdc52437abe" class="color" data-tooltip="RGBA: 208, 211, 162, 1.0
   HEXA: #d0d3a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_03c8531e31fd44ab89d6b9aabdfe0244 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 251, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_03c8531e31fd44ab89d6b9aabdfe0244::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_03c8531e31fd44ab89d6b9aabdfe0244:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_03c8531e31fd44ab89d6b9aabdfe0244" class="color" data-tooltip="RGBA: 253, 251, 228, 1.0
   HEXA: #fdfbe4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea224d93d94a4bdcbd4f66991d543896 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 198, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea224d93d94a4bdcbd4f66991d543896::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea224d93d94a4bdcbd4f66991d543896:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea224d93d94a4bdcbd4f66991d543896" class="color" data-tooltip="RGBA: 240, 198, 195, 1.0
   HEXA: #f0c6c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c351fc44803047c68d10f9e48f74eab2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 145, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c351fc44803047c68d10f9e48f74eab2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c351fc44803047c68d10f9e48f74eab2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c351fc44803047c68d10f9e48f74eab2" class="color" data-tooltip="RGBA: 223, 145, 163, 1.0
   HEXA: #df91a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b69282622e3244518cb5891a647d3525 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 103, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b69282622e3244518cb5891a647d3525::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b69282622e3244518cb5891a647d3525:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b69282622e3244518cb5891a647d3525" class="color" data-tooltip="RGBA: 212, 103, 128, 1.0
   HEXA: #d46780ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_20e36a25f4fb4f01bfee456962c43a6d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_20e36a25f4fb4f01bfee456962c43a6d div { flex: 1 1 0; }
           #_20e36a25f4fb4f01bfee456962c43a6d div.color { width: 100%; height: 100%; }
           #_20e36a25f4fb4f01bfee456962c43a6d div.cmap { width: 100%; height: auto; }
           #_20e36a25f4fb4f01bfee456962c43a6d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Fall</strong>
       
       <div id="_20e36a25f4fb4f01bfee456962c43a6d" class="color-map">
           
                           <div>
                   <style>
       #_e8dca8fbc6a64ef98d009766bee101de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(61, 89, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e8dca8fbc6a64ef98d009766bee101de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e8dca8fbc6a64ef98d009766bee101de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e8dca8fbc6a64ef98d009766bee101de" class="color" data-tooltip="RGBA: 61, 89, 65, 1.0
   HEXA: #3d5941ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d6cae4c128b3490c8a0ba82b734ea621 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 136, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d6cae4c128b3490c8a0ba82b734ea621::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d6cae4c128b3490c8a0ba82b734ea621:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d6cae4c128b3490c8a0ba82b734ea621" class="color" data-tooltip="RGBA: 119, 136, 104, 1.0
   HEXA: #778868ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e55a5b2074445d080fe2ed190b01832 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 185, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e55a5b2074445d080fe2ed190b01832::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e55a5b2074445d080fe2ed190b01832:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e55a5b2074445d080fe2ed190b01832" class="color" data-tooltip="RGBA: 181, 185, 145, 1.0
   HEXA: #b5b991ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3733e5064761460fad85c9842f9cb6a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 237, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3733e5064761460fad85c9842f9cb6a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3733e5064761460fad85c9842f9cb6a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3733e5064761460fad85c9842f9cb6a5" class="color" data-tooltip="RGBA: 246, 237, 189, 1.0
   HEXA: #f6edbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c2edd5888c334616ad69ff58d1133d4f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 187, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c2edd5888c334616ad69ff58d1133d4f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c2edd5888c334616ad69ff58d1133d4f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c2edd5888c334616ad69ff58d1133d4f" class="color" data-tooltip="RGBA: 237, 187, 138, 1.0
   HEXA: #edbb8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f95696ce3d354158a15c97100ba2abc0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 138, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f95696ce3d354158a15c97100ba2abc0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f95696ce3d354158a15c97100ba2abc0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f95696ce3d354158a15c97100ba2abc0" class="color" data-tooltip="RGBA: 222, 138, 90, 1.0
   HEXA: #de8a5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3ae05a3474b14f74a7408b9d23722c4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 86, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3ae05a3474b14f74a7408b9d23722c4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3ae05a3474b14f74a7408b9d23722c4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3ae05a3474b14f74a7408b9d23722c4d" class="color" data-tooltip="RGBA: 202, 86, 44, 1.0
   HEXA: #ca562cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0fafe3652e9b42da9edc6e014c2e2edd {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0fafe3652e9b42da9edc6e014c2e2edd div { flex: 1 1 0; }
           #_0fafe3652e9b42da9edc6e014c2e2edd div.color { width: 100%; height: 100%; }
           #_0fafe3652e9b42da9edc6e014c2e2edd div.cmap { width: 100%; height: auto; }
           #_0fafe3652e9b42da9edc6e014c2e2edd div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Geyser</strong>
       
       <div id="_0fafe3652e9b42da9edc6e014c2e2edd" class="color-map">
           
                           <div>
                   <style>
       #_fc49ebbdef7b46d3bf12dd8b1e32e8f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 128, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc49ebbdef7b46d3bf12dd8b1e32e8f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc49ebbdef7b46d3bf12dd8b1e32e8f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc49ebbdef7b46d3bf12dd8b1e32e8f8" class="color" data-tooltip="RGBA: 0, 128, 128, 1.0
   HEXA: #008080ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9f238610534c45dab15b21cb0677e652 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(112, 164, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9f238610534c45dab15b21cb0677e652::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9f238610534c45dab15b21cb0677e652:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9f238610534c45dab15b21cb0677e652" class="color" data-tooltip="RGBA: 112, 164, 148, 1.0
   HEXA: #70a494ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b472de3c397149a1a23efc52add3d9be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 200, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b472de3c397149a1a23efc52add3d9be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b472de3c397149a1a23efc52add3d9be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b472de3c397149a1a23efc52add3d9be" class="color" data-tooltip="RGBA: 180, 200, 168, 1.0
   HEXA: #b4c8a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d87c1799bd5f4d5b82b91866f21be4ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 237, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d87c1799bd5f4d5b82b91866f21be4ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d87c1799bd5f4d5b82b91866f21be4ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d87c1799bd5f4d5b82b91866f21be4ee" class="color" data-tooltip="RGBA: 246, 237, 189, 1.0
   HEXA: #f6edbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_32284c41efc9421aa86b34a77122f177 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 187, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_32284c41efc9421aa86b34a77122f177::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_32284c41efc9421aa86b34a77122f177:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_32284c41efc9421aa86b34a77122f177" class="color" data-tooltip="RGBA: 237, 187, 138, 1.0
   HEXA: #edbb8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_74dabf0fd243426f98a9ac8f21fd7797 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 138, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_74dabf0fd243426f98a9ac8f21fd7797::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_74dabf0fd243426f98a9ac8f21fd7797:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_74dabf0fd243426f98a9ac8f21fd7797" class="color" data-tooltip="RGBA: 222, 138, 90, 1.0
   HEXA: #de8a5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f43e6d0c4de944529bc658f435158cba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 86, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f43e6d0c4de944529bc658f435158cba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f43e6d0c4de944529bc658f435158cba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f43e6d0c4de944529bc658f435158cba" class="color" data-tooltip="RGBA: 202, 86, 44, 1.0
   HEXA: #ca562cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_e0043da30cb842a882b3d0f162fdc687 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_e0043da30cb842a882b3d0f162fdc687 div { flex: 1 1 0; }
           #_e0043da30cb842a882b3d0f162fdc687 div.color { width: 100%; height: 100%; }
           #_e0043da30cb842a882b3d0f162fdc687 div.cmap { width: 100%; height: auto; }
           #_e0043da30cb842a882b3d0f162fdc687 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Temps</strong>
       
       <div id="_e0043da30cb842a882b3d0f162fdc687" class="color-map">
           
                           <div>
                   <style>
       #_04e20a3395ac4218b8705ea5de4bced7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 147, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_04e20a3395ac4218b8705ea5de4bced7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_04e20a3395ac4218b8705ea5de4bced7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_04e20a3395ac4218b8705ea5de4bced7" class="color" data-tooltip="RGBA: 0, 147, 146, 1.0
   HEXA: #009392ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c824587ca9ba4b8593b176b5c3e1a53a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 177, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c824587ca9ba4b8593b176b5c3e1a53a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c824587ca9ba4b8593b176b5c3e1a53a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c824587ca9ba4b8593b176b5c3e1a53a" class="color" data-tooltip="RGBA: 57, 177, 133, 1.0
   HEXA: #39b185ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_708cc40d331c4f6394002e4576eaebb0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 203, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_708cc40d331c4f6394002e4576eaebb0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_708cc40d331c4f6394002e4576eaebb0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_708cc40d331c4f6394002e4576eaebb0" class="color" data-tooltip="RGBA: 156, 203, 134, 1.0
   HEXA: #9ccb86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ed611616c21403f968302c0b010521d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(233, 226, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ed611616c21403f968302c0b010521d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ed611616c21403f968302c0b010521d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ed611616c21403f968302c0b010521d" class="color" data-tooltip="RGBA: 233, 226, 156, 1.0
   HEXA: #e9e29cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1038ac0cd9f4ff587631816975513c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 180, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1038ac0cd9f4ff587631816975513c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1038ac0cd9f4ff587631816975513c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1038ac0cd9f4ff587631816975513c1" class="color" data-tooltip="RGBA: 238, 180, 121, 1.0
   HEXA: #eeb479ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d8171eb6b02b4cee83089a0fce2553c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 132, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d8171eb6b02b4cee83089a0fce2553c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d8171eb6b02b4cee83089a0fce2553c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d8171eb6b02b4cee83089a0fce2553c8" class="color" data-tooltip="RGBA: 232, 132, 113, 1.0
   HEXA: #e88471ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a14c78339f1c44ff939bd4d5648ee20a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 89, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a14c78339f1c44ff939bd4d5648ee20a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a14c78339f1c44ff939bd4d5648ee20a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a14c78339f1c44ff939bd4d5648ee20a" class="color" data-tooltip="RGBA: 207, 89, 126, 1.0
   HEXA: #cf597eff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c5526bbd24034f5fb73f6ff9d9202c95 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c5526bbd24034f5fb73f6ff9d9202c95 div { flex: 1 1 0; }
           #_c5526bbd24034f5fb73f6ff9d9202c95 div.color { width: 100%; height: 100%; }
           #_c5526bbd24034f5fb73f6ff9d9202c95 div.cmap { width: 100%; height: auto; }
           #_c5526bbd24034f5fb73f6ff9d9202c95 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Tealrose</strong>
       
       <div id="_c5526bbd24034f5fb73f6ff9d9202c95" class="color-map">
           
                           <div>
                   <style>
       #_c6f96f6bd7ef45da89bf6f032bcb06d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 147, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c6f96f6bd7ef45da89bf6f032bcb06d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c6f96f6bd7ef45da89bf6f032bcb06d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c6f96f6bd7ef45da89bf6f032bcb06d3" class="color" data-tooltip="RGBA: 0, 147, 146, 1.0
   HEXA: #009392ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3f76179205e245feba7ab2d9ab2b081d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 170, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3f76179205e245feba7ab2d9ab2b081d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3f76179205e245feba7ab2d9ab2b081d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3f76179205e245feba7ab2d9ab2b081d" class="color" data-tooltip="RGBA: 114, 170, 161, 1.0
   HEXA: #72aaa1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_18a08108c0194cd9bd91e6368829c268 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 199, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_18a08108c0194cd9bd91e6368829c268::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_18a08108c0194cd9bd91e6368829c268:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_18a08108c0194cd9bd91e6368829c268" class="color" data-tooltip="RGBA: 177, 199, 179, 1.0
   HEXA: #b1c7b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5233c8dc1a1048858c60ac8a42c2f919 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 234, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5233c8dc1a1048858c60ac8a42c2f919::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5233c8dc1a1048858c60ac8a42c2f919:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5233c8dc1a1048858c60ac8a42c2f919" class="color" data-tooltip="RGBA: 241, 234, 200, 1.0
   HEXA: #f1eac8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1dff2695ef3469385f4f1375b84305a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 185, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1dff2695ef3469385f4f1375b84305a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1dff2695ef3469385f4f1375b84305a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1dff2695ef3469385f4f1375b84305a" class="color" data-tooltip="RGBA: 229, 185, 173, 1.0
   HEXA: #e5b9adff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_37979897818a42f0b0aec4a7e8eed2d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 137, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_37979897818a42f0b0aec4a7e8eed2d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_37979897818a42f0b0aec4a7e8eed2d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_37979897818a42f0b0aec4a7e8eed2d8" class="color" data-tooltip="RGBA: 217, 137, 148, 1.0
   HEXA: #d98994ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_03c1e2c8156b484bb87b8f5ea87e421a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 88, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_03c1e2c8156b484bb87b8f5ea87e421a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_03c1e2c8156b484bb87b8f5ea87e421a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_03c1e2c8156b484bb87b8f5ea87e421a" class="color" data-tooltip="RGBA: 208, 88, 126, 1.0
   HEXA: #d0587eff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_207391e55cd84b859eeaed20d5f3d6e7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_207391e55cd84b859eeaed20d5f3d6e7 div { flex: 1 1 0; }
           #_207391e55cd84b859eeaed20d5f3d6e7 div.color { width: 100%; height: 100%; }
           #_207391e55cd84b859eeaed20d5f3d6e7 div.cmap { width: 100%; height: auto; }
           #_207391e55cd84b859eeaed20d5f3d6e7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Tropic</strong>
       
       <div id="_207391e55cd84b859eeaed20d5f3d6e7" class="color-map">
           
                           <div>
                   <style>
       #_acac9859c604492d85995c158c891b55 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 155, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_acac9859c604492d85995c158c891b55::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_acac9859c604492d85995c158c891b55:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_acac9859c604492d85995c158c891b55" class="color" data-tooltip="RGBA: 0, 155, 158, 1.0
   HEXA: #009b9eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_746208bb0c0c4ddabf7e6f215897ca48 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 183, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_746208bb0c0c4ddabf7e6f215897ca48::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_746208bb0c0c4ddabf7e6f215897ca48:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_746208bb0c0c4ddabf7e6f215897ca48" class="color" data-tooltip="RGBA: 66, 183, 185, 1.0
   HEXA: #42b7b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f3c1cfed2c2344db80941c874759b3a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 211, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f3c1cfed2c2344db80941c874759b3a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f3c1cfed2c2344db80941c874759b3a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f3c1cfed2c2344db80941c874759b3a5" class="color" data-tooltip="RGBA: 167, 211, 212, 1.0
   HEXA: #a7d3d4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e578739939604fe091a506ece9aa7e98 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 241, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e578739939604fe091a506ece9aa7e98::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e578739939604fe091a506ece9aa7e98:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e578739939604fe091a506ece9aa7e98" class="color" data-tooltip="RGBA: 241, 241, 241, 1.0
   HEXA: #f1f1f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a25d066f414a46db85370879a1dc2c78 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 193, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a25d066f414a46db85370879a1dc2c78::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a25d066f414a46db85370879a1dc2c78:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a25d066f414a46db85370879a1dc2c78" class="color" data-tooltip="RGBA: 228, 193, 217, 1.0
   HEXA: #e4c1d9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd227c59262e42b9a5e4d395f19f24e3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 145, 193, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd227c59262e42b9a5e4d395f19f24e3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd227c59262e42b9a5e4d395f19f24e3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd227c59262e42b9a5e4d395f19f24e3" class="color" data-tooltip="RGBA: 214, 145, 193, 1.0
   HEXA: #d691c1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_83b2242ae3bf4ce98d7080bb98d9d9fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 93, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_83b2242ae3bf4ce98d7080bb98d9d9fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_83b2242ae3bf4ce98d7080bb98d9d9fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_83b2242ae3bf4ce98d7080bb98d9d9fe" class="color" data-tooltip="RGBA: 199, 93, 171, 1.0
   HEXA: #c75dabff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8f9e66b672e341d3a032d1bdd887b578 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8f9e66b672e341d3a032d1bdd887b578 div { flex: 1 1 0; }
           #_8f9e66b672e341d3a032d1bdd887b578 div.color { width: 100%; height: 100%; }
           #_8f9e66b672e341d3a032d1bdd887b578 div.cmap { width: 100%; height: auto; }
           #_8f9e66b672e341d3a032d1bdd887b578 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Earth</strong>
       
       <div id="_8f9e66b672e341d3a032d1bdd887b578" class="color-map">
           
                           <div>
                   <style>
       #_e24eed64f188454dbd4734006e2b573d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 105, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e24eed64f188454dbd4734006e2b573d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e24eed64f188454dbd4734006e2b573d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e24eed64f188454dbd4734006e2b573d" class="color" data-tooltip="RGBA: 161, 105, 40, 1.0
   HEXA: #a16928ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_98e644a0e4fc4a498e7879293791f093 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 146, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_98e644a0e4fc4a498e7879293791f093::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_98e644a0e4fc4a498e7879293791f093:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_98e644a0e4fc4a498e7879293791f093" class="color" data-tooltip="RGBA: 189, 146, 90, 1.0
   HEXA: #bd925aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_22521e844c8e41e3b6f57ba9f677083d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 189, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22521e844c8e41e3b6f57ba9f677083d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22521e844c8e41e3b6f57ba9f677083d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22521e844c8e41e3b6f57ba9f677083d" class="color" data-tooltip="RGBA: 214, 189, 141, 1.0
   HEXA: #d6bd8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3361c39a360040e296b72ece22ef6ec9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 234, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3361c39a360040e296b72ece22ef6ec9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3361c39a360040e296b72ece22ef6ec9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3361c39a360040e296b72ece22ef6ec9" class="color" data-tooltip="RGBA: 237, 234, 194, 1.0
   HEXA: #edeac2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f3b3818df8fd4d4aba6190370f34581c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 200, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f3b3818df8fd4d4aba6190370f34581c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f3b3818df8fd4d4aba6190370f34581c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f3b3818df8fd4d4aba6190370f34581c" class="color" data-tooltip="RGBA: 181, 200, 184, 1.0
   HEXA: #b5c8b8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5058ed80b46942fc933f49ea2ce458c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 167, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5058ed80b46942fc933f49ea2ce458c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5058ed80b46942fc933f49ea2ce458c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5058ed80b46942fc933f49ea2ce458c6" class="color" data-tooltip="RGBA: 121, 167, 172, 1.0
   HEXA: #79a7acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4e181c5135d24c4998c6a24cd1e065b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 135, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4e181c5135d24c4998c6a24cd1e065b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4e181c5135d24c4998c6a24cd1e065b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4e181c5135d24c4998c6a24cd1e065b3" class="color" data-tooltip="RGBA: 40, 135, 161, 1.0
   HEXA: #2887a1ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2a7f7fa470d442fbbd1a886637fb04ae {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2a7f7fa470d442fbbd1a886637fb04ae div { flex: 1 1 0; }
           #_2a7f7fa470d442fbbd1a886637fb04ae div.color { width: 100%; height: 100%; }
           #_2a7f7fa470d442fbbd1a886637fb04ae div.cmap { width: 100%; height: auto; }
           #_2a7f7fa470d442fbbd1a886637fb04ae div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Picnic</strong>
       
       <div id="_2a7f7fa470d442fbbd1a886637fb04ae" class="color-map">
           
                           <div>
                   <style>
       #_d80decff04b846ad87da4444f6cdae69 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d80decff04b846ad87da4444f6cdae69::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d80decff04b846ad87da4444f6cdae69:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d80decff04b846ad87da4444f6cdae69" class="color" data-tooltip="RGBA: 0, 0, 255, 1.0
   HEXA: #0000ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_909645c5ba2f4464931e65ba9fdaf2fa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 153, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_909645c5ba2f4464931e65ba9fdaf2fa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_909645c5ba2f4464931e65ba9fdaf2fa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_909645c5ba2f4464931e65ba9fdaf2fa" class="color" data-tooltip="RGBA: 51, 153, 255, 1.0
   HEXA: #3399ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d0a36f4eed141d6b9c918af63cc0dd6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d0a36f4eed141d6b9c918af63cc0dd6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d0a36f4eed141d6b9c918af63cc0dd6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d0a36f4eed141d6b9c918af63cc0dd6" class="color" data-tooltip="RGBA: 102, 204, 255, 1.0
   HEXA: #66ccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db1e2303fa7a4e96b8961ea1a4b3395b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db1e2303fa7a4e96b8961ea1a4b3395b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db1e2303fa7a4e96b8961ea1a4b3395b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db1e2303fa7a4e96b8961ea1a4b3395b" class="color" data-tooltip="RGBA: 153, 204, 255, 1.0
   HEXA: #99ccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53e89ea5b1214ae5b4d2074a7a953804 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53e89ea5b1214ae5b4d2074a7a953804::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53e89ea5b1214ae5b4d2074a7a953804:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53e89ea5b1214ae5b4d2074a7a953804" class="color" data-tooltip="RGBA: 204, 204, 255, 1.0
   HEXA: #ccccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_017e060f495d436a80bed1205efdacf6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_017e060f495d436a80bed1205efdacf6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_017e060f495d436a80bed1205efdacf6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_017e060f495d436a80bed1205efdacf6" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9d7b087d9f84d6b843dcbce488aa920 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9d7b087d9f84d6b843dcbce488aa920::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9d7b087d9f84d6b843dcbce488aa920:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9d7b087d9f84d6b843dcbce488aa920" class="color" data-tooltip="RGBA: 255, 204, 255, 1.0
   HEXA: #ffccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d32b7e86d7b5407a97c72d9311341765 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 153, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d32b7e86d7b5407a97c72d9311341765::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d32b7e86d7b5407a97c72d9311341765:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d32b7e86d7b5407a97c72d9311341765" class="color" data-tooltip="RGBA: 255, 153, 255, 1.0
   HEXA: #ff99ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b26c4ccb7f545ef9f5f90ecfc844886 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 102, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b26c4ccb7f545ef9f5f90ecfc844886::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b26c4ccb7f545ef9f5f90ecfc844886:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b26c4ccb7f545ef9f5f90ecfc844886" class="color" data-tooltip="RGBA: 255, 102, 204, 1.0
   HEXA: #ff66ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2bec58b9fb5c4b94a597baa72631513e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2bec58b9fb5c4b94a597baa72631513e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2bec58b9fb5c4b94a597baa72631513e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2bec58b9fb5c4b94a597baa72631513e" class="color" data-tooltip="RGBA: 255, 102, 102, 1.0
   HEXA: #ff6666ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7772783e8dc4fbe9c8eb0c557a89fea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7772783e8dc4fbe9c8eb0c557a89fea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7772783e8dc4fbe9c8eb0c557a89fea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7772783e8dc4fbe9c8eb0c557a89fea" class="color" data-tooltip="RGBA: 255, 0, 0, 1.0
   HEXA: #ff0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_784b400172144a468528ae5e09b62021 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_784b400172144a468528ae5e09b62021 div { flex: 1 1 0; }
           #_784b400172144a468528ae5e09b62021 div.color { width: 100%; height: 100%; }
           #_784b400172144a468528ae5e09b62021 div.cmap { width: 100%; height: auto; }
           #_784b400172144a468528ae5e09b62021 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Portland</strong>
       
       <div id="_784b400172144a468528ae5e09b62021" class="color-map">
           
                           <div>
                   <style>
       #_19841f51866f4606a031bb113de7f551 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(12, 51, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19841f51866f4606a031bb113de7f551::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19841f51866f4606a031bb113de7f551:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19841f51866f4606a031bb113de7f551" class="color" data-tooltip="RGBA: 12, 51, 131, 1.0
   HEXA: #0c3383ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce2bbb072f0a4d92a1f390cade3b28a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(10, 136, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce2bbb072f0a4d92a1f390cade3b28a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce2bbb072f0a4d92a1f390cade3b28a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce2bbb072f0a4d92a1f390cade3b28a3" class="color" data-tooltip="RGBA: 10, 136, 186, 1.0
   HEXA: #0a88baff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2260a7bfb8044ee7a7dfbb4557c89e8a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 211, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2260a7bfb8044ee7a7dfbb4557c89e8a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2260a7bfb8044ee7a7dfbb4557c89e8a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2260a7bfb8044ee7a7dfbb4557c89e8a" class="color" data-tooltip="RGBA: 242, 211, 56, 1.0
   HEXA: #f2d338ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eea12bda81ca45b8b4fd7915f7921c64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 143, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eea12bda81ca45b8b4fd7915f7921c64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eea12bda81ca45b8b4fd7915f7921c64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eea12bda81ca45b8b4fd7915f7921c64" class="color" data-tooltip="RGBA: 242, 143, 56, 1.0
   HEXA: #f28f38ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0823d315eb034b329d4de29b065c78fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 30, 30, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0823d315eb034b329d4de29b065c78fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0823d315eb034b329d4de29b065c78fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0823d315eb034b329d4de29b065c78fe" class="color" data-tooltip="RGBA: 217, 30, 30, 1.0
   HEXA: #d91e1eff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
   </div>


|


----


Cyclical
--------

.. raw:: html


   <div id="_366c8b3123634007b045ac3010654894" class="color-swatch">
       <style>
           #_366c8b3123634007b045ac3010654894 {
               display: grid;
               grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
               gap: 0.5rem 1rem;
               justify-content: space-between;
               overflow: hidden;
               resize: both;
               width: min(65rem, 100%);
           }
           #_366c8b3123634007b045ac3010654894 div {
               width: 100%;
           }
           #_366c8b3123634007b045ac3010654894 > div.gradient {
               width: 100%;
               height: min(4rem, 100%);
               display: grid;
               gap: 0.2rem;
               grid-template-rows: 1rem auto;
           }
           #_366c8b3123634007b045ac3010654894 .color {
               height: minmax(1.5rem, 100%);
           }
           #_366c8b3123634007b045ac3010654894 > div.gradient > strong {
               margin: 0;
               padding: 0;
           }
           #_366c8b3123634007b045ac3010654894 img {height: 100%;}
       </style>
       
           <div class="gradient">
       <style>
           #_ada84cdc2b904a10b587a36a73b684d4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ada84cdc2b904a10b587a36a73b684d4 div { flex: 1 1 0; }
           #_ada84cdc2b904a10b587a36a73b684d4 div.color { width: 100%; height: 100%; }
           #_ada84cdc2b904a10b587a36a73b684d4 div.cmap { width: 100%; height: auto; }
           #_ada84cdc2b904a10b587a36a73b684d4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Twilight</strong>
       
       <div id="_ada84cdc2b904a10b587a36a73b684d4" class="color-map">
           
                           <div>
                   <style>
       #_bfbe58d41ba44e43890541305c6deeb3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(226, 217, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bfbe58d41ba44e43890541305c6deeb3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bfbe58d41ba44e43890541305c6deeb3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bfbe58d41ba44e43890541305c6deeb3" class="color" data-tooltip="RGBA: 226, 217, 226, 1.0
   HEXA: #e2d9e2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_72fd7a677c4340e9a55f9b88f04b3021 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 187, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_72fd7a677c4340e9a55f9b88f04b3021::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_72fd7a677c4340e9a55f9b88f04b3021:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_72fd7a677c4340e9a55f9b88f04b3021" class="color" data-tooltip="RGBA: 158, 187, 201, 1.0
   HEXA: #9ebbc9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4bef0c2061994ba68ffc17d9d14d6d99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 133, 190, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4bef0c2061994ba68ffc17d9d14d6d99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4bef0c2061994ba68ffc17d9d14d6d99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4bef0c2061994ba68ffc17d9d14d6d99" class="color" data-tooltip="RGBA: 103, 133, 190, 1.0
   HEXA: #6785beff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fcb7af644b4447418561d00a9757087f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 67, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fcb7af644b4447418561d00a9757087f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fcb7af644b4447418561d00a9757087f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fcb7af644b4447418561d00a9757087f" class="color" data-tooltip="RGBA: 94, 67, 165, 1.0
   HEXA: #5e43a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_13a39a92bacf4d73a7314efad40d8e83 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 18, 87, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_13a39a92bacf4d73a7314efad40d8e83::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_13a39a92bacf4d73a7314efad40d8e83:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_13a39a92bacf4d73a7314efad40d8e83" class="color" data-tooltip="RGBA: 66, 18, 87, 1.0
   HEXA: #421257ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1564a764005b4d07bbc2c3994304f279 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(71, 19, 64, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1564a764005b4d07bbc2c3994304f279::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1564a764005b4d07bbc2c3994304f279:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1564a764005b4d07bbc2c3994304f279" class="color" data-tooltip="RGBA: 71, 19, 64, 1.0
   HEXA: #471340ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d791fd8b115a4632b796f6c2e3b9c366 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 44, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d791fd8b115a4632b796f6c2e3b9c366::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d791fd8b115a4632b796f6c2e3b9c366:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d791fd8b115a4632b796f6c2e3b9c366" class="color" data-tooltip="RGBA: 142, 44, 80, 1.0
   HEXA: #8e2c50ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef3ae809d59d4ebc8abe422453416a23 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 102, 87, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef3ae809d59d4ebc8abe422453416a23::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef3ae809d59d4ebc8abe422453416a23:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef3ae809d59d4ebc8abe422453416a23" class="color" data-tooltip="RGBA: 186, 102, 87, 1.0
   HEXA: #ba6657ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4add0607089941049afc2e5bd30f7684 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 172, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4add0607089941049afc2e5bd30f7684::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4add0607089941049afc2e5bd30f7684:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4add0607089941049afc2e5bd30f7684" class="color" data-tooltip="RGBA: 206, 172, 148, 1.0
   HEXA: #ceac94ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_039175bc0cec495ba5b51a76019e08e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(226, 217, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_039175bc0cec495ba5b51a76019e08e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_039175bc0cec495ba5b51a76019e08e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_039175bc0cec495ba5b51a76019e08e7" class="color" data-tooltip="RGBA: 226, 217, 226, 1.0
   HEXA: #e2d9e2ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_446a951fb89f48f4beca6620607d2007 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_446a951fb89f48f4beca6620607d2007 div { flex: 1 1 0; }
           #_446a951fb89f48f4beca6620607d2007 div.color { width: 100%; height: 100%; }
           #_446a951fb89f48f4beca6620607d2007 div.cmap { width: 100%; height: auto; }
           #_446a951fb89f48f4beca6620607d2007 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>IceFire</strong>
       
       <div id="_446a951fb89f48f4beca6620607d2007" class="color-map">
           
                           <div>
                   <style>
       #_4ed9a8fe394443cb9a609eedefd25fb7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4ed9a8fe394443cb9a609eedefd25fb7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4ed9a8fe394443cb9a609eedefd25fb7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4ed9a8fe394443cb9a609eedefd25fb7" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_173b9805b1124b61893c770645954a9a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 31, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_173b9805b1124b61893c770645954a9a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_173b9805b1124b61893c770645954a9a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_173b9805b1124b61893c770645954a9a" class="color" data-tooltip="RGBA: 0, 31, 77, 1.0
   HEXA: #001f4dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4efe051df83496892d553e98bc55c48 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 55, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4efe051df83496892d553e98bc55c48::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4efe051df83496892d553e98bc55c48:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4efe051df83496892d553e98bc55c48" class="color" data-tooltip="RGBA: 0, 55, 134, 1.0
   HEXA: #003786ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e90a7582c2e248779dd89bbab464430b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(14, 88, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e90a7582c2e248779dd89bbab464430b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e90a7582c2e248779dd89bbab464430b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e90a7582c2e248779dd89bbab464430b" class="color" data-tooltip="RGBA: 14, 88, 168, 1.0
   HEXA: #0e58a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b06768ba687d41528f065a4e974bb342 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 126, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b06768ba687d41528f065a4e974bb342::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b06768ba687d41528f065a4e974bb342:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b06768ba687d41528f065a4e974bb342" class="color" data-tooltip="RGBA: 33, 126, 184, 1.0
   HEXA: #217eb8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6d6df87752c64d6b9575f29249d82814 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(48, 164, 202, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6d6df87752c64d6b9575f29249d82814::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6d6df87752c64d6b9575f29249d82814:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6d6df87752c64d6b9575f29249d82814" class="color" data-tooltip="RGBA: 48, 164, 202, 1.0
   HEXA: #30a4caff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e6a78b9311243e794900fb3863e5b44 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 200, 223, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e6a78b9311243e794900fb3863e5b44::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e6a78b9311243e794900fb3863e5b44:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e6a78b9311243e794900fb3863e5b44" class="color" data-tooltip="RGBA: 84, 200, 223, 1.0
   HEXA: #54c8dfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_21389e90bae8466e927cddccdf124a1e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(155, 228, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_21389e90bae8466e927cddccdf124a1e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_21389e90bae8466e927cddccdf124a1e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_21389e90bae8466e927cddccdf124a1e" class="color" data-tooltip="RGBA: 155, 228, 239, 1.0
   HEXA: #9be4efff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9990b076b0f4377966f10a80b9af9d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 233, 209, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9990b076b0f4377966f10a80b9af9d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9990b076b0f4377966f10a80b9af9d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9990b076b0f4377966f10a80b9af9d4" class="color" data-tooltip="RGBA: 225, 233, 209, 1.0
   HEXA: #e1e9d1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_62dd9e4cf9174da4ade446f90224a60e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 213, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_62dd9e4cf9174da4ade446f90224a60e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_62dd9e4cf9174da4ade446f90224a60e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_62dd9e4cf9174da4ade446f90224a60e" class="color" data-tooltip="RGBA: 243, 213, 115, 1.0
   HEXA: #f3d573ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b60b6e9c7ce2496589f32e9eaaae0789 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 176, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b60b6e9c7ce2496589f32e9eaaae0789::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b60b6e9c7ce2496589f32e9eaaae0789:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b60b6e9c7ce2496589f32e9eaaae0789" class="color" data-tooltip="RGBA: 231, 176, 0, 1.0
   HEXA: #e7b000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7f2d3852e3741f6a4d0baaae0cae6c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 130, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7f2d3852e3741f6a4d0baaae0cae6c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7f2d3852e3741f6a4d0baaae0cae6c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7f2d3852e3741f6a4d0baaae0cae6c6" class="color" data-tooltip="RGBA: 218, 130, 0, 1.0
   HEXA: #da8200ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cb29dbf5c60d42688bb6167f354b8187 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 84, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cb29dbf5c60d42688bb6167f354b8187::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cb29dbf5c60d42688bb6167f354b8187:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cb29dbf5c60d42688bb6167f354b8187" class="color" data-tooltip="RGBA: 198, 84, 0, 1.0
   HEXA: #c65400ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_83de0eeda0c443f98afb5336c783f9c3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 35, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_83de0eeda0c443f98afb5336c783f9c3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_83de0eeda0c443f98afb5336c783f9c3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_83de0eeda0c443f98afb5336c783f9c3" class="color" data-tooltip="RGBA: 172, 35, 1, 1.0
   HEXA: #ac2301ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc779f0a32e94ca5a8095a9627de7057 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc779f0a32e94ca5a8095a9627de7057::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc779f0a32e94ca5a8095a9627de7057:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc779f0a32e94ca5a8095a9627de7057" class="color" data-tooltip="RGBA: 130, 0, 0, 1.0
   HEXA: #820000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a3106e2c3da444038bb3294d6e85cb4a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a3106e2c3da444038bb3294d6e85cb4a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a3106e2c3da444038bb3294d6e85cb4a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a3106e2c3da444038bb3294d6e85cb4a" class="color" data-tooltip="RGBA: 76, 0, 0, 1.0
   HEXA: #4c0000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_43c3f3286dd94747a909bef27dc018e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_43c3f3286dd94747a909bef27dc018e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_43c3f3286dd94747a909bef27dc018e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_43c3f3286dd94747a909bef27dc018e7" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_662aba2b8f72491e85025dc482937005 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_662aba2b8f72491e85025dc482937005 div { flex: 1 1 0; }
           #_662aba2b8f72491e85025dc482937005 div.color { width: 100%; height: 100%; }
           #_662aba2b8f72491e85025dc482937005 div.cmap { width: 100%; height: auto; }
           #_662aba2b8f72491e85025dc482937005 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Edge</strong>
       
       <div id="_662aba2b8f72491e85025dc482937005" class="color-map">
           
                           <div>
                   <style>
       #_28c37f30a76543459e2f22d460dcc2d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 49, 49, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_28c37f30a76543459e2f22d460dcc2d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_28c37f30a76543459e2f22d460dcc2d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_28c37f30a76543459e2f22d460dcc2d9" class="color" data-tooltip="RGBA: 49, 49, 49, 1.0
   HEXA: #313131ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3253c5227f3a47a4a760ede6031b3731 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(61, 1, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3253c5227f3a47a4a760ede6031b3731::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3253c5227f3a47a4a760ede6031b3731:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3253c5227f3a47a4a760ede6031b3731" class="color" data-tooltip="RGBA: 61, 1, 157, 1.0
   HEXA: #3d019dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34872b589ee34fe4ae234a6e4550f0e3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 16, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34872b589ee34fe4ae234a6e4550f0e3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34872b589ee34fe4ae234a6e4550f0e3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34872b589ee34fe4ae234a6e4550f0e3" class="color" data-tooltip="RGBA: 56, 16, 220, 1.0
   HEXA: #3810dcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b0dec582ec442dbb7e8a53190915ebd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(45, 71, 249, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b0dec582ec442dbb7e8a53190915ebd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b0dec582ec442dbb7e8a53190915ebd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b0dec582ec442dbb7e8a53190915ebd" class="color" data-tooltip="RGBA: 45, 71, 249, 1.0
   HEXA: #2d47f9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c240085b4c044c9944141fe6ce28da9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 147, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c240085b4c044c9944141fe6ce28da9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c240085b4c044c9944141fe6ce28da9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c240085b4c044c9944141fe6ce28da9" class="color" data-tooltip="RGBA: 37, 147, 255, 1.0
   HEXA: #2593ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b85e6344e7c4ee6a1540df67a537cbe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 222, 246, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b85e6344e7c4ee6a1540df67a537cbe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b85e6344e7c4ee6a1540df67a537cbe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b85e6344e7c4ee6a1540df67a537cbe" class="color" data-tooltip="RGBA: 42, 222, 246, 1.0
   HEXA: #2adef6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0be92dc885e84c63b2fa49fb3dfcda83 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(96, 253, 250, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0be92dc885e84c63b2fa49fb3dfcda83::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0be92dc885e84c63b2fa49fb3dfcda83:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0be92dc885e84c63b2fa49fb3dfcda83" class="color" data-tooltip="RGBA: 96, 253, 250, 1.0
   HEXA: #60fdfaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_77ba350401ef474a94e44fcaa0dcc347 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 253, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_77ba350401ef474a94e44fcaa0dcc347::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_77ba350401ef474a94e44fcaa0dcc347:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_77ba350401ef474a94e44fcaa0dcc347" class="color" data-tooltip="RGBA: 174, 253, 255, 1.0
   HEXA: #aefdffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc545985cb784950a60a05d9a15ce69f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 243, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc545985cb784950a60a05d9a15ce69f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc545985cb784950a60a05d9a15ce69f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc545985cb784950a60a05d9a15ce69f" class="color" data-tooltip="RGBA: 243, 243, 241, 1.0
   HEXA: #f3f3f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2e45da5c14ba4ba8928ffa35c2f2965a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 253, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2e45da5c14ba4ba8928ffa35c2f2965a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2e45da5c14ba4ba8928ffa35c2f2965a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2e45da5c14ba4ba8928ffa35c2f2965a" class="color" data-tooltip="RGBA: 255, 253, 169, 1.0
   HEXA: #fffda9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_62950b2f92a74a96b18bba899f577fbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 253, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_62950b2f92a74a96b18bba899f577fbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_62950b2f92a74a96b18bba899f577fbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_62950b2f92a74a96b18bba899f577fbd" class="color" data-tooltip="RGBA: 250, 253, 91, 1.0
   HEXA: #fafd5bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e0e5cc1d1c143b6b1eaa880c60d9cbe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 218, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e0e5cc1d1c143b6b1eaa880c60d9cbe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e0e5cc1d1c143b6b1eaa880c60d9cbe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e0e5cc1d1c143b6b1eaa880c60d9cbe" class="color" data-tooltip="RGBA: 247, 218, 41, 1.0
   HEXA: #f7da29ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6ba2d734e4a24bdca76b89d3ff8156a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 142, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ba2d734e4a24bdca76b89d3ff8156a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ba2d734e4a24bdca76b89d3ff8156a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ba2d734e4a24bdca76b89d3ff8156a9" class="color" data-tooltip="RGBA: 255, 142, 37, 1.0
   HEXA: #ff8e25ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9bf4d2164b6d4d93bbcaf0cc095fd22d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 67, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9bf4d2164b6d4d93bbcaf0cc095fd22d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9bf4d2164b6d4d93bbcaf0cc095fd22d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9bf4d2164b6d4d93bbcaf0cc095fd22d" class="color" data-tooltip="RGBA: 248, 67, 45, 1.0
   HEXA: #f8432dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63577a64d2554b50b7752be15a072d4e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 13, 57, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63577a64d2554b50b7752be15a072d4e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63577a64d2554b50b7752be15a072d4e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63577a64d2554b50b7752be15a072d4e" class="color" data-tooltip="RGBA: 217, 13, 57, 1.0
   HEXA: #d90d39ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4cd7ec7e2ae448c995cd2fb448437d50 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 2, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4cd7ec7e2ae448c995cd2fb448437d50::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4cd7ec7e2ae448c995cd2fb448437d50:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4cd7ec7e2ae448c995cd2fb448437d50" class="color" data-tooltip="RGBA: 151, 2, 61, 1.0
   HEXA: #97023dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d1e2e7acaf642c0bd132c4e2163a26d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 49, 49, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d1e2e7acaf642c0bd132c4e2163a26d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d1e2e7acaf642c0bd132c4e2163a26d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d1e2e7acaf642c0bd132c4e2163a26d" class="color" data-tooltip="RGBA: 49, 49, 49, 1.0
   HEXA: #313131ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_55065edef7744288a911a7ea6dc365cc {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_55065edef7744288a911a7ea6dc365cc div { flex: 1 1 0; }
           #_55065edef7744288a911a7ea6dc365cc div.color { width: 100%; height: 100%; }
           #_55065edef7744288a911a7ea6dc365cc div.cmap { width: 100%; height: auto; }
           #_55065edef7744288a911a7ea6dc365cc div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>Phase</strong>
       
       <div id="_55065edef7744288a911a7ea6dc365cc" class="color-map">
           
                           <div>
                   <style>
       #_f92c29bb91bc4dc9a8a68d77014c6e6a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 119, 12, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f92c29bb91bc4dc9a8a68d77014c6e6a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f92c29bb91bc4dc9a8a68d77014c6e6a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f92c29bb91bc4dc9a8a68d77014c6e6a" class="color" data-tooltip="RGBA: 167, 119, 12, 1.0
   HEXA: #a7770cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d9858e6bcf954b1684c9a8622c8f9ca6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 96, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d9858e6bcf954b1684c9a8622c8f9ca6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d9858e6bcf954b1684c9a8622c8f9ca6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d9858e6bcf954b1684c9a8622c8f9ca6" class="color" data-tooltip="RGBA: 197, 96, 51, 1.0
   HEXA: #c56033ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b1e1b52a42044f639cdf4ada0254c21f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 67, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b1e1b52a42044f639cdf4ada0254c21f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b1e1b52a42044f639cdf4ada0254c21f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b1e1b52a42044f639cdf4ada0254c21f" class="color" data-tooltip="RGBA: 217, 67, 96, 1.0
   HEXA: #d94360ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e42deae8ba2648d59766b4e7bcd7add8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 38, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e42deae8ba2648d59766b4e7bcd7add8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e42deae8ba2648d59766b4e7bcd7add8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e42deae8ba2648d59766b4e7bcd7add8" class="color" data-tooltip="RGBA: 221, 38, 163, 1.0
   HEXA: #dd26a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f6b7ae6f40734c74a64eacb58cd6fac3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 59, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f6b7ae6f40734c74a64eacb58cd6fac3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f6b7ae6f40734c74a64eacb58cd6fac3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f6b7ae6f40734c74a64eacb58cd6fac3" class="color" data-tooltip="RGBA: 196, 59, 224, 1.0
   HEXA: #c43be0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_651d9e885c574527b55d420f1274b5c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 97, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_651d9e885c574527b55d420f1274b5c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_651d9e885c574527b55d420f1274b5c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_651d9e885c574527b55d420f1274b5c7" class="color" data-tooltip="RGBA: 153, 97, 244, 1.0
   HEXA: #9961f4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f2d7225543a742169d393e2bb4761841 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 127, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f2d7225543a742169d393e2bb4761841::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f2d7225543a742169d393e2bb4761841:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f2d7225543a742169d393e2bb4761841" class="color" data-tooltip="RGBA: 95, 127, 228, 1.0
   HEXA: #5f7fe4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2556d497e75b40c6b5404453b86bf14f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 144, 183, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2556d497e75b40c6b5404453b86bf14f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2556d497e75b40c6b5404453b86bf14f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2556d497e75b40c6b5404453b86bf14f" class="color" data-tooltip="RGBA: 40, 144, 183, 1.0
   HEXA: #2890b7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4f66088327da47d4ab49cca442ca9dd5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 151, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4f66088327da47d4ab49cca442ca9dd5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4f66088327da47d4ab49cca442ca9dd5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4f66088327da47d4ab49cca442ca9dd5" class="color" data-tooltip="RGBA: 15, 151, 136, 1.0
   HEXA: #0f9788ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ccd5ff0524dc4bee8884ceee6b9e87d0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 153, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ccd5ff0524dc4bee8884ceee6b9e87d0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ccd5ff0524dc4bee8884ceee6b9e87d0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ccd5ff0524dc4bee8884ceee6b9e87d0" class="color" data-tooltip="RGBA: 39, 153, 79, 1.0
   HEXA: #27994fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c55a83016c2403f9f0bef96ce342b86 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 141, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c55a83016c2403f9f0bef96ce342b86::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c55a83016c2403f9f0bef96ce342b86:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c55a83016c2403f9f0bef96ce342b86" class="color" data-tooltip="RGBA: 119, 141, 17, 1.0
   HEXA: #778d11ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90db4c6c8332408bbb6b51d80912e94b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 119, 12, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90db4c6c8332408bbb6b51d80912e94b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90db4c6c8332408bbb6b51d80912e94b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90db4c6c8332408bbb6b51d80912e94b" class="color" data-tooltip="RGBA: 167, 119, 12, 1.0
   HEXA: #a7770cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_df6c64ac60a14cf78b9f8ef6645004f8 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_df6c64ac60a14cf78b9f8ef6645004f8 div { flex: 1 1 0; }
           #_df6c64ac60a14cf78b9f8ef6645004f8 div.color { width: 100%; height: 100%; }
           #_df6c64ac60a14cf78b9f8ef6645004f8 div.cmap { width: 100%; height: auto; }
           #_df6c64ac60a14cf78b9f8ef6645004f8 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>HSV</strong>
       
       <div id="_df6c64ac60a14cf78b9f8ef6645004f8" class="color-map">
           
                           <div>
                   <style>
       #_91fc8a0f65324d95a03494d1634db720 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_91fc8a0f65324d95a03494d1634db720::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_91fc8a0f65324d95a03494d1634db720:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_91fc8a0f65324d95a03494d1634db720" class="color" data-tooltip="RGBA: 255, 0, 0, 1.0
   HEXA: #ff0000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f8f54be24b86420e82e34756d44cfd9d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 167, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f8f54be24b86420e82e34756d44cfd9d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f8f54be24b86420e82e34756d44cfd9d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f8f54be24b86420e82e34756d44cfd9d" class="color" data-tooltip="RGBA: 255, 167, 0, 1.0
   HEXA: #ffa700ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c4a77b14dbff42598c1a2072c9463a54 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(175, 255, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c4a77b14dbff42598c1a2072c9463a54::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c4a77b14dbff42598c1a2072c9463a54:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c4a77b14dbff42598c1a2072c9463a54" class="color" data-tooltip="RGBA: 175, 255, 0, 1.0
   HEXA: #afff00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2bcd18ff4909401cad8ab6d9881628de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 255, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2bcd18ff4909401cad8ab6d9881628de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2bcd18ff4909401cad8ab6d9881628de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2bcd18ff4909401cad8ab6d9881628de" class="color" data-tooltip="RGBA: 8, 255, 0, 1.0
   HEXA: #08ff00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fa977ee4ad574b16af9b97d09a4499ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 255, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fa977ee4ad574b16af9b97d09a4499ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fa977ee4ad574b16af9b97d09a4499ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fa977ee4ad574b16af9b97d09a4499ba" class="color" data-tooltip="RGBA: 0, 255, 159, 1.0
   HEXA: #00ff9fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_58e085244c1248cb8c5f18071817a665 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 183, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_58e085244c1248cb8c5f18071817a665::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_58e085244c1248cb8c5f18071817a665:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_58e085244c1248cb8c5f18071817a665" class="color" data-tooltip="RGBA: 0, 183, 255, 1.0
   HEXA: #00b7ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_effcee80610540c4aa0c911790c46a15 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 16, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_effcee80610540c4aa0c911790c46a15::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_effcee80610540c4aa0c911790c46a15:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_effcee80610540c4aa0c911790c46a15" class="color" data-tooltip="RGBA: 0, 16, 255, 1.0
   HEXA: #0010ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_42b9b2690b314fa7ae3eab0e2359b5e4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 0, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_42b9b2690b314fa7ae3eab0e2359b5e4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_42b9b2690b314fa7ae3eab0e2359b5e4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_42b9b2690b314fa7ae3eab0e2359b5e4" class="color" data-tooltip="RGBA: 151, 0, 255, 1.0
   HEXA: #9700ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fd217927879e4e03b795566424ff50a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fd217927879e4e03b795566424ff50a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fd217927879e4e03b795566424ff50a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fd217927879e4e03b795566424ff50a6" class="color" data-tooltip="RGBA: 255, 0, 191, 1.0
   HEXA: #ff00bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44d77ad2065546a09d7d053512ef8334 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44d77ad2065546a09d7d053512ef8334::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44d77ad2065546a09d7d053512ef8334:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44d77ad2065546a09d7d053512ef8334" class="color" data-tooltip="RGBA: 255, 0, 0, 1.0
   HEXA: #ff0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_24a38b71aca74d288ca57c9fccabb604 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_24a38b71aca74d288ca57c9fccabb604 div { flex: 1 1 0; }
           #_24a38b71aca74d288ca57c9fccabb604 div.color { width: 100%; height: 100%; }
           #_24a38b71aca74d288ca57c9fccabb604 div.cmap { width: 100%; height: auto; }
           #_24a38b71aca74d288ca57c9fccabb604 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>mrybm</strong>
       
       <div id="_24a38b71aca74d288ca57c9fccabb604" class="color-map">
           
                           <div>
                   <style>
       #_c98f4341f88f49b39bef554c9ec5dac8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 132, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c98f4341f88f49b39bef554c9ec5dac8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c98f4341f88f49b39bef554c9ec5dac8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c98f4341f88f49b39bef554c9ec5dac8" class="color" data-tooltip="RGBA: 248, 132, 247, 1.0
   HEXA: #f884f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_23b9f5a44d5346a5b24e985c093342b1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 104, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23b9f5a44d5346a5b24e985c093342b1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23b9f5a44d5346a5b24e985c093342b1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23b9f5a44d5346a5b24e985c093342b1" class="color" data-tooltip="RGBA: 249, 104, 196, 1.0
   HEXA: #f968c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_93ce8797d47246bc84e937dbdcc19b43 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 67, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93ce8797d47246bc84e937dbdcc19b43::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93ce8797d47246bc84e937dbdcc19b43:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93ce8797d47246bc84e937dbdcc19b43" class="color" data-tooltip="RGBA: 234, 67, 136, 1.0
   HEXA: #ea4388ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_17e9366c7beb4496be1211c83d005948 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 36, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_17e9366c7beb4496be1211c83d005948::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_17e9366c7beb4496be1211c83d005948:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_17e9366c7beb4496be1211c83d005948" class="color" data-tooltip="RGBA: 207, 36, 75, 1.0
   HEXA: #cf244bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_162eb48307ec415b9ae2e3fdb17c0d7a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 26, 21, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_162eb48307ec415b9ae2e3fdb17c0d7a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_162eb48307ec415b9ae2e3fdb17c0d7a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_162eb48307ec415b9ae2e3fdb17c0d7a" class="color" data-tooltip="RGBA: 181, 26, 21, 1.0
   HEXA: #b51a15ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1af5bd9659864a8496382e5c3dee3bdd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 67, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1af5bd9659864a8496382e5c3dee3bdd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1af5bd9659864a8496382e5c3dee3bdd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1af5bd9659864a8496382e5c3dee3bdd" class="color" data-tooltip="RGBA: 189, 67, 4, 1.0
   HEXA: #bd4304ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f7eeb6a2ceb4307994ce2acbecf0eb3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 105, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f7eeb6a2ceb4307994ce2acbecf0eb3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f7eeb6a2ceb4307994ce2acbecf0eb3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f7eeb6a2ceb4307994ce2acbecf0eb3" class="color" data-tooltip="RGBA: 204, 105, 4, 1.0
   HEXA: #cc6904ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fe284a125b7941c6bfa357c8c7a8f972 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 143, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe284a125b7941c6bfa357c8c7a8f972::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe284a125b7941c6bfa357c8c7a8f972:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe284a125b7941c6bfa357c8c7a8f972" class="color" data-tooltip="RGBA: 213, 143, 4, 1.0
   HEXA: #d58f04ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3a8ce56544d4e21a20eee8b5f82f08f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 170, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3a8ce56544d4e21a20eee8b5f82f08f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3a8ce56544d4e21a20eee8b5f82f08f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3a8ce56544d4e21a20eee8b5f82f08f" class="color" data-tooltip="RGBA: 207, 170, 39, 1.0
   HEXA: #cfaa27ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fd77fbf132104c33b18cebfc70b1e4b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 159, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fd77fbf132104c33b18cebfc70b1e4b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fd77fbf132104c33b18cebfc70b1e4b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fd77fbf132104c33b18cebfc70b1e4b4" class="color" data-tooltip="RGBA: 161, 159, 98, 1.0
   HEXA: #a19f62ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ade71a581284f46878e56263fb0d9dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(88, 138, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ade71a581284f46878e56263fb0d9dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ade71a581284f46878e56263fb0d9dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ade71a581284f46878e56263fb0d9dd" class="color" data-tooltip="RGBA: 88, 138, 147, 1.0
   HEXA: #588a93ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_987cc42141b24192bd14d9209d54f9d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 105, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_987cc42141b24192bd14d9209d54f9d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_987cc42141b24192bd14d9209d54f9d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_987cc42141b24192bd14d9209d54f9d4" class="color" data-tooltip="RGBA: 34, 105, 196, 1.0
   HEXA: #2269c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b2e49bb18d54454f8dd55116ee994565 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 62, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b2e49bb18d54454f8dd55116ee994565::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b2e49bb18d54454f8dd55116ee994565:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b2e49bb18d54454f8dd55116ee994565" class="color" data-tooltip="RGBA: 62, 62, 240, 1.0
   HEXA: #3e3ef0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8adf4b13d1014a37af7033e2e80510c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 78, 249, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8adf4b13d1014a37af7033e2e80510c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8adf4b13d1014a37af7033e2e80510c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8adf4b13d1014a37af7033e2e80510c1" class="color" data-tooltip="RGBA: 107, 78, 249, 1.0
   HEXA: #6b4ef9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2696d762a2f4130bad14c334d8247b9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(149, 107, 250, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2696d762a2f4130bad14c334d8247b9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2696d762a2f4130bad14c334d8247b9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2696d762a2f4130bad14c334d8247b9" class="color" data-tooltip="RGBA: 149, 107, 250, 1.0
   HEXA: #956bfaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce1535b978fc40658f24a915caf61ac1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(205, 125, 254, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce1535b978fc40658f24a915caf61ac1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce1535b978fc40658f24a915caf61ac1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce1535b978fc40658f24a915caf61ac1" class="color" data-tooltip="RGBA: 205, 125, 254, 1.0
   HEXA: #cd7dfeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_edb615b958724bbb82d62fe814aa5226 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 132, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_edb615b958724bbb82d62fe814aa5226::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_edb615b958724bbb82d62fe814aa5226:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_edb615b958724bbb82d62fe814aa5226" class="color" data-tooltip="RGBA: 248, 132, 247, 1.0
   HEXA: #f884f7ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5ba4f2650f4b4dd5b63a8bbe0fd94251 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5ba4f2650f4b4dd5b63a8bbe0fd94251 div { flex: 1 1 0; }
           #_5ba4f2650f4b4dd5b63a8bbe0fd94251 div.color { width: 100%; height: 100%; }
           #_5ba4f2650f4b4dd5b63a8bbe0fd94251 div.cmap { width: 100%; height: auto; }
           #_5ba4f2650f4b4dd5b63a8bbe0fd94251 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>mygbm</strong>
       
       <div id="_5ba4f2650f4b4dd5b63a8bbe0fd94251" class="color-map">
           
                           <div>
                   <style>
       #_1226381341d1442d93a03d21b574300c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 85, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1226381341d1442d93a03d21b574300c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1226381341d1442d93a03d21b574300c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1226381341d1442d93a03d21b574300c" class="color" data-tooltip="RGBA: 239, 85, 241, 1.0
   HEXA: #ef55f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_befcc660b9f64c4486b2feb33439d2b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 132, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_befcc660b9f64c4486b2feb33439d2b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_befcc660b9f64c4486b2feb33439d2b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_befcc660b9f64c4486b2feb33439d2b3" class="color" data-tooltip="RGBA: 251, 132, 206, 1.0
   HEXA: #fb84ceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7f0ee45c27a547028aa383f0295c51e2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 175, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7f0ee45c27a547028aa383f0295c51e2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7f0ee45c27a547028aa383f0295c51e2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7f0ee45c27a547028aa383f0295c51e2" class="color" data-tooltip="RGBA: 251, 175, 161, 1.0
   HEXA: #fbafa1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1755fc4d0086497baf7757869bc016ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 212, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1755fc4d0086497baf7757869bc016ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1755fc4d0086497baf7757869bc016ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1755fc4d0086497baf7757869bc016ac" class="color" data-tooltip="RGBA: 252, 212, 113, 1.0
   HEXA: #fcd471ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15f6e57e413840a68dbfba63c726aef3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 237, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15f6e57e413840a68dbfba63c726aef3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15f6e57e413840a68dbfba63c726aef3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15f6e57e413840a68dbfba63c726aef3" class="color" data-tooltip="RGBA: 240, 237, 53, 1.0
   HEXA: #f0ed35ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_76b159bdd4b6440094c493ae8cb4be39 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 229, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_76b159bdd4b6440094c493ae8cb4be39::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_76b159bdd4b6440094c493ae8cb4be39:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_76b159bdd4b6440094c493ae8cb4be39" class="color" data-tooltip="RGBA: 198, 229, 22, 1.0
   HEXA: #c6e516ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45fc42fb0da24cbfb23624ed792f0216 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 211, 16, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45fc42fb0da24cbfb23624ed792f0216::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45fc42fb0da24cbfb23624ed792f0216:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45fc42fb0da24cbfb23624ed792f0216" class="color" data-tooltip="RGBA: 150, 211, 16, 1.0
   HEXA: #96d310ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd70dcdcddef4ae4a96d1de403fc395d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(97, 193, 11, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd70dcdcddef4ae4a96d1de403fc395d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd70dcdcddef4ae4a96d1de403fc395d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd70dcdcddef4ae4a96d1de403fc395d" class="color" data-tooltip="RGBA: 97, 193, 11, 1.0
   HEXA: #61c10bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_288c49e200494296a4c1a60327baadfd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 172, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_288c49e200494296a4c1a60327baadfd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_288c49e200494296a4c1a60327baadfd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_288c49e200494296a4c1a60327baadfd" class="color" data-tooltip="RGBA: 49, 172, 40, 1.0
   HEXA: #31ac28ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f127a73e64614b2f860e593fd561ce05 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(67, 144, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f127a73e64614b2f860e593fd561ce05::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f127a73e64614b2f860e593fd561ce05:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f127a73e64614b2f860e593fd561ce05" class="color" data-tooltip="RGBA: 67, 144, 100, 1.0
   HEXA: #439064ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_365de46d6fc049098de83acf495120a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(61, 113, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_365de46d6fc049098de83acf495120a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_365de46d6fc049098de83acf495120a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_365de46d6fc049098de83acf495120a9" class="color" data-tooltip="RGBA: 61, 113, 154, 1.0
   HEXA: #3d719aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e319b809e274c488a4ff5ea795b4b72 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 78, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e319b809e274c488a4ff5ea795b4b72::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e319b809e274c488a4ff5ea795b4b72:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e319b809e274c488a4ff5ea795b4b72" class="color" data-tooltip="RGBA: 40, 78, 200, 1.0
   HEXA: #284ec8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_31b912ccb59e4796b019f846aa9a058c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 33, 234, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_31b912ccb59e4796b019f846aa9a058c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_31b912ccb59e4796b019f846aa9a058c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_31b912ccb59e4796b019f846aa9a058c" class="color" data-tooltip="RGBA: 46, 33, 234, 1.0
   HEXA: #2e21eaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf0e749284c7419aa4821777063440ec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 36, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf0e749284c7419aa4821777063440ec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf0e749284c7419aa4821777063440ec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf0e749284c7419aa4821777063440ec" class="color" data-tooltip="RGBA: 99, 36, 245, 1.0
   HEXA: #6324f5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7cc590813b664f7687fd7f8d5f68379f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(145, 57, 250, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7cc590813b664f7687fd7f8d5f68379f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7cc590813b664f7687fd7f8d5f68379f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7cc590813b664f7687fd7f8d5f68379f" class="color" data-tooltip="RGBA: 145, 57, 250, 1.0
   HEXA: #9139faff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c24633ed21e94c8d948cbfbcc4b343f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 67, 250, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c24633ed21e94c8d948cbfbcc4b343f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c24633ed21e94c8d948cbfbcc4b343f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c24633ed21e94c8d948cbfbcc4b343f1" class="color" data-tooltip="RGBA: 197, 67, 250, 1.0
   HEXA: #c543faff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64dd25ca467449109928323101384ba7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 85, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64dd25ca467449109928323101384ba7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64dd25ca467449109928323101384ba7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64dd25ca467449109928323101384ba7" class="color" data-tooltip="RGBA: 239, 85, 241, 1.0
   HEXA: #ef55f1ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
   </div>


|


Navigation
----------

:doc:`Back to Visual Catalog Overview <catalog_visual>`

:doc:`Back to Catalog API <api/catalog>`